<template>
  <div class="user-family">
    <p class="user-family-title">家庭配置保障</p>
    <div class="user-family-info">
      <!-- <div class="user-family-info-item">
          <cr-image
            round
            width="40px"
            height="40px"
            fit="cover"
            src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
          />
          <span class="user-family-info-item-name">王斌</span>
          <div class="user-family-info-item-divider"></div>
        </div>-->
      <div
        class="user-family-info-item"
        :class="{ 'user-family-info-item_fixed': isFixed }"
        @click="go"
      >
        <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" @click="go">
      <div class="user-family-insurance-item">
        <cr-image round width="" height="" class="user-family-insurance-item-left" :src="medical" />
        <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">看病报销医药费,最高600万</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"
        />
        <!-- user-family-insurance-item-middle_enable 保障中 -->
        <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 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>
  </div>
</template>
<script>
import medical from "@/assets/images/user/medical_closed@2x.png";
import casualty from "@/assets/images/user/casualty_closed@2x.png";
import illness from "@/assets/images/user/illness_closed@2x.png";
import life from "@/assets/images/user/life_closed@2x.png";

export default {
  data() {
    return {
      medical,
      casualty,
      illness,
      life,
      isFixed: false
    };
  },
  methods: {
    go() {
      this.$emit("go", "", true);
    }
  },
  mounted() {
    this.$nextTick(() => {
      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);
    });
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
