<template>
  <card title="请填写投保信息" class="insure-card">
    <h6 class="insure-form-title">本人信息</h6>
    <cr-cell-group class="insure-form">
      <cr-field
        name="selfName"
        v-model="formData.selfName"
        placeholder="请输入投保人姓名"
        label="姓名"
        :readonly="selfInfoReadonly"
        :rules="[{ required: true, message: '请输入姓名' }]"
        @click.native="inputClick"
      />
      <cr-field
        name="selfIdNo"
        v-model="formData.selfIdNo"
        placeholder="信息保密，仅用于投保"
        label="身份证号"
        :readonly="selfInfoReadonly"
        :rules="[{ required: true, message: '请输入身份证号' }]"
        @click.native="inputClick"
      />
      <cr-field
        name="selfPhone"
        v-model="formData.selfPhone"
        placeholder="请输入您的手机号码"
        label="手机号码"
        :readonly="selfInfoReadonly"
        :rules="[{ required: true, message: '请输入手机号码' }]"
        @click.native="inputClick"
      />
      <cr-field
        name="selfCode"
        v-model="formData.selfCode"
        v-if="(!!xyqbAuthState && xyqbAuthState !== 4) || !mongoToken"
        placeholder="请输入短信验证码"
        label="验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      >
        <template v-slot:button>
          <a href="javascript:;" @click="getCode" v-if="!showCount">获取验证码</a>
          <span class="login-form-remain" v-else>{{ count }}s</span>
        </template>
      </cr-field>
    </cr-cell-group>
    <h6 class="insure-form-title">为谁投保</h6>
    <cr-radio-btn
      v-model="formData.relation"
      @input="relationChange"
      :radio-data="radioOptions.insuredOptions"
      class="insured"
    />
    <cr-cell-group class="insure-form">
      <cr-field
        name="relativeName"
        v-if="formData.relation !== '1'"
        v-model="formData.name"
        placeholder="请输入被保人姓名"
        :readonly="infoReadonly"
        label="姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <cr-field
        name="relativeIdNo"
        v-if="formData.relation !== '1'"
        v-model="formData.idNo"
        placeholder="信息保密，仅用于投保"
        :readonly="infoReadonly"
        label="身份证号"
        :rules="[{ required: true, message: '请输入身份证号' }]"
      />
      <cr-cell class="insure-form-item_nobg" v-if="radioOptions.medicalOptions">
        <template slot="title">
          <span>有无医保</span>
          <cr-icon type="question-o" color="#ccc" />
        </template>
        <cr-radio-btn
          name="socialSecurity"
          v-model="formData.socialSecurity"
          :radio-data="radioOptions.medicalOptions"
          :readonly="socialSecurityReadonly"
        />
      </cr-cell>
      <cr-cell title="缴费方式" class="insure-form-item_nobg" v-if="radioOptions.paywayOptions">
        <cr-radio-btn
          name="type"
          v-model="formData.payType"
          :radio-data="radioOptions.paywayOptions"
        />
      </cr-cell>
    </cr-cell-group>
  </card>
</template>

