<template>
  <div class="course-analysis-wrap">
    <div v-for="(item, index) in cardData" :key="index" class="">
      <el-card class="box-card">
        <template v-slot:header>
          <div class="title">
            <span class="weight">{{ item.title }}</span>
          </div>
        </template>
        <div class="box-content">
          <span v-if="item.num != 0" class="weight">{{ item.num }} </span>
          <span v-if="item.num != 0">{{ item.unit }} </span>
          <span v-if="index == 2 && second != 0" class="weight"
            >{{ second }}
          </span>
          <span v-if="index == 2 && second != 0">秒</span>
        </div>
      </el-card>
      <div v-if="index + 1 !== cardData.length" class="line"></div>
    </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">
        <template v-slot="scope">
          {{ $filters.getTotalTime(scope.row.courseTotalTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="courseAvgStudyTime"
        label="人均学习时长"
        align="center"
      >
        <template v-slot="scope">
          {{ $filters.getAvgTime(scope.row.courseAvgStudyTime) }}
        </template>
      </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 v-slot="scope">
          <el-button @click="checkName(scope.row)" type="text" size="small"
            >查看名单</el-button
          >
        </template>
      </el-table-column>
      <template v-slot:empty>
        <div>
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png" />
            <p>没有相关数据，请重新选择查询范围</p>
          </div>
        </div>
      </template>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRows"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
import { create } from 'domain'
import * as operationData from '../../utils-o/operation'
import { openLoading, closeLoading } from '../../utils-o/utils'
let vm = null
export default {
  props: {
    formInline: {
      type: Object,
    },
    activeName: {
      type: String,
    },
    dialogData: {
      type: Object,
    },
    organizationList: {
      type: Array,
    },
  },
  data() {
    return {
      cardData: [],
      tableData: [],
      totalRows: 0,
      projectId: '',
      pageNo: 1,
      pageSize: 20,
      second: 0,
    }
  },
  created() {
    vm = this
    this.projectId = vm.getUrlSearch(window.location.href, 'id')
  },
  mounted: function () {
    $on(this, 'search', () => {
      // console.log(this.formInline);
      this.pageNo = 1
      this.search()
    })
    $on(this, 'init', () => {
      this.$nextTick(function () {
        if (vm.formInline.region.length != 0) {
          this.search()
        }
      })
    })
    $on(this, 'reset', () => {
      this.pageNo = 1
      this.pageSize = 20
      this.tableData = []
      this.cardData = []
    })
  },
  methods: {
    setCardData(data) {
      vm.totalRows = data.projectCourseCount
      let avgTime = []
      avgTime = operationData.getAvgTime(data.projectAvgStudyTime)
      vm.cardData = [
        {
          title: '项目所有课程数',
          num: data.projectCourseCount,
          unit: '门课程',
        },
        {
          title: '项目所有课程总时长',
          num: data.projectCourseTotalTime,
          unit: '分钟',
        },
        {
          title: '项目人均学习时长',
          num: avgTime[0],
          unit: '分钟',
        },
      ]
      vm.second = avgTime[1]
    },
    search() {
      if (vm.formInline.region.length == 0) {
        const h = this.$createElement
        vm.$message({
          message: h(
            'p',
            { style: 'color: #FF3399' },
            '请先选择地区后再进行查询 '
          ),
        })
        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, checkAll),
        originalFlag: vm.formInline.checked == false ? 0 : 1,
      }
      console.log('3 req', req)
      openLoading(vm)
      vm.reportGET('report/portalProjectCourse/getTotal', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          if (res.data.projectCourseCount == 0) {
            vm.$message('没有相关数据，请重新选择查询范围')
          }
          vm.setCardData(res.data)
        } else {
          vm.$message(res.message)
        }
      })
      let reqList = req
      reqList.pageNo = vm.pageNo
      reqList.pageSize = vm.pageSize
      vm.reportGET('report/portalProjectCourse/getCourseList', reqList).then(
        (res) => {
          closeLoading(vm)
          if (res.code == '000000') {
            vm.tableData = res.data.list
          }
        }
      )
    },
    checkName(data) {
      console.log('dialogData', this.dialogData)
      let checkAll = operationData.hasAll(vm.formInline.organization)
      let routerData = {}
      routerData = this.dialogData
      routerData.projectId = vm.projectId
      routerData.projectName = vm.getUrlSearch(
        window.location.href,
        'projectName'
      )
      routerData.tableType = 1
      routerData.courseId = data.courseId
      routerData.ids = operationData.getIds(
        vm.formInline,
        vm.organizationList,
        checkAll
      )
      routerData.type = operationData.getSearchType(vm.formInline, checkAll)
      routerData.originalFlag = vm.formInline.checked == false ? 0 : 1

      // this.$router.push({ path: '/name-list-old', query: routerData});
      let routeData = this.$router.resolve({
        path: '/name-list-old',
        query: routerData,
      })
      window.open(routeData.href, '_blank')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      vm.pageSize = val
      vm.search()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      vm.pageNo = val
      vm.search()
    },
  },
}
</script>

<style lang="scss">
.course-analysis-wrap {
  background: #fff;
  overflow: hidden;
  padding: 10px;
  .weight {
    font-weight: bold;
  }
  .title:after {
    clear: both;
  }
  .el-card {
    border-width: 0px;
  }
  .el-card.is-always-shadow {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  }
  .line {
    background: #e4e4e4;
    height: 80px;
    width: 1px;
    float: left;
    margin-top: 20px;
  }
  .box-card {
    width: 32%;
    margin-right: 1%;
    float: left;
    .el-card__header {
      border-bottom-width: 0;
    }
    .title {
      text-align: center;
    }
    .box-content {
      text-align: center;
      height: 40px;
    }
  }
  .course-table {
    top: 20px;
    margin-bottom: 20px;
  }
}
</style>
