<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="姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
        @click.native="inputClick"
      />
      <cr-field
        name="selfIdNo"
        v-model="formData.selfIdNo"
        placeholder="信息保密，仅用于投保"
        label="身份证号"
        :rules="[{ required: true, message: '请输入身份证号' }]"
        @click.native="inputClick"
      />
      <cr-field
        name="selfPhone"
        v-model="formData.selfPhone"
        placeholder="请输入您的手机号码"
        label="手机号码"
        :rules="[{ required: true, message: '请输入手机号码' }]"
        @click.native="inputClick"
      />
      <cr-field
        name="selfCode"
        v-model="formData.selfCode"
        v-if="xyqbAuthState !== 4"
        placeholder="请输入短信验证码"
        label="验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      >
        <a href="javascript:;" slot="button">获取验证码</a>
      </cr-field>
    </cr-cell-group>
    <h6 class="insure-form-title">为谁投保</h6>
    <cr-radio-btn
      v-model="formData.insured"
      :radio-data="radioOptions.insuredOptions"
      class="insured"
    />
    <cr-cell-group class="insure-form">
      <cr-field
        name="relativeName"
        v-if="formData.insured !== '1'"
        v-model="formData.name"
        placeholder="请输入被保人姓名"
        label="姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <cr-field
        name="relativeIdNo"
        v-if="formData.insured !== '1'"
        v-model="formData.idNo"
        placeholder="信息保密，仅用于投保"
        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"
        />
      </cr-cell>
      <cr-cell title="缴费方式" class="insure-form-item_nobg" v-if="radioOptions.paywayOptions">
        <cr-radio-btn
          name="type"
          v-model="formData.type"
          :radio-data="radioOptions.paywayOptions"
        />
      </cr-cell>
    </cr-cell-group>
  </card>
</template>

<script>
import Card from "@/components/Card";
import { mapState, mapActions } from "vuex";
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: {},
      mongoToken: localStorage.get("mongoToken"),
      xyqbAuthState: localStorage.get("xyqbAuthState")
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.formData = val;
      }
    },
    formData: {
      deep: true,
      handler(val) {
        this.$emit(DATA_CHANGE_EVENT, val);
      }
    },
    showAuthXyqb: {
      immediate: true,
      handler(val) {
        if (val === 4) {
          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.$forceUpdate();
        }
      }
    }
  },
  computed: {
    ...mapState(["showAuthXyqb"])
  },
  methods: {
    ...mapActions(["setAuthXyqb"]),
    inputClick() {
      if (this.showAuthXyqb === 1) {
        this.setAuthXyqb(2);
      }
    }
  }
};
</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>
