<template>
    <el-form :model="formData" ref="formref" label-position="right" :rules="rules" label-width="172px"
        :disabled='!props.formData.saveBtnShow' style="padding: 0;">
        <el-form-item label="压力管道介质:" prop="name">
            <el-input v-model="formData.name" style="width: 337px" />
        </el-form-item>
        <el-form-item label="建设单位:" prop="jsdw">
            <el-input v-model="formData.jsdw" style="width: 337px" />
        </el-form-item>
        <el-form-item label="工作介质:" prop="workingmedium">
            <el-input v-model="formData.workingmedium" style="width: 337px" />
        </el-form-item>
        <el-form-item label="管道长度:" prop="gdcd">
            <el-input v-model.number="formData.gdcd" type="number" style="width: 337px">
                <template #append>m</template>
            </el-input>
        </el-form-item>
        <el-form-item label="管道级别:" prop="sblx">
            <!-- :disabled='formData.id' -->
            <MOSTY.DictTree v-model="formData.sblx" :zdlist="sbsslist" :placeholder='"请选择管道级别"' :type='"array"'
                style="width: 337px;" @nameChange='getxzqh' />
        </el-form-item>
        <el-form-item label="公称直径:" prop="diameter">
            <el-input v-model.number="formData.diameter" type="number" style="width: 337px">
                <template #append>mm</template>
            </el-input>
        </el-form-item>
        <el-form-item label="设计压力:" prop="sjyl">
            <el-input v-model.number="formData.sjyl" style="width: 337px">
                <template #append>MPa</template>
            </el-input>
        </el-form-item>
        <el-form-item label="最高允许工作压力:" prop="sggzyl">
            <el-input v-model.number="formData.sggzyl" style="width: 337px">
                <template #append>MPa</template>
            </el-input>
        </el-form-item>
        <el-form-item label="设计温度:" prop="sjwd">
            <el-input v-model.number="formData.sjwd" type="number" style="width: 337px">
                <template #append>℃</template>
            </el-input>
        </el-form-item>
        <el-form-item label="设计壁厚:" prop="wallThickness">
            <el-input v-model="formData.wallThickness" style="width: 337px"></el-input>
        </el-form-item>
        <el-form-item label="安装日期:" prop="azsj">
            <el-date-picker v-model="formData.azsj" style="width: 337px" type="date" value-format="YYYY-MM-DD"
                :disabled-date="disabledazrq" placeholder="请选择安装日期" />
        </el-form-item>
        <el-form-item label="登记证编号:" prop="certificateNumber">
            <el-input v-model="formData.certificateNumber" style="width: 337px" />
        </el-form-item>
        <el-form-item label="登记机关:" prop="registrationOrgan">
            <el-input v-model="formData.registrationOrgan" style="width: 337px" />
        </el-form-item>
        <el-form-item label="具体位置:" prop="location">
            <el-input v-model="formData.location" style="width: 337px" />
        </el-form-item>
        <el-form-item label="检测机构:">
            <el-input v-model="formData.testingOrganization" style="width: 337px" />
        </el-form-item>
        <el-form-item label="上次检测检验日期:" prop="sycjcrq">
            <el-date-picker v-model="formData.sycjcrq" style="width: 337px" type="date" value-format="YYYY-MM-DD"
                placeholder="请选择上次检测检验日期" :disabled-date="disablednowDate1" />
        </el-form-item>
        <el-form-item label="检测检验周期:" prop="time">
            <el-input v-model="formData.time" style="width: 337px" maxlength="2" @input.native="timeInput">
                <template #append>月</template>
            </el-input>
        </el-form-item>
        <el-form-item label="维保周期:" prop="inspectTime">
            <el-input v-model="formData.inspectTime" type="number" style="width: 337px" placeholder="请输入维保周期">
                <template #append>月</template>
            </el-input>
        </el-form-item>
        <el-form-item label="报废时间:" prop="scrapTime">
            <el-date-picker v-model="formData.scrapTime" type="date" value-format="YYYY-MM-DD" style="width: 337px"
                placeholder="请选择报废时间" />
        </el-form-item>
        <el-form-item label="维保单位:" prop="wborgname">
            <el-select v-model="formData.wborgname" style="width: 337px" @change="changexgf" clearable
                placeholder="请选择维保单位">
                <el-option v-for="item in xgflist" :key="item.id" :label="item.label" :value="item" />
            </el-select>
        </el-form-item>
        <el-form-item label="状态:" prop="state" v-if="formData.id">
            <div style="width: 337px;">
                <MOSTY.DictRidioAndSelect :dictData="D_BZ_SYZT" v-model="formData.state" selectType="radio" />
            </div>
        </el-form-item>
        <el-form-item label="设备资料:" style="width: 100%;" prop="deviceFile">
            <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="true"
                placeholder="请上传设备资料（pdf,ofd,doc,docx,xls,xlsx,wps）" :isImg="false" ShowfileList
                v-model="formData.deviceFile" :nameshow='true'
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
            </MOSTY.Upload>
        </el-form-item>
        <el-form-item label="其它资料:" style="width: 100%;" prop="otherFile">
            <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="true" :isImg="false" ShowfileList
                placeholder="请上传其他资料（pdf,ofd,doc,docx,xls,xlsx,wps）" v-model="formData.otherFile" :nameshow='true'
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
            </MOSTY.Upload>
        </el-form-item>
        <el-form-item label="图片上传:" style='width:100%;'>
            <MOSTY.ErwmImg v-if="formData.id"
                :url="qrcodeImg(formData.id, '208', formData.sitename, formData.partname, `${formData.name}(${formData.nbbh})`)"
                :filename='"压力管道二维码"' />
            <div style='display:flex;'>
                <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                    v-model="formData.picture" :nameshow='true' :gsgfList="['jpg', 'png']">
                </MOSTY.Upload>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { qrcodeImg, disablednowDate1 } from "@/utils/tools.js";
