<template>
  <div>
    <el-dialog title="配置区域" width="1200px" v-model="props.modelValue" :before-close="closed">
      <el-form :model="listQuery" :inline="true" style="width: 100%;" ref="elform">
        <el-form-item label="人员姓名:" style="width:50%" prop="userName"
          :rules="[{ required: true, message: '单位不能为空', trigger: 'change' }]">
          <el-input v-model="listQuery.userName" clearable placeholder="请输入人员姓名" readonly
            @click="showTalents = true"></el-input>
        </el-form-item>
        <el-form-item label=" 聘用文件:" prop="files" style="width: 100%;"
          :rules="[{ required: true, message: '请上传聘用文件', trigger: 'change' }]">
          <MOSTY.Upload :widthNumber="860" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
            :placeholder="'请上传pdf,ofd, doc, docx,wps'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
            v-model="listQuery.files" :showinput="false" :key="dialogVisible"></MOSTY.Upload>
        </el-form-item>
      </el-form>
      <div class="flex just-end mb10">
        <el-button type="primary" @click="showOrg = true">
          <span>配置区域</span>
        </el-button>
      </div>
      <section class="eltab5">
        <MOSTY.Table :table-columns="tableColumn" :tableData="pageData.defaultDeptList" :tableloading="tableloading"
          :isSelect="false" :isSort="false" style="width: 100%;">
          <template #actions="{ row }">
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="deldete(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </section>
      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" @click="handleSave(elform)">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>确定</span>
          </el-button>
          <el-button @click="closed" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 管理区域 -->
    <ChooseDept v-if="showOrg" :formInfo="pageData.defaultDeptList" :showDdld="showOrg" searchType="03"
      @closezzjg="showOrg = false" @listdata="getSonValue" />
    <!-- 人才选择 -->
    <Talents v-model="showTalents" :defaultData="defaultData" @confirm="onConfirmTalents" :orgid="orgid" />
  </div>
</template>

<script setup>
// 引入
import Talents from "@/components/MyComponents/ChooseUser/Talents.vue"
import {
  defineProps,
  onMounted,
  ref,
  defineEmits,
  reactive,
  getCurrentInstance,
  watchEffect
} from "vue";
import { getApi, postApi, } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseDept from "@/components/MyComponents/ChooseDept/Depart.vue";
const { proxy } = getCurrentInstance()
const multipleUserRef = ref(null);
const tableloading = ref(false);
const showOrg = ref(false)
const elform = ref()
const defaultData = ref([]);//人才选择组件回显数据
const showTalents = ref(false)//人才选择
const listQuery = ref({
});
const pageData = reactive({
  defaultDeptList: [],//默认部门选择;
})
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  zslx: String,//证书类型
  orgid: String,//部门
  editId: String,//需要修改的ID
});
const tableColumn = ref([
  {
    title: "管理范围",
    prop: "orgName"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const emits = defineEmits(["update:modelValue", "confirm"]);

onMounted(() => {
});
//选中的人才数据
const onConfirmTalents = (val) => {
  const { userId, userName } = val
  listQuery.value = { userId, userName, ...listQuery.value }
  defaultData.value = [val.id]
  showTalents.value = false
}
//组织机构树
const getSonValue = (value) => {
  pageData.defaultDeptList = []
  value.forEach(item => {
    const { id, orgName } = item
    pageData.defaultDeptList.push({ id, orgName })
  })
};
//确认
const handleSave = (elform) => {
  elform.validate((valid) => {
    if (valid) {
      try {
        listQuery.value.files = listQuery.value.files.join(",")
        listQuery.value.zslx = props.zslx
        listQuery.value.glfwOrgid = JSON.stringify(pageData.defaultDeptList)
      } catch (error) {
      }
      postApi(listQuery.value, "/mosty-jcgl/safetyEngineer/addEngineer").then(res => {
        proxy.$message.success("成功")
        closed()
      })
    }
  });
}
//关闭
const closed = () => {
  multipleUserRef.value.clearSelection();
  emits("close", false);
};
//获取详情
const getDetail = (id) => {
  tableloading.value = true
  getApi({ id }, "/mosty-jcgl/safetyEngineer/selectEngineerById").then(res => {
    if (res) {
      const { userId, userName, id, glfwOrgid, files } = res
      listQuery.value = { userId, userName, id, files }
      pageData.defaultDeptList = JSON.parse(glfwOrgid)
    }
  }).finally(() => { tableloading.value = false })

}
//删除
const deldete = (row) => {
  pageData.defaultDeptList.forEach((item, index) => {
    if (item.id === row.id) {
      pageData.defaultDeptList.splice(index, 1)
      return
    }
  })
}
watchEffect(() => {
  if (props.editId) getDetail(props.editId)
})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-radio__label {
  display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none !important;
}

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

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

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

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

.fenye {
  margin-top: 10px;
}

.eltab5 {
  height: calc(100vh - 400px);
}
</style>