<template>
  <div>
    <PageTitle :title="pageTitle">
      <el-button type="primary" @click="submit(ruleFormRef)">保存</el-button>
      <el-button @click="black">关闭</el-button>
    </PageTitle>

    <div class="formBox">
      <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
        status-icon :inline="true" label-position="top">
        <el-row :gutter="80">
          <el-col :span="18">
            <el-form-item label="预案名称" prop="yamc">
              <el-input v-model="data.formData.yuanmc" placeholder="请输入预案名称" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记录单位" prop="jldw">
              <el-input v-model="data.formData.jldw" placeholder="请输入记录单位" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记录部门" prop="jlbm">
              <el-input v-model="data.formData.jlbm" placeholder="请输入记录部门" readonly style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记录人" prop="jlr">
              <el-input v-model="data.formData.jlr" readonly style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类别" prop="lb">
              <el-select v-model="data.formData.lb" placeholder="请选择类别" style="width: 100%">
                <el-option v-for="item in D_TB_YJWZLB" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="mc">
              <el-input v-model="data.formData.mc" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号" prop="ggxh">
              <el-input v-model="data.formData.ggxh" placeholder="规格型号" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量" prop="sl">
              <el-input v-model="data.formData.sl" placeholder="请输入数量" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任人" prop="zrr">
              <el-input v-model="data.formData.zrr" placeholder="请输入责任人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任人联系电话" prop="zrrlxdh">
              <el-input v-model="data.formData.zrrlxdh" placeholder="请输入责任人联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用途" prop="yt">
              <el-select v-model="data.formData.yt" placeholder="请选择用途" style="width: 100%">
                <el-option v-for="item in D_TB_YJWZYT" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="dw">
              <el-select v-model="data.formData.dw" placeholder="请选择单位" style="width: 100%">
                <el-option v-for="item in D_BZ_WPDW" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="存放场所" prop="cfcs">
              <el-input v-model="data.formData.cfcs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用条件" prop="sytj">
              <el-input v-model="data.formData.sytj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="存放点" prop="cfd">
              <el-input v-model="data.formData.cfd"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="bz">
              <el-input v-model="data.formData.bz" type="textarea" :rows="6" show-word-limit maxlength="200" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  watch,
  nextTick
} from "vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const { D_TB_YJWZLB } = proxy.$dict("D_TB_YJWZLB",);
const { D_TB_YJWZYT } = proxy.$dict("D_TB_YJWZYT",);
const { D_BZ_WPDW } = proxy.$dict("D_BZ_WPDW",);
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("应急物资登记");
const data = reactive({
  formData: {
    yuanmc: "",//预案名称
    jldw: "",//记录单位
    jlbm: "",//记录部门
    jlr: "",//记录人
    lb: "",//类别
    mc: "",//名称
    ggxh: "",//规格型号
    sl: "",//数量
    zrr: "",//责任人
    zrrdh: "",//责任人联系电话
    yt: "",//用途
    dw: "",//单位
    cfcs: "",//存放场所
    sytj: "",//使用条件
    cfd: "",//存放点
    bz: "" // 备注
  },
});

const rules = reactive({
  // ...rule.phoneRule({ validator: true }, "lxdh"), // 是否必填 是否进行校验
  ...rule.identityCardRule({ validator: true }, "idEntityCard"), //身份证校验
  ...rule.emailRule({ validator: true }, "email"),
  ...rule.phoneRule({ validator: true }, "telePhone"),
  ...rule.phoneRule({ validator: true }, "mobile"),

  lb: [{ required: true, message: "请选择类别", trigger: "change" }],
  yt: [{ required: true, message: "请选择用途", trigger: "change" }],
  yamc: [
    {
      required: true,
      message: "请输入预案名称",
      trigger: "blur"
    }
  ],
  mc: [
    {
      required: true,
      message: "请输入名称",
      trigger: "input"
    }
  ],
  ggxh: [
    {
      required: true,
      message: "请输入规格型号",
      trigger: "blur"
    }
  ],
  sl: [
    {
      required: true,
      message: "请输入数量",
      trigger: "blur"
    }
  ],
  zrr: [
    {
      required: true,
      message: "请输入责任人",
      trigger: "blur"
    }
  ],
  cfcs: [
    {
      required: true,
      message: "请输入存放场所",
      trigger: "blur"
    }
  ],
  zrrlxdh: [
    {
      required: true,
      message: "请输入责任人联系电话",
      trigger: "blur"
    }
  ],
  sytj: [
    {
      required: true,
      message: "请输入使用条件",
      trigger: "blur"
    }
  ],
  cfd: [
    {
      required: true,
      message: "请输入存放点",
      trigger: "blur"
    }
  ],
});

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // let attr = JSON.parse(JSON.stringify(data.formData));
      // const fnName = pageTitle == "修改" ? "userUpdate" : "userSave";
      // fns[fnName](attr).then((res) => {
      //   const message = pageTitle == "修改" ? "修改成功" : "添加成功";
      //   proxy.$message({
      //     message,
      //     type: "success"
      //   });
      //   emit("changePage", "Main");
      // });
    }
  });
};

const black = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emit("changePage", "Main");
    })
    .catch(() => {
      // catch error
    })

};

watchEffect(() => {
});
</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

.formBox {
  padding: 30px 120px;
  background-color: #fff;
  height: 750px;
}
</style>