<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="amountOptions" />
        </template>
      </cr-field>
      <cr-field
        name="policyPeriod"
        label="保险期限"
        :rules="[{ required: true, message: 'required' }]"
      >
        <template #input>
          <cr-radio-btn v-model="formData.policyPeriod" :radio-data="insureTermOptions" />
        </template>
      </cr-field>
      <cr-field
        name="payPeriod"
        label="交费年限"
        :rules="[{ required: true, message: 'required' }]"
      >
        <template #input>
          <cr-radio-btn v-model="formData.payPeriod" :radio-data="insureBenefitOptions" />
        </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";
import liCalFee from "./liCalFee.mixin";
const { paywayOptions, sexOptions, insuredAmountOptions, termOptions, benefitOptions } = liDetail;
import fromNow from "date-fns/formatDistanceToNowStrict";

export default {
  name: "CalInsuredFee",
  mixins: [liCalFee],
  components: {
    CrRadioBtn
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {},
      sexOptions,
      countOptions: insuredAmountOptions,
      termOptions,
      paywayOptions,
      benefitOptions: benefitOptions
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.formData = val;
      }
    },
    formData: {
      deep: true,
      handler() {
        this.$refs.calFeeForm.submit();
      }
    }
  },
  computed: {
    age() {
      const userAge = this.formData.birth
        ? parseInt(
            fromNow(new Date(this.formData.birth), { unit: "year", roundingMethod: "floor" })
          )
        : "";
      return isNaN(userAge) ? 18 : userAge;
    }
  },
  mounted() {},
  methods: {
    onFormSubmit() {
      this.$emit(DATA_CHANGE_EVENT, this.formData);
    },
    resetFormItemVal(key, val) {
      if (this.formData.birth && val && this.formData[key] === val) {
        switch (key) {
          case "amountInsured":
            this.$notify({ type: "warning", message: "已超出该年龄承保的最高保额，请重新选择" });
            break;
          case "policyPeriod":
          case "payPeriod":
            this.$notify({ type: "warning", message: "交费期间不应长于保障期间，请重新选择" });
            break;
          default:
            break;
        }
      }
      if (this.formData[key] === val) {
        this.formData[key] = "";
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../Policy/Add/index.less";
.policy-form {
  padding: 0;
  @{deep} .cr-cell {
    padding: 8px 0 !important;
    &__title {
      width: 75px !important;
    }
    &-group {
      &__title {
        font-size: @font-size-16;
        padding: 0 0 @padding-sm;
      }
    }
  }
}
</style>
