<template>
  <div class="container">
    <div class="policy-tip-wrap">
      <div class="policy-tip">您所填写的数据，仅用于投保，平台将严格保密</div>
    </div>
    <cr-form class="policy-form" scroll-to-error @submit="onFormSubmit" @failed="onFormFailed">
      <cr-cell-group title="投保人信息">
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="姓名"
          placeholder="请输入投保人姓名"
          :rules="[{ require: true, message: '请输入投保人姓名' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="身份证号"
          placeholder="请填写投保人身份证号"
          :rules="[{ require: true, message: '请填写投保人身份证号' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          type="tel"
          label="手机号"
          placeholder="请填写投保人手机号"
          :rules="[{ require: true, message: '请填写投保人手机号' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          type="email"
          label="电子邮箱"
          placeholder="用户接收电子保单"
          :rules="[{ require: true, message: '请填写电子邮箱' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="年收入"
          type="digit"
          placeholder="请输入投保人年收入"
          :rules="[{ require: true, message: '请输入投保人年收入' }]"
        />
        <cr-field
          name="selfName"
          label="居住省市"
          readonly
          :rules="[{ require: true, message: '请选择投保人居住省市' }]"
        >
          <template #input>
            <popup-area-picker v-model="formData.text" placeholder="请选择投保人居住省市" />
          </template>
          <svg-icon icon-class="triangle-right" slot="button" />
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="详细地址"
          placeholder="请输入居住详细地址"
          :rules="[{ require: true, message: '请输入居住详细地址' }]"
        />
        <cr-field
          name="selfName"
          label="职业"
          :rules="[{ require: true, message: '请选择投保人职业' }]"
        >
          <template #input>
            <popup-picker
              :picker-data="['老师', '工人']"
              v-model="formData.text"
              placeholder="请选择投保人职业"
            />
          </template>
          <svg-icon icon-class="triangle-right" slot="button" />
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="身份证有效期"
          :rules="[{ require: true, message: '请选择身份证有效期' }]"
        >
          <template #input>
            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
          </template>
        </cr-field>
        <cr-field
          name="selfName"
          label="有效期至"
          readonly
          :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
        >
          <template #input>
            <popup-date-picker v-model="formData.text" placeholder="请选择您的证件有效止期" />
          </template>
          <svg-icon icon-class="triangle-right" slot="button" />
        </cr-field>
      </cr-cell-group>
      <cr-cell-group title="被保人信息">
        <cr-field v-model="formData.text" name="selfName" label="为谁投保">
          <template #input>
            <cr-radio-btn v-model="formData.planValue" :radio-data="insuredOptions" />
          </template>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="有无社保"
          :rules="[{ require: true, message: '请选择社保状态' }]"
        >
          <template #input>
            <cr-radio-btn v-model="formData.planValue" :radio-data="socialSecOptions" />
          </template>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="身高"
          type="digit"
          placeholder="请填写被保人身高"
          :rules="[{ require: true, message: '请填写被保人身高' }]"
        >
          <div class="form-unit" slot="button">厘米</div>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="体重"
          type="digit"
          placeholder="请填写被保人体重"
          :rules="[{ require: true, message: '请填写被保人体重' }]"
        >
          <div class="form-unit" slot="button">公斤</div>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="姓名"
          placeholder="请输入投保人姓名"
          :rules="[{ require: true, message: '请输入投保人姓名' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="身份证号"
          placeholder="请填写投保人身份证号"
          :rules="[{ require: true, message: '请填写投保人身份证号' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="手机号"
          type="tel"
          placeholder="请填写投保人手机号"
          :rules="[{ require: true, message: '请填写投保人手机号' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="年收入"
          type="digit"
          placeholder="请输入投保人年收入"
          :rules="[{ require: true, message: '请输入投保人年收入' }]"
        />
        <cr-field
          v-model="formMaskData.text"
          name="selfName"
          label="居住省市"
          readonly
          placeholder="请选择投保人居住省市"
          :rules="[{ require: true, message: '请选择投保人居住省市' }]"
          @click.native="handleShowAreaPopup(true)"
        >
          <svg-icon icon-class="triangle-right" slot="button" />
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="详细地址"
          placeholder="请输入居住详细地址"
          :rules="[{ require: true, message: '请输入居住详细地址' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="职业"
          readonly
          placeholder="请选择投保人职业"
          :rules="[{ require: true, message: '请选择投保人职业' }]"
          @click.native="handleShowAreaPopup(true)"
        >
          <svg-icon icon-class="triangle-right" slot="button" />
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="身份证有效期"
          :rules="[{ require: true, message: '请选择身份证有效期' }]"
        >
          <template #input>
            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
          </template>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="有效期至"
          readonly
          placeholder="请选择您的证件有效止期"
          :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
          @click.native="handleShowAreaPopup(true)"
        >
          <svg-icon icon-class="triangle-right" slot="button" />
        </cr-field>
      </cr-cell-group>
      <cr-cell-group title="保障方案">
        <cr-field
          name="selfName"
          label="投保限额"
          :rules="[{ require: true, message: '请选择投保限额' }]"
        >
          <template #input>
            <cr-stepper v-model="formData.stepper" disable-input :step="10" />
          </template>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="保险期限"
          :rules="[{ require: true, message: '请选择保险期限' }]"
        >
          <template #input>
            <cr-radio-btn v-model="formData.planValue" :radio-data="termOptions" />
          </template>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="交费方式"
          :rules="[{ require: true, message: '请选择交费方式' }]"
        >
          <template #input>
            <cr-radio-btn v-model="formData.planValue" :radio-data="paywayOptions" />
          </template>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="为谁投保"
          :rules="[{ require: true, message: '请选择为谁投保' }]"
        >
          <template #input>
            <cr-radio-btn v-model="formData.planValue" :radio-data="benefitOptions" />
          </template>
        </cr-field>
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="生效日期"
          readonly
          :rules="[{ require: true, message: '请选择生效日期' }]"
        />
        <cr-field
          v-model="formData.text"
          name="selfName"
          label="受益人"
          readonly
          :rules="[{ require: true, message: '请选择受益人' }]"
        />
      </cr-cell-group>
      <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
    </cr-form>
    <go-insure-dialog
      v-model="goInsureState"
      :title="headerInfo.title"
      :pay-data="goodBuyModalInfo"
    />
  </div>
