<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="采购单位"
      :visible.sync="showTroubleshooting"
      width="40%"
      :close-on-press-escape="false"
      :before-close="handleClose"
      top="6vh"
    >
      <template class="materialInformation">
        <div class="common-page-shadow" v-loading="loading">
          <el-tree
            :data="tableData"
            :props="defaultProps"
            :node-key="nodeKey"
            default-expand-all
            ref="tree"
            :current-node-key="currentNodeKey"
            show-checkbox
            :check-strictly="true"
            highlight-current
            @check-change="handleNodeClick"
          >
          </el-tree>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import basicData from '@/api/basicData'
export default {
  name: 'CmgtSaftyDangerCheckplanFormDialogTroubleshooting', // 排查计划明细
  props: {
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showTroubleshooting: false, // 控制弹层显示与隐藏
      multipleSelection: [],
      selectedValue: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        id: 'code',
        label: 'name',
      },
      querys: [],
      nodeKey:'code',
      currentNodeKey:null,
      selectNode:{},
      queryFilter: {
        // pageBean: {
        //     page: 1,
        //     pageSize: 20,
        //     total: 0,
        // },
      },
    }
  },
  mixins: [TableMixin],
  created() {
    this.loadData()
  },
  methods: {
    // 对顶部选择框进行禁用
    headerCellClassName({row, column, rowIndex, columnIndex}) {
      if (!this.multiple && columnIndex == 0) {
        return 'is-disable'
      }
    },
    rowKey(row) {
      return row.id
    },
    //搜索
    handleSearch() {
      this.loadData()
    },
    //重置
    handleReset() {
      this.loadData()
    },
    //显示弹框
    add() {
      this.showTroubleshooting = true
    },
    // 获取list
    loadData() {
      this.loading = true
      this.tableData = []
      this.queryFilter.querys = []
      this.$http
        .get('${portal}/api/org/v1/getOrgTree', this.queryFilter)
        .then((res) => {
          this.loading = false
          this.tableData = []
          this.tableData.push(res.data)
        })
    },
    // 点击关闭按钮
    handleClose() {
      this.showTroubleshooting = false
    },
    handleNodeClick (data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([data])
        this.selectNode = data
      }
    },
    // 保存按钮
    handleSave() {
      let list = []
      list.push(this.selectNode)
      this.$emit('org', list)
      this.handleClose()
    },
    handleCurrentChange(page) {
      this.queryFilter.pageBean = {...this.queryFilter.pageBean, page}
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.queryFilter.pageBean = {...this.queryFilter.pageBean, pageSize}
      this.loadData()
    },
  },
}
</script>

<style scoped
  lang="scss">
.dialog-footer {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/deep/.el-dialog__body {
  display: flex;
}

.common-search-container {
  padding: 0px;
  padding-left: 10px;
  box-shadow: 0 0 0;
  display: block;
}

/deep/.el-dialog__body {
  height: 500px;
}

/deep/ .el-table-column--selection.is-disable .el-checkbox {
  visibility: hidden;
}
/deep/.el-tree-node__label {
  font-size: 16px;
}
</style>
