<template>
  <cr-form ref="calFeeForm" class="policy-form" @submit="onFormSubmit">
    <cr-cell-group title="被保人年龄需满足18周岁~60周岁">
      <cr-field
        v-model="formData.birthday"
        name="birthday"
        label="出生日期"
        :rules="[{ required: true, message: 'required' }]"
      >
        <template #input>
          <popup-date-picker v-model="formData.birthday" placeholder="请选择被保人出生日期" />
        </template>
      </cr-field>
      <cr-field name="price" label="保障额度" :rules="[{ required: true, message: 'required' }]">
        <template #input>
          <cr-radio-btn v-model="formData.price" :radio-data="countOptions" />
        </template>
      </cr-field>
      <cr-field name="term" label="保险期限" :rules="[{ required: true, message: 'required' }]">
        <template #input>
          <cr-radio-btn v-model="formData.term" :radio-data="termOptions" />
        </template>
      </cr-field>
      <cr-field name="range" label="交费年限" :rules="[{ required: true, message: 'required' }]">
        <template #input>
          <cr-radio-btn v-model="formData.range" :radio-data="benefitOptions" />
        </template>
      </cr-field>
      <cr-field name="sex" label="性别" :rules="[{ required: true, message: 'required' }]">
        <template #input>
          <cr-radio-btn v-model="formData.sex" :radio-data="sexOptions" />
        </template>
      </cr-field>
      <cr-field name="type" label="交费方式" :rules="[{ required: true, message: 'required' }]">
        <template #input>
          <cr-radio-btn v-model="formData.type" :radio-data="paywayOptions" />
        </template>
      </cr-field>
    </cr-cell-group>
  </cr-form>
</template>

<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import PopupDatePicker from "@/components/PopupDatePicker";
const DATA_CHANGE_EVENT = "input";

export default {
  name: "CalInsuredFee",
  components: {
    CrRadioBtn,
    PopupDatePicker
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {},
      sexOptions: [
        { label: "男", value: "1" },
        { label: "女", value: "2" }
      ],
      countOptions: [
        { label: "100万", value: "1" },
        { label: "150万", value: "2" },
        { label: "200万", value: "3" },
        { label: "250万", value: "4" },
        { label: "300万", value: "5" },
        { label: "350万", value: "6" }
      ],
      termOptions: [
        { label: "10年", value: "1" },
        { label: "20年", value: "2" },
        { label: "30年", value: "3" },
        { label: "保至60周岁", value: "4" },
        { label: "保至65周岁", value: "5" },
        { label: "保至70周岁", value: "6" }
      ],
      paywayOptions: [
        { label: "年交", value: "1" },
        { label: "月交", value: "2" }
      ],
      benefitOptions: [
        { label: "10年", value: "2" },
        { label: "20年", value: "3" },
        { label: "30年", value: "4" }
      ]
    };
  },
  watch: {
    value: {
      deep: 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 {
    &-group {
      &__title {
        font-size: @font-size-16;
        padding: 0 0 @padding-sm;
      }
    }
  }
}
</style>