import { postApi, getApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const sbsslist = ref([])
const { D_TB_AQDJ, D_BZ_YXKJSGLB, D_BZ_SYZT } = proxy.$dict("D_TB_AQDJ", "D_BZ_YXKJSGLB", "D_BZ_SYZT");
const rules = {
    workingmedium: [{ required: true, message: "请输入工作介质", trigger: "blur" }],
    // sycjcrq: [{ required: true, message: "请选择上次检测日期", trigger: "blur" }],
    sblx: [{ required: true, message: "请选择管道级别", trigger: "blur" }],
    ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 7, lastNum: 2 }, "gdcd"),
    ...rule.znumberRule({ validator: true, require: false }, "hksl"),
    state: [{ required: true, message: "请选择状态", trigger: "blur" }],
    // wborgname: [{ required: true, message: "请选择维保单位", trigger: "blur" }],
    ...rule.phoneRule({ validator: true, require: true }, "phone"),
    name: [{ required: true, message: "请输入压力管道介质", trigger: "blur" }],
    jsdw: [{ required: true, message: "请输入建设单位", trigger: "blur" }],
    gdcd: [{ required: true, message: "请输入管道长度", trigger: "blur" }],
    diameter: [{ required: true, message: "请输入公称直径", trigger: "blur" }],
    sjyl: [{ required: true, message: "请输入设计压力", trigger: "blur" }],
    sggzyl: [{ required: true, message: "请输入最高允许工作压力", trigger: "blur" }],
    wallThickness: [{ required: true, message: "请输入壁厚", trigger: "blur" }],
    azsj: [{ required: true, message: "请选择安装日期", trigger: "change" }],
    sjwd: [{ required: true, message: "请输入设计温度", trigger: "blur" }],

    sccj: [{ required: true, message: "请输入生产厂家", trigger: "blur" }],
    // sbxh: [{ required: true, message: "请输入品牌型号", trigger: "blur" }],
    ccbh: [{ required: true, message: "请输入出厂编号", trigger: "blur" }],
    azsj: [{ required: true, message: "请选择安装日期", trigger: "change" }],
    trsysj: [{ required: true, message: "请选择投入使用日期", trigger: "change" }],
    // sycjcrq: [{ required: true, message: "请选择上一次检查日期", trigger: "change" }],
    // wborgname: [{ required: true, message: "请选择维保单位", trigger: "change" }],
    ...rule.numberzzsRule({ validator: true, require: false, iszs: true, num: 99, minNum: 1 }, "time"),
    ccrq: [{ required: true, message: "请选择出厂日期", trigger: "change" }],
    certificateNumber: [{ required: true, message: "请输入登记证编号", trigger: "blur" }],
    registrationOrgan: [{ required: true, message: "请输入登记机关", trigger: "blur" }],
    location: [{ required: true, message: "请输入具体位置", trigger: "blur" }],
    sitename: [{ required: true, message: "请选择所属场所", trigger: "blur" }],
    buildingname: [{ required: true, message: "请选择所属建筑物", trigger: "blur" }],
    floorname: [{ required: true, message: "请选择所属楼层", trigger: "blur" }],
    partname: [{ required: true, message: "请选择所属部位", trigger: "blur" }],
    ...rule.numberzzsRule({ validator: true, require: false, num: 120 }, "inspectTime"),
    // scrapTime: [{ required: true, message: "请选择报废时间", trigger: "blur" }],
};
const formData = ref({});
const formref = ref()
const addtype = ref('tzsb')
const emits = defineEmits(["update:modelValue", "saveSuccess"]);
// 接收子组件传来的
const props = defineProps({
    getfrom: {
        type: Boolean,
        required: false
    },
    keys: {
        type: Number,
        default: 0
    },
    formData: {
        type: Object,
        default: {}
    },
    xgflist: {
        type: Array,
        default: []
    },
    csmclist: {
        type: Array,
        default: () => []
    }
});
onMounted(() => {
    if (props.formData.id) {
        formData.value = props.formData
    } else {
        formData.value = {}
    }
    getaqbslb()
})
function changexgf(val) {
    formData.value.wborgcode = val.value
    formData.value.wborgname = val.label
    formData.value.phone = val.phone
}
function disabledccrw(time) {
    return time.getTime() + 24 * 60 * 60 * 1000 < new Date(formData.value.zcdjrq).getTime() || time.getTime() > Date.now()
}
function disabledtrsy(time) {
    return time.getTime() + 24 * 60 * 60 * 1000 < new Date(formData.value.azjgrq).getTime() || time.getTime() > Date.now()
}
function change(type) {
    switch (type) {
        case 'zcdj':
            formData.value.azjgrq = '';
            formData.value.trsysj = '';
            break;
        case 'azjg':
            formData.value.installationTime = '';
            break;
        default:
            break;
    }
}
/** 检测周期 - 输入框输入时，去除非数字 */
function timeInput(value) {
    formData.value.time = value ? value.replace(/[\D]/g, '') : ''
}
//获取特种设备字典数据
function getaqbslb() {
    getApi({ zdbh: 'D_TB_JCYWLX', dm: '200504', level: 4 }, '/mosty-base/sysDict/getJcyelxDictTree').then(res => {
        sbsslist.value = res[0].itemList
    })
}
watch(
    () => props.keys,
    (newValue) => {
        // if (props.getfrom == true) {
        //此处先进行表单校验
        if (!formref.value) return
        formref.value.validate((valid) => {
            if (valid) {
                emits("saveSuccess", formData.value);
            }
        });

        // }

    },
    { deep: true, immediate: true }
);



</script>

<style lang="scss" scoped></style>
