<template>
  <card title="请填写投保信息">
    <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: '请输入姓名' }]"
      />
      <cr-field
        name="selfIdNo"
        v-model="formData.selfIdNo"
        placeholder="信息保密，仅用于投保"
        label="身份证号"
        :rules="[{ required: true, message: '请输入身份证号' }]"
      />
      <cr-field
        name="selfIdNo"
        v-model="formData.selfIdNo"
        placeholder="请输入您的手机号码"
        label="手机号码"
        :rules="[{ required: true, message: '请输入手机号码' }]"
      />
      <cr-field
        name="selfIdNo"
        v-model="formData.selfIdNo"
        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" />
    <cr-cell-group class="insure-form">
      <cr-field
        name="relativeName"
        v-model="formData.relativeName"
        placeholder="请输入被保人姓名"
        label="姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <cr-field
        name="relativeIdNo"
        v-model="formData.relativeIdNo"
        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="medical"
          v-model="formData.medical"
          :radio-data="radioOptions.medicalOptions"
        />
      </cr-cell>
      <cr-cell title="缴费方式" class="insure-form-item_nobg">
        <cr-radio-btn
          name="payway"
          v-model="formData.payway"
          :radio-data="radioOptions.paywayOptions"
        />
      </cr-cell>
    </cr-cell-group>
  </card>
</template>

<script>
import Card from "@/components/Card";
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: {}
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.formData = val;
      }
    },
    formData: {
      deep: true,
      handler(val) {
        this.$emit(DATA_CHANGE_EVENT, val);
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
.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;
      }
    }
  }
}
</style>
