<template>
  <cr-form ref="calFeeForm" class="policy-form" :show-error="false" @submit="onFormSubmit">
    <cr-cell-group title="被保人年龄需满足18周岁~60周岁">
      <cr-field
        v-model="formData.birth"
        name="birth"
        label="出生日期"
        placeholder="请选择出生日期"
        :error="false"
        readonly
        :rules="[{ required: true, message: 'required' }]"
        @click.native="$emit('select-date')"
      />
      <cr-field
        name="amountInsured"
        label="保障额度"
        :rules="[{ required: true, message: 'required' }]"
      >
        <template #input>
          <cr-radio-btn v-model="formData.amountInsured" :radio-data="countOptions" />
        </template>
      </cr-field>
      <cr-field
        name="policyPeriod"
        label="保险期限"
        :rules="[{ required: true, message: 'required' }]"
      >
        <template #input>
          <cr-radio-btn v-model="formData.policyPeriod" :radio-data="termOptions" />
        </template>
      </cr-field>
      <cr-field
        name="payPeriod"
        label="交费年限"
        :rules="[{ required: true, message: 'required' }]"
      >
        <template #input>
          <cr-radio-btn v-model="formData.payPeriod" :radio-data="benefitOptions" />
        </template>
      </cr-field>
      <cr-field name="gender" label="性别" :rules="[{ required: true, message: 'required' }]">
        <template #input>
          <cr-radio-btn v-model="formData.gender" :radio-data="sexOptions" />
        </template>
      </cr-field>
      <cr-field name="payType" label="交费方式" :rules="[{ required: true, message: 'required' }]">
        <template #input>
          <cr-radio-btn v-model="formData.payType" :radio-data="paywayOptions" />
        </template>
      </cr-field>
    </cr-cell-group>
  </cr-form>
</template>

<script>
import CrRadioBtn from "@/components/CrRadioBtn";
const DATA_CHANGE_EVENT = "input";
import liDetail from "@/api/detail.huagui.shouxian";
const { paywayOptions, sexOptions, insuredAmountOptions, termOptions, benefitOptions } = liDetail;
export default {
  name: "CalInsuredFee",
  components: {
    CrRadioBtn
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {},
      sexOptions,
      countOptions: insuredAmountOptions.filter((item, index) => index > 1),
      termOptions,
      paywayOptions,
      benefitOptions: benefitOptions.filter((item, index) => index > 0)
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.formData = val;
      }
    },
    formData: {
      deep: true,
      handler() {
        this.$refs.calFeeForm.submit();
      }
    }
  },
  mounted() {},
  methods: {
    onFormSubmit() {
      this.$emit(DATA_CHANGE_EVENT, this.formData);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../Policy/Add/index.less";
.policy-form {
  padding: 0;
  @{deep} .cr-cell {
    &__title {
      width: 75px !important;
    }
    &-group {
      &__title {
        font-size: @font-size-16;
        padding: 0 0 @padding-sm;
      }
    }
  }
}
</style>
