<script>
import { show as templateShow } from "@/api/unifiedRecruitment/template";
import { show, save } from "@/api/unifiedRecruitment/recruit";

export default {
  render(h) {
    return (
      <Modal
        title={this.type === "add" ? "新增统招生" : "编辑统招生"}
        width="54"
        value={this.isShow}
        on={{
          ["on-visible-change"]: (e) => this.$emit("update:isShow", e),
        }}
        scopedSlots={{
          footer: () => {
            return (
              <div>
                <Button
                  on={{
                    ["click"]: (e) => {
                      this.$emit("update:isShow", false);
                    },
                  }}
                >
                  取消
                </Button>
                <Button type="primary" on={{ ["click"]: (e) => {
                    this.$refs["oriElForm"].validate().then((res) => {
                      if (res) {
                        this.$refs["elForm"].validate().then((res) => {
                          Object.defineProperty(this.originalForm, "fileds", {
                            enumerable: true,
                            writable: true,
                            configurable: false,
                            value: this.form,
                          });

                          save(this.originalForm).then((res) => {
                            this.$message({
                              type: "success",
                              message: res.msg,
                            });
                            this.$emit("refresh");
                            this.$emit("update:isShow", false);
                          });
                        });
                      }
                    });
                  } }}>
                  确认
                </Button>
              </div>
            );
          },
        }}
      >
        <el-form
          ref="oriElForm"
          label-width="100px"
          props={{ model: this.originalForm }}
          rules={this.originalRules}
        >
          <el-col span={12}>
            <el-form-item label="年份" prop="year">
              <el-date-picker
                clearable={true}
                placeholder="请选择年份"
                v-model={this.originalForm.year}
                type="year"
                value-format="yyyy"
                on={{
                  ["change"]: (e) => {
                    this.getTemplate();
                  },
                }}
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col span={12}>
            <el-form-item label="省份" prop="province_id">
              <el-select
                clearable={true}
                v-model={this.originalForm.province_id}
                placeholder="请选择省份"
              >
                {this.province_ids.map((item) => {
                  return (
                    <el-option
                      value={item.id}
                      label={item.name}
                      key={item.id}
                    ></el-option>
                  );
                })}
              </el-select>
            </el-form-item>
          </el-col>

          <el-col span={12}>
            <el-form-item label="姓名" prop="name">
              <el-input
                clearable={true}
                v-model={this.originalForm.name}
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col span={12}>
            <el-form-item label="身份证号" prop="idcard">
              <el-input
                clearable={true}
                v-model={this.originalForm.idcard}
                placeholder="请输入身份证号"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col span={12}>
            <el-form-item label="考生号" prop="candidate_no">
              <el-input
                clearable={true}
                v-model={this.originalForm.candidate_no}
                placeholder="请输入考生号"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col span={12}>
            <el-form-item label="准考证号" prop="allow_no">
              <el-input
                clearable={true}
                v-model={this.originalForm.allow_no}
                placeholder="请输入准考证号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>

        <el-form
          ref="elForm"
          props={{ model: this.form }}
          rules={this.rules}
          label-width="100px"
        >
          {this.formInfo.map((item) => {
            return (
              <el-col span={12}>
                <el-form-item label={item.name} prop={item.en}>
                  {(() => {
                    switch (item.type) {
                      case 1:
                        return (
                          <el-input
                            clearable={true}
                            placeholder={`请输入${item.name}`}
                            v-model={this.form[item.en]}
                            // style={{ width: "300px" }}
                            on={{
                              ["input"]: (e) => {
                                this.$forceUpdate();
                              },
                            }}
                          ></el-input>
                        );
                      case 2:
                        return (
                          <el-date-picker
                            placeholder="请选择"
                            v-model={this.form[item.en]}
                            type="year"
                            value-format="yyyy"
                            // style={{ width: "300px" }}
                            on={{
                              ["input"]: (e) => {
                                this.$forceUpdate();
                              },
                            }}
                          ></el-date-picker>
                        );
                    }
                  })()}
                </el-form-item>
              </el-col>
            );
          })}
        </el-form>
      </Modal>
    );
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    province_ids: Array,
  },
  data() {
    let idcardValidate = (rule, value, callback) => {
      let IDRe18 =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      let IDre15 =
        /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
      if (IDre15.test(value) || IDRe18.test(value)) {
        callback();
      } else {
        callback(new Error("身份证格式错误"));
      }
    };
    return {
      type: "",

      //自定义
      formInfo: [],
      form: {},
      rules: {},
      //固定
      originalForm: {
        year: `${new Date().getFullYear()}`,
        province_id: "",
        name: "",
        idcard: "",
        candidate_no: "",
        allow_no: "",
        template_id: "",
      },
      originalRules: {
        year: [{ required: true, message: "请选择年份", trigger: "blur" }],
        province_id: [
          { required: true, message: "请选择省份", trigger: "blur" },
        ],
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        idcard: [
          { required: true, message: "请填写身份证号", trigger: "blur" },
          { validator: idcardValidate, trigger: "blur" },
        ],
        candidate_no: [
          { required: true, message: "请填写考生号", trigger: "blur" },
        ],
        allow_no: [
          { required: true, message: "请填写准考证号", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getTemplate() {
      const res = await templateShow(
        {
          year: this.originalForm.year,
        },
        true
      );
      if (res?.fileds) {
        res?.fileds.forEach((item) => {
          Object.defineProperty(this.form, item.en, {
            value: "",
            writable: true,
            enumerable: true,
            configurable: false,
          });
          //this.form[item.en] = "";
          this.rules[item.en] = {
            validator: (rule, value, callback) => {
              if (!this.form[item.en]) {
                callback(new Error("未填写"));
              } else {
                callback();
              }
            },
            trigger: "blur",
            required: true,
          };
        });
      }

      this.formInfo = res?.fileds ?? [];
      this.$forceUpdate();
    },
  },
  watch: {
    async isShow(newVal) {
      if (newVal) {
        await this.getTemplate();
      }
    },
  },
  created() {
    //this.getTemplate()
  },
};
</script>
