<template>
    <el-dialog title="年检签到" v-model="visible" width="80%" :destroy-on-close="true" @close="close">
        <div class="cntinfo">
            <FormMessage ref="FormRef" v-model="formData" :rules="rules" :formList="formList" :labelWidth='120'>
            </FormMessage>
            <el-divider border-style="dashed"><span class="pointer f16">培训人员<el-icon size="22" color="#409eff" class="ml5" style="top: 4px;"><CirclePlus /></el-icon></span></el-divider>
            <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
                :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
                @chooseData="chooseData">
                <template #sptz="{ row }">
                <DictTag :value="row.sptz" :tag="false" :options="D_BA_SPZT" />
                </template>
                <!-- 操作 -->
                <template #controls="{ row }">
                <el-link type="primary" link @click="addEdit('RefSteap', row)">审核流程</el-link>
                <el-link type="primary" link @click="addEdit('detail', row)">详情</el-link>
                </template>
            </MyTable>
            <div class="mt10 flex just-center">
                <el-button @click="save" type="primary" :loading="loading">保存</el-button>
                <el-button @click="close">关闭</el-button>
            </div>
         </div>
    </el-dialog>
</template>
<script setup>
    import * as rule from "@/utils/rules.js";
    import MyTable from "@/components/aboutTable/MyTable.vue";
    import FormMessage from '@/components/aboutTable/FormMessage.vue'
    import { ref,reactive } from 'vue'
    const formData = ref({})
    const visible = ref(false)
    const loading = ref(false)
    const formList = reactive([
        [
            { label: "培训项目名称", prop: "xm", type: "input" },
            { label: "培训地址", prop: "sfzh", type: "input"},
        ],
        [
            { label: "培训开始时间", prop: "lxdh", type: "date",lx:'datetime' },
            { label: "培训结束时间", prop: "jzdz", type: "date" ,lx:'datetime' },
        ],
        [
            { label: "组织单位", prop: "rzsj", type: "input" },
            { label: "培训内容", prop: "lzsj", type: "input" },
        ]
    ])
    const rules = ref({
        pxgs: [{ required: true, message: '请选择培训公司', trigger: ['blur'] }],
        lzsj: [{ required: true, message: '请选择离职时间', trigger: ['blur'] }],
    })
    const pageData = reactive({
        tableData: [],
        keyCount: 0,
        tableConfiger: {
            rowHieght: 61,
            showSelectType: "checkBox",
            loading: false,
            haveControls: false
        },
        tableHeight: 320,
        tableColumn: [
            { label: "培训项目名称", prop: "ssbakk",showOverflowTooltip: true },
            { label: "培训地址", prop: "sptzCompanyName", showOverflowTooltip: true },
            { label: "培训开始时间", prop: "njnf"},
            { label: "培训结束时间", prop: "xm" },
            { label: "组织单位", prop: "sfzhm",showOverflowTooltip: true },
            { label: "培训内容", prop: "dh" },
            { label: "培训人员", prop: "whcd" },
            { label: "已签到人员", prop: "zsbh", showOverflowTooltip: true },
            { label: "未签到人员", prop: "fwxymc" },
            { label: "是否上报分县局", prop: "rzsj" },
        ]
}); 

const init = () => {
    visible.value = true
    pageData.keyCount++
}

const close = () => {
    visible.value = false
}
defineExpose({
    init
})
</script>
<style lang="scss" scoped>
.cntinfo{
    padding: 20px 10px;
    box-sizing: border-box;
}
</style>