<template>
  <div class="home">
    <nav-bar/>
    <div class="bj"></div>
    <van-form @submit="onSubmit">
      <van-field
          v-model="formData.name"
          name="name"
          label="姓名"
          placeholder="姓名"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入姓名' },{pattern:namePattern,message: '姓名格式有误,请输入中文或者字母'}]"
      />
      <van-field
          readonly
          clickable
          is-link
          name="picker"
          :value="formData.cardType==7?'身份证号':'就诊卡号'"
          label="证件类型"
          @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :defaultIndex="formData.cardType==7?1:0"
            :columns="columns"
            @confirm="onSelectCard"
            @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
          v-model="formData.cardNo"
          v-if="formData.cardType==7"
          name="card"
          label="身份证号"
          placeholder="身份证号"
          maxlength="18"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入卡号' },{validator: idValidator, message: '身份证号有误'}]"
      />
      <van-field
          v-model="formData.cardNo"
          v-if="formData.cardType==1"
          name="card"
          label="就诊卡号"
          placeholder="就诊卡号"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入卡号' }]"
      />
      <van-field
          v-model="formData.phone"
          name="phone"
          label="手机号码"
          type="number"
          autocomplete="off"
          maxlength="11"
          placeholder="手机号码"
          :rules="[{ required: true, message: '请输入手机号码' },{pattern:phonePatten,message: '手机号码格式有误'}]"
      />
      <div style="height:10px;"></div>
      <van-field name="switch" label="默认就诊人">
        <template #input>
          <van-switch v-model="formData.isYes" active-color="#166bcc" size="20"/>
        </template>
      </van-field>
      <div style="margin: 0.5rem;">
        <van-button round block
                    :loading="loading" type="primary"
                    native-type="submit"
                    color="#166bcc"
                    loading-text="提交中...">提交
        </van-button>

      </div>
    </van-form>
  </div>
</template>


<script>
// @ is an alias to /src
import {apiUserCardAdd, apiUserCardList} from "@/request/api.js";
import {Toast, Dialog} from 'vant';

export default {
  data() {
    return {
      formData: {
        name: "",
        cardType: 7,
        cardNo: "",
        phone: "",
        isYes: false,//0是 1 否
      },
      namePattern: /^[A-Za-z\u4e00-\u9fa5]+$/,
      phonePatten: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      columns: [{value: 7, text: "身份证号"}],
      showPicker: false,
      switchChecked: false,
      title: "",
      flag: true,
      loading: false,
      card: {
        url1: "../assets/in_box3.png",
        url2: "../assets/in_box3.png",
      },
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    if (this.$route.query.id) {
      apiUserCardList({id: this.$route.query.id}).then(res => {
        res.data[0].isYes = res.data[0].isYes == 0 ? true : false;
        res.data[0].cardType = parseInt(res.data[0].cardType);
        if (res.data[0].cardType == 6) {
          res.data[0].cardNo = res.data[0].idNo
        }
        this.formData = res.data[0];
      });
    }
  },
  methods: {


    onSubmit(values) {
      this.loading = true;
      let _this = this;
      let formData = {
        QueryCode: _this.formData.cardNo,
        QueryType: "7",
        QueryBusiness: "0",
        isYes: _this.formData.isYes ? 0 : 1,
        isModify: "0",
        name: _this.formData.name,
        phone: _this.formData.phone
      };
      //console.log(formData)
      apiUserCardAdd(formData).then(res => {
        if (res.code == "100013") {
          Dialog.confirm({
            title: "提示",
            message: "医院暂无此就诊人信息是否建档"
          })
              .then(() => {
                // on confirm
                this.$router.push({path: "/Member_addjzr?idcard=" + _this.formData.cardNo + "&name=" + _this.formData.name + "&phonenum=" + _this.formData.phone});
              })
              .catch(() => {
                _this.$router.back(-1);
              });

        } else if (res.code === "100014") {
          console.log(res)
          this.loading = false;
          // Toast(res.);
        }else if (res.code === "120001") {
          console.log(res)
          this.loading = false;
          Toast("此卡已被本人或他人添加过，请勿重复操作！！！");
          // Toast(res.);
        }  else if (res.code === "100015") {
          console.log(res)
          this.loading = false;
          // Toast(res.);
        } else if (res.code === "100016") {
          console.log(res)
          this.loading = false;
          // Toast(res.);
        } else if (res.code == "200") {
          Toast("操作成功");
          setTimeout(() => {
            _this.$router.back(-1);
          }, 1000);
        }
        this.loading = false;
      }).catch(err => {
        _this.loading = false;
        Toast("通讯异常，请稍后重试");
      })

    },
    idValidator(val) {
      return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val);
    },
    clinicValidator(val) {
      return /^[A-Za-z0-9]+$/.test(val);
    },
    onSelectCard(value) {
      if (value.value != this.formData.cardType) {
        this.formData.cardNo = "";
      }
      this.formData.cardType = parseInt(value.value);
      console.log(this.formData.cardType)
      this.showPicker = false;
    }
  }
};
</script>

<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

::v-deep .van-field__control--custom {
  justify-content: flex-end;
}


</style>
