<template>
  <el-dialog v-model="props.innerShow" width="800px" :rules="rules" :title="props.title" :before-close="handleClose"
    append-to-body>
    <el-form ref="formRef" :model="form" label-position="right" label-width="150px">
      <el-form-item required :rules="[
        { required: true, message: '请选择问题项', trigger: 'blur' }
      ]" prop="yhFlag" label="问题项：">
        <el-radio-group v-model="form.yhFlag">
          <el-radio label="0">检查时选择"是"时 需要填写问题</el-radio>
          <el-radio label="1">检查时选择"否"时 需要填写问题</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item required :rules="[
        { required: true, message: '请选择隐患等级', trigger: 'blur' }
      ]" prop="yhLv" label="隐患等级：">
        <el-select v-model="form.yhLv">
          <el-option v-for="item in yhdjlist" :disabled="item.disabled" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item required :rules="[
        {
          required: true,
          message: '请选择是否必须上传图片',
          trigger: 'blur'
        }
      ]" prop="isPic" label="是否必须上传图片：">
        <el-select v-model="form.isPic">
          <el-option v-for="item in NSFBXSCTP" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="排查项内容" required prop="itemName" :rules="[
        { required: true, message: '请输入排查项内容', trigger: 'blur' }
      ]">
        <el-input v-model="form.itemName" type="textarea" :row="5" />
      </el-form-item>
      <el-form-item prop="yhNote" required :rules="[
        { required: true, message: '请输入隐患说明', trigger: 'blur' }
      ]" label="隐患说明">
        <el-input v-model="form.yhNote" type="textarea" :row="5" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(formRef)">
          <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,
  watch,
  watchEffect
} from "vue";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();

const { D_DBZ_YHDJ, D_BZ_SF, NSFBXSCTP, NJCXLY, NYHBZ } = proxy.$dict(
  "D_DBZ_YHDJ",
  "D_BZ_SF",
  "NSFBXSCTP",
  "NJCXLY",
  "NYHBZ"
);
// 数据
const yhdjlist = ref([])
const formRef = ref(null);
const props = defineProps({
  innerShow: {
    type: Boolean,
    default: false
  },
  innerStatus: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  formValue: {
    type: Object,
    default: ""
  },
  id: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["changeVi", 'addfrom']);
const form = ref({
});
watchEffect(() => {
  if (props.formValue) {
    form.value = JSON.parse(JSON.stringify(props.formValue));
  } else {
    form.value = {}
  }
})
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 submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (form.value.id) {
        emits("addfrom", form.value);
        ElMessage.success("修改成功")
        emits("changeVi", false);
      } else {
        emits("addfrom", form.value);
        ElMessage.success("新增成功");
        emits("changeVi", false);
      }
    } else {
      return false;
    }
  });
};
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("changeVi", false);
    })
    .catch(() => {
      // catch error
    })

};



</script>

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

.input {
  margin-bottom: 10px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  span {
    text-align: right;
    width: 15%;
  }
}

.select {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  align-items: center;

  .el-input {
    width: 80%;
  }

  span {
    text-align: right;
    margin-right: 10px;
  }
}

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