<template>
  <div>
    <el-table
      border
      align="center"
      :header-cell-style="{background:'#5f5f5f',color:'#fff'}"
      :data="list"
      size="mini"
      :row-class-name="tableRowClassName"
      :span-method="arraySpanMethod">
      <el-table-column min-width="180" prop="wait_join_num" align="left" fixed="left" label="期数总状况">
        <template slot-scope="scope">
          期数名称：{{scope.row.title=='合计' ? '合计' : periodName(scope.row)}}
          <br />
          开始时间：{{scope.row.start_at}}
          <br />
          团购待进班人数：{{scope.row.wait_join_num}}
          <br />
          外部订单待进班人数：{{scope.row.other_wait_join_num}}
          <br />
          总进班人数：{{scope.row.total_join_num}}
          <br />
          需求供量：{{scope.row.total_max_join_num}}
          <br />
          目标差距：{{scope.row.target_diff < 0 ? '超标'+scope.row.target_diff * -1 :scope.row.target_diff}}个
          <br />完成率：
          <el-progress
            style="display: inline-block;width: calc(90% - 50px)"
            :text-inside="true"
            :stroke-width="16"
            :status="scope.row.complete_rate>=1?'exception':'success'"
            :percentage="scope.row.complete_rate*1000/10"
          ></el-progress>
        </template>
        <!-- exception -->
      </el-table-column>
      <el-table-column prop="class_name" align="center" min-width="80" fixed="left" label="班级名称">
        <template slot-scope="scope">{{scope.row.title === '合计'?'合计':scope.row.class_name}}</template>
      </el-table-column>
      <el-table-column prop="max_join_num" min-width="60" align="center" label="预计加入人数"></el-table-column>
      <el-table-column prop="join_num" min-width="60" align="center" label="已进班人数"></el-table-column>
      <el-table-column prop="other_allot_num" align="center" min-width="60" label="外部订单已分配人数"></el-table-column>
      <el-table-column v-for="(data,index) in dateList" align="center" :key="index" :label="data">
        <el-table-column align="center" min-width="60px" prop="wait_join_num" label="系统招生量">
          <template slot-scope="scope">{{scope.row.date[index].total_buy_num}}</template>
        </el-table-column>
        <el-table-column align="center" min-width="60px" prop="wait_join_num" label="外部订单招生量">
          <template slot-scope="scope">{{scope.row.date[index].total_other_buy_num}}</template>
        </el-table-column>
        <el-table-column align="center" min-width="60px" label="进班量">
          <template slot-scope="scope">{{scope.row.date[index].total_into_num}}</template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getPeriodsClassCurDataApi } from "../../service/api";
export default {
  name: "index",
  data() {
    return {
      list: [],
      dateList: [],
      propertyList: [
        "title",
        "start_at",
        "total_join_num",
        "total_max_join_num",
        "total_target_join_num",
        "complete_rate",
        "target_diff",
        "wait_join_num",
        "other_wait_join_num"
      ]
    };
  },
  methods: {
    periodName(val) {
      let str = '';
      if (val.goods_id) {
        str += `【${val.goods_id}】`
      }
      if (val.title) {
        str += `${val.title}`
      }
      if (val.watch_num) {
        str += `${val.watch_num}课时`
      }
      if (val.start_at) {
        str += `（${val.start_at.slice(5).replace('-', '')}）`
      }
      if (val.has_watch_num || val.has_watch_num == 0) {
        str += `-d${val.has_watch_num}`
      }
      return str
    },
    initPage() {
      getPeriodsClassCurDataApi().then(res => {
        this.list = res;
        if (res[0].date) {
          res[0].date.forEach(i => {
            this.dateList.push(i.pay_date);
          });
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "warning-row";
      }
      return "";
    },
    arraySpanMethod(data) {
      if (this.propertyList.indexOf(data.column.property) > -1) {
        if (
          data.rowIndex === 0 ||
          data.row.id !== this.list[data.rowIndex - 1].id
        ) {
          let rowspan = 1;
          for (let i = data.rowIndex + 1; i < this.list.length; i++) {
            if (data.row.id === this.list[i].id) {
              rowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan: rowspan,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    }
  },
  created() {
    this.initPage();
  }
};
</script>

<style scoped lang="less">
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fff;
}
/deep/ .el-table .warning-row {
  background: oldlace;
}
/deep/.el-progress-bar__inner {
  max-width: 100% !important;
}
.el-main .content .router-block .child-view {
  height: 100vh;
}
</style>