<template>
  <div class="personalContainer">
    <navBar />
    <div class="headCard">
      <p>您好，</p>
      <p>当前帐号：{{ phoneNo }}</p>
      <p>业务员：{{ name }}</p>
    </div>
    <div class="operationList">
      <div class="item" @click="linkTo(1)">
        <img src="@/assets/images/promotion/operation.png" />
        <div class="desc">办理礼品卡充值业务</div>
        <cr-icon type="arrow" class="arrow icon" />
      </div>
      <div class="item" @click="linkTo(2)">
        <img src="@/assets/images/promotion/records.png" />
        <div class="desc">办理业务记录</div>
        <cr-icon type="arrow" class="arrow icon" />
      </div>
    </div>
  </div>
</template>
<script>
import navBar from './components/navBar.vue';
import { getGroupPushUserInfo } from '@/api/promotion';

export default {
  components: {
    navBar
  },
  data() {
    return {
      name: '',
      phoneNo: ''
    };
  },
  created() {
    this.getSalesManInfo();
  },
  methods: {
    async getSalesManInfo() {
      // 获取业务员信息
      const [info] = await getGroupPushUserInfo();
      if (info) {
        this.name = info.salesmanName;
        this.phoneNo = info.mobile;
      }
    },
    linkTo(type) {
      /**
       * type
       * 1: 办理业务
       * 2: 业务记录
       */
      this.$router.push({
        name: type == 1 ? 'PromotionHandle' : 'PromotionRecords'
      });
    }
  }
};
</script>

<style scoped lang="less">
.personalContainer {
  width: 100%;
  height: 100%;
  padding-top: 45px;
  box-sizing: border-box;
  .headCard {
    width: 375px;
    height: 130px;
    background: url(~@/assets/images/promotion/promotion-personal-bg.png) no-repeat;
    background-size: cover;
    padding-left: @padding-lg;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: @padding-sm;
    padding-top: @padding-sm;
    box-sizing: border-box;
    p {
      margin-top: @padding-unit;
      .text-size(14);
      color: @white;
      letter-spacing: -0.11px;
      &:first-child {
        margin-top: 0;
        .text-size(18);
        letter-spacing: -0.15px;
      }
    }
  }
  .operationList {
    width: 100%;
    background: @white;
    padding-left: @padding-lg;
    box-sizing: border-box;
    .item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 64px;
      padding-left: @padding-xs;
      padding-right: @padding-lg;
      box-sizing: border-box;
      border-bottom: 1px solid @grey-border;
      img {
        flex-shrink: 0;
        max-width: 20px;
        max-height: 20px;
        margin-right: @padding-xs;
      }
      .icon {
        color: @gray-3;
      }
      .desc {
        flex: 1;
        color: @black;
        .text-size(16);
      }
    }
  }
}
</style>
