<template>
  <div>
    <el-dialog :title="props.title" width="1200px" :show-close="false" v-model="show" @close="closed"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="listQuery.userName" clearable style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 0;">
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="success" @click="showManageScoped = true, showManageScopedIndex++"> 新增 </el-button>
        </el-form-item>
      </el-form>
      <section class="eltab3">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" style="width: 100%;">
          <template #zslx="{ row }">
            <dict-tag :options="props.dict.D_BZ_PYYYLX" :value="row.zslx" :tag="false" />
          </template>
          <template #glfwOrgid="{ row }">
            <span v-for="item in row.glfwOrgid" :key="item">{{ item.orgName }} &ensp;</span>
          </template>
          <template #actions="{ row }">

            <span class="operedit" @click="clickEdit(row)"> <el-icon>
                <Edit />
              </el-icon> 编辑</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要解聘?"
              @confirm="dismiss(row)">
              <template #reference>

                <span class="operdel"><el-icon>
                    <Delete />
                  </el-icon>解聘</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closed" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 配置人员 -->
    <ManageScoped v-model="showManageScoped" :zslx="props.zslx" @close="closeManageScoped" :key="showManageScopedIndex"
      :editId="editId" />
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import ManageScoped from "@/views/dutyBook/jgryandzz/commponents/ManageScoped.vue"
import { defineProps, onMounted, ref, defineEmits, watchEffect, getCurrentInstance, reactive } from "vue";
import { getApi, deleteApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance()
const tableData = ref([]);
const tableloading = ref(false);
const showManageScoped = ref(false);//配置人员管理区域
const showManageScopedIndex = ref(1)
const show = ref(true)
const editId = ref("");//需要修改的ID
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
});
const props = defineProps({
  title: {
    type: String,
    default: "注消师聘用列表"
  },
  orgid: {
    type: String,
    default: ""
  },
  zslx: {
    type: String,
    default: "01"
  },
  dict: {
    type: Object,
    default: {
      D_BZ_PYYYLX: [],
    }
  }
});
const tableColumn = ref([
  {
    title: "姓名",
    prop: "userName"
  },
  {
    title: "职称",
    prop: "zslx",
    slot: true
  },
  {
    title: "职称等级",
    prop: "deptName"
  },
  {
    title: "管理范围",
    prop: "glfw_orgname",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
const closed = () => {
  emits("close", false);
};
//编辑
const clickEdit = (val) => {
  editId.value = val.id
  showManageScoped.value = true;
}
//新增关闭
const closeManageScoped = () => {
  showManageScoped.value = false
  getListData();
}
// 初始化
onMounted(() => { getListData() });
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
};
// 查询列表
const getListData = () => {
  tableloading.value = true;
  listQuery.value = { ...listQuery.value, orgId: props.orgid, zslx: props.zslx }
  getApi(listQuery.value, "/mosty-jcgl/safetyEngineer/selectPageOfEngineer").then(res => {
    if (res) {
      for (let i = 0; i < res.records.length; i++) {
        res.records[i].glfwOrgid = JSON.parse(res.records[i].glfwOrgid)
      }
      tableData.value = res.records
      pageConfiger.total = res.total
    }
    tableloading.value = false;
  })
};
// 页码改变触发
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  pageConfiger.pageCurrent = val;
  getListData();
};
//解聘
const dismiss = (val) => {
  deleteApi({}, `/mosty-jcgl/safetyEngineer/delEngineer/${val.id}`).then(res => {
    proxy.$message.success("成功")
    getListData();
  })
}
// pageSize 改变触发
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  pageConfiger.pageSize = val;
  getListData();
};
watchEffect(() => {
  if (props.orgid && props.modelValue) getListData()
})
</script>

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

.eltab3 {
  height: calc(100vh - 400px);
}

.box {
  width: 100%;
  overflow-y: hidden;
  display: flex;
  justify-content: space-between;
}

.fenye {
  margin-top: 10px;
}

::v-deep .el-form {
  display: flex;
  justify-content: space-between;
}
</style>
