<template>
  <div>
    <el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
      :show-close="false">
      <!-- <div class="search">
        <el-input></el-input>
        <el-button type="primary">
          <el-icon>
            <Search />
          </el-icon>
          <span>搜索</span>
        </el-button>
      </div> -->
      <!-- 组织机构信息 -->
      <div class="box">
        <div class="treeBox choose-dept">
          <el-tree ref="singleTableRef" :data="treeData" :props="endProps" @node-click="handleNodeClicks" node-key="id"
            show-checkbox @check-change="checkChange" :load="loadNode" :check-strictly="props.Isstrictly"
            @check="handleCheck" lazy :default-expanded-keys="treemrData" :default-checked-keys="[id]" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>确定</span>
          </el-button>
          <el-button type="primary" @click="clearlist">
            <el-icon>
              <DocumentRemove />
            </el-icon>
            <span>清空</span>
          </el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { defineProps, watch, onMounted, ref, defineEmits, watchEffect } from "vue";
import { getDept } from "@/api/user-manage";
const singleTableRef = ref();
const endProps = {
  children: "childDeptList",
  value: "id",
  label: "orgName",
  isLeaf: "leaf",
  disabled: function (data, node) {//带子级的节点不能选中
    if (!props.Isstrictly && data.hasChildren) {
      return true
    } else {
      return false
    }
  }

};
const treemrData = ref([]);
const node_had = ref([]);
const resolve_had = ref([]);
const treeData = ref([]); // 树的数据
const props = defineProps({
  /** 是否显示弹框 el-dialog原生show */
  showDdld: {
    type: Boolean,
    default: false
  },
  //是否可选择本级true：可以  false:不可以
  Isstrictly: {
    type: Boolean,
    default: false
  },
  zzlx: String,
  /** 单选回显数据 zzlx:01时 formInfo.leaderid, 否则  formInfo.zzid */
  formInfo: {
    type: Object,
    default: {}
  },
  /** @type { String } 01 部门（默认），02单位(省、市) 03 单位(省、市、县) */
  searchType: {
    type: String,
    default: "01"
  },
  // 查询当前部门下的人员
  deptId: {
    type: String,
    default: null
  },
  //查询单位下的安全部门
  isAqbm: {
    type: Boolean,
    default: false
  }
});
const listQuery = ref({
  deptcode: "",
  parentid: "",
  searchType: props.searchType
});
const currentRow = ref(-1); //选中的数据
const emits = defineEmits(["closezzjg", "listdata"]);
const id = ref("");
watch(
  () => [props.formInfo, props.zzlx],
  (val) => {
    if (props.zzlx == "01") {
      id.value = props.formInfo.leaderid;
    } else {
      id.value = props.formInfo?.zzid ? props.formInfo.zzid : null;
    }
  }
);
watch(
  () => props.searchType,
  (val) => {
    listQuery.value.searchType = val
    listQuery.value.parentid = props.deptId ? props.deptId.replace("XN", "") : '';
    getTreeData()
  }
)
//回调显示懒加载得部门
watch(
  () => props.showDdld,
  (val) => {
    if (val) {
      listQuery.value.parentid = props.deptId ? props.deptId.replace("XN", "") : '';
      getTreeData()
    }
  }, {
  deep: true,
  immediate: true
}
);

// 获取部门树的数据
function getTreeData() {
  getDept(listQuery.value).then((res) => {
    if (res.length == 1) {
      res.forEach((element) => {
        treemrData.value.push(element.id);
      });
    }
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    if (res.length > 0) treeData.value = res;

  });
  const filterNode = (value, data) => {
    if (!value) return true;
    return data.orgName.includes(value);
  };
};
//懒加载方法
async function loadNode(node, resolve) {
  listQuery.value.parentid = node.data.id ? node.data.id : props.deptId;
  if (node.level === 0) {
    node_had.value = node;
    resolve_had.value = resolve;
    getTreeData();
  }
  if (node.level >= 1) {
    getDept(listQuery.value).then((res) => {
      for (let i = 0; i < res.length; i++) {
        res[i].leaf = !res[i].hasChildren;
      }
      resolve(res);
    });
  }
}

const checkChange = (data, isChecked) => {
  if (isChecked) {
    const checked = [data.id]; // id为tree的node-key属性
    singleTableRef.value.setCheckedKeys(checked);
  }
};
function handleNodeClicks(node, checkedData) {
  if (!props.Isstrictly && node.hasChildren) {
    return
  } else {
    const checked = [node.id]; // id为tree的node-key属性
    singleTableRef.value.setCheckedKeys(checked);
    currentRow.value = node;
  }

}
// //获取复选框中被选中的值
function handleCheck(data, checkedData) {
  // 这是选中的节点数组
  currentRow.value = checkedData.checkedNodes[0];
  // currentRow.value.zzlx = props.zzlx?props.zzlx:null;
}

//清空
function clearlist() {
  currentRow.value = [];
  id.value = null
  singleTableRef.value.setCheckedKeys([], false);
}

const handleNodeClick = (value) => {
  listQuery.value.deptId = value[value.length - 1];
};


const closeDialog = () => {
  emits("closezzjg", false);
  clearlist()
};
const handleSave = () => {
  emits("closezzjg", false);
  emits("listdata", currentRow.value);
  clearlist()
};
const handleClose = () => {
  emits("closezzjg", false);
  clearlist()
};
// // 表格多选
// const handleSelectionChange = (val) => {
//   currentRow.value = val;
// };
// //选中
// const handleCurrentChange = (val) => {
//   currentRow.value = val;
//   currentRow.value.zzlx = props.zzlx;
// };
</script>

<style lang="scss" scoped>
::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
  display: inline-block !important;
}

// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
//   display: none !important;
// }

:v-deep .el-tree-node {
  .el-checkbox .el-checkbox__inner {
    display: none !important;
    background: red !important;
  }
}

.choose-dept ::v-deep .el-tree-node__content {
  .el-tree-node__expand-icon {
    display: block;
  }
}
// :v-deep .wrap .el-checkbox__input.is-disabled {
//   display: none;
// }

// ::v-deep .el-tree-node__expand-icon {
//   display: block !important;
// }

.el-form {
  margin-top: 10px;
  display: flex;
  //   flex-wrap: wrap;
  justify-content: space-between;
}

.el-form-item {
  text-align: center;
  width: 400px;
}

.flx {
  display: flex;
  width: 100%;

  .el-button {
    margin-left: 10px;
  }
}

.box {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid var(--el-color-primary);
}

.bot_font {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #ffff;
  margin-top: 10px;
}

.search {
  width: 300px;
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-end;
  margin-left: 65%;
}

.fenye {
  margin-top: 10px;
}
</style>
