<template>
  <div class="trainimg-statistics-wrapper">
    <div class="trainimg-statistics-tools-wrapper">
      <div class="trainimg-statistics-tool">
        <div class="trainimg-statistics-tool-title">行业-主管部门</div>
        <div class="trainimg-statistics-tool-content">
          <el-select
            v-model="indus_manager"
            placeholder="请选择行业-主管部门"
          >
            <el-option
              v-for="item in industries"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="trainimg-statistics-tool">
        <div class="trainimg-statistics-tool-title">日期</div>
        <div class="trainimg-statistics-tool-content">
          <el-date-picker
            v-model="trainDateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="trainimg-statistics-tool">
        <div class="trainimg-statistics-tool-title">是否参加培训</div>
        <div class="trainimg-statistics-tool-content">
          <el-radio v-model="train" :label="true">参加培训</el-radio>
          <el-radio v-model="train" :label="false">未参加培训</el-radio>
        </div>
      </div>
      <div style="display: flex;flex-direction: row;justify-content: flex-end;padding: 10px;margin: 20px auto; width: 80%;">
        <el-button type="primary" @click="findTrainImgStatistics">查找</el-button>
      </div>
    </div>
    <div class="trainimg-statistics-table-wrapper">
      <el-table
        :data="tableData"
        border
        v-loading="isLoadingData"
      >
        <el-table-column
          prop="enterpriseName"
          label="企业名称"
        ></el-table-column>
        <el-table-column
          prop="peopleNum"
          label="参与人数"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="curPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </div>
    <div class="trainimg-statistics-census-wrapper">
      <div class="trainimg-statistics-census-item">参与培训企业总数量： <span class="fontColorStatistics">{{trainEnterpriseNum}}</span></div>
      <div class="trainimg-statistics-census-item">总参与人次：<span class="fontColorStatistics">{{peopleNum}}</span></div>
      <div class="trainimg-statistics-census-item">未参与培训的企业数量: <span class="fontColorStatistics">{{notTrainEnterpriseNum}}</span></div>
    </div>
  </div>
</template>

<script>
import { trainImageAnalyze1, trainImageAnalyze2, getThIndustryChargeDept, getAllIndustry } from '@/api/trainimage.js'
import { parseTime } from '@/utils/index.js'
export default {
  data() {
    return {
      indus_manager: '',
      trainDateTime: '',
      startTime: '',
      endTime: '',
      industry: '',
      manager: '',
      train: false,
      industries: [],
      tableData: [],
      currentPage: 1,
      curPageSize: 10,
      totalElements: 0,
      // 未参与培训企业数量
      notTrainEnterpriseNum: 0,
      // 总参与人次
      peopleNum: 0,
      // 参与培训企业总数
      trainEnterpriseNum: 0,
      // 是否正在加载表格数据
      isLoadingData: false
    }
  },
  mounted() {
    let params = {
      page: 0,
      size: 999
    }
    getAllIndustry(params).then(res => {
      console.log(res, 'getAllIndustry getAllIndustry')
      this.industries = [...res.content.map(item => {
        return {
          name: item.industryName + '-' + item.thIndustryChargeDept.icdName
        }
      })]
    })
    trainImageAnalyze2().then(res => {
      this.notTrainEnterpriseNum = res.notTrainEnterpriseNum
      this.peopleNum = res.peopleNum? res.peopleNum : 0
      this.trainEnterpriseNum = res.trainEnterpriseNum
    })
    // console.log(this.$refs.statistics, 'this.$refs.statistics')
  },
  methods: {
    handleSizeChange(val) {
      this.curPageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    findTrainImgStatistics() {
      if (!(this.startTime || this.endTime)) {
        this.$message.error('请选择日期范围')
        return
      }
      if (!(this.industry || this.manager)) {
        this.$message.error('请选择行业-主管部门')
        return
      }
      let params = {
        department: this.manager,
        endtime: this.endTime,
        industry: this.industry,
        page: this.currentPage,
        size: this.curPageSize,
        startTime: this.startTime,
        train: this.train
      }
      this.isLoadingData = true
      trainImageAnalyze1(params).then(res => {
        console.log(res ,'trainImageAnalyze1 trainImageAnalyze1')
        this.totalElements = res.totalElements
        this.tableData = [...res.content]
        this.isLoadingData = false
      }).catch(() => {
        this.isLoadingData = false
      })
    }
  },
  watch: {
    indus_manager(newVal, oldVal) {
      /**
       *  industry: '',
          manager: '',
       */
      this.industry = newVal.split('-')[0]
      this.manager = newVal.split('-')[1]
    },
    trainDateTime(newVal, oldVal) {
      if (newVal instanceof Array) {
        /**
         *       startTime: '',
         *       endTime: '',
         */
        this.startTime =  parseTime(newVal[0])
        this.endTime = parseTime(newVal[1])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .trainimg-statistics-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 0 9px 1px #eee;
  }
  .trainimg-statistics-tools-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
    .trainimg-statistics-tool {
      width: 80%;
      margin: 20px auto;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 15px;
      .trainimg-statistics-tool-title {
        flex-basis: 30%;
        flex-grow: 0;
        flex-shrink: 0;
        text-align: right;
        margin-right: 13px;
      }
      .trainimg-statistics-tool-content {
        flex-basis: 70%;
        flex-grow: 0;
        flex-shrink: 0;
      }
    }
  }
  .trainimg-statistics-table-wrapper {
    width: 80%;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
    margin: 30px auto;
  }
  .trainimg-statistics-census-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow:  0 0 9px 1px #eee;
    .trainimg-statistics-census-item {
      flex-basis: 33%;
      .fontColorStatistics {
        color: #090d9c;
      }
    }
  }
</style>
