<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"
          v-for="(item, index) in familyList"
          @click="go(`/user/family/detail/${encodeURIComponent(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.appellation }}</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_2': familyList.length === 2 },
            { 'family-list-item_overlay_3': familyList.length >= 3 },
            'family-list-item'
          ]"
          @click="go(`/user/family/detail/${encodeURIComponent(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].appellation }}</span>
          </div>
          <p class="Fl-item-right" v-if="familyList[0].auth">已认证</p>
        </div>
      </div>
      <div class="family-collapse" v-if="familyList.length !== 1" @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>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import form from "./modules/FamilyForm";

export default {
  name: "Family",
  components: {
    userFamilyForm: form
  },
  data() {
    return {
      isCollapse: false
    };
  },
  computed: {
    ...mapState("user", ["familyList"]),
    collapseText() {
      return this.isCollapse ? "点击展开" : "点击收起";
    }
  },
  async created() {
    await this.setFamilyList();
    this.isCollapse = this.familyList.length > 1;
  },
  methods: {
    ...mapActions("user", ["setFamilyList"]),
    go(path) {
      this.$router.push(path);
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
