<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">年检培训申请</span>
      <div>
        <el-button size="small" @click="save" type="primary"  :loading="loading">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <FormMessage ref="FormRef" v-model="listQuery" :formList="formList">
          <el-divider />
      </FormMessage>
      <div style="padding:0 10vw 0 10vw;">
        <div class="table-title">培训保安人员 <el-icon size="20px" style="top: 4px;" color="green"><CirclePlusFilled /></el-icon> </div>
          <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseData">
           <template #controls="{ row }">
            <el-link type="danger" link @click="delRow(row.id)">删除</el-link>
            </template>
          </MyTable>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { ref, reactive,defineEmits,getCurrentInstance } from 'vue';
const emit = defineEmits(["refresh"]);
const dialogForm = ref(false);
const FormRef = ref();
const listQuery = ref({});
const formList = reactive([
  [
    { label: "培训日期", prop: "pxrq", type: "input" },
    { label: "培训时间", prop: "pxsj", type: "input" },
    { label: "课程名称", prop: "kcmc", type: "input" },
  ],
  [
    { label: "组织单位", prop: "zzdw", type: "input" },
    { label: "授课教员", prop: "skfcy", type: "select" },
    { label: "培训内容", prop: "pxnr", type: "input" },
  ],
  { label: "分割线", prop: "diver", type: "slot" },
  [
    { label: "培训日期", prop: "pxrq", type: "input" },
    { label: "培训时间", prop: "pxsj", type: "input" },
    { label: "课程名称", prop: "kcmc", type: "input" },
  ],
  [
    { label: "组织单位", prop: "zzdw", type: "input" },
    { label: "授课教员", prop: "skfcy", type: "select" },
    { label: "培训内容", prop: "pxnr", type: "input" },
  ],
  { label: "分割线", prop: "diver", type: "slot" },
  [
    { label: "培训日期", prop: "pxrq", type: "input" },
    { label: "培训时间", prop: "pxsj", type: "input" },
    { label: "课程名称", prop: "kcmc", type: "input" },
  ],
  [
    { label: "组织单位", prop: "zzdw", type: "input" },
    { label: "授课教员", prop: "skfcy", type: "select" },
    { label: "培训内容", prop: "pxnr", type: "input" },
  ],
  
])

const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
  },
  tableHeight:400,
  tableColumn: [
    { label: "姓名", prop: "xm"},
    { label: "证件号码", prop: "zjhm" },
    { label: "电话号码", prop: "dhhm" },
    { label: "所属单位", prop: "ssdw" },
  ]
});


// 初始化数据
const init = async (type, id,) => {
  dialogForm.value = true;
  // const res = await qcckGet({ url: `/training/annualInspectionTraining/detail/${id}`})
  // listQuery.value = res || {}
};

const delRow = (id) => {
  pageData.tableData = pageData.tableData.filter(item => item.id !== id)
}
const save = () => {
  FormRef.value.submit(()=>{
    // loading.value = true;
    // let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
    // qcckPost(listQuery.value, url).then(() => {
    //   loading.value = false;
      proxy.$message.success("保存成功");
    //   emit("refresh");
      close();
    // }).catch(() => {
    //   loading.value = false;
    // })
  });
}

const close = () => {
  dialogForm.value = false;
  FormRef.value.reset()
};;

defineExpose({init})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
.table-title{
  line-height: 40px;
  text-align: center;
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
}
</style>
