<template>
    <div class="course-analysis-wrap">
      <div v-for="(item , index) in cardData" :key="index" class="">
        <el-card class="box-card">
          <div slot="header" class="title">
            <span class="weight">{{ item.title }}</span>
          </div>
          <div class="box-content">
            <span class="weight">{{ item.num }} </span> {{ item.unit }}
          </div>
        </el-card>
       </div>
      <el-table
        :data="tableData"
        class="course-table">
        <el-table-column prop="courseName" label="课程名" align="center">
        </el-table-column>
        <el-table-column prop="courseTotalTime" label="课程时长" align="center">
        </el-table-column>
        <el-table-column prop="courseAvgStudyTime" label="人均学习时长" align="center">
        </el-table-column>
        <el-table-column prop="courseLearnerCount" label="参与培训人数" align="center">
        </el-table-column>
        <el-table-column prop="courseFinishedCount" label="完成培训人数" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="50" align="center">
          <template slot-scope="scope">
            <el-button
              @click="checkName(scope.row)"
              type="text"
              size="small"
            >查看名单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
</template>
<script>
import { create } from "domain";
import * as operationData from "../../utils/operation";
import { openLoading, closeLoading } from "../../utils/utils";
let vm = null;
export default {
  props: {
    formInline: {
      type: Object
    },
    activeName: {
      type: String
    },
    dialogData: {
      type: Object
    },
    organizationNum: {
      type: Number
    },
    organizationList: {
      type: Array
    }
  },
  data() {
    return {
      cardData: [
        {
          title: '项目所有课程数',
          num: 0,
          unit: '门课程',
        },{
          title: '项目所有课程总时长',
          num: 0,
          unit: '分钟',
        },{
          title: '项目人均学习时长',
          num: 0,
          unit: '分钟',
        }
      ],
      tableData: [],
      totalRows: 0,
      projectId: '',
      pageNo: 1,
      pageSize: 1,
    }
  },
  created() {
    vm = this;
    this.projectId = vm.getUrlSearch(window.location.href, "id");
    // this.search();
  },
  mounted: function() {
    this.$on('search',()=>{
      console.log(this.formInline);
      this.search();
    })
  },
  methods: {
    setCardData(data) {
      vm.totalRows = data.projectCourseCount;
      vm.cardData[0].num = data.projectCourseCount;
      vm.cardData[1].num = data.projectCourseTotalTime;
      vm.cardData[2].num = data.projectAvgStudyTime;

      // vm.cardData = [
      //   {
      //     title: '项目所有课程数',
      //     num: data.projectCourseCount,
      //     unit: '门课程',
      //   },{
      //     title: '项目所有课程总时长',
      //     num: data.projectCourseTotalTime,
      //     unit: '分钟',
      //   },{
      //     title: '项目人均学习时长',
      //     num: data.projectAvgStudyTime,
      //     unit: '分钟',
      //   }
      // ];
    },
    search() {

      if (vm.formInline.region.length == 0) {
        vm.$message("请选择地区");
        return;
      }

      let checkAll = operationData.hasAll(vm.formInline.organization)
      let req = {
        projectId: vm.projectId,
        ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
        type: operationData.getSearchType(vm.formInline),
        OriginalFlag: vm.formInline.checked == false ? 0 : 1
      };
      console.log("3 req", req);
      openLoading(vm);
      vm.GET("report/portalProjectCourse/getTotal", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.setCardData(res.data)
        }
      });
      let reqList = req;
      reqList.pageNo = vm.pageNo;
      reqList.pageSize = vm.pageSize;
      vm.GET("report/portalProjectCourse/getCourseList", reqList).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.tableData = res.data.list;
        }
      });
    },
    checkName(data) {
      console.log('dialogData',this.dialogData);
      // this.$router.push("course-training?tableType=1&courseId="+data.courseId+"&region="+this.dialogData.region+"&organization="+this.dialogData.organization);
      this.$router.push({ path: '/course-training', query: this.dialogData});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.vm.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.vm.pageNo = val;
      this.search();
    }, 
  },
}
</script>
<style lang="scss">
.course-analysis-wrap {
    background: #fff;
    padding: 10px;
    .weight {
      font-weight: bold;
    }
    .title:after {
      clear: both
    }
    .box-card {
      width: 32%;
      margin-right: 1%;
      float: left;
      .title {
        text-align: center;
      }
      .box-content {
         text-align: center;
         height: 40px;
      }
    }
    .course-table {
      top: 20px;
      margin-bottom: 20px;
    }
}
</style>