<template>
  <div class="home">
    <nav-bar />
    <div class="bj"></div>
    <!-- <van-tabs 
      v-model="active"
      color="#166bcc"
      title-active-color="#166bcc"
      @click="exchange" >
      <van-tab title="上传身份证照片"></van-tab>
      <van-tab title="手动输入"></van-tab>
    </van-tabs> -->

    <van-form @submit="onSubmit">
      <van-field
        v-model="formData.name"
        name="name"
        label="姓名"
        placeholder="姓名"
        autocomplete="off"
        :rules="[
          { required: true, message: '请输入姓名' },
          { pattern: namePattern, message: '姓名格式有误,请输入中文或者字母' },
        ]"
      />

      <!--van-cell title="性别"  class="sexcell" >
          <van-radio-group v-model="formData.sex"  >
              <van-row >
                  <van-col span="10">
                      <van-radio name="1">男</van-radio>
                  </van-col>
                  <van-col span="5">
                      <van-radio name="2">女</van-radio>
                  </van-col> 
              </van-row>
          </van-radio-group>
      </van-cell-->

      <van-field
        readonly
        clickable
        is-link
        name="picker"
        :value="formData.nation"
        :columns="columnsmz"
        label="民族"
        @click="showPickermz = true"
      />
      <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-popup v-model="showPickermz" position="bottom">
        <van-picker
          show-toolbar
          :defaultIndex="formData.nation"
          :columns="columnsmz"
          @confirm="onSelectNation"
          @cancel="showPickermz = false"
        />
      </van-popup>

      <van-popup v-model="showPickerzy" position="bottom">
        <van-picker
          show-toolbar
          :defaultIndex="formData.zhiye"
          :columns="columnszy"
          @confirm="onSelectzhiye"
          @cancel="showPickerzy = 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: '手机号码格式有误' },
        ]"
      />
      <!--van-field
        readonly
        clickable
        is-link
        name="picker"
        :value="formData.area"
        label="地区"
        placeholder="地区"
        @click="showPicker1 = true"
      /-->
      <van-popup v-model="showPicker1" position="bottom">
        <van-area
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          title="选择常住地区"
          @confirm="onSelectArea"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <van-field
        v-model="formData.address"
        name="address"
        label="家庭地址"
        autocomplete="off"
        placeholder="家庭地址"
        :rules="[{ required: true, message: '请输入家庭地址' }]"
      />
      <van-field
        v-model="formData.dwaddress"
        name="dwaddress"
        label="单位地址"
        autocomplete="off"
        placeholder="单位地址"
        :rules="[{ required: true, message: '请输入单位地址' }]"
      />
      <!--van-field
        readonly
        clickable
        is-link
        name="picker"
        :value="formData.zhiye"
        :columns="columnszy"
        label="职业"
        @click="showPickerzy = true"
      /-->
      <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 class="wxts">
        温馨提示
        <p>温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示</p>
      </div> -->
      <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 class="uploadclass" v-else>
      <input id="filePhoto" type="file" class="upload" accept="image/*" hidden @change="onInputChange($event)" /> 
         <div class="imgclass" @click="imageUpload"><img :src="imagesrc"/></div>
         <div class="textclass">点击上传身份证人面像</div> -->

    <!-- <van-form @submit="onSubmit" v-if="sfzshowflag">
      <van-field
        v-model="formData.name"
        name="name"
        label="姓名"
        placeholder="姓名"
        autocomplete="off"
        :disabled="disabledflag"
        :rules="[{ required: true, message: '请输入姓名' },{pattern:namePattern,message: '姓名格式有误,请输入中文或者字母'}]"
      />

      <van-field
        readonly
        clickable
        is-link
        name="picker"
        :value="formData.nation"
        :columns="columnsmz"
        label="民族"
        :disabled="disabledflag"
        @click="disabledflag?'':(showPickermz = true)"
      />
      <van-field
        readonly
        clickable
        is-link
        name="picker"
        :value="formData.cardType==7?'身份证':'就诊卡'"
        label="证件类型"
        :disabled="disabledflag"
        @click="disabledflag?'':(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-popup v-model="showPickermz" position="bottom">
        <van-picker
          show-toolbar
          :defaultIndex="formData.nation"
          :columns="columnsmz"
          @confirm="onSelectNation"
          @cancel="showPickermz = false"

        />
      </van-popup>

      <van-popup v-model="showPickerzy" position="bottom">
        <van-picker
          show-toolbar
          :defaultIndex="formData.zhiye"
          :columns="columnszy"
          @confirm="onSelectzhiye"
          @cancel="showPickerzy = false"
        />
      </van-popup>

      <van-field
        v-model="formData.cardNo"
        v-if="formData.cardType==7"
        name="card"
        label="身份证号"
        placeholder="身份证号"
        maxlength="18"
        autocomplete="off"
        :disabled="disabledflag"
        :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: '手机号码格式有误'}]"
      />
      <van-popup v-model="showPicker1" position="bottom">
        <van-area
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          title="选择常住地区"
          @confirm="onSelectArea"
          @cancel="showPicker1 = false"
        />
      </van-popup>
       <van-field
        v-model="formData.address"
        name="address"
        label="家庭地址"
        autocomplete="off"
        placeholder="家庭地址"
        :disabled="disabledflag"
        :rules="[{ required: true, message: '请输入家庭地址' }]"
      />
      <van-field
        v-model="formData.dwaddress"
        name="dwaddress"
        label="单位地址"
        autocomplete="off"
        placeholder="单位地址"
        :rules="[{ required: true, message: '请输入单位地址' }]"
      />
      van-field
        readonly
        clickable
        is-link
        name="picker"
        :value="formData.zhiye"
        :columns="columnszy"
        label="职业"
        @click="showPickerzy = true"
      /
      <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> -->
  </div>
