<template>
  <div>
    <el-table
      border
      align="center"
      :header-cell-style="{background:'#5f5f5f',color:'#fff'}"
      :data="list"
      height="calc(100vh - 60px)"
      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}}
          <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:{
      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>