<template>
    <el-dialog v-model="props.innerShow" width="1000px" :before-close="handleClose" :title="props.title" append-to-body>
        <el-form ref="formRef" :model="form" label-position="right" label-width="150px" :rules="rules"
            style="width: 100%;display: block;" :inline="true" :disabled='!props.savebtnshow'>
            <el-form-item label="单元名称:" prop="checklibName">
                <el-input disabled v-model="form.checklibName" type="textarea" :row="5" placeholder="请输入排查项描述"
                    style="width: 741px;" />
            </el-form-item>
            <el-form-item label="排查项描述:" prop="itemName">
                <el-input v-model="form.itemName" type="textarea" :row="5" placeholder="请输入排查项描述"
                    style="width: 741px;" />
            </el-form-item>
            <el-form-item prop="yhNote" label="隐患描述：">
                <el-input v-model="form.yhNote" type="textarea" maxlength="500" show-word-limit :row="5"
                    placeholder="请输入隐患描述" style="width: 741px;" />
            </el-form-item>
            <el-form-item prop="criterion" label="判定依据：">
                <el-input v-model="form.criterion" type="textarea" maxlength="500" show-word-limit :row="5"
                    placeholder="请输入隐患描述" style="width: 741px;" />
            </el-form-item>
            <el-form-item prop="yhCategory" label="隐患类别：">
                <MOSTY.DictTree :zdbh="'D_TB_SBYHLB'" v-model="form.yhCategory" :placeholder='"请选择隐患类别"'
                    style="width: 280px;" />
            </el-form-item>
            <!-- 轻微不让选择=》石 -->
            <el-form-item prop="yhLv" label="隐患等级：">
                <el-select v-model="form.yhLv" style="width: 280px;" placeholder="请选择隐患等级">
                    <el-option v-for="item in yhdjlist" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item prop="yhFlag" label="标红项：">
                <el-select v-model="form.yhFlag" style="width: 280px;" placeholder="请选择标红项">
                    <el-option v-for="item in props.dict.NYHBZ" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item prop="status" label="状态：">
                <el-select v-model="form.status" style="width: 280px;" placeholder="请选择状态">
                    <el-option v-for="item in D_JCGL_YHPCBZKZT" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item prop="yhLx" label="适用排查场景：">
        <el-select v-model="form.yhLx" style="width: 280px;" placeholder="请选择适用排查场景" multiple collapse-tags>
          <el-option v-for="item in D_BZ_SYPCCJ" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
            <el-form-item label="是否必须上传图片：" prop="isPic">
                <el-select v-model="form.isPic" style="width: 280px;" placeholder="请选择是否必须上传图片">
                    <el-option v-for="item in props.dict.NSFBXSCTP" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm(formRef)" v-if='props.savebtnshow'>
                    <el-icon>
                        <DocumentChecked />
                    </el-icon>
                    <span>保存</span>
                </el-button>
                <el-button @click="handleClose" type="primary">
                    <el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span>
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { postApi, getApi } from "@/api/tobAcco_api.js";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
const { proxy } = getCurrentInstance();
const { D_BZ_SYPCCJ, D_TB_SBYHLB, D_JCGL_YHPCBZKZT } = proxy.$dict("D_BZ_SYPCCJ", "D_TB_SBYHLB", "D_JCGL_YHPCBZKZT");
const rules = {
    itemName: { required: true, message: '请输入排查项描述', trigger: 'blur' },
    yhNote: { required: true, message: '请输入隐患描述', trigger: 'blur' },
    yhLv: { required: true, message: '请选择隐患等级', trigger: 'blur' },
    yhLx: { required: true, message: '请选择适用排查场景', trigger: 'blur' },
    yhFlag: { required: true, message: '请选择标红项', trigger: 'blur' },
    status: { required: true, message: '请选择状态', trigger: 'blur' },
    yhCategory: { required: true, message: '请选择隐患类别', trigger: 'blur' },
    isPic: { required: true, message: '请选择是否必须上传图片', trigger: 'blur' },
    criterion: { required: true, message: '请输入判定依据', trigger: 'blur' },
}
// 数据
const formRef = ref(null);
const yhdjlist = ref([])
const props = defineProps({
    innerShow: {
        type: Boolean,
        default: false
    },
    savebtnshow: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: "新增排查项"
    },
    formValue: {
        type: Object,
        default: {}
    },
    type: {
        type: String,
        default: 'zbpage'
    },
    dict: {
        type: Object,
        default: { D_DBZ_YHDJ: [], NSFBXSCTP: [], NYHBZ: [], D_BZ_SYPCCJ: [], D_TB_SBYHLB: [] }
    }
});
const emits = defineEmits(["changeVi", "getList"]);
const form = ref({

});
// 初始化
onMounted(() => {
    getSysDictByCode({ dictCode: "D_DBZ_YHDJ" }).then((res) => {
        if (res) {
            res.itemList.forEach((item) => {
                item.label = item.zdmc;
                item.value = item.dm;
                if (item.dm == '4') {
                    // filterqx('isaqbm') != '1' &&
                    item.disabled = true
                } else {
                    item.disabled = false
                }
            });
            yhdjlist.value = res.itemList

        }
    });
    const noUseGetApi = ['pjpage', 'fxbskNew', 'bs-pj-detail'].includes(props.type)
    if (noUseGetApi) {
        form.value = JSON.parse(JSON.stringify(props.formValue));
        form.value.yhLx = form.value.yhLx ? form.value.yhLx.split(',') : []
    } else {
        if (props.formValue.id) {
            getinfofrom(props.formValue.id)
        }
        form.value.checklibId = props.formValue.checklibId
        form.value.checklibName = props.formValue.checklibName
    }
});
//	查询控制措施库详情
function getinfofrom(id) {
    getApi({ id: id }, '/mosty-jcgl/controlLib/getInfo').then(res => {
        form.value = res
        // form.value.checklibId = props.formValue.dm
        // form.value.checklibName = props.formValue.zdmc
        form.value.yhLx = form.value.yhLx ? form.value.yhLx.split(',') : []

    })
}
// 方法
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            // 本地新增
            const isLocalSave = ['pjpage', 'fxbskNew', 'bs-pj-detail'].includes(props.type)
            if (isLocalSave) {
                const params = {
                    ...form.value,
                    yhLx: form.value.yhLx ? form.value.yhLx.join(',') : '',
                }
                emits("getList", form.value, params);
                emits("changeVi");
            } else {
                const params = {
                    ...form.value,
                    yhLx: form.value.yhLx ? form.value.yhLx.join(',') : '',
                }
                if (!form.value.id) {
                    postApi(params, "/mosty-jcgl/controlLib/add").then((res) => {
                        ElMessage.success("新增成功");
                        emits("changeVi", false);
                    });
                } else {
                    postApi(params, "/mosty-jcgl/controlLib/edit").then((res) => {
                        ElMessage.success("修改成功");
                        emits("changeVi", false);
                    });
                }
            }

        } else {
            return false;
        }
    });
};
const handleClose = () => {
    if (!formRef.value) return;
    if (props.savebtnshow) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                emits("changeVi", false);
            })
            .catch(() => {
                // catch error
            })
    } else {
        emits("changeVi", false);
    }

};

</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    color: #000000 !important;
}

.el-form {
    display: block !important;
}
</style>