</template>

<script>
import GoodAction from "@/components/GoodAction";
import CrRadioBtn from "@/components/CrRadioBtn";
import PopupPicker from "@/components/PopupPicker";
import PopupAreaPicker from "@/components/PopupAreaPicker";
import PopupDatePicker from "@/components/PopupDatePicker";
import GoInsureDialog from "@/views/Goods/Detail/modules/GoInsureDialog";

import Detail from "@/api/detail.huagui.shouxian";

export default {
  name: "AddPolicy",
  components: {
    GoodAction,
    CrRadioBtn,
    GoInsureDialog,
    PopupPicker,
    PopupAreaPicker,
    PopupDatePicker
  },
  data() {
    return {
      ...Detail,
      goInsureState: false,
      formData: {},
      formMaskData: {},
      idCardInvaildOptions: [
        { label: "非长期", value: "1" },
        { label: "长期", value: "2" }
      ],
      socialSecOptions: [
        { label: "有社保", value: "1" },
        { label: "无社保", value: "2" }
      ],
      insuredOptions: [
        { label: "本人", value: "1" },
        { label: "配偶", value: "2" },
        { label: "父母", value: "3" },
        { label: "子女", value: "4" }
      ],
      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: "交5年", value: "1" },
        { label: "交10年", value: "2" },
        { label: "交20年", value: "3" },
        { label: "交30年", value: "4" },
        { label: "一次付清", value: "5" }
      ]
    };
  },
  mounted() {},
  methods: {
    onFormSubmit(values) {
      console.log("submit", values);
      this.goInsureState = true;
    },
    onFormFailed(errorInfo) {
      const { errors } = errorInfo;
      this.$notify({ type: "warning", message: errors[0].message });
      this.goInsureState = true;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
