<template>
  <div class="family">
    <p class="family-title">已添加家人</p>
    <div class="family-list">
      <div class="family-list-item family-list-item_overlay">
        <div class="Fl-item-left">
          <cr-image
            class="Fli-left-image"
            src="../../../assets/images/user/man@2x.png"
            width=""
            height=""
          />
          <span class="Fli-left-name">王小闹</span>
          <span class="Fli-left-relation">本人</span>
        </div>
        <p class="Fl-item-right">已认证</p>
      </div>
      <!-- <div class="family-list-item">
        <div class="Fl-item-left">
          <cr-image
            class="Fli-left-image"
            src="../../../assets/images/user/man@2x.png"
            width=""
            height=""
          />
          <span class="Fli-left-name">王爸爸</span>
          <span class="Fli-left-relation">父亲</span>
        </div>
        <p class="Fl-item-right">已认证</p>
      </div>
      <div class="family-list-item">
        <div class="Fl-item-left">
          <cr-image
            class="Fli-left-image"
            src="../../../assets/images/user/woman@2x.png"
            width=""
            height=""
          />
          <span class="Fli-left-name">王妈妈</span>
          <span class="Fli-left-relation">母亲</span>
        </div>
        <p class="Fl-item-right">已认证</p>
      </div> -->
      <div class="family-list-collapse">
        <span class="Fl-collapse-text">点击收起</span>
        <svg-icon icon-class="triangle-down " class-name="Fl-collapse-svg" />
      </div>
    </div>
    <p class="family-title">为家人添加保障</p>
    <cr-form ref="form" class="family-form" @submit="onSubmit" @failed="onFailed">
      <cr-field
        class="family-form-item"
        v-model="formData.username"
        name="姓名"
        label="姓名"
        placeholder="请输入投保人姓名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <cr-field
        class="family-form-item"
        v-model="formData.idcard"
        type="password"
        name="身份证号"
        label="身份证号"
        placeholder="请填写家人身份证号"
      />
      <cr-field
        @click.native="showPopups"
        class="family-form-item"
        v-model="formData.relation"
        :readonly="true"
        name="与本人的关系"
        label="与本人的关系"
        placeholder="请选择与本人的关系"
      />
      <div class="family-form-radio">
        <div class="Ff-radio-title">
          <span class="Ffr-title-text">有无社保</span>
          <svg-icon
            icon-class="doubt"
            @click.native="modal.delete = true"
            class-name="Ffr-title-svg"
          />
        </div>
        <cr-field
          class="Ff-radio-options"
          name="社保"
          :rules="[{ required: true, message: '请填写用户名' }]"
        >
          <cr-radio-btn
            class=""
            slot="input"
            v-model="formData.socialSecurity"
            :radio-data="planOptions"
          />
        </cr-field>
      </div>
      <cr-button class="family-form-button" native-type="submit">
        生成保障方案
      </cr-button>
    </cr-form>
    <cr-popup v-model="showPopup" position="bottom">
      <cr-picker
        ref="picker"
        show-toolbar
        :columns="relations"
        @confirm="onConfirm"
        @cancel="showPopup = false"
      />
    </cr-popup>
    <Modal
      class="family-modal"
      v-model="modal.question"
      :closeable="false"
      cancel-btn=""
      title="我们常说的社保都包括哪些？"
      confirm-btn="我知道了"
    >
      常见的社保包括农村合作医疗(新农合)、城镇居民社保、城镇职工医保、少儿医保等政府主导的基本医疗保障项目，满足最基本的医疗保障要求。
    </Modal>
    <Modal
      v-model="modal.confirm"
      :closeable="false"
      cancel-btn="取消"
      confirm-btn="确认无误"
      title="信息确认"
    >
      <div class="family-confirm-modal">
        <div class="Fc-modal-item">
          <span>首月保费</span>
          <span>1元</span>
        </div>
        <div class="Fc-modal-item">
          <span>次月保费</span>
          <span>100.00元/月 (共11期)</span>
        </div>
        <div class="Fc-modal-item">
          <span>次月保费</span>
          <span>100.00元/月 (共11期)</span>
        </div>
        <div class="Fc-modal-item">
          <span>次月保费</span>
          <span>100.00元/月 (共11期)</span>
        </div>
      </div>
    </Modal>
    <Modal
      class="family-modal"
      v-model="modal.delete"
      :closeable="false"
      cancel-btn="确认删除"
      confirm-btn="继续保留"
      title="删除确认"
      >确认删除【王大闹】的个人信息吗？为提供全面的家庭保障，建议您保留家庭成员信息。
    </Modal>
  </div>
</template>
<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import Modal from "@/components/Modal";

const planOptions = [
  { label: "有社保", value: "1" },
  { label: "无社保", value: "2" }
];
const relations = ["本人", "配偶", "父母", "子女"];

export default {
  name: "Family",
  components: {
    CrRadioBtn,
    Modal
  },
  data() {
    return {
      showPopup: false,
      relations,
      planOptions,
      modal: {
        question: false,
        confirm: false,
        delete: false
      },
      formData: {
        username: "",
        idcard: "",
        relation: "",
        socialSecurity: ""
      }
    };
  },
  methods: {
    async onSubmit() {
      // console.log('sucess', values);
    },
    onFailed() {
      // console.log('fail', errorInfo);
    },
    onConfirm(picker, res) {
      this.formData.relation = res[0];
      this.showPopup = false;
    },
    showPopups() {
      this.showPopup = true;
      if (!this.refreshed) {
        this.$refs.picker.refreshColumns();
        this.refreshed = true;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
