<template>
  <div class="user">
    <div class="user-info">
      <div class="user-info-account" @click="go('', true)">
        <span>未登录</span>
        <span>点击登录</span>
      </div>
      <div class="user-info-image" @click="go('', true)">
        <cr-image round width="60px" height="60px" fit="cover" :src="avatar" />
        <!-- <svg-icon 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"></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 "./index.less";
import customerService from "@/assets/images/user/customer-service@1x.png";
import help from "@/assets/images/user/help@2x.png";
import avatar from "@/assets/images/user/avatar@2x.png";
import UserFamily from "./modules/UserFamily";
import Tabbar from "@/components/Tabbar";
import RecordLayer from "@/components/RecordLayer";

export default {
  name: "User",
  components: {
    UserFamily,
    Tabbar,
    RecordLayer
  },
  data() {
    return {
      avatar,
      customerService,
      help,
      isFixed: false,
      showLayer: false
    };
  },
  methods: {
    go(path, isOverlay = false) {
      if (isOverlay) {
        this.showLayer = true;
      } else {
        this.$router.push(path);
      }
    }
  }
};
</script>
