<template>
  <!-- 职务选择 -->
  <el-dialog v-model="props.modelValue" title="职务选择" :before-close="cancel" width="50%">
    <div class="searchBox" ref="searchBox">
      <el-form :model="pageData.pageConfiger" class="mosty-from-wrap" :inline="true">
        <el-form-item label="职务等级">
          <MOSTY.DictRidioAndSelect :dictData="D_TB_ZWDJ" v-model="pageData.pageConfiger.dutyLevel"
            selectType="select" />
        </el-form-item>
        <el-form-item label="职务类型">
          <MOSTY.DictRidioAndSelect :dictData="D_TB_ZWLX" v-model="pageData.pageConfiger.dutyType"
            selectType="select" />
        </el-form-item>
        <el-form-item label="职务名称:">
          <el-input placeholder="请输入职务编号" v-model="pageData.pageConfiger.dutyName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData2()">查询</el-button>
          <el-button type="primary" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <MOSTY.Table :table-columns="pageData.tableColumn2" :tableData="pageData.tableData" :tableloading="tableloading"
      :isSelect="true" :isSort="false">
      <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">
      </MOSTY.Pages>

    </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 { getApi } from "@/api/tobAcco_api.js";
const tableloading = ref(false)
const props = defineProps({
  modelValue: Boolean
})
const emits = defineEmits(["update:modelValue", "change"])
const { proxy } = getCurrentInstance();
const { D_TB_ZWDJ, D_TB_ZWLX } = proxy.$dict("D_TB_ZWDJ", "D_TB_ZWLX")
const pageData = reactive({
  tableData: [],
  pageConfiger: {
    size: 10,
    current: 1,
    total: 0
  },
  // 人员列表参数
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: 450
  },
  // 岗位列表table
  tableColumn2: [
    {
      label: "职务编号",
      prop: "dutyCode",
    },
    {
      label: "职务名称",
      prop: "dutyName",
    },
    {
      label: "职务描述",
      prop: "dutyDesc",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
})
onMounted(() => {
  getTableData2()
})
const cancel = () => {
  emits("update:modelValue", false)
}
// 获取岗位列表数据
const getTableData2 = () => {
  tableloading.value = true;
  getApi(pageData.pageConfiger, `/mosty-base/sysDuty/selectDutyPage`).then((res) => {
    if (res.records) {
      pageData.tableData = res.records;
      tableloading.value = false;
      pageData.pageConfiger.total = res.total;
    } else {
      pageData.tableData = [];
      tableloading.value = false;
    }
  });
};
// 选中岗位s
const submitRy = (row) => {
  emits("change", row)
};
//分页
const changeNo = (val) => {
  pageData.pageConfiger.current = val;
  getTableData2();
};
const changeSize = (val) => {
  pageData.pageConfiger.size = val;
  getTableData2();
};
</script>