<template>
  <div>
    <div class='tabox'>
      <div class="headBox3">
        <div style="display: flex;">
          <el-checkbox-group v-model="checkedList" v-loading="tableloading">
            <el-checkbox label="1">部门安全员</el-checkbox>
            <el-checkbox label="2">设备责任人</el-checkbox>
          </el-checkbox-group>
          <el-button class="ml10" type="primary" @click="addUserHander">
            <el-icon>
              <Plus />
            </el-icon>
            <span>添加其它人员</span>
          </el-button>
        </div>
        <div>
          <el-input placeholder="请输入姓名进行查询" v-model="pageData.listQuery.username" clearable
            style='width:250px'></el-input>
          <el-button type="primary" @click="searchdata" class="ml6">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
        </div>
      </div>
      <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
        :tableHeight="'35vh'" :isSort="true">
        <template #rylx="{ row }">
          <span v-if="row.rylx == '1'">部门安全员</span>
          <span v-if="row.rylx == '2'">设备责任人</span>
          <span v-if="row.rylx == '3'">其它</span>
        </template>
        <template #actions="{ row }">
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red"
            title="确定要删除?" @confirm="handledelete(row)">
            <template #reference>
              <span class="operdel" size="small">
                <el-icon>
                  <Delete />
                </el-icon>
                删除</span>
            </template>
          </el-popconfirm>
        </template>
        <template #fenye>
          <div class="fenye" :style="{ top: tableHeight + 'px' }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageData.listQuery.pageCurrent" background :page-sizes="[2, 5, 10, 20]"
              :page-size="pageData.listQuery.pageSize" layout="total,  prev, pager, next, sizes, jumper"
              :total="total"></el-pagination>
          </div>
        </template>
      </MOSTY.Table>
    </div>
  </div>
  <!-- 选择人员 -->
  <ChooseUser v-model="chooseUserVisible" :Single="false" @choosedUsers="getSonValue" :deptId="props.obj.deptcode"
    :data='memberList'></ChooseUser>
</template>
<script setup>
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import * as MOSTY from "@/components/MyComponents/index";
import { onMounted, reactive, ref, watchEffect, watch } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const emits = defineEmits(["handleChange", 'tableChange']);
const tableloading = ref(false);
const total = ref(0)
const editIndex = ref(null)
const rylx = ref(null)
const props = defineProps({
  obj: {
    default: null,
    type: Object
  }
});
const chooseUserVisible = ref(false)
const memberList = ref([])
const pageData = reactive({
  listQuery: {
    pageCurrent: 1,
    pageSize: 5
  },
  tableColumns: [
    {
      title: "所属单位",
      prop: "orgname"
    },
    {
      title: "所属部门",
      prop: "deptname"
    },
    {
      title: "人员姓名",
      prop: "username"
    },
    {
      title: "人员类型",
      prop: "rylx",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }

  ],
  tableData: []
})
const checkedList = ref([])
const flag = ref(false)
watch(
  () => checkedList.value,
  (val, oldVal) => {
    if (!oldVal || !val) return;
    if (val.length < oldVal.length) {
      let delRylx = oldVal.filter(item => {
        return !val.includes(item)
      })
      updateRylx(delRylx[0], '02')
    }
    if (val.length > oldVal.length) {
      let addRylx = val.filter(item => {
        return !oldVal.includes(item)
      })
      updateRylx(addRylx[0], '01')
    }
  }
);
onMounted(() => {
  // 查询人员配置详情
  getData(pageData.listQuery.sbid)
})
// 查询
const searchdata = () => {
  pageData.listQuery.pageCurrent = 1;
  getRyPage()
}
// 删除人员信息
const handledelete = row => {
  postApi({}, `/mosty-lps/pz/delRy/${row.id}`).then(res => {
    ElMessage.success("删除成功")
    getData(pageData.listQuery.sbid)
  })
}
// 获取人员信息
const getSonValue = value => {
  let ryidList = value.map(item => {
    return item.id
  });
  updateRylx('3', '01', ryidList)
}
// 打开人员选择弹窗
const addUserHander = () => {
  chooseUserVisible.value = true
  memberList.value = pageData.tableData.filter(item => {
    return item.rylx == '3'
  }).map(item => {
    return item.userid
  })
}
// 更新人员类型
const updateRylx = (rylx, czlx, ryidList) => {
  let data = {
    sbid: pageData.listQuery.sbid,
    sblx: pageData.listQuery.sblx,
    rylx: rylx,
    czlx: czlx,
    type: "01",
    ryidList: ryidList
  }
  tableloading.value = true
  postApi(data, '/mosty-lps/pz/updatePz').then(res => {
    pageData.listQuery.pageCurrent = 1;
    getRyPage()
  }).finally(() => {
    tableloading.value = false
  })
}
watchEffect(() => {
  pageData.listQuery.sblx = props.obj.sblx
  pageData.listQuery.sbid = props.obj.id
});
const getData = (sbid) => {
  getApi({ sbid }, '/mosty-lps/pz/getPzInfo').then(res => {
    if (res) {
      if (res.rylx) {
        checkedList.value = res.rylx.split(',')
      }
      pageData.listQuery.pzid = res.id
      getRyPage()
    }
  })
}
// 查询人员配置分页
const getRyPage = () => {
  getApi(pageData.listQuery, '/mosty-lps/pz/getRyPage').then(res => {
    if (res) {
      pageData.tableData = res.records
      total.value = res.total
      tableloading.value = false
    }
  }).finally(() => {
    tableloading.value = false
  })
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  getRyPage()

};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageCurrent = 1;
  pageData.listQuery.pageSize = val;
  getRyPage()
};
</script>

<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  color: black;
}

.headBox3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
