<template>
  <el-tabs v-model="activeName" class="order-tab">
    <!-- <el-tab-pane label="全部订单(61)" name="all">用户管理</el-tab-pane> -->
    <el-tab-pane label="门店订单(10)" 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">{{ el.value }}</div>
        </div>
      </div>
      <order-table tab="store"></order-table>
    </el-tab-pane>
    <el-tab-pane label="达摩微商城{20}" name="demo">
      <order-table tab="demo"></order-table>
    </el-tab-pane>
    <el-tab-pane label="微盟订单()" name="weimob">
      <order-table tab="weimob"></order-table>
    </el-tab-pane>
    <el-tab-pane label="天猫订单()" name="tmall">
      <order-table tab="tmall"></order-table>
    </el-tab-pane>
    <el-tab-pane label="抖音订单()" name="douyin">
      <order-table tab="douyin"></order-table>
    </el-tab-pane>
    <el-tab-pane label="其他订单()" name="other">
      <order-table tab="other"></order-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import OrderTable from './order-list/order-table.vue';
export default {
  name: 'OrderList',
  components: { OrderTable },
  data() {
    return {
      activeName: 'store',
      storeOrderReport: [
        { label: '消费总额(实付)', value: '500.04' },
        { label: '消费总额(应收)', value: '500.04' },
        { label: '消费次数', value: '11' },
        { label: '最近消费时间', value: '2022-05-23' },
        { label: '客单价', value: '45.46' },
        { label: '连带率', value: '1.82' },
        { label: '件单价', value: '25.00' },
        { label: '最高单笔(实付)', value: '1000.00' },
        { label: '最高单笔(应收)', value: '1000.00' },
        { label: '平均折扣', value: '0.03' },
      ]
    }
  },
  created() {
    this.activeName = this.$route.query.tab || 'store';
  }
}
</script>

<style lang="scss" scoped>
.order-tab {
  /deep/ .el-tabs__header {
    margin-bottom: 20px;
    .el-tabs__nav-wrap {
      padding: 0 20px;
    }
  }
  /deep/ .el-tabs__content {
    padding: 0 20px 20px;
  }
}
.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: 22px;
      font-weight: bold;
      color: #303133;
      line-height: 26px;
    }
  }
}
</style>
