<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">
      <div
        class="user-family-insurance-item"
        @click="go('/policy/detail', 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_enable': item.productNo },
            '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_medical': item.itype === 'mi' },
                { 'Ufii-middle-main-status_illness': item.itype === 'cii' },
                { 'Ufii-middle-main-status_casualty': item.itype === 'ai' },
                { 'Ufii-middle-main-status_life': item.itype === 'li' },
                '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"
          @click.stop="go('/goods/detail', item)"
        >
          开启保障
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import localStorage from "@/service/localStorage";
import GOODS_LIST from "@/api/goodsList.mock";

export default {
  name: "UserFamily",
  data() {
    return {
      isFixed: false,
      activeIndex: 0
    };
  },
  computed: {
    ...mapState("user", ["familyList"]),
    policyList() {
      if (!localStorage.get("mongoToken")) {
        // 未登录时返回默认徽章墙
        const policyList = GOODS_LIST.filter(v => v.id !== "BNZJX001");
        return policyList;
      }
      return this.familyList[this.activeIndex]?.policyList;
    }
  },
  watch: {
    familyList() {
      this.$nextTick(() => {
        const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
        const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
        this.isFixed = scrollWidth > offsetWidth;
      });
    }
  },
  methods: {
    go(path, params) {
      if (path === "/goods/detail" && params) {
        path = {
          path,
          query: { id: params.id, type: params.itype }
        };
      } else if (path === "/policy/detail" && params.orderNo) {
        path = `${path}/${params.orderNo}`;
      }
      this.$emit("go", path);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
