<template>
  <div class="index">
    <el-form ref="searchFrom" :model="searchFrom" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="时间">
            <el-date-picker
              v-model="searchFrom.watchTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item style="float: right">
            <el-button type="primary" @click="getList">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        v-for="(data, index) in tableHead"
        :key="data"
        :label="data"
      >
        <template slot-scope="scope">
          <div @click="toDetail(scope.row.cur_date,index,scope.row[index])" v-if="index!=='cur_date'" class="link">
            {{ scope.row[index]}}
          </div>
          <span v-if="index==='cur_date'"> {{ scope.row[index]}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="详情"
               :visible.sync="dialogVisible"
               width="80%">
      <div v-loading="dialogLoading">
        <el-row class="dialog-tips">
          <el-col :span="5" class="text-r">
            时间：
          </el-col>
          <el-col :span="3" class="">
            <div :title="dialog.time">
              {{dialog.time}}
            </div>
          </el-col>
          <el-col :span="5" class="text-r">
            状态：
          </el-col>
          <el-col :span="3" class="">
            <div :title="dialog.name">
              {{dialog.name}}
            </div>
          </el-col>
          <el-col :span="5" class="text-r">
            总数：
          </el-col>
          <el-col :span="3" class="">
            <div :title="dialog.total">
              {{dialog.total}}
            </div>
          </el-col>
          <el-col :span="5" class="text-r">
            进系统人数：
          </el-col>
          <el-col :span="3" class="">
            <div :title="dialog.inNum">
              {{dialog.inNum}}
            </div>
          </el-col>
          <el-col :span="5" class="text-r">
            注册数：
          </el-col>
          <el-col :span="3" class="">
            <div :title="dialog.register">
              {{dialog.register}}
            </div>
          </el-col>
          <el-col :span="5" class="text-r">
            有课人数：
          </el-col>
          <el-col :span="3" class="">
            <div :title="dialog.course">
              {{dialog.course}}
            </div>
          </el-col>
          <div v-for="(data,index) in dialog.code" :key="data.source_name">
            <el-col :span="5" class="text-r">
              <div :title="data.source_name">
                {{data.source_name}}：
              </div>
            </el-col>
            <el-col :span="3" class="" >
              {{data.source_num}}
            </el-col>
          </div>
          <div v-for="(data,index) in dialog.coursesList" :key="data.courses_name">
            <el-col :span="5" class="text-r">
              <div :title="data.courses_name">
                {{data.courses_name}}：
              </div>
            </el-col>
            <el-col :span="3" class="">
              {{data.courses_num}}
            </el-col>
          </div>
        </el-row>
        <el-table
          :data="dialog.list"
          style="width: 100%">
          <el-table-column
            prop="nickname"
            label="昵称">
          </el-table-column>
          <el-table-column
            prop="user_id"
            label="老系统用户ID">
          </el-table-column>
          <el-table-column
            prop="title"
            label="课程名称">
          </el-table-column>
          <el-table-column
            prop="instructor"
            label="开课日期">
          </el-table-column>
          <el-table-column
            prop="source_title"
            label="来源名称">
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="注册时间">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getWatchListApi,getStatisticsDetailApi} from "../../service/api";
  export default {
    name: "index",

    data(){
      return {
        searchFrom: {
          watchTime: []
        },
        dialogLoading:false,
        dialogVisible:false,
        tableData: [],
        dialog:{
          list:[],
          total:0,
          register:0,
          coursesList:[],
          course:0,
          time:'',
          name:'',
          codeList:[],
          inNum:0
        },
        tableHead:{}
      }
    },
    methods: {
      defaultTime(){
        let date = new Date();
        let year = date.getFullYear();
        let Month = date.getMonth()+1;
        if(Month < 10){
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if(Day<10)Day = `0${Day}`
        let star = `${year}-${Month}-01`;
        let end = `${year}-${Month}-${Day}`
        this.searchFrom.watchTime = [star,end]
      },
      toDetail(data,b,c){
        this.dialogLoading = true;
        this.dialogVisible=true;
        let json = {
          cur_date:data,
          code:b
        };
        getStatisticsDetailApi(json).then(res=>{
          this.dialog.name = this.tableHead[b];
          this.dialog.time = data;
          this.dialog.inNum = res.total;
          this.dialog.list = res.list;
          this.dialog.register = res.register;
          this.dialog.course = res.course;
          this.dialog.code = res.source
          this.dialog.total = c;
          this.dialog.coursesList = res.courses;
          this.dialogLoading = false;
        })
      },
      getList(){
        let json = {
        };
        if(this.searchFrom.watchTime && this.searchFrom.watchTime.length > 0){
          json.start_at = this.searchFrom.watchTime[0];
          json.end_at = this.searchFrom.watchTime[1]
        }
        getWatchListApi(json).then((res)=>{
          this.tableHead = res[0];
          this.tableData = res.slice(1);
        })
      },
    },
    mounted(){
      this.defaultTime();
      this.getList();
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .index {
    padding: 20px 0;
  }
  .dialog-tips{
    margin-bottom: 20px;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    .el-col{
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      padding: 10px;
      min-height: 40px;
      div{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .link{
    color: blue;
    text-decoration:underline;
    cursor: pointer;
  }
</style>