<template>
  <div class="user-family">
    <p class="user-family-title">家庭配置保障</p>
    <div class="user-family-info" :class="{ 'user-family-info-item_placeholder': isFixed }">
      <div
        class="user-family-info-item"
        @click="activeIndex = index"
        v-for="(item, index) in familyList"
        :key="index"
      >
        <cr-image round width="40px" height="40px" fit="cover" :src="item.avatar" />
        <span class="user-family-info-item-name">{{ item.nameMask }}</span>
        <div class="user-family-info-item-divider" v-show="index === activeIndex"></div>
      </div>
      <div
        class="user-family-info-item"
        :class="{ 'user-family-info-item_fixed': isFixed }"
        @click="go('/user/family')"
      >
        <svg-icon icon-class="add-family" class-name="user-family-info-item-svg" />
        <span class="user-family-info-item-name">添加</span>
      </div>
    </div>
    <div class="user-family-insurance">
      <!-- user-family-insurance-item-middle_enable 保障中 -->
      <div class="user-family-insurance-item" v-for="(item, index) in policyList" :key="index">
        <cr-image
          round
          width=""
          height=""
          class="user-family-insurance-item-left"
          :src="item.productNo ? item.icon : item.icon_closed"
        />
        <div class="user-family-insurance-item-middle">
          <div class="Ufii-middle-main">
            <span class="Ufii-middle-main-title">{{ item.guarantee_title }}</span>
            <span class="Ufii-middle-main-status" v-if="item.productNo">保障中</span>
          </div>
          <div class="Ufii-middle-footer">{{ item.guarantee_sub }}</div>
        </div>
        <p class="user-family-insurance-item-right" v-if="!item.productNo">开启保障</p>
      </div>
      <!-- <div class="user-family-insurance-item">
        <cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
        <div class="user-family-insurance-item-middle">
          <div class="Ufii-middle-main">
            <span class="Ufii-middle-main-title">重疾保障</span>
            <span class="status">保障中</span>
          </div>
          <div class="Ufii-middle-footer">100种重症+40种轻症</div>
        </div>
        <p class="user-family-insurance-item-right">开启保障</p>
      </div>
      <div class="user-family-insurance-item">
        <cr-image
          round
          width=""
          height=""
          class="user-family-insurance-item-left"
          :src="casualty"
        />
        <div class="user-family-insurance-item-middle">
          <div class="Ufii-middle-main">
            <span class="Ufii-middle-main-title">意外保障</span>
            <span class="Ufii-middle-main-status">保障中</span>
          </div>
          <div class="Ufii-middle-footer">意外风险覆盖全,最高100万保额</div>
        </div>
        <p class="user-family-insurance-item-right">开启保障</p>
      </div>
      <div class="user-family-insurance-item">
        <cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
        <div class="user-family-insurance-item-middle">
          <div class="Ufii-middle-main">
            <span class="Ufii-middle-main-title">人寿保障</span>
            <span class="status">保障中</span>
          </div>
          <div class="Ufii-middle-footer">最高350万保额,顶梁柱必备</div>
        </div>
        <p class="user-family-insurance-item-right">开启保障</p>
      </div> -->
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "UserFamily",
  data() {
    return {
      isFixed: false,
      activeIndex: 0
    };
  },
  computed: {
    ...mapState("user", ["familyList"]),
    policyList() {
      return this.familyList[this.activeIndex]?.policyList;
    }
  },
  watch: {
    familyList() {
      this.$nextTick(() => {
        console.log(this.familyList.length);
        const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
        const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
        this.isFixed = scrollWidth > offsetWidth;
        // console.log(scrollWidth, offsetWidth, this.isFixed);
      });
    }
  },
  methods: {
    go(path) {
      this.$emit("go", path);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