</template>

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

export default {
  data() {
    return {
      formData: {
        name: "",
        sex: "",
        nation: "汉族",
        nationdm: "01",
        cardType: 7,
        cardNo: "",
        phone: "",
        area: "内蒙古自治区包头市东河区",
        address: "",
        dwaddress: "",
        isYes: false, //0是 1 否
        zhiye: "",
        zhiyedm: "",
      },
      areaList: areaList,
      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:1,text:"就诊卡号"},{value:6,text:"身份证号"}],
      columns: [{ value: 7, text: "身份证" }],
      showPicker: false,
      showPicker1: false,
      showPickermz: false,
      showPickerzy: false,
      switchChecked: false,
      title: "",
      flag: false,
      columnsmz: [
        { value: "01", text: "汉族" },
        { value: "02", text: "蒙古族" },
        { value: "03", text: "回族" },
        { value: "04", text: "藏族" },
        { value: "05", text: "维吾尔族" },
        { value: "06", text: "苗族" },
        { value: "07", text: "彝族" },
        { value: "08", text: "壮族" },
        { value: "09", text: "布依族" },
        { value: "10", text: "朝鲜族" },
        { value: "11", text: "满族" },
        { value: "12", text: "侗族" },
        { value: "13", text: "瑶族" },
        { value: "14", text: "白族" },
        { value: "15", text: "土家族" },
        { value: "16", text: "哈尼族" },
        { value: "17", text: "哈萨克族" },
        { value: "18", text: "傣族" },
        { value: "19", text: "黎族" },
        { value: "20", text: "傈僳族" },
        { value: "21", text: "佤族" },
        { value: "22", text: "畲族" },
        { value: "23", text: "高山族" },
        { value: "24", text: "拉祜族" },
        { value: "25", text: "水族" },
        { value: "26", text: "东乡族" },
        { value: "27", text: "纳西族" },
        { value: "28", text: "景颇族" },
        { value: "29", text: "柯尔克孜族" },
        { value: "30", text: "土族" },
        { value: "31", text: "达斡尔族" },
        { value: "32", text: "仫佬族" },
        { value: "33", text: "羌族" },
        { value: "34", text: "布朗族" },
        { value: "35", text: "撒拉族" },
        { value: "36", text: "毛难族" },
        { value: "37", text: "仡佬族" },
        { value: "38", text: "锡伯族" },
        { value: "39", text: "阿昌族" },
        { value: "40", text: "普米族" },
        { value: "41", text: "塔吉克族" },
        { value: "42", text: "怒族" },
        { value: "43", text: "乌孜别克族" },
        { value: "44", text: "俄罗斯族" },
        { value: "45", text: "鄂温克族" },
        { value: "46", text: "崩龙族" },
        { value: "47", text: "保安族" },
        { value: "48", text: "裕固族" },
        { value: "49", text: "京族" },
        { value: "50", text: "塔塔尔族" },
        { value: "51", text: "独龙族" },
        { value: "52", text: "鄂伦春族" },
        { value: "53", text: "赫哲族" },
        { value: "54", text: "门巴族" },
        { value: "55", text: "珞巴族" },
        { value: "56", text: "基诺族" },
        { value: "97", text: "其他" },
        { value: "98", text: "外国血统" },
      ],
      columnszy: [
        { value: "11", text: "国家公务员" },
        { value: "13", text: "专业技术人员" },
        { value: "17", text: "职员" },
        { value: "21", text: "企业管理人员" },
        { value: "24", text: "工人" },
        { value: "27", text: "农民" },
        { value: "31", text: "学生" },
        { value: "37", text: "现役军人" },
        { value: "51", text: "自由职业者" },
        { value: "54", text: "个体经营者" },
        { value: "70", text: "无业人员" },
        { value: "80", text: "离（退）休人员" },
        { value: "90", text: "其他" },
      ],
      loading: false,
      imagesrc: require("../assets/idcard.png"),
      disabledflag: false,
      sfzshowflag: false,
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.formData.cardNo = this.$route.query.idcard;
    this.formData.name = this.$route.query.name;
    this.formData.phone = this.$route.query.phonenum;
    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: {
    exchange(name, title) {
      if (name == 0) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    imageUpload() {
      $("#filePhoto").click();
    },
    //文件上传到浏览器触发事件
    onInputChange(el) {
      try {
        var self = this;
        var file = el.target.files[0];
        //console.log(file)
        var type = file.type.split("/")[0];

        if (type === "image") {
          //将图片转化为base64
          var reader = new FileReader();
          reader.readAsDataURL(file); // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径,
          reader.onload = function() {
            var image = reader.result; // image即base64格式，后面调用后端请求传入image
            self.imagesrc = reader.result;
            self.formData = {
              name: "测试",
              sex: "1",
              nation: "汉族",
              nationdm: "01",
              cardType: 7,
              cardNo: "33032220200101001X",
              phone: "",
              area: "",
              address: "杭州九聚",
              dwaddress: "",
              isYes: false, //0是 1 否
              zhiye: "",
              zhiyedm: "",
            };
            const toast1 = Toast.loading({
              message: "加载中...",
              forbidClick: true,
              loadingType: "spinner",
              duration: 10000,
            });
            setTimeout(() => {
              toast1.clear();
              self.sfzshowflag = true;
              self.disabledflag = true;
            }, 3000);

            //console.log(image);
          };
        } else {
          self.$toast.showToast("请正确上传图片");
        }
      } catch (e) {
        console.log(e);
      }
    },
    judgesex(birthday) {
      let sexflag = birthday.substr(16, 1);
      if (sexflag % 2 == 1) {
        return 1;
      } else {
        return 2;
      }
    },
    onSubmit(values) {
      let _this = this;
      // console.log("submit", values);
      // if(_this.formData.zhiyedm=="")
      // {
      //     Toast("请选择职业");
      //     return;
      // }
      _this.loading = true;
      let formData = {
        name: _this.formData.name,
        sex: _this.judgesex(_this.formData.cardNo),
        birthday:
          _this.formData.cardNo.substring(6, 10) +
          "-" +
          _this.formData.cardNo.substring(10, 12) +
          "-" +
          _this.formData.cardNo.substring(12, 14),
        cardType: "01",
        IdNo: _this.formData.cardNo,
        //address:_this.formData.area+_this.formData.address,
        address: _this.formData.address,
        Employetitle: _this.formData.dwaddress,
        nation: _this.formData.nationdm,
        phone: _this.formData.phone,
        hisoper: "000000",
        chargetype: "自费",
        Occupation: _this.formData.zhiyedm,
        isYes: _this.formData.isYes ? 0 : 1,
      };
      console.log(formData);

      apiUserCardCreat(formData)
        .then((res) => {
          if (res.code == "200") {
            Toast("操作成功");
            setTimeout(() => {
              this.$router.push({ path: "/Member_jzr" });
            }, 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;
    },
    onSelectNation(value) {
      if (value.value != this.formData.nation) {
        this.formData.nation = "";
      }
      this.formData.nation = value.text;
      this.formData.nationdm = value.value;
      console.log(this.formData.nation);
      this.showPickermz = false;
    },
    onSelectzhiye(value) {
      if (value.value != this.formData.zhiye) {
        this.formData.zhiye = "";
      }
      this.formData.zhiye = value.text;
      this.formData.zhiyedm = value.value;
      console.log(this.formData.zhiye);
      this.showPickerzy = false;
    },
    onSelectArea(value) {
      if (value.value != this.formData.area) {
        this.formData.area = "";
      }
      this.formData.area = value[0].name + value[1].name + value[2].name;
      console.log(this.formData.area);
      this.showPicker1 = 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;
}

.sexcell {
  .van-cell__value {
    min-width: 75%; //可根据自己需求设定值
    text-align: left;
  }
}

.uploadclass {
  margin-top: 0.25rem;
  height: 4.25rem;
  background-color: #fff;

  .imgclass {
    width: 50%;
    height: 3.5rem;
    padding-left: 0.25rem;
    padding-top: 0.5rem;
    float: left;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .textclass {
    float: right;
    text-align: center;
    line-height: 4rem;
    font-size: 0.425rem;
    padding-right: 0.25rem;
    font-weight: 800;
  }
}
</style>
