<template>
  <div class="user">
    <div class="user-info">
      <div class="user-info-account" @click="go('', true)">
        <span>{{ userInfo.name }}</span>
        <span>{{ userInfo.phoneNoMask }}</span>
      </div>
      <div class="user-info-image" @click="go('', true)">
        <cr-image
          class="user-info-image-avatar"
          width=""
          height=""
          round
          fit="cover"
          :src="userInfo.avatar"
        />
        <svg-icon
          v-if="userInfo.auth"
          icon-class="certification"
          class-name="user-info-image-certification"
        />
      </div>
    </div>
    <div class="user-insurance">
      <div class="user-insurance-list" @click="go('/policy')">
        <div class="user-insurance-list-icon">
          <svg-icon icon-class="all-insurance-policy" class-name="user-insurance-list-icon-svg" />
          <div class="user-insurance-list-icon-dot" v-if="showDot"></div>
        </div>
        <span class="user-insurance-list-title">全部保单</span>
      </div>
      <div class="user-insurance-divider"></div>
      <div class="user-insurance-list" @click="go('', true)">
        <div class="user-insurance-list-icon">
          <svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" />
          <!-- <div class="user-insurance-list-icon-dot"></div> -->
        </div>
        <span class="user-insurance-list-title">申请理赔</span>
      </div>
    </div>
    <user-family @go="go"></user-family>
    <div class="user-service">
      <p class="user-service-title">我的服务</p>
      <div class="user-service-main" @click="go('', true)">
        <cr-cell title="帮助中心" :icon="help" class="user-service-main-item">
          <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
        </cr-cell>
        <cr-cell title="客服电话" :icon="customerService" class="user-service-main-item">
          <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
        </cr-cell>
      </div>
    </div>
    <div class="user-logo">
      <svg-icon icon-class="logo" class-name="user-logo-svg" />
      <p class="user-logo-desc" @click="go('/introduction')">了解芒果保险</p>
    </div>
    <record-layer v-model="showLayer" desc="敬请期待"></record-layer>
    <tabbar></tabbar>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import customerService from "@/assets/images/user/customer-service@2x.png";
import help from "@/assets/images/user/help@2x.png";
import UserFamily from "./modules/UserFamily";
import Tabbar from "@/components/Tabbar";
import RecordLayer from "@/components/RecordLayer";
import { getPolicyList } from "@/api/policy";

export default {
  name: "User",
  components: {
    UserFamily,
    Tabbar,
    RecordLayer
  },
  data() {
    return {
      customerService,
      help,
      isFixed: false,
      showLayer: false,
      showDot: false
    };
  },
  computed: {
    ...mapState("user", ["familyList", "userInfo"])
  },
  async created() {
    this.setUserInfo();
    const policyList = await getPolicyList();
    await this.setFamilyList(policyList);
    this.showDot = policyList.some(policy => policy.policyState === "6.3");
  },
  methods: {
    ...mapActions("user", ["setFamilyList", "setUserInfo"]),
    go(path, isOverlay = false) {
      if (isOverlay) {
        this.showLayer = true;
      } else {
        this.$router.push(path);
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
