<template>
  <!-- 岗位选择 -->
  <el-dialog v-model="props.modelValue" title="岗位选择" :before-close="cancel" width="50%">
    <MOSTY.Table :table-columns="pageData.tableColumn2" :tableData="pageData.tableData" :tableloading="tableloading"
      :isSelect="false" :isSort="true" actionsW="100">
      <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 class="flex just-center">
      <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, defineEmits, reactive, getCurrentInstance, onMounted } from "vue"
import { postApi } from "@/api/tobAcco_api.js";
const tableloading = ref(false)
const props = defineProps({
  modelValue: Boolean
})
const emits = defineEmits(["update:modelValue", "change"])
const { proxy } = getCurrentInstance();
const { KHLX, GWSYFY } = proxy.$dict("KHLX", "GWSYFY");
const pageData = reactive({
  tableData: [],
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
  // 人员列表参数
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: 500
  },
  // 岗位列表table
  tableColumn2: [
    {
      label: "考核岗位名称",
      prop: "name",
    },
    {
      label: "岗位分类",
      prop: "grade",
      slot: true,
    },
    {
      label: "适用范围",
      prop: "assignLv",
      slot: true,
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
})
onMounted(() => {
  getTableData2()
})
const cancel = () => {
  emits("update:modelValue", false)
}
// 获取岗位列表数据
const getTableData2 = () => {
  tableloading.value = true;
  postApi(pageData.pageConfiger, `/mosty-jcgl/station/listPageStationByLv`).then((res) => {
    if (res.records) {
      pageData.tableData = res.records;
      tableloading.value = false;
      pageData.pageConfiger.total = res.total;
    } else {
      pageData.tableData = [];
      tableloading.value = false;
    }
  });
};
// 选中岗位
const submitRy = (row) => {
  emits("change", row)
};
//分页
const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getTableData2();
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getTableData2();
};
</script>