<template>
  <el-tabs v-model="activeName" class="order-tab">
    <!-- <el-tab-pane label="全部订单(61)" name="all">用户管理</el-tab-pane> -->
    <el-tab-pane :label="`门店订单(${orderCount.numOfSale || 0})`" name="store">
      <div class="order-report">
        <div class="order-report-item" v-for="(el, index) in storeOrderReport" :key="index">
          <div class="order-report-label">{{ el.label }}</div>
          <div class="order-report-value" v-if="el.type == 'int'">{{ el.value || 0 }}</div>
          <div class="order-report-value" v-else-if="el.type == 'date'">{{ el.value | formatYMD }}</div>
          <div class="order-report-value" v-else>{{ el.value | fomatFloat }}</div>
        </div>
      </div>
      <order-table tab="store"></order-table>
    </el-tab-pane>
    <el-tab-pane :label="`达摩微商城(${orderCount.wechatMallNum || 0})`" name="demo">
      <order-table tab="demo"></order-table>
    </el-tab-pane>
    <el-tab-pane :label="`微盟订单(${orderCount.weimobMallNum || 0})`" name="weimob">
      <order-table tab="weimob"></order-table>
    </el-tab-pane>
    <el-tab-pane :label="`天猫订单(${orderCount.numOfTmall || 0})`" name="tmall">
      <order-table tab="tmall"></order-table>
    </el-tab-pane>
    <el-tab-pane :label="`抖音订单(${orderCount.numOfDouYin || 0})`" name="douyin">
      <order-table tab="douyin"></order-table>
    </el-tab-pane>
    <el-tab-pane :label="`其他订单(${orderCount.otherMallNum || 0})`" name="other">
      <order-table tab="other"></order-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import url from '../axios/url.js';
import { doFetch } from '../../components/axios/api';
import OrderTable from './order-list/order-table.vue';
export default {
  name: 'OrderList',
  components: { OrderTable },
  data() {
    return {
      activeName: 'store',
      memberId: '',
      orderCount: {
        // 客户订单
        numOfCustomer: '',
        // 门店订单
        numOfSale: '',
        // 达摩微商城
        wechatMallNum: '',
        // 微盟订单
        weimobMallNum: '',
        // 天猫订单
        numOfTmall: '',
        // 抖音订单
        numOfDouYin: '',
        // 其它订单
        otherMallNum: ''
      },
      storeOrderReport: [
        { label: '消费总额(实付)', key: 'costFeePaid', type: 'amount', value: 0 },
        { label: '消费总额(应收)', key: 'costFee', type: 'amount', value: 0 },
        { label: '消费次数', key: 'costTimes', type: 'int', value: 0 },
        { label: '最近消费时间', key: 'lastCostTime', type: 'date', value: '' },
        { label: '客单价', key: 'avgCost', type: 'amount', value: 0 },
        { label: '连带率', key: 'relatedPercent', type: 'float', value: 0 },
        { label: '件单价', key: 'avgGoodsCost', type: 'amount', value: 0 },
        { label: '最高单笔(实付)', key: 'highCostPaid', type: 'amount', value: 0 },
        { label: '最高单笔(应收)', key: 'highCost', type: 'amount', value: 0 },
        { label: '平均折扣', key: 'avgDiscount', type: 'float', value: 0 },
      ]
    }
  },
  created() {
    this.activeName = this.$route.query.tab || 'store';
    this.memberId = this.$route.query.memberId;
    this.getMemberInfo();
    this.getStoreReportData();
  },
  methods: {
    getMemberInfo() {
      const param = { memberId: this.memberId, pageName: 'allCustomer' };
      doFetch(url.memberLoadmemberInfo, param).then(res => {
        const { result } = res.data;
        const { numOfCustomer, numOfSale, wechatMallNum, weimobMallNum, numOfTmall, numOfDouYin, otherMallNum } = result.memberInfo || {};
        this.orderCount = { numOfCustomer, numOfSale, wechatMallNum, weimobMallNum, numOfTmall, numOfDouYin, otherMallNum };
      })
    },
    getStoreReportData() {
      doFetch(url.ajaxMembersInfo, { memberId: this.memberId }).then(res => {
        const { result } = res.data || {};
        const memberInfo = result.memberInfo || {};
        this.storeOrderReport.forEach(el => {
          el.value = memberInfo[el.key];
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.order-tab {
  height: 100%;

  /deep/ .el-tabs__header {
    margin-bottom: 20px;
    .el-tabs__nav-wrap {
      padding: 0 20px;
    }
  }
  /deep/ .el-tabs__content {
    padding: 0 20px 20px;
    height: calc(100% - 60px);
    overflow-y: auto;
    box-sizing: border-box;
  }
}
.order-report {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px 15px;
  height: 86px;
  background: #F7F8FA;
  border-radius: 4px;
  box-sizing: border-box;
  .order-report-item {
    flex-shrink: 0;
    .order-report-label {
      font-size: 14px;
      font-weight: 400;
      color: #606266;
      line-height: 20px;
    }
    .order-report-value {
      margin-top: 5px;
      font-size: 20px;
      font-weight: bold;
      color: #303133;
      line-height: 26px;
      font-family: DIN Alternate;
    }
  }
}
</style>
