<template>
  <div class="orderListBox" :style="activeName != 'store' ? 'margin-top: -20px;' : ''">
    <div class="orderListTop"  v-if="activeName == 'store'">
      <div class="order-report-content">
        <div class="order-content-left">
          <div class="order-report-title">消费数据概览</div>
          <p style="margin-bottom: 13px;">
            <img src="../../../static/img/编组 3@2x(1).png" alt="">
            <span>全渠道</span>
          </p>
          <p>
            <img src="../../../static/img/编组 3@2x.png" alt="">
            <span>门店订单</span>
          </p>
        </div>
        <div class="order-content-right">
          <!-- 上 -->
          <div class="order-report-box">
            <div class="order-report-item">
              <div class="order-report-label" style="width:118px">消费总额/实付</div>
              <div class="order-report-label" style="width:96px">消费次数</div>
              <div class="order-report-label" style="width:124px">最近消费时间</div>
              <div class="order-report-label" style="width:82px">客单价</div>
              <div class="order-report-label" style="width:82px">连带率</div>
              <div class="order-report-label" style="width:131px">最高单笔/实付</div>
              <div class="order-report-label" style="width:87px">平均折扣</div>
              <div class="order-report-label" style="width:130px">消费总额/应收</div>
              <div class="order-report-label" style="width:70px">件单价</div>
              <div class="order-report-label" style="width:91px">最高单笔/应收</div>
            </div>
          </div>
          <div style="display:flex;padding-top:3px">
            <!-- 中 -->
            <div class="order-report-middle">
              <div class="order-report-value" style="width:118px">{{ allOrderReport[0].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:96px">{{ allOrderReport[1].value || 0 }}</div>
              <div class="order-report-value" style="width:124px">{{ allOrderReport[2].value | formatYMD }}</div>
              <div class="order-report-value" style="width:82px">{{ allOrderReport[3].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:82px">{{ allOrderReport[4].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:131px">{{ allOrderReport[5].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:87px">{{ allOrderReport[6].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:130px">{{ allOrderReport[7].value | fomatFloatN }}</div>
              <div class="order-report-value" style="width:70px">{{ allOrderReport[8].value | fomatFloatN }}</div>
              <div class="order-report-value" style="width:91px">{{ allOrderReport[9].value | fomatFloatN }}</div>
            </div>
          </div>
          <div style="display:flex">
            <!-- 下 -->
            <div class="order-report-bottom">
              <div class="order-report-value" style="width:118px">{{ storeOrderReport[0].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:96px">{{ storeOrderReport[1].value || 0 }}</div>
              <div class="order-report-value" style="width:124px">{{ storeOrderReport[2].value | formatYMD }}</div>
              <div class="order-report-value" style="width:82px">{{ storeOrderReport[3].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:82px">{{ storeOrderReport[4].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:131px">{{ storeOrderReport[5].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:87px">{{ storeOrderReport[6].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:130px">{{ storeOrderReport[7].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:70px">{{ storeOrderReport[8].value | fomatFloat }}</div>
              <div class="order-report-value" style="width:91px">{{ storeOrderReport[9].value | fomatFloat }}</div>
            </div>
          </div>
        </div>
        <!-- <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> -->
      </div>
    </div>
    <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">
        <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>
</div>
</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: '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: 'highCostPaid', type: 'amount', value: 0 },
        { label: '平均折扣', key: 'avgDiscount', type: 'float', value: 0 },
        { label: '消费总额(应收)', key: 'costFee', type: 'amount', value: 0 },
        { label: '件单价', key: 'avgGoodsCost', type: 'amount', value: 0 },
        { label: '最高单笔(应收)', key: 'highCost', type: 'amount', value: 0 },
      ],
      allOrderReport: [
        { label: '消费总额(实付)', key: 'costFeePaid', 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: 'highCostPaid', type: 'amount', value: 0 },
        { label: '平均折扣', key: 'avgDiscount', type: 'float', value: 0 },
        { label: '消费总额(应收)', key: 'costFee', type: 'amount', value: 0 },
        { label: '件单价', key: 'avgGoodsCost', type: 'amount', value: 0 },
        { label: '最高单笔(应收)', key: 'highCost', type: 'amount', value: 0 },
      ]
    }
  },
  created() {
    this.activeName = this.$route.query.tab || 'store';
    this.memberId = this.$route.query.memberId;
    this.getMemberInfo();
    this.getStoreReportData();
    this.getAllReportData();
  },
  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 };
      })
    },
    // 全渠道
    getAllReportData() {
      doFetch(url.ajaxMembersInfo, { memberId: this.memberId, orderType: 0 }).then(res => {
        const { result } = res.data || {};
        const memberInfo = result.memberInfo || {};
        this.allOrderReport.forEach(el => {
          el.value = memberInfo[el.key];
        });
      });
    },
    // 门店
    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>
  .orderListBox {
    background: #FFFFFF;
    .orderListTop {
      background: #F7F8FA;
      margin: 20px;
      margin-bottom: -10px;
      
      .order-report-content {
        display: flex;
        .order-content-left {
          box-sizing: border-box;
          padding: 18px 0 16px 12px;
          width: 110px;
          border-right: 1px solid #DCDFE6;
          .order-report-title {
            padding-bottom: 14px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #303133;
          }
          p {
            display: flex;

            height: 24px;
            img {
              width: 24px;
              height: 24px;
              margin-right: 6px;
            }
            span {
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #303133;
              line-height: 24px;
            }
          }
        }
        .order-content-right {
          flex: 1;
          margin: 16px 27px 18px 18px;
          .order-report-box {
              flex: 1;
              line-height: 20px;
              margin-bottom: 10px;
              .order-report-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .order-report-label {
                  font-size: 14px;
                  font-weight: 400;
                  color: #606266;
                  line-height: 20px;
                }
            }
          }
          .order-report-middle {
            margin-bottom: 16px;
          }
          .order-report-middle, .order-report-bottom {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // .order-report-item {
            //   flex-shrink: 0;
              .order-report-value {
                // margin-top: 12px;
                font-size: 18px;
                font-family: DIN Alternate;
                font-weight: bold;
                color: #303133;
                line-height: 21px;
              }
            // }
          }
        }
      }
    }
  }
.order-tab {
  height: 100%;

  /deep/ .el-tabs__header {
    margin: 20px;
    .el-tabs__nav-wrap {
      // padding: 0 20px;
    }
  }
  /deep/ .el-tabs__content {
    padding: 0 20px 20px;
    padding-bottom: 10px;
    height: calc(100% - 60px);
    overflow-y: auto;
    box-sizing: border-box;
  }
}
// .order-report {
//   flex: 1;
//   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: 12px;
//       font-size: 18px;
//       font-weight: bold;
//       color: #303133;
//       line-height: 21px;
//       font-family: DIN Alternate;
//     }
//   }
// }
</style>
