<template>
  <!--  班级列表-->
  <div class="app-warp">
    <div class="app-structure">
      <div class="app-search">
        <el-form ref="searchFrom" :model="NAME" label-width="100px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="机构名称" prop="NAME" label-width="80px">
                <el-input v-model="searchFrom.NAME" placeholder="请输入机构名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年份" prop="YEAR" label-width="80px">
                <el-date-picker v-model="searchFrom.YEAR" value-format="yyyy" type="year" style="width: 100%;"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="10px">
                <el-button v-waves type="primary" icon="el-icon-search" class="ml-10" @click="getList">
                  搜索
                </el-button>
                <el-button icon="el-icon-refresh" @click="goKeyReset">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="app-container">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :header-cell-style="{
            background:'#f5f7fa',
            'font-weight': 'bold',
            'color': '#000'
          }"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row>
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column
            v-if="checkList.includes('机构名称')"
            :show-overflow-tooltip="true"
            prop="NAME"
            label="机构名称"/>
          <el-table-column
            v-if="checkList.includes('属地')"
            :show-overflow-tooltip="true"
            prop="INDUSTRYNAME"
            label="属地">
            <template slot-scope="{row}">
              <span>
                {{ row.PROVINCE_NAME }}-{{ row.CITY_NAME }}-{{ row.COUNTRY_NAME }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="checkList.includes('主要负责人')"
            :show-overflow-tooltip="true"
            prop="COMMANDER"
            label="主要负责人"/>
          <el-table-column
            v-if="checkList.includes('电话号')"
            :show-overflow-tooltip="true"
            prop="COMMANDER_PHONE"
            label="电话号"/>
          <el-table-column
            v-if="checkList.includes('效果评估通过人数')"
            :show-overflow-tooltip="true"
            prop="PASSSTUDENTCOUNT"
            label="效果评估通过人数"/>
          <el-table-column
            v-if="checkList.includes('效果评估总人数')"
            :show-overflow-tooltip="true"
            prop="ALLSTUDENTCOUNT"
            label="效果评估总人数"/>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="{row}">
              <el-button type="text" @click="goToAllStrengthenDetailsList(row.CORPINFO_ID)">被培训企业详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
import waves from '@/directive/waves' // waves directive

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      varList: [],
      degreeOfEducationList: [],
      personnelTypeList: [],
      enterpriseList: [],
      searchFrom: {
        NAME: '',
        YEAR: ''
      },
      NAME: '',
      CREATTIME: '',
      searchFromCollapse: true,
      checkList: ['机构名称', '属地', '主要负责人', '电话号', '效果评估通过人数', '效果评估总人数'],
      checkboxList: ['机构名称', '属地', '主要负责人', '电话号', '效果评估通过人数', '效果评估总人数'],
      trainTypeList: [],
      trainingFormList: [],
      assessmentMethodsList: []
    }
  },
  inject: ['setActiveName', 'setCLASS_ID', 'setCORPINFO_ID'],
  created() {
    this.listLoading = false
    this.getList()
    this.getTrainTypeList()
    this.getDict('a2dd354f453645f0b22e3726f0dd4b1f', 'trainingFormList')
    this.getDict('73c3ce2ce63242fbb9ae76969dc9ab6d', 'assessmentMethodsList')
  },
  methods: {
    goToAllStrengthenDetailsList(CORPINFO_ID) {
      this.setCORPINFO_ID(CORPINFO_ID)
      this.setActiveName('list')
    },
    goKeyReset() {
      this.searchFrom.NAME = ''
      this.searchFrom.YEAR = ''
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    getList() {
      this.listLoading = true
      requestFN(`/effect/allstrengthenlist?showCount=${this.listQuery.limit}&currentPage=${this.listQuery.page}`, {
        ...this.searchFrom
      }).then(data => {
        this.varList = data.varList
        this.total = data.page.totalResult
        this.listLoading = false
      })
    },
    goEdit(TRAINING_PLAN_ID) {
      requestFN('/trainingplan/goEdit', {
        TRAINING_PLAN_ID: TRAINING_PLAN_ID
      }).then(data => {
        this.planEditDialog.form = data.pd
        const dateArray = [
          data.pd.START_TIME, data.pd.END_TIME
        ]
        this.$set(this.planEditDialog.form, 'DATES', dateArray)
      })
    },
    getTrainTypeList() {
      requestFN(
        'trainingtype/listAll',
        {}
      ).then((data) => {
        this.trainTypeList = data.varList
      }).catch((e) => {
      })
    },
    resetForm() {
      this.planEditDialog.form = {
        TRAINING_PLAN_ID: '',
        ORGANIZING_DEPARTMENT: '',
        TRAINING_CONTENT: '',
        ATTEND_DEPARTMENT: '',
        PARTICIPANT: '',
        TRAINING_PERIOD: '',
        TRAINING_FORM: '',
        DATES: [],
        START_TIME: '',
        END_TIME: '',
        EVALUATION_METHODS: '',
        DESCR: '',
        ENTERPRISE_ID: ''
      }
    },
    // 保存
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '保存中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.planEditDialog.form.DATES && this.planEditDialog.form.DATES.length === 2) {
            this.planEditDialog.form.START_TIME = this.planEditDialog.form.DATES[0]
            this.planEditDialog.form.END_TIME = this.planEditDialog.form.DATES[1]
          }
          requestFN(
            '/trainingplan/' + this.planEditDialog.type,
            this.planEditDialog.form
          ).then(data => {
            this.getList()
            this.planEditDialog.visible = false
            loading.close()
          }).catch((e) => {
            loading.close()
          })
        } else {
          return false
        }
      })
    },
    getDict(DICTIONARIES_ID, list) {
      requestFN('/dictionaries/getLevels', {
        DICTIONARIES_ID
      }).then((data) => {
        this[list] = data.list
      })
    },
    goToAdd() {
      this.resetForm()
      this.planEditDialog.type = 'add'
      this.planEditDialog.visible = true
    },
    showResult() {
      requestFN('/trainingplan/effectAppraisal', {
        YEAR: this.searchFrom.YEAR
      }).then((data) => {
        this.resultDialog.form = data.pd
      })
      this.resultDialog.infoVisible = true
    },
    goToEdit(TRAINING_PLAN_ID) {
      this.resetForm()
      this.goEdit(TRAINING_PLAN_ID)
      this.planEditDialog.type = 'edit'
      this.planEditDialog.visible = true
    },
    showDetails(TRAINING_PLAN_ID) {
      this.resetForm()
      this.goEdit(TRAINING_PLAN_ID)
      this.planEditDialog.infoVisible = true
    },
    goToDelete(TRAINING_PLAN_ID) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/trainingplan/delete',
          {
            TRAINING_PLAN_ID: TRAINING_PLAN_ID
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    excelStudentsDialogShow() {
      this.$refs.uploadExcel && this.$refs.uploadExcel.clearFiles()
      this.excelStudentsDialog.visible = true
    },
    handleExcelExceed() {
      this.$message.error('只能上传一个文件，如需上传其它文件，可以删除掉当前文件在尝试!')
    },
    handleChangeExcel(file, fileList) {
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const types = ['xls', 'xlsx']
      const isImage = types.includes(suffix)
      if (!isImage) {
        this.$message.error('上传文件只能是 xls、xlsx 格式!')
        fileList.pop()
      }
    },
    downloadExcel() {
      this.$confirm('确定要下载excel模板吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        window.location.href = config.httpurl + '/student/downExcel'
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },
    submitExcel() {
      if (this.$refs.uploadExcel.uploadFiles.length === 0) {
        this.$message.error('请选择上传文件!')
        return
      }
      const formData = new FormData()
      formData.append('FFILE', this.$refs.uploadExcel.uploadFiles[0].raw)
      upload('/studentcorpinfo/readExcel', formData).then(data => {
        this.excelStudentsDialog.message = data.resultStr
        // this.excelStudentsDialog.visible = false
        this.getList()
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.flexdcc {
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  .export-box {
    width: 100%;
    margin-bottom: 20px;

    h1 {
      padding: 0 5px 10px;
      display: flex;
      align-items: flex-end;
      font-size: 40px;
      border-bottom: 1px dashed rgb(204, 204, 204);

      span {
        margin-left: 20px;
        font-size: 14px;
      }
    }

    & > div {
      padding-left: 30px;
    }

    .studentNum {
      margin: 20px 0 10px;
    }
  }
}
</style>
