<!--
 * @Description: file content
 * @Version: 2.0
 * @Author: ljl
 * @Date: 2022-06-16 09:49:18
 * @LastEditors: ljl
 * @LastEditTime: 2022-08-02 15:50:00
 * @FilePath: \zyypt-ssb-vue_app\src\views\addRelative.vue
-->
<template>
  <div>
    <div id="main">
      <div class="title">亲属信息</div>
      <div class="text">
        该申请入口仅支持被申请人为未满18周岁的未成年人，60周岁以上的老年人（含60周岁）。
      </div>
      <van-form validate-first class="form" @submit="onSubmit" ref="form">
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          maxlength="10"
          v-model="form.QSXM"
          label="亲属"
          name="QSXM"
          placeholder="请输入亲属姓名"
          :rules="[{ pattern: QSXMPattern, message: '请输入2~10位中文汉字' }]"
        />
        <van-field
          readonly
          clickable
          name="ZJLX"
          :value="cardtypeText"
          label="证件类型"
          placeholder="请选择证件类型"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            value-key="LXMC"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          maxlength="18"
          v-model="form.QSZJHM"
          type="text"
          label="证件号"
          name="QSZJHM"
          placeholder="请输入亲属证件号"
          :rules="[
            { validator: cardValidator, message: '请输入正确亲属证件号' },
          ]"
        />
        <!-- <van-field
          maxlength="11"
          v-model="form.telNum"
          type="tel"
          label="手机号"
          name="telNum"
          placeholder="请输入亲属手机号"
          :rules="[{ pattern: telNumPattern, message: '请输入正确手机号' }]"
        /> -->
        <div class="bg">
          <van-button
            block
            :loading="loading"
            loading-type="spinner"
            type="info"
            native-type="submit"
            :disabled="isChange == 0"
            >下一步</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Field, Form, Picker, Popup, Button } from "vant";
Vue.use(Field).use(Form).use(Picker).use(Popup).use(Button);
import { setParamLog, getDocument, AddRelatives } from "@/api/index";
export default {
  name: "AddRelative",
  data() {
    return {
      isChange: 0,
      columns: [],
      cardtypeText: "",
      showPicker: false,
      telNumPattern:
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
      QSXMPattern: /^[\u4e00-\u9fa5]{2,10}$/,
      form: {
        QSXM: "",
        QSZJHM: "",
        // telNum: "",
        ZJLX: "",
      },
      queryInfo: {},
      loading: false,
    };
  },
  watch: {
    form: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.QSXM && newVal.QSZJHM && newVal.ZJLX) {
          this.isChange = 1;
        } else {
          this.isChange = 0;
        }
      },
    },
  },
  created() {
    this.queryInfo = this.$route.query;
    setParamLog({ type: "app", service: "getDocument" });
    getDocument({ type: "app" }).then((res) => {
      this.columns = res.data.MXXQ;
    });
  },
  beforeRouteEnter(to, from, next) {
    //路由导航钩子，通过页面路由标记是否需要清空页面数据重新加载
    to.meta["fromPath"] = from.path;
    if (from.path == "/addError") {
      to.meta["needFresh"] = false;
    } else {
      to.meta["needFresh"] = true;
    }
    next();
  },
  activated() {
    //此方法在页面缓存时会被调用，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
    if (this.$route.meta["needFresh"]) {
      this.init();
    }
  },
  methods: {
    init() {
      this.$refs.form.resetValidation();
      this.form = {
        QSXM: "",
        QSZJHM: "",
        ZJLX: "",
      };
      this.cardtypeText = "";
    },
    onConfirm(value) {
      this.cardtypeText = value.LXMC;
      this.form.ZJLX = value.id;
      this.showPicker = false;
    },
    cardValidator(val) {
      // 18位身份证号
      let reg1 =
        /^([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]$/;
      // 15位身份证号
      let reg2 =
        /^([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 (!reg1.test(val) && !reg2.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    onSubmit(values) {
      this.loading = true;
      let submitForm = { type: "app", ...this.form, ...this.queryInfo };
      setParamLog({ type: "app", service: "AddRelatives" });
      AddRelatives(submitForm).then((res) => {
        this.loading = false;
        if (res.code == 0) {
          this.$router.push({
            name: "AddSuccess",
          });
        } else if (res.code == 205) {
          this.$router.push({
            name: "AddError",
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep #main {
  padding: 10px 15px;
  font-family: "PingFang SC-Medium";
  text-align: left;
  // background: #fff;
  .title {
    font-size: 18px;
    margin: 20px 0;
  }
  .text {
    font-size: 14px;
    font-family: "PingFang SC-Regular";
    color: #999999;
    line-height: 24px;
  }
  .form {
    margin-top: 20px;
    box-shadow: 0px 0px 10px 1px rgba(184, 160, 115, 0.3);
    font-family: "PingFang SC-Regular";
    margin-bottom: 60px;
  }
  .van-field__label span {
    color: #000;
    font-size: 16px;
  }
  .van-cell__value {
    color: #c4c4c4;
  }
}
.bg {
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding-top: 10px;
}
button {
  width: calc(100% - 30px);
  height: 50px;
  background: linear-gradient(270deg, #b9916a 0%, #e4c995 100%);
  border-radius: 4px;
  border: none;
  color: #fff;
  font-family: "PingFang SC-Regular";
  font-size: 18px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>