<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 style="width: 300px;" placeholder="输入关键字进行过滤"></el-input>
        <el-button type="primary" class="ml12">
          <el-icon>
            <Search />
          </el-icon>
          <span>搜索</span>
        </el-button>
      </div> -->
      <!-- 组织机构信息 -->
      <div class="box">
        <div class="treeBox">
          <!-- 使用Element UI的el-tree组件展示树形结构数据，支持多选和操作子节点 -->
          <el-tree ref="singleTableRef" class="filter-tree" :props="endProps" lazy node-key="id" :load="loadNode"
            :default-expanded-keys="treemrData" :check-strictly="props.Isstrictly" :filter-node-method="filterNode"
            @check-change="checkChange" @node-click="nodeClick" :data="treeData" :default-checked-keys="ids">
            <!-- 自定义节点内容显示方式 -->
            <template #default="{ node }">
              <el-checkbox @click.stop :label="node.data.id" v-model="ids" @change="handleCheck(node)" :disabled="disabledFun(node)">
              <div style="color: #000;" @click.stop>
                {{ node.label
                }}
              </div>
              </el-checkbox>
            </template>
          </el-tree>

        </div>
        <div class="cskbox">
          <!-- 穿梭按钮 -->
          <el-icon @click="pushRight">
            <DArrowRight />
          </el-icon>
          <el-icon @click="pushLeft">
            <DArrowLeft />
          </el-icon>
        </div>

        <div class="listbox">
          <ul>
            <li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
              @click="clicklist(item, index)">
              {{ item.orgName }}
            </li>
          </ul>
        </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, ref, defineEmits } 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.children) {
      return true
    } else {
      return false
    }
  }
};
const treemrData = ref([]);
const node_had = ref([]);
const resolve_had = ref([]);
const treeData = ref([]); // 树的数据
const rightList = ref([]); //右边列表数据
const diIndex = ref(); //点击右边列表数据
const leftList = ref([]); //存放右边被点击的数据


const props = defineProps({
  showDdld: {
    type: Boolean,
    default: false
  },
  //是否可选择本级true：可以  false:不可以
  Isstrictly: {
    type: Boolean,
    default: false
  },
  zzlx: String,
  data: {
    type: Object,
    default: []
  },
  // 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
  searchType: {
    type: String,
    default: "02"
  },
  deptcode: {
    type: String,
    default: null
  },
  deptId: {
    type: String,
    default: null
  },
  //查询单位下的安全部门
  isAqbm: {
    type: Boolean,
    default: false
  },
  /** 是否可选择父级 true：可以  false:不可以,因为之前可以选，所以这里默认true */
  disabledParent: {
    type: Boolean,
    default: false
  }
});
const listQuery = ref({
  deptcode: "",
  parentid: "",
  searchType: props.searchType
});
const currentRow = ref([]); //选中的数据
const emits = defineEmits(["closezzjg", "listdata"]);
const ids = ref([])
const changelist = ref([])
//根据外部传入ID查询部门信息
watch(
  () => props.showDdld,
  (newVal) => {
    if (newVal) {
      ids.value = []
      currentRow.value = []
      rightList.value = []
      listQuery.value.parentid = props.deptId
      listQuery.value.deptcode = props.deptcode;
      listQuery.value.searchType = props.searchType
      getTreeData();
    }
  },
  { deep: true, immediate: true }
);
const getTreeData = () => {
  getDept(listQuery.value).then((res) => {
    if (res.length == 1) {
      res.forEach((element) => {
        treemrData.value.push(element.id);
      });
    }

    if (res.length > 0) {
      treeData.value = res;
    }
    if (props.data && props.data.length > 0) {
      ids.value = props.data
      treemrData.value = props.data
    }
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
      res[i].Checked = false;
      if (ids.value && ids.value.length > 0) {
        ids.value.forEach(item => {
          if (item == res[i].id) {
            res[i].Checked = true;
            currentRow.value.push(res[i])
            rightList.value.push(res[i])
          }
        })
      }

    }
  });

};
const filterNode = (value, data) => {
  if (!value) return true;
  return data.orgName.includes(value);
};
//懒加载方法
async function loadNode(node, resolve) {
  listQuery.value.parentid = node.data.id;
  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;
        res[i].Checked = false;
        if (ids.value) {
          ids.value.forEach(item => {
            if (item == res[i].id) {
              res[i].Checked = true;
              currentRow.value.push(res[i])
              rightList.value.push(res[i])
            }
          })
        }
      }
      resolve(res);
    });
  }
}

