<template>
  <div class="form-wrap">
    <div class="table-box">
      <el-tabs v-model="activeName">
        <el-tab-pane
          name="OrderStatistics">
          <span slot="label">
            按票种
            <Tip msg="包含线上线下所有渠道的门票销售汇总，按照票种类型统计销售信息。（线上会员也包含在内，可在【票种列表】中将线上会员剔除，获得所有门票销售汇总）"></Tip>
          </span>

          <OrderStatistics v-show="activeName==='OrderStatistics'"></OrderStatistics>
        </el-tab-pane>

        <el-tab-pane
          name="OrderStatisticsBySaleChannel">
          <span slot="label">
            {{ projectName==='czg'?'按预约途径':'按销售渠道' }}
            <Tip msg="包含线上线下所有渠道的门票销售汇总，按照销售渠道统计销售信息（线上会员也包含在内，可在【票种】中将线上会员剔除，获得所有门票销售汇总）"></Tip>
          </span>

          <OrderStatisticsBySaleChannel v-show="activeName==='OrderStatisticsBySaleChannel'"></OrderStatisticsBySaleChannel>
        </el-tab-pane>

        <el-tab-pane
          name="OrderStatisticsByManager">
          <span slot="label">
            按售票员
            <Tip msg="包含线下即窗口所有售票员的门票销售汇总，按照售票员统计销售信息。"></Tip>
          </span>

          <OrderStatisticsByManager v-show="activeName==='OrderStatisticsByManager'"></OrderStatisticsByManager>
        </el-tab-pane>

        <el-tab-pane
          label="按时间"
          name="OrderStatisticsByDate">
          <span slot="label">
            按时间
            <Tip msg="包含线上线下所有渠道的门票销售汇总，按时间统计销售信息，可分天、周、月、年统计，图形数据导出后可获得表格数据。（线上会员也包含在内，可在【票种】中将线上会员剔除，获得所有门票销售汇总）"></Tip>
          </span>

          <OrderStatisticsByDate v-show="activeName==='OrderStatisticsByDate'"></OrderStatisticsByDate>
        </el-tab-pane>

        <el-tab-pane
          label="按团散（图表）"
          name="GroupIndividualChart">
          <GroupIndividual v-show="activeName==='GroupIndividualChart'"></GroupIndividual>
        </el-tab-pane>

        <el-tab-pane
          :label="projectName==='czg'?'按预约途径（图表）':'按销售渠道（图表）'"
          name="SaleChannelChart">
          <SaleChannelChart v-show="activeName==='SaleChannelChart'"></SaleChannelChart>
        </el-tab-pane>

        <el-tab-pane
          :label="projectName==='czg'?'按门票会员预约占比（图表）':'按门票会员销售额占比（图表）'"
          name="MemberMoneyPercent">
          <MemberMoneyPercent v-show="activeName==='MemberMoneyPercent'"></MemberMoneyPercent>
        </el-tab-pane>

        <el-tab-pane
          :label="projectName==='czg'?'预约同比分析（图表）':'销售同比分析（图表）'"
          name="SaleYearOnYear">
          <SaleYearOnYear v-show="activeName==='SaleYearOnYear'"></SaleYearOnYear>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import OrderStatistics from './salesStatistic/OrderStatistics'
import OrderStatisticsByManager from './salesStatistic/OrderStatisticsByManager'
import OrderStatisticsBySaleChannel from './salesStatistic/OrderStatisticsBySaleChannel'
import OrderStatisticsByDate from './salesStatistic/OrderStatisticsByDate'
import GroupIndividual from './salesStatistic/GroupIndividual'
import SaleChannelChart from './salesStatistic/SaleChannelChart'
import MemberMoneyPercent from './salesStatistic/MemberMoneyPercent'
import SaleYearOnYear from './salesStatistic/SaleYearOnYear'
import Tip from '@/components/Tip'

export default {
  name: 'salesStatistic',
  components: {
    Tip,
    OrderStatistics,
    OrderStatisticsByManager,
    OrderStatisticsBySaleChannel,
    OrderStatisticsByDate,
    GroupIndividual,
    SaleChannelChart,
    MemberMoneyPercent,
    SaleYearOnYear
  },
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      activeName: 'OrderStatistics'
    }
  },
  watch: {
    activeName (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.table-box{
  border: 0;
  ::v-deep .el-tabs__nav-wrap{
   padding: 0 24px;
  }
}
</style>