<script>
import Card from "@/components/Card";
import { mapState, mapActions } from "vuex";
import { getFamilyList, getCaptchaSms } from "@/api/user";
import { isPhone } from "@/service/validation";
import localStorage from "@/service/localStorage";
import CrRadioBtn from "@/components/CrRadioBtn";
const DATA_CHANGE_EVENT = "input";
export default {
  name: "InsurePersonForm",
  components: {
    CrRadioBtn,
    Card
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    },
    radioOptions: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {},
      familyList: [],
      showCount: false,
      count: "",
      timer: null,
      mongoToken: localStorage.get("mongoToken"),
      xyqbAuthState: localStorage.get("xyqbAuthState"),
      selfInfoReadonly: false,
      infoReadonly: false
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.formData = val;
      }
    },
    userInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        this.formData.selfPhone =
          val.phoneNoMask && val.phoneNoMask !== "点击登录" ? val.phoneNoMask : "";
      }
    },
    formData: {
      immediate: true,
      deep: true,
      handler(val) {
        this.$emit(DATA_CHANGE_EVENT, val);
        this.$forceUpdate();
      }
    },
    showAuthXyqb: {
      immediate: true,
      handler(val) {
        if (val === 4 && this.userInfo.phoneNoMask === "点击登录") {
          const xyqbUserInfo = localStorage.get("xyqbUserInfo");
          this.formData.selfName = xyqbUserInfo.nameMask;
          this.formData.selfIdNo = xyqbUserInfo.idNoMask;
          this.formData.selfPhone = xyqbUserInfo.phoneNoMask;
          this.xyqbAuthState = localStorage.get("xyqbAuthState");
          this.selfInfoReadonly = true;
          this.$forceUpdate();
        }
      }
    },
    familyList() {
      this.relationChange();
    }
  },
  computed: {
    ...mapState(["showAuthXyqb"]),
    ...mapState("user", ["userInfo"]),
    socialSecurityReadonly() {
      const { relation } = this.formData;
      const { selfInfoReadonly, infoReadonly } = this;
      return (relation === "1" && selfInfoReadonly) || (relation !== "1" && infoReadonly);
    }
  },
  mounted() {
    this.getFamilyList();
  },
  methods: {
    ...mapActions(["setAuthXyqb"]),
    ...mapActions("user", ["setUserInfo"]),
    inputClick() {
      if (this.showAuthXyqb === 1) {
        this.setAuthXyqb(2);
      }
    },
    relationChange(relation = this.formData.relation) {
      this.familyList.forEach(item => {
        const {
          relation,
          nameMask: selfName,
          idNoMask: selfIdNo,
          userInfoSecId: selfSecId,
          socialSecurity
        } = item;
        if (relation === 1) {
          this.formData = {
            ...this.formData,
            ...{
              selfName,
              selfIdNo,
              selfSecId,
              selfSocialSecurity: socialSecurity ? "1" : "0"
            }
          };
          this.selfInfoReadonly = true;
        }
      });
      const userArray = this.familyList.filter(item => item.relation === +relation);
      let [name, idNo, userInfoSecId, socialSecurity] = ["", "", "", "0"];
      if (userArray.length) {
        let { nameMask, idNoMask, userInfoSecId: id, socialSecurity: ss } = userArray[0];
        [name, idNo, userInfoSecId, socialSecurity] = [nameMask, idNoMask, id, ss];
        this.infoReadonly = true;
      } else {
        this.infoReadonly = false;
      }
      this.formData = {
        ...this.formData,
        ...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity ? "1" : "0" }
      };
    },
    async getFamilyList() {
      this.mongoToken = localStorage.get("mongoToken");
      if (!this.mongoToken) return;
      this.setUserInfo();
      const res = await getFamilyList();
      if (res) {
        this.familyList = res;
        (this.showAuthXyqb || this.mongoToken) && this.relationChange();
      }
    },
    // TODO 倒计时未回显
    async getCode() {
      const TIME_COUNT = 60;
      const { selfPhone } = this.formData;
      if (this.timer) return;
      if (!isPhone(selfPhone)) {
        this.$notify({ type: "warning", message: "请填写正确的手机号码" });
        return;
      }
      const res = await getCaptchaSms({ phoneNo: selfPhone });
      if (res && !this.timer) {
        this.count = TIME_COUNT;
        this.showCount = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.showCount = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      } else {
        this.$notify({ type: "warning", message: "获取短信验证码失败，请稍后重试" });
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
.insure-card {
  @{deep} .card-body {
    padding-bottom: 10px;
  }
}
.insure-form {
  &-title {
    font-size: @font-size-16;
    font-weight: @font-weight-bold;
    margin: @padding-md 0;
  }
  @{deep} .cr-cell {
    &-group {
      &::after {
        display: none;
      }
    }
    background-color: @gray-1;
    border-radius: @border-radius-md;
    margin-bottom: 12px;
    align-items: center;
    padding: 9px 16px;
    &::after {
      display: none;
    }
    &__title {
      color: #333333;
      display: flex;
      align-items: center;
    }
  }
  &-item_nobg {
    background-color: @white !important;
    padding: 10px 0;
    overflow: initial;
    align-items: baseline !important;
    margin-bottom: 0 !important;
    .radio-btn {
      margin-bottom: 0;
    }
    @{deep} .cr-cell {
      &__title {
        width: 31%;
        flex: none;
      }
      &__value {
        width: 69%;
        flex: none;
        overflow: initial;
      }
    }
  }
}
.insured {
  margin-bottom: 20px;
}
</style>
