<template>
  <div class="organization-layout">
    <div class="layout-left">
      <div class="candidate" v-loading="loading">
        <el-input v-model="filterText" clearable placeholder="输入公司或部门名称进行搜索" @input="searchOrganizateData" style="margin-bottom: 15px">
        </el-input>
        <el-scrollbar>
          <div class="tree scrollbar-dict">
            <el-tree :data="dataList" ref="treeRef" :props="defaultProps" empty-text="" node-key="value"
                     :default-expanded-keys="expandedKeys"
                     :filter-node-method="filterNode"
                     @node-click="handleClick">
              <template #default="{ node, data }">
                <div class="tree-node">
                  <div style="display: flex;align-items: center;padding: 3px 0;"
                       :class="data.value === selectNodeKey ? 'highlight': ''">
                    <svg-icon name="oran" v-if="data.type===0" class-name="oran-icon"/>
                    <el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'"
                             style="margin-right: 4px;">
                      <FolderOpened/>
                    </el-icon>
                    {{ data.organizationalStructureName }}
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="layout-right">
      <depart-component v-if="showDept" v-model:value="deptId"/>
      <company-detail v-if="showCompany" v-model:value="companyId"></company-detail>
      <!--      <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
    </div>
  </div>

</template>

<script setup>
import SvgIcon from '@/components/svgIcon/index.vue'
import {ElNotification} from "element-plus";
import {getOrganizationStructure, getOrganizationStructureTree} from "@/api/workflow/process-user";
import DepartComponent from "@/components/organizationalStructure/Department.vue";
import CompanyDetail from "@/components/organizationalStructure/CompanyDetail.vue";

const queryType = reactive({
  chooseName: ""
});
const deptId = ref(0);
const companyId = ref(0);
const showDept = ref(false);
const filterText = ref('')
const showCompany = ref(false);
let selectItem = reactive({
  type: -1,
  value: "0"
});
const loading = ref(false);
const dataList = ref([]);
const treeRef = ref()
const selectNodeKey = ref("")
const expandedKeys = ref([]);
const defaultProps = {
  value: "value",
  label: "organizationalStructureName",
  children: "children",
  isLeaf: (data) => {
  }
};
const emit = defineEmits();

const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  }
});

const getList = () => {
  let params = {
    chooseId: 0,
    type: 0,
    chooseName: queryType.chooseName
  }
  selectItem = {
    type: -1,
    value: "0"
  };
  getOrganizationStructureTree(params).then(res => {
    dataList.value = res.data;
  });
};
const init = () => {
  selectItem = {
    type: -1,
    value: "0"
  };
  dataList.value = [];
  expandedKeys.value = [];
  queryType.chooseName = ""
  getList();
};
watch(filterText.value, (val) => {
  treeRef.value.filter(val)
})
const searchOrganizateData=(val)=>{
  treeRef.value.filter(val)
}
const filterNode = (value, data) => {
  if (!value) return true
  return data.organizationalStructureName.includes(value);
}


async function handleLoad(node, resolve, reject) {
  // let data = node.data
  // let params
  // if (data.organizationalStructureId) {
  //   params = {
  //     chooseId: data.organizationalStructureId,
  //     type: data.type
  //   }
  // } else {
  //   params = {
  //     chooseId: 0,
  //     type: 0,
  //   }
  // }
  // let result = await getOrganizationStructure(params).then(res => {
  //   return res.data
  // })
  // resolve(result)
}

const handleClick = (item, data) => {
  selectNodeKey.value = item.value
  if (item.type === 1) {
    showDept.value = false
    showCompany.value = false
    nextTick(() => {
      showDept.value = true
    })
    deptId.value = item.organizationalStructureId
  } else {
    showDept.value = false
    showCompany.value = false
    nextTick(() => {
      showCompany.value = true
    })
    companyId.value = item.organizationalStructureId
  }
  selectItem = item;
};
init()

</script>
<style lang="scss" scoped>
.highlight {
  color: black; //节点的字体颜色
  font-weight: bold;
}

$containWidth: 550px;
.organization-layout {
  display: flex;
  justify-content: space-between;

  .layout-left {
    width: $containWidth;
    //border: 1px solid #ebeef5;
    padding: 10px;
    margin-top: 5px;

    .candidate {
      position: absolute;
      display: inline-block;
      width: $containWidth;
      //height: 80%;
      //border: 1px solid #e8e8e8;

      :deep(.el-input) {
        height: 40px;

        .el-input__inner, .el-input-group__append {
          font-size: 16px;
        }
      }

      .scrollbar-dict {
        border: 1px solid #ebeef5;
        //min-height: 30vh;
        //height: 60vh;
        height: calc(100vh - 250px);
        overflow-y: auto;
        overflow-x: hidden;

        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        // 滚动条轨道
        &::-webkit-scrollbar-track {
          background: rgb(239, 239, 239);
          border-radius: 2px;
        }

        // 小滑块
        &::-webkit-scrollbar-thumb {
          background: rgba(80, 81, 82, 0.29);
          border-radius: 10px;
        }

        .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
          // 设置颜色
          background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色
          color: #409eff; // 节点的字体颜色
          font-weight: bold; // 字体加粗
        }
      }

    }

  }

  .layout-right {
    flex: 1;
    //width: 70%;
    //border: 1px solid #ebeef5;
    margin-left: 30px;
    padding: 0 10px;
    border: none;
  }
}

:deep(.tree) {
  .el-tree-node__content {
    height: 34px;

    .tree-node {
      font-size: 18px;
    }
  }
}


.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  float: right;
  width: 4px;
  height: 4px;
  background-color: white;
}

::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #efefef;
}

</style>
