<template>
  <div class="Contrast">
    <div class="header">
      <span>报名数据对比</span>
    </div>
    <Chart
      :data="{
        x: { name: '赛季', value: data1.map(e => `第${e.season}赛季`) },
        y: { '销售主管': data1.map(e => e.tj), '销售经理': data1.map(e => e.top), '报名人数': data1.map(e => e.all) }
      }"
      title="报名数据对比"
      unit="人"
    />
    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 12px">报名数据对比详情</div>
    <el-table :data="data1" border>
      <el-table-column label="赛季" prop="season" align="center" width="54" />
      <el-table-column label="销售主管" prop="tj" align="center" />
      <el-table-column label="销售经理" prop="top" align="center" />
      <el-table-column label="报名人数" prop="all" align="center" />
    </el-table>
    <div class="header">
      <span>销售数量对比</span>
    </div>
    <Chart
      :data="{
        x: { name: '赛季', value: data2.map(e => `第${e.season}赛季`) },
        y: { '精装版': data2.map(e => e.hard), '简约版': data2.map(e => e.simple), '老人版': data2.map(e => e.old), '合计': data2.map(e => e.all) }
      }"
      title="销售数量对比"
      unit="套"
    />
    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 12px">销售数量对比详情</div>
    <el-table :data="data2" border>
      <el-table-column label="赛季" prop="season" align="center" width="54" />
      <el-table-column label="精装版" prop="hard" align="center" />
      <el-table-column label="简约版" prop="simple" align="center" />
      <el-table-column label="老人版" prop="old" align="center" />
      <el-table-column label="合计" prop="all" align="center" />
    </el-table>
    <div class="header">
      <span>销售金额对比</span>
    </div>
    <Chart
      :data="{
        x: { name: '赛季', value: data2.map(e => `第${e.season}赛季`) },
        y: { '精装版': data2.map(e => e.hard_money), '简约版': data2.map(e => e.simple_money), '老人版': data2.map(e => e.old_money), '合计': data2.map(e => e.money) }
      }"
      title="销售金额对比"
      unit="元"
    />
    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 12px">销售金额对比详情</div>
    <el-table :data="data2" border>
      <el-table-column label="赛季" prop="season" align="center" width="54" />
      <el-table-column label="精装版" prop="hard" align="center" />
      <el-table-column label="简约版" prop="simple" align="center" />
      <el-table-column label="老人版" prop="old" align="center" />
      <el-table-column label="合计" prop="all" align="center" />
    </el-table>
    <div class="header">
      <span>人均销售对比</span>
    </div>
    <Chart
      :data="{
        x: { name: '赛季', value: data3.map(e => `第${e.season}赛季`) },
        y: { '人均销售': data3.map(e => e.per_capita) }
      }"
      title="人均销售对比"
      unit="套"
    />
    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 12px">人均销售对比详情</div>
    <el-table :data="data3" border>
      <el-table-column label="赛季" prop="season" align="center" width="54" />
      <el-table-column label="人均销售量" prop="per_capita" align="center" />
    </el-table>
    <div class="header">
      <span>销售人员占比对比</span>
    </div>
    <Chart
      :data="{
        x: { name: '赛季', value: data4.map(e => `第${e.season}赛季`) },
        y: { '销售主管': data4.map(e => +e.tj.replace('%', '')), '销售经理': data4.map(e => +e.top.replace('%', '')), '总人数': data4.map(e => +e.all.replace('%', '')) }
      }"
      title="销售人员占比对比"
      unit="%"
    />
    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 12px">销售人员占比对比详情</div>
    <el-table :data="data4" border>
      <el-table-column label="赛季" prop="season" align="center" width="54" />
      <el-table-column label="销售主管" prop="tj" align="center" />
      <el-table-column label="销售经理" prop="top" align="center" />
      <el-table-column label="总人数" prop="all" align="center" />
    </el-table>
    <div class="header">
      <span>各级别销售数量占比</span>
    </div>
    <Chart
      :data="{
        x: { name: '赛季', value: data5.map(e => `第${e.season}赛季`) },
        y: { '销售主管': data5.map(e => +e.tj.replace('%', '')), '销售经理': data5.map(e => +e.top.replace('%', '')) }
      }"
      title="各级别销售数量对比"
      unit="%"
    />
    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 12px">各级别销售数量对比详情</div>
    <el-table :data="data5" border>
      <el-table-column label="赛季" prop="season" align="center" width="54" />
      <el-table-column label="销售主管" prop="tj" align="center" />
      <el-table-column label="销售经理" prop="top" align="center" />
    </el-table>
  </div>
</template>

<script>
import Chart from './Chart'
// import { api_Data1, api_Data2, api_Data3, api_Data4, api_Data5 } from '@/api/data'
export default {
  name: 'Contrast',
  components: { Chart },
  data() {
    return {
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: []
    }
  },
  mounted() {
    this._loading = this.$loading()
    // Promise.all([api_Data1(), api_Data2(), api_Data3(), api_Data4(), api_Data5()]).then(([
    //   { data: { list: data1 }},
    //   { data: { list: data2 }},
    //   { data: { list: data3 }},
    //   { data: { list: data4 }},
    //   { data: { list: data5 }}]) => {
    //   this.data1 = data1
    //   this.data2 = data2
    //   this.data3 = data3
    //   this.data4 = data4
    //   this.data5 = data5
    //   this.$nextTick(() => this._loading.close())
    // })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  .Contrast {
    .header {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #43464D;
      font-size: 16px;
      font-weight: bold;
      box-sizing: border-box;
      padding: 0 40px;
      background: #FAFAFA;
      border-bottom: 1px solid #dfe6ec;
    }
  }
</style>
