<template>
    <div>
        <el-dialog width="1000px" height="500px" :model-value="props.modelValue" :title="props.title">
            <el-form :model="RowData" ref="formone" :rules="rules" label-width="140px" style="height:40vh;" disabled>
                <el-form-item label="年份：" prop="yealy">
                    <el-date-picker v-model="RowData.yealy" type="year" format="YYYY" value-format="YYYY"
                        placeholder="请选择年份" style="width: 250px" />
                </el-form-item>
                <el-form-item label="姓名:" prop="username">
                    <el-input v-model="RowData.username" disabled style="width: 250px" />
                </el-form-item>
                <el-form-item label="人员类别：" prop="useType">
                    <el-select v-model="RowData.useType" placeholder="请选择人员类别" style="width: 250px">
                        <el-option v-for="item in props.zdlist.D_BZ_RYLB_NEW" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="特殊作业类型：" prop="specialHomeworkCategories">
                    <el-select v-model="RowData.specialHomeworkCategories" placeholder="请选择特殊作业类型" style="width: 250px">
                        <el-option v-for="item in props.zdlist.D_BZ_TSZYLX" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="接触危害因素：" prop="exposureHazardousFactors">
                    <el-select v-model="RowData.exposureHazardousFactors" placeholder="请选择接触危害因素" style="width: 250px">
                        <el-option v-for="item in props.zdlist.D_BZ_JCZYWHYS" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="健康体检类型：" prop="healthExaminationType">
                    <el-select v-model="RowData.healthExaminationType" placeholder="请选择健康体检类型" style="width: 250px">
                        <el-option v-for="item in props.zdlist.D_BZ_ZYJKTJLB" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否有职业病：" prop="ill">
                    <el-select v-model="RowData.ill" placeholder="请选择是否有职业病" style="width: 250px">
                        <el-option v-for="item in props.zdlist.D_BZ_SF" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="患病体检报告：" prop="illFile" style='width:740px;'>
                    <MOSTY.Upload :widthNumber="735" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
                        :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="RowData.illFile"
                        :showinput="true" :delrow="delrow"></MOSTY.Upload>

                </el-form-item>
                <el-form-item label="健康体检报告附件：" prop="file" style='width:740px;'>
                    <MOSTY.Upload :widthNumber="735" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
                        :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="RowData.file"
                        :showinput="true" :delrow="delrow"></MOSTY.Upload>

                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="clostadd"> <el-icon>
                            <DocumentDelete />
                        </el-icon>
                        <span>关闭</span></el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch, onMounted } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
const rules = {
};
const formone = ref(null);
const RowData = ref({});
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
// 接收子组件传来的
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true
    },
    zdlist: {
        type: Object,
        required: {}
    },
    title: String,
    rowId: String,

});
watch(
    () => props.modelValue,
    (val) => {
        if (props.rowId) {
            getxqdata(props.rowId)
        } else {
            RowData.value = {}
        }
    }
);

//关闭弹窗
function clostadd() {
    emits("update:modelValue", false);
}
//获取详情
function getxqdata(id) {
    getApi({ id }, `/mosty-jcgl/occHazardOpr/queryOccHazardOprChildById`).then(res => {
        RowData.value = res
    }
    )
}


</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    --el-dialog-margin-top: 10vh !important;
}

// ::v-deep .el-textarea__inner {
//   width: 1132px !important;
// }

::v-deep .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
    width: 121px !important;
}

.el-form {
    padding: 10px 40px;
    margin-top: 5px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.el-form-item {
    text-align: center;
}

.el-form--label-top .el-form-item {
    display: flex !important;
    width: 380px;
    align-items: center !important;
}
</style>