const checkChange = (data, isChecked) => {

};
function nodeClick(data, checkedData) {

  if (currentRow.value && currentRow.value.length > 0) {
    let rowid = []
    rowid = currentRow.value.filter(it => { return it.id == data.id })
    if (rowid.length > 0) {
      singleTableRef.value.setChecked(data.id, false);

    } else {
      singleTableRef.value.setChecked(data, true);
    }

  } else {
    singleTableRef.value.setChecked(data, true);
  }


}

function handleCheck(node, checkedData) {

  node.data.Checked = !node.data.Checked;
  if (node.data.Checked) {
    currentRow.value.push(node.data)
  } else {
    for (let i = 0; i < currentRow.value.length; i++) {
      const element = currentRow.value[i];
      if (element.id == node.data.id) {
        currentRow.value.splice(i, 1);
      }
    }
  }
  rightList.value = currentRow.value;
}
function disabledFun (node) {
  const isParent = !!node?.data?.hasChildren
  return props.disabledParent && isParent
}
//清空
function clearlist() {
  ids.value = []
  leftList.value = [];
  // changelist.value = []
  rightList.value = [];
  currentRow.value = [];
  singleTableRef.value.getCheckedNodes().forEach((node) => {
    node.Checked = false
  })
}

//点击右箭头
function pushRight() {
  rightList.value = currentRow.value;

  // rightList.value = currentRow.value;

}
//点击左箭头
function pushLeft() {
  //遍历右边选中的数据
  for (let i = 0; i < leftList.value.length; i++) {
    const e = leftList.value[i];
    if (e.id) {
      singleTableRef.value.getCheckedNodes().forEach((node) => {
        if (e.id == node.id) {
          node.Checked = false
        }
      })
      singleTableRef.value.setChecked(e.id, false);
    }
    rightList.value.forEach((item, index) => {
      if (e.id == item.id) {
        rightList.value.splice(index, 1);
      }
    });
    currentRow.value.forEach((item, index) => {
      if (e.id == item.id) {
        currentRow.value.splice(index, 1);
      }
    });
    ids.value.forEach((item, index) => {
      if (e.id == item) {
        ids.value.splice(index, 1);
      }
    });
  }
}
//点击右边列表的每一项
function clicklist(item, index) {
  item.active = !item.active;
  diIndex.value = index;
  if (item.active) {
    leftList.value.push(item);
  } else {
    for (let i = 0; i < leftList.value.length; i++) {
      const element = leftList.value[i];
      if (element.id == item.id) {
        leftList.value.splice(i, 1);
      }
    }
  }
}
const handleNodeClick = (value) => {
  listQuery.value.deptId = value[value.length - 1];
};


const closeDialog = () => {
  emits("closezzjg", false);
  clearlist()
};
const handleSave = () => {
  emits("closezzjg", false);
  emits("listdata", rightList.value);
  clearlist()
};
const handleClose = () => {
  emits("closezzjg", false);
  clearlist()
};
</script>

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

// ::v-deep .el-overlay-dialog {
//   overflow: hidden !important;
// }

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

// :v-deep .wrap .el-checkbox__input.is-disabled {
//   display: none;
// }
// ::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
//   display: inline-block !important;
// }
// ::v-deep .el-tree-node__content .el-tree-node__expand-icon{
//    display: black ;
// }


// ::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;
//   }
// }

// :v-deep .wrap .el-checkbox__input.is-disabled {
//   display: none;
// }

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

::v-deep .el-checkbox__label {
  color: #000;
}

.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: hidden;
  border: 1px solid var(--el-color-primary);
  display: flex;
  justify-content: space-between;
}

.treeBox {
  width: 50%;
  overflow: auto;
}

.cskbox {
  width: 40px;
  padding: 107px 0;

  .el-icon {
    width: 4em !important;
    height: 6em !important;
  }

  .el-icon svg {
    width: 3em !important;
    height: 3em !important;
  }
}

.listbox {
  border: 1px solid var(--el-color-primary);
  width: 300px;
  height: 400px;
  overflow-y: scroll;

  ul>li {
    padding: 4px 10px;
    box-sizing: border-box;
  }

  .activ {
    background-color: var(--el-color-primary);
    color: #fff;
  }
}

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

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

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