<template>
  <MOSTY.PageTree :pageTitle="'考核人员列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #table>
      <el-divider />
      <section style="height: calc(100vh - 223px);">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="true" :isSort="true">
          <template #reppartcount="{ row }">
            <span class="num" v-if="row.reppartcount > 0" @click="showQy(row)">{{ row.reppartcount }}</span>
            <span style="font-size: 15px;" v-else>{{ row.reppartcount }}</span>
          </template>
          <template #repdepcount="{ row }">
            <span class="num" v-if="row.repdepcount > 0" @click="showSb(row)">{{ row.repdepcount }}</span>
            <span style="font-size: 15px;" v-else>{{ row.repdepcount }}</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="setStation(row)">
              <el-icon>
                <Edit />
              </el-icon>设置岗位</span>
            <span class="operesee" @click="editInfo(row)"><el-icon>
                <View />
              </el-icon>岗位责任清单</span>
          </template>
        </MOSTY.Table>
      </section>
    </template>
  </MOSTY.PageTree>
  <!-- 责任区域 -->
  <el-dialog v-model="qyShow" title="责任区域" :close-on-click-modal="false" width="50%" height="60vh">
    <div style="height: 50vh;">
      <MOSTY.Table :tableData="data.tableData3" :table-columns="data.tableColumn3" :tableloading="tableloading3">
        <template #objtype="{ row }">
          <dict-tag :options="D_BZ_OBJ_LX" :value="row.objtype" :tag="false" />
        </template>
      </MOSTY.Table>
      <div>
        <MOSTY.Pages :pageConfiger="data.pageConfiger3" @changeNo="changeNo3" @changeSize="changeSize3" />

      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="qyShow = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 岗位选择 -->
  <el-dialog v-model="dialogVisible" title="岗位选择" :close-on-click-modal="false" width="50%"
    style="height: 60vh !important;">
    <div style="height: 55vh;">
      <div style="height: 52vh;">
        <MOSTY.Table :tableData="data.tableData2" :table-columns="data.tableColumn2" :tableloading="tableloading2">
          <template #grade="{ row }">
            <dict-tag v-if="row.grade" :options="KHLX" :value="row.grade" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #assignLv="{ row }">
            <dict-tag v-if="row.assignLv" :options="GWSYFY" :value="row.assignLv" :tag="false" />
            <span v-else>无</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="submitRy(row)">
              <el-icon>
                <Edit />
              </el-icon>选择</span>
          </template>
        </MOSTY.Table>
      </div>
      <div>
        <MOSTY.Pages :pageConfiger="data.pageConfiger2" @changeNo="changeNo" @changeSize="changeSize">
        </MOSTY.Pages>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage", "getobj");
const { proxy } = getCurrentInstance();
const { KHLX, GWSYFY, D_BZ_OBJ_LX } = proxy.$dict("KHLX", "GWSYFY", "D_BZ_OBJ_LX");
// 树的展开与折叠
const iconChange = ref(true);
// 人员列表查询条件
const listQuery = reactive({});
// 岗位列表查询条件
const listQuery2 = reactive({
  pageCurrent: 1,
  pageSize: 10,
  citycode: ''
});
// 责任部位列表查询条件
const listQuery3 = reactive({
  pageCurrent: 1,
  pageSize: 2
});
const tableloading = ref(false);
const dialogVisible = ref(false);
const tableloading2 = ref(false);
const tableloading3 = ref(false);
const qyShow = ref(false);
// 树高度
const treeHeight = ref("");
// 表格参数
const data = reactive({
  searchObj: {},
  tableData: [],
  userInfo: {},
  tableData3: [],
  // 人员列表
  tableColumn: [
    {
      title: "姓名",
      prop: "username"
    },
    {
      title: "考核岗位",
      prop: "checkstation",
    },
    {
      title: "责任区域",
      prop: "reppartcount",
      slot: true

    },
    {
      title: "责任设备",
      prop: "repdepcount",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  tableData2: [],
  // 岗位列表table
  tableColumn2: [
    {
      title: "考核岗位名称",
      prop: "name",

    },
    {
      title: "岗位分类",
      prop: "grade",
      slot: true
    },
    {
      title: "适用范围",
      prop: "assignLv",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  pageConfiger2: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
  // 责任部位列表table
  tableColumn3: [
    {
      title: "名称",
      prop: "objname",

    },
    {
      title: "类型",
      prop: "objtype",
      slot: true

    },
    {
      title: "位置",
      prop: "note",

    }
  ],

  pageConfiger3: {
    pageSize: 2,
    pageCurrent: 1,
    total: 0
  }
});


// 获取区域弹窗
const showQy = (row) => {
  row.type = 'B'
  data.userInfo = row;
  qyShow.value = true;
  getTableData3();
}
// 获取人员数据
const getTableData3 = () => {
  tableloading3.value = true;
  listQuery3.type = data.userInfo.type
  listQuery3.userid = data.userInfo.userid
  postApi(listQuery3, `/mosty-jcgl/obj/queryStation`).then((res) => {
    if (res) {
      data.tableData3 = res.records;
      data.pageConfiger3.total = res.total
      tableloading3.value = false;
    } else {
      data.tableData = [];
      tableloading3.value = false;
    }
  }).finally(() => {
    tableloading3.value = false;
  });
}
// 获取设备弹窗
const showSb = (row) => {
  listQuery3.pageCurrent = 1;
  row.type = 'D'
  data.userInfo = row;
  qyShow.value = true;
  getTableData3();
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.deptid = val.id;
  getTableData();
};
// 获取人员数据
const getTableData = () => {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/station/listPagePeople`).then((res) => {
    if (res) {
      data.tableData = res;
      tableloading.value = false;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//设置岗位按钮
const setStation = (row) => {
  data.userInfo = row;
  dialogVisible.value = true;
  getTableData2();
};
// 获取岗位列表数据
const getTableData2 = () => {
  tableloading2.value = true;
  postApi(listQuery2, `/mosty-jcgl/station/listPageStationByLv`).then((res) => {
    if (res.records) {
      data.tableData2 = res.records;
      tableloading2.value = false;
      data.pageConfiger2.total = res.total;
    } else {
      data.tableData2 = [];
      tableloading2.value = false;
    }
  }).finally(() => {
    tableloading2.value = false;
  });
};
// 设置岗位保存接口
const submitRy = (row) => {
  let params = {
    stationName: row.name,
    stationid: row.id,
    username: data.userInfo.username,
    userid: data.userInfo.userid
  };
  postApi(params, "/mosty-jcgl/checkuser/addCheckUser")
    .then(() => {
      data.userInfo = {};
      dialogVisible.value = false;
      getTableData();
    })
    .catch((err) => {

    }).finally(() => {
      dialogVisible.value = false;
    });
};
//责任部位分页
const changeNo3 = (val) => {
  listQuery3.pageCurrent = val;
  getTableData3();
};
const changeSize3 = (val) => {
  listQuery3.pageSize = val;
  getTableData3();
};
//分页
const changeNo = (val) => {
  listQuery2.pageCurrent = val;
  getTableData2();
};
const changeSize = (val) => {
  listQuery2.pageSize = val;
  getTableData2();
};
//修改
const editInfo = (row) => {
  if (!row.checkid) {
    ElMessage.error("请先设置岗位！！");
    return;
  }
  let arr = {
    title: "岗位责任清单",
    saveBtnShow: true,
    userid: row.userid ? row.userid : null
  };
  emit("changePage", "Zrqd", arr);
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__empty-text::after {
  content: '，请选择部门查看'
}

::v-deep .el-dialog__body {
  height: 60vh !important;
}
</style>