<template>
  <div class="user">
    <div class="user-info">
      <div class="user-info-account" @click="go()">
        <span>{{ userInfo.name }}</span>
        <span>{{ userInfo.phoneNoMask }}</span>
      </div>
      <div class="user-info-image" @click="go()">
        <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('/user/apply-claims')">
        <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">
        <cr-cell
          title="帮助中心"
          :icon="help"
          class="user-service-main-item"
          @click="go('/user/help-center', false)"
        >
          <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
        </cr-cell>
        <a :href="`tel:${tel}`">
          <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>
        </a>
      </div>
    </div>
    <div class="user-logo">
      <svg-icon icon-class="logo" class-name="user-logo-svg" />
      <p class="user-logo-desc" @click="go('/introduction', false)">了解芒果保险</p>
    </div>
    <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 { getPolicyList } from "@/api/policy";
import settings from "@/api/settings";
import localStorage from "@/service/localStorage";

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