<template>
  <div class="conatainer">
    <div class="header">
      <div class="user">
        <div class="avatar">
          <img :src="userInfo.partnerImgUrl" alt="">
        </div>
        <p class="name-wrap">
          <span class="name">{{ userInfo.partnerName }}</span>
          <span class="phone">{{ userInfo.partnerPhone }}</span>
        </p>
      </div>
      <div class="tab">
        <a class="border-bottom-1px" href="javascript:;">
          <span class="label-wrap">
            <img class="icon-left" src="./image/icon_wd_wallet@2x.png" alt="">
            <i class="label-wallet">我的钱包(元)</i>
          </span>
          <span class="value-wrap">
            <i class="value-wallet">{{ totalPrice | toThousands }}</i>
          </span>
        </a>
        <router-link class="border-bottom-1px" :to="{path: '/partner/wallet'}">
          <span class="label-wrap">
            <i class="label">累计收入(元)：{{ totalSumPrice | toThousands }}</i>
          </span>
          <span class="value-wrap">
            <i class="value">详情</i>
            <img class="icon-right" src="./image/btn_next@2x.png" alt="">
          </span>
        </router-link>
        <router-link :to="{path: '/partner/sale'}">
          <span class="label-wrap">
            <i class="label">我已累计放款(元)：{{ userInfo.totalOrderPrice | toThousands }}</i>
          </span>
          <span class="value-wrap">
            <i class="value">详情</i>
            <img class="icon-right" src="./image/btn_next@2x.png" alt="">
          </span>
        </router-link>
      </div>
    </div>
    <div class="menu-wrap">
      <a class="compact" href="javascript:;" @click="funJumpCompact">
        <span class="label-wrap">
          <img class="icon-left" src="./image/icon_wd_compact@2x.png" alt="">
          <i class="label">合伙人协议</i>
        </span>
        <span class="value-wrap" v-show="userInfo.contractEndTime">
          <i class="value">{{ userInfo.contractEndTime }}到期</i>
          <img class="icon-right" src="./image/btn_next@2x.png" alt="">
        </span>
      </a>
      <a class="customer-service" href="javascript:;" v-show="userInfo.kefuPhone">
        <span class="label-wrap">
          <img class="icon-left" src="./image/icon_wd_key@2x.png" alt="">
          <i class="label">我的专属客服</i>
        </span>
        <a class="value-wrap" :href="userInfo.kefuPhone ? 'tel:' + userInfo.kefuPhone : 'javascript:;'">
          <i class="label">{{ userInfo.kefuName }}</i>
          <img class="icon-phone" src="./image/btn_phone@2x.png" alt="" v-show="userInfo.kefuPhone">
        </a>
      </a>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
import { walletList } from '@/views/partner/wallet/api'

export default {
  name: 'mine',
  data () {
    return {
      totalPrice: 0,
      totalSumPrice: 0
    }
  },
  async mounted () {
    await this.$nextTick()
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.totalPrice = 0
      this.totalSumPrice = 0
      this.funFetch()
    }
    this.$nextTick(() => {
      this.$refreshTitle('我的')
    })
    this.$route.meta.isUseCache = false
  },
  computed: {
    ...mapGetters({
      userInfo: 'partnerMine/userInfo'
    })
  },
  methods: {
    funJumpCompact () {
      if (!this.userInfo.contractEndTime) {
        Toast('合同不存在')
        return
      }
      this.$router.push({ path: '/partner/compact' })
    },
    funFetch () {
      const vm = this
      walletList().then(response => {
        if (response.status) {
          const { totalPrice, totalSumPrice } = response.data
          vm.totalPrice = totalPrice
          vm.totalSumPrice = totalSumPrice
        } else {
          Toast(response.msg)
        }
      }).catch(() => {
        Toast('出错啦')
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    if (['partnerSale', 'partnerCompact', 'partnerCustomer', 'partnerAll'].includes(to.name)) {
      from.meta.isUseCache = true
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
.conatainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 200px;
  min-height: 100vh;
  background: #fff url("./image/header_bg@2x.png") center top/100% 220px no-repeat;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 17px;
}

.avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
  }
}

.name-wrap {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.name {
  line-height: 25px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.phone {
  margin-left: 8px;
  line-height: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 355px;
  margin-top: 34px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);

  a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 298px;

    &:nth-of-type(1) {
      padding: 17px 0 15px;
      @include border-bottom-1px(#E0E0E0);
    }

    &:nth-of-type(2) {
      padding: 15px 0 18px;
      @include border-bottom-1px(#E0E0E0);
    }

    &:nth-of-type(3) {
      padding: 16px 0 20px;
    }
  }

  .label-wrap,
  .value-wrap {
    display: flex;
    align-items: center;
  }

  .icon-left {
    width: 24px;
    height: 24px;
  }

  .label-wallet {
    margin-left: 8px;
    line-height: 27px;
    font-size: 19px;
    font-weight: 500;
    color: #333;
  }

  .label {
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  .value-wallet {
    line-height: 42px;
    font-size: 30px;
    font-weight: 500;
    color: #EE0A23;
  }

  .value {
    line-height: 20px;
    font-size: 14px;
    color: #999;
  }

  img {
    width: 22px;
    height: 22px;
  }
}

.menu-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 24px;

  .compact,
  .customer-service {
    display: flex;
    justify-content: space-between;
    width: 355px;
    box-shadow: 0 2px 0 -1px rgba(224, 224, 224, 0.5);
  }

  .compact {
    padding: 23px 0;
  }

  .customer-service {
    padding: 25px 0 15px;
  }

  .label-wrap,
  .value-wrap {
    display: flex;
    align-items: center;
  }

  .label {
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .value {
    line-height: 20px;
    font-size: 14px;
    color: #999;
  }

  .icon-left {
    width: 20px;
    height: 20px;
    margin-right: 12px;
  }

  .icon-right {
    width: 22px;
    height: 22px;
    margin-left: 6px;
  }

  .icon-phone {
    width: 40px;
    height: 40px;
    margin-left: 7px;
  }
}
</style>
