<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 {
  margin: 10px 10px;
  padding: 10px;
  border-radius: 5px;
}
.trainimg-statistics-tools-wrapper {
  margin: 10px 10px;
  padding: 10px;
  border-radius: 5px;
  background: #fff;
  .trainimg-statistics-tool {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    .trainimg-statistics-tool-title {
      flex-basis: 17%;
      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 {
  padding: 10px;
  border-radius: 5px;
  margin: 10px 10px;
  background: #fff;
}
.trainimg-statistics-census-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 10px;
  padding: 10px;
  border-radius: 5px;
  background: #fff;
  .trainimg-statistics-census-item {
    flex-basis: 33%;
    .fontColorStatistics {
      color: #090d9c;
    }
  }
}
</style>
