<template>
  <cr-form class="policy-form" scroll-to-error @submit="onFormSubmit" @failed="onFormFailed">
    <cr-cell-group title="被保人年龄需满足18周岁~60周岁">
      <cr-field v-model="formData.text" name="selfName" label="出生日期" readonly>
        <template #input>
          <popup-date-picker v-model="formData.text" placeholder="请选择被保人出生日期" />
        </template>
      </cr-field>
      <cr-field name="selfName" label="保障额度">
        <template #input>
          <cr-radio-btn v-model="formData.planValue" :radio-data="countOptions" />
        </template>
      </cr-field>
      <cr-field v-model="formData.text" name="selfName" label="保险期限">
        <template #input>
          <cr-radio-btn v-model="formData.planValue" :radio-data="termOptions" />
        </template>
      </cr-field>
      <cr-field v-model="formData.text" name="selfName" label="交费年限">
        <template #input>
          <cr-radio-btn v-model="formData.planValue" :radio-data="benefitOptions" />
        </template>
      </cr-field>
      <cr-field v-model="formData.text" name="selfName" label="性别">
        <template #input>
          <cr-radio-btn v-model="formData.planValue" :radio-data="sexOptions" />
        </template>
      </cr-field>
      <cr-field v-model="formData.text" name="selfName" label="交费方式">
        <template #input>
          <cr-radio-btn v-model="formData.planValue" :radio-data="paywayOptions" />
        </template>
      </cr-field>
    </cr-cell-group>
  </cr-form>
</template>

<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import PopupDatePicker from "@/components/PopupDatePicker";

export default {
  name: "CalInsuredFee",
  components: {
    CrRadioBtn,
    PopupDatePicker
  },
  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: {
    formData: {
      deep: true,
      handler() {
        this.calFee();
      }
    }
  },
  mounted() {},
  methods: {
    onFormSubmit(values) {
      console.log("submit", values);
    },
    onFormFailed(errorInfo) {
      const { errors } = errorInfo;
      this.$notify({ type: "warning", message: errors[0].message });
    },
    calFee() {}
  }
};
</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>
