vant 组件单选框用v-if 控制显示隐藏会有bug，所以采用v-show

<template>
  <div class="wrapper paddingTop">
    <preview
      v-if="show"
      :infoPreview="infoPreview"
      @cancel="show = false"
      @confirm="confirm"
    ></preview>
    <top-nav></top-nav>
    <van-form @submit="onSubmit" :scroll-to-error="true">
      <van-field
        name="hasHistory"
        label="有无过往病史"
        :rules="rules.hasHistory"
      >
        <template #input>
          <van-radio-group
            v-model="otherInfo.hasHistory"
            direction="horizontal"
            @change="hasHistoryChange"
          >
            <van-radio name="0" checked-color="#1bab4b">无</van-radio>
            <van-radio name="1" checked-color="#1bab4b">有</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-show="showHasHistory"
        v-model.trim="otherInfo.medicalHistory"
        rows="1"
        autosize
        type="textarea"
        name="medicalHistory"
        label
        placeholder="请描述"
        :rules="rules.medicalHistory"
      />
      <van-field name="hasRecord" label="有无犯罪记录" :rules="rules.hasRecord">
        <template #input>
          <van-radio-group
            v-model="otherInfo.hasRecord"
            direction="horizontal"
            @change="hasRecordChange"
          >
            <van-radio name="0" checked-color="#1bab4b">无</van-radio>
            <van-radio name="1" checked-color="#1bab4b">有</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-show="showHasRecord"
        v-model.trim="otherInfo.criminalRecord"
        rows="1"
        autosize
        type="textarea"
        name="criminalRecord"
        label
        placeholder="请描述"
        :rules="rules.criminalRecord"
      />
      <div class="notice">
        <div>注意：</div>
        <div>1、有无过往病史，有无犯罪记录，若选择有，则需详细描述。</div>
      </div>
      <div class="bottom-button">
        <van-button
          class="btn-color"
          round
          block
          type="danger"
          size="small"
          native-type="submit"
          >预览并提交</van-button
        >
        <van-button
          class="return-btn"
          round
          block
          type="default"
          size="small"
          @click="goHome"
          >返回主页</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {
  formatDate,
  judgeObjectComplete,
  judgeListComplete,
  initIcon,
} from "@/utils/common.js";
import request from "@/services/request.js";
import topNav from "@/views/mobile/nav";
import employeeField from "./employeeField";
import preview from "./preview";
export default {
  components: {
    topNav,
    preview,
  },
  data() {
    return {
      show: false,
      infoPreview: employeeField.infoPreview,
      showHasHistory: false,
      showHasRecord: false,
      otherInfo: {
        hasHistory: "0",
        hasRecord: "0",
        medicalHistory: "",
        criminalRecord: "",
      },
      listForm: {
        basicInfo: false,
        bankAccountInfo: false,
        papersInfo: false,
        contactAddressInfo: false,
        educationInfo: false,
        workInfo: false,
        familyInfo: false,
        urgencyInfo: false,
        titleInfo: true,
        cerInfos: true,
        langLevelInfo: true,
        otherParersInfo: true,
        photos: false,
        selfintroInfo: false,
        otherInfo: false,
      },
      listValue: {
        basicInfo: "基本信息",
        bankAccountInfo: "账户信息",
        papersInfo: "证件信息",
        contactAddressInfo: "联系信息",
        educationInfo: "教育经历",
        workInfo: "工作经历",
        familyInfo: "家庭成员",
        urgencyInfo: "紧急联系人",
        titleInfo: "职称信息",
        cerInfos: "证书信息",
        langLevelInfo: "外语水平",
        otherParersInfo: "其他资格证件",
        photos: "影印附件",
        selfintroInfo: "自我介绍",
        otherInfo: "其他信息",
      },
      rules: {
        hasHistory: [
          {
            required: true,
            message: "请选择",
            trigger: ["blur", "change"],
          },
        ],
        hasRecord: [
          {
            required: true,
            message: "请选择",
            trigger: ["blur", "change"],
          },
        ],
        // medicalHistory: [{
        //   required: true,
        //   message: '请填写',
        //   trigger: 'blur'
        // }],
        // criminalRecord: [{
        //   required: true,
        //   message: '请填写',
        //   trigger: 'blur'
        // }],
      },
    };
  },
  created() {
    this.getOtherInfo();
    this.getStatus();
  },
  methods: {
    msgPreview() {
      request.msgPreview().then((res) => {
        if (res && res.code === 1) {
          this.infoPreview = res.data;
        } else {
          this.$toast(res.data);
        }
      });
    },
    confirm() {
      this.changeOfferStatus();
      this.$toast("提交成功");
      this.$router.push("/End");
    },
    changeOfferStatus() {
      request.changeOfferStatus();
    },
    getOtherInfo() {
      let defaultObject = {
        hasHistory: "0",
        hasRecord: "0",
        medicalHistory: "",
        criminalRecord: "",
      };
      console.log("默认定义字段", defaultObject);
      request
        .getOtherInfo()
        .then((res) => {
          if (res && res.code === 1) {
            res.data.hasHistory = res.data.hasHistory.toString();
            res.data.hasRecord = res.data.hasRecord.toString();
            this.otherInfo = res.data;
            // 判断图标点亮
            let dataObject = this.otherInfo;
            console.log("后台返回字段", dataObject);
            if (dataObject.hasHistory == "0") {
              delete defaultObject.medicalHistory;
            } else {
              defaultObject.medicalHistory = "";
            }
            if (dataObject.hasRecord == "0") {
              delete defaultObject.criminalRecord;
            } else {
              defaultObject.criminalRecord = "";
            }
            initIcon("otherInfo", defaultObject, dataObject);
          }
        })
        .catch((error) => {
          // this.$toast('请求超时，请稍后再试');
        });
    },
    /*getStatus() {
      request.getEmployeeStatus().then((res) => {
        if (res && res.code === 1) {
          this.listForm = res;
        } else {
          this.$toast(res.msg);
        }
      });
    },*/
    getStatus() {
      this.listForm.basicInfo = localStorage.getItem("basicInfo")
        ? JSON.parse(localStorage.getItem("basicInfo"))
        : this.listForm.basicInfo;
      this.listForm.bankAccountInfo = localStorage.getItem("bankAccountInfo")
        ? JSON.parse(localStorage.getItem("bankAccountInfo"))
        : this.listForm.bankAccountInfo;
      this.listForm.papersInfo = localStorage.getItem("papersInfo")
        ? JSON.parse(localStorage.getItem("papersInfo"))
        : this.listForm.papersInfo;
      this.listForm.contactAddressInfo = localStorage.getItem(
        "contactAddressInfo"
      )
        ? JSON.parse(localStorage.getItem("contactAddressInfo"))
        : this.listForm.contactAddressInfo;
      this.listForm.educationInfo = localStorage.getItem("educationInfo")
        ? JSON.parse(localStorage.getItem("educationInfo"))
        : this.listForm.educationInfo;
      if (localStorage.getItem("isGraduate") == "是") {
        this.listForm.workInfo = true;
      } else {
        this.listForm.workInfo = localStorage.getItem("workInfo")
          ? JSON.parse(localStorage.getItem("workInfo"))
          : this.listForm.workInfo;
      }
      this.listForm.familyInfo = localStorage.getItem("familyInfo")
        ? JSON.parse(localStorage.getItem("familyInfo"))
        : this.listForm.familyInfo;
      this.listForm.urgencyInfo = localStorage.getItem("urgencyInfo")
        ? JSON.parse(localStorage.getItem("urgencyInfo"))
        : this.listForm.urgencyInfo;
      this.listForm.titleInfo = localStorage.getItem("titleInfo")
        ? JSON.parse(localStorage.getItem("titleInfo"))
        : this.listForm.titleInfo;
      this.listForm.cerInfos = localStorage.getItem("cerInfos")
        ? JSON.parse(localStorage.getItem("cerInfos"))
        : this.listForm.cerInfos;
      this.listForm.langLevelInfo = localStorage.getItem("langLevelInfo")
        ? JSON.parse(localStorage.getItem("langLevelInfo"))
        : this.listForm.langLevelInfo;
      this.listForm.otherParersInfo = localStorage.getItem("otherParersInfo")
        ? JSON.parse(localStorage.getItem("otherParersInfo"))
        : this.listForm.otherParersInfo;
      this.listForm.photos = localStorage.getItem("photos")
        ? JSON.parse(localStorage.getItem("photos"))
        : this.listForm.photos;
      this.listForm.selfintroInfo = localStorage.getItem("selfintroInfo")
        ? JSON.parse(localStorage.getItem("selfintroInfo"))
        : this.listForm.selfintroInfo;
      this.listForm.otherInfo = localStorage.getItem("otherInfo")
        ? JSON.parse(localStorage.getItem("otherInfo"))
        : this.listForm.otherInfo;
    },
    hasHistoryChange(name) {
      if (name == "0") {
        this.showHasHistory = false;
        this.$delete(this.rules, "medicalHistory");
      } else {
        this.showHasHistory = true;
        this.$set(this.rules, "medicalHistory", [
          {
            required: true,
            message: "请填写",
            trigger: "blur",
          },
        ]);
      }
    },
    hasRecordChange(name) {
      if (name == "0") {
        this.showHasRecord = false;
        this.$delete(this.rules, "criminalRecord");
      } else {
        this.showHasRecord = true;
        this.$set(this.rules, "criminalRecord", [
          {
            required: true,
            message: "请填写",
            trigger: "blur",
          },
        ]);
      }
    },
    onSubmit(values) {
      let tips = [];
      if (this.listForm) {
        for (let key1 in this.listValue) {
          for (let key2 in this.listForm) {
            if (key1 == key2) {
              if (this.listForm[key2] == false) {
                if (key2 != "otherInfo") {
                  tips.push(this.listValue[key1]);
                }
              }
            }
          }
        }
        if (tips.length > 0) {
          this.$dialog
            .alert({
              message:
                tips.join("、") +
                "模块尚未填写完整，请至相应模块补充完整后至本页提交",
              messageAlign: "left",
              confirmButtonColor: "#1bab4b",
            })
            .then(() => {
              this.$router.push("/Mobile");
            });
          return;
        } else {
          let target = this.otherInfo;
          target.employeePhone = localStorage.getItem("employeePhone");
          request
            .saveOtherInfo(target)
            .then((res) => {
              if (res.code !== 1) {
                if (res.code == -1 && res.data == "employeePhone") {
                  this.$toast(res.msg);
                  return;
                }
                this.$toast(res.msg);
              } else {
                this.getOtherInfo();
                this.show = true;
                this.msgPreview();
              }
            })
            .catch((error) => {
              this.$toast("请求超时，请稍后再试");
            });
        }
      }
    },
    goHome() {
      this.$router.push("/Mobile");
    },
  },
};
</script>

<style scoped>
.notice {
  color: #ff0000;
  font-size: 12px;
  padding: 10px 16px;
}

.btn-box {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}
</style>