<template>
  <div class="family">
    <div v-if="familyList.length">
      <p class="family-title">已添加家人</p>
      <div class="family-list" v-if="!isCollapse">
        <div
          :class="[{ 'family-list-item_overlay': isCollapse && index === 0 }, 'family-list-item']"
          v-for="(item, index) in familyList"
          @click="go(`/user/family/detail/${item.userInfoSecId}`)"
          :key="index"
        >
          <div class="Fl-item-left">
            <cr-image class="Fli-left-image" :src="item.avatar" width="" height="" />
            <span class="Fli-left-name">{{ item.name }}</span>
            <span class="Fli-left-relation">{{ item.relation }}</span>
          </div>
          <p class="Fl-item-right" v-if="item.auth">已认证</p>
        </div>
      </div>
      <div class="family-list" v-else>
        <div
          class="family-list-item_overlay family-list-item"
          @click="go(`/user/family/detail/${familyList[0].userInfoSecId}`)"
        >
          <div class="Fl-item-left">
            <cr-image class="Fli-left-image" :src="familyList[0].avatar" width="" height="" />
            <span class="Fli-left-name">{{ familyList[0].name }}</span>
            <span class="Fli-left-relation">{{ familyList[0].relation }}</span>
          </div>
          <p class="Fl-item-right" v-if="familyList[0].auth">已认证</p>
        </div>
      </div>
      <div class="family-collapse" @click="isCollapse = !isCollapse">
        <span class="family-collapse-text">{{ collapseText }}</span>
        <svg-icon
          icon-class="triangle-down"
          :class-name="[{ 'family-collapse-svg_opened': !isCollapse }, 'family-collapse-svg']"
        />
      </div>
    </div>
    <user-family-form type="add" title="为家人添加保障"></user-family-form>
    <!-- <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.name"
        name="姓名"
        label="姓名"
        placeholder="请输入投保人姓名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <cr-field
        class="family-form-item"
        v-model="formData.idNo"
        type="password"
        name="身份证号"
        label="身份证号"
        placeholder="请填写家人身份证号"
        :rules="[{ required: true, message: '请填写身份证号' }]"
      />
      <cr-field
        @click.native="showPopups"
        class="family-form-item"
        v-model="formData.relation"
        :readonly="true"
        name="与本人的关系"
        label="与本人的关系"
        placeholder="请选择与本人的关系"
        :rules="[{ required: true, message: '请选择与本人的关系' }]"
      />
      <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> -->
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import form from "./modules/FamilyForm";

export default {
  name: "Family",
  components: {
    userFamilyForm: form
  },
  data() {
    return {
      isCollapse: true
    };
  },
  computed: {
    ...mapState("user", ["familyList"]),
    collapseText() {
      return this.isCollapse ? "点击展开" : "点击收起";
    }
  },
  created() {
    this.setFamilyList();
  },
  methods: {
    ...mapActions("user", ["setFamilyList"]),
    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;
      }
    },
    go(path) {
      console.log(path);
      this.$router.push(path);
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
