<template>
  <!--  班级列表-->
  <div class="app-warp">
    <div class="app-structure">
      <div class="app-search">
        <el-form ref="searchFrom" :model="searchFrom" label-width="90px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="班级编码" prop="CODE">
                <el-input v-model="searchFrom.CODE" placeholder="请输入班级编码"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="班级名称" prop="KEYWORDS">
                <el-input v-model="searchFrom.KEYWORDS" placeholder="请输入班级名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称" prop="CORPINFO_NAME">
                <el-input v-model="searchFrom.CORPINFO_NAME" placeholder="请输入机构名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="班级状态" prop="STATE">
                <el-select v-model="searchFrom.STATE" style="width: 100%;">
                  <el-option value="1" label="未申请"/>
                  <el-option value="4" label="待开班"/>
                  <el-option value="5" label="培训中"/>
                  <el-option value="6" label="培训结束"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="开班时间" prop="TIME">
                <el-date-picker
                  v-model="searchFrom.TIME"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束时间" prop="TIME1">
                <el-date-picker
                  v-model="searchFrom.TIME1"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right">
                <el-button v-waves type="primary" icon="el-icon-search" class="ml-10" @click="getQuery">
                  搜索
                </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-tools">
        <div class="app-function"/>
        <div class="app-minbtn">
          <span class="screening">
            <el-dropdown trigger="click">
              <el-button type="text" icon="el-icon-finished"/>
              <el-dropdown-menu slot="dropdown" style="margin-top:3px;">
                <div class="app-checkbox-group">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in checkboxList" :key="item" :label="item" style="display: block"/>
                  </el-checkbox-group>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
          <el-button type="text" icon="el-icon-refresh-left"/>
          <el-button type="text" icon="el-icon-full-screen"/>
        </div>
      </div>
      <div class="app-statistical">
        <span>
          班级总数：<i>{{ clsNum }}</i>
        </span>
        <span>
          班级总人次：<i>{{ stuNum }}</i>
        </span>
      </div>
      <div class="app-container">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          :header-cell-style="{
            background:'#f5f7fa',
            'font-weight': 'bold',
            'color': '#000'
          }"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row>
          <el-table-column :reserve-selection="true" type="selection" width="55" align="center" fixed="left"/>
          <el-table-column type="index" label="序号" width="50" align="center" fixed="left"/>
          <el-table-column show-overflow-tooltip prop="CORPINFO_NAME" label="企业名称" fixed="left" width="200"/>
          <el-table-column show-overflow-tooltip prop="NAME" label="班级名称" fixed="left" width="200"/>
          <el-table-column
            v-if="checkList.includes('班级编码')"
            :show-overflow-tooltip="true"
            prop="CODE"
            label="班级编码"
            fixed="left"
            width="200"/>
          <el-table-column
            v-if="checkList.includes('培训类型')"
            :show-overflow-tooltip="true"
            prop="TRAININGTYPE_NAME"
            label="培训类型"
            width="100"/>
          <el-table-column
            v-if="checkList.includes('岗位类型')"
            :show-overflow-tooltip="true"
            prop="POSTTYPE_NAME"
            label="岗位类型"
            width="100"/>
          <el-table-column
            v-if="checkList.includes('培训等级')"
            :show-overflow-tooltip="true"
            prop="TRAINLEVEL_NAME"
            label="培训等级"
            width="100"/>
          <el-table-column
            v-if="checkList.includes('负责人')"
            :show-overflow-tooltip="true"
            prop="PRINCIPAL"
            label="负责人"/>
          <el-table-column
            v-if="checkList.includes('培训开始时间')"
            :show-overflow-tooltip="true"
            prop="START_TIME"
            label="培训开始时间"
            width="100"/>
          <el-table-column
            v-if="checkList.includes('培训结束时间')"
            :show-overflow-tooltip="true"
            prop="END_TIME"
            label="结束时间"
            width="100"/>
          <el-table-column
            v-if="checkList.includes('涉及培训岗位数')"
            :show-overflow-tooltip="true"
            prop="POSTNUM"
            label="涉及培训岗位数"
            width="120"/>
          <el-table-column
            v-if="checkList.includes('学员人员数')"
            :show-overflow-tooltip="true"
            prop="STUDENT_NUM"
            label="涉及学员人员数"
            width="120"/>
          <el-table-column
            v-if="checkList.includes('任务状态')"
            :show-overflow-tooltip="true"
            width="150"
            align="center"
            label="任务状态">
            <template slot-scope="{row}">
              <template v-if="row.STATE == '1'">
                <span>未申请</span>
              </template>
              <template v-if="row.STATE == '4'">
                <span>待开班</span>
              </template>
              <template v-if="row.STATE == '5'">
                <span>培训中</span>
              </template>
              <template v-if="row.STATE == '6'">
                <span>培训结束</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="250" fixed="right">
            <template slot-scope="{row}">
              <el-button v-if="row.ISFACE === '1'" type="text" @click="getStudentFaces(row.CLASS_ID)">培训影像资料</el-button>
              <span v-if="row.ISFACE === '1'" class="app-divider"/>
              <el-button type="text" @click="goToClassdetailsList(row.CLASS_ID,row.ENTERPRISE_ID,row.STATE,'third')">学员列表</el-button>
              <span class="app-divider"/>
              <el-button :disabled="row.STUDYRECORDCNT > 0" type="text" @click="handleDelete(row.CLASS_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>
    <el-dialog :visible.sync="delayDialog.visible" title="延期" width="500px">
      <el-form ref="delayDialogForm" :model="delayDialog.form" :rules="delayDialog.rules" label-width="60px">
        <el-form-item label="日期" prop="TIME">
          <el-date-picker
            v-model="delayDialog.form.TIME"
            :picker-options="delayDialog.pickerOptions"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="delaySubmit">提 交</el-button>
        <el-button @click="delayDialog.visible = false">取 消</el-button>
      </span>
    </el-dialog>
    <training-type-dialog :dialog-form-visible.sync="dialogFormVisible" @confirm="trainingTypeDialogConfirm"/>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import moment from 'moment'
import StudentFacesList from './studentFacesList.vue'

export default {
  components: { Pagination, StudentFacesList },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      stuNum: 0,
      clsNum: 0,
      studyRecordCnt: 0,
      total: 0,
      varList: [],
      searchFrom: {
        STATE: '',
        KEYWORDS: '',
        CODE: '',
        POSSESSION: [],
        ENTERPRISE_ID: '',
        ENTERPRISE_NAME: '',
        CORPINFO_NAME: '',
        TIME: [],
        TIME1: []
      },
      areaList: [],
      areaProps: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        value: 'numValue',
        id: 'id',
        label: 'label',
        children: 'children',
        checkStrictly: true
      },
      dialogFormVisible: false,
      checkList: ['班级编码', '行政区划', '培训类型', '行业类型', '岗位类型', '培训等级', '负责人', '培训开始时间', '培训结束时间', '涉及培训岗位数', '学员人员数', '任务状态'],
      checkboxList: ['班级编码', '行政区划', '培训类型', '行业类型', '岗位类型', '培训等级', '负责人', '培训开始时间', '培训结束时间', '涉及培训岗位数', '学员人员数', '任务状态'],
      delayDialog: {
        CLASS_ID: '',
        END_TIME: '',
        visible: false,
        form: {
          TIME: ''
        },
        rules: {
          TIME: [
            { required: true, message: '请选择日期', trigger: 'blur' }
          ]
        },
        pickerOptions: {
          disabledDate: (time) => time.getTime() < moment(this.delayDialog.END_TIME).format('x')
        }
      }
    }
  },
  inject: ['setCLASS_ID', 'setTabsActive', 'setSTATE', 'setActiveName', 'setENTERPRISE_ID', 'setTYPE', 'setTRAINLEVEL_NAME'],
  created() {
    this.getList()
    // this.getEnterprise()
    this.getDictByDicId('e725d2a91b8248f4b8f49889038df7de').then(data => {
      this.areaList = data
    })
  },
  methods: {
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.searchFrom.TRAINTYPE = ''
      this.searchFrom.TRAINTYPE_NAME = ''
      this.searchFrom.POSTTYPE = ''
      this.searchFrom.POSTTYPE_NAME = ''
      this.searchFrom.TRAINLEVEL = ''
      this.searchFrom.TRAINLEVEL_NAME = ''
      this.searchFrom.INDUSTRY3 = ''
      this.searchFrom.INDUSTRY3_NAME = ''
      this.searchFrom.ENTERPRISE_NAME = ''
      this.$refs.searchFrom.resetFields()
      this.getList()
    },
    getRowKey(row) {
      return row.CLASS_ID
    },
    getList() {
      this.listLoading = true
      let possession = ''
      let possessionLevel = ''
      console.log(this.searchFrom)
      if (this.searchFrom.POSSESSION && this.searchFrom.POSSESSION.length > 0) {
        possession = this.searchFrom.POSSESSION[this.searchFrom.POSSESSION.length - 1]
        possessionLevel = this.searchFrom.POSSESSION.length
      }
      requestFN(
        '/class/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          ...this.searchFrom,
          INDUSTRY: this.searchFrom.INDUSTRY3,
          POSSESSION: possession,
          POSSESSIONLEVEL: possessionLevel,
          STARTTIME: this.searchFrom.TIME[0],
          ENDTIME: this.searchFrom.TIME[1],
          OVERSTARTTIME: this.searchFrom.TIME1[0],
          OVERENDTIME: this.searchFrom.TIME1[1]
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.stuNum = data.stuNum
        this.clsNum = data.clsNum

        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },
    lazyLoad(nodeValue, resolve) {
      if (nodeValue.data && (!nodeValue.children || nodeValue.children.length === 0)) {
        this.getDictByDicId(nodeValue.data.id, nodeValue.level).then(data => {
          resolve(data)
        })
      } else {
        resolve(null)
      }
    },
    getDictByDicId(dicId, level) {
      var dicListVal = []
      return new Promise((resolve) => {
        let id = ''
        if (!dicId) {
          id = '0'
        } else {
          id = dicId
        }
        requestFN(
          '/dictionaries/getLevelsAndSCount',
          {
            DICTIONARIES_ID: id
          }
        ).then((data) => {
          if (data.list.length > 0) {
            dicListVal = data.list.map((e) => {
              return {
                value: e.DICTIONARIES_ID.toString(),
                numValue: e.BIANMA.toString(),
                label: e.NAME,
                id: e.DICTIONARIES_ID,
                leaf: level > 1
              }
            })
          } else {
            dicListVal = undefined
          }
          return resolve(dicListVal)
        }).catch((e) => {
        })
      })
    },
    trainingTypeDialogConfirm(e) {
      if (!e.TRAINTYPE) {
        this.$message.error('培训类型不能为空')
        return
      }
      if (!e.POSTTYPE) {
        this.$message.error('培训类型不能为空')
        return
      }
      // if (!e.TRAINLEVEL) {
      //   this.$message.error('培训级别不能为空')
      //   return
      // }
      // if (!e.INDUSTRY3) {
      //   this.$message.error('行业类型必须选择')
      //   return
      // }

      Object.keys(e).forEach(key => {
        this.$set(this.searchFrom, key, e[key])
      })
    },
    getStudentFaces(CLASS_ID) {
      this.setCLASS_ID(CLASS_ID)
      this.setActiveName('StudentFacesList')
    },
    goToClassdetailsList(CLASS_ID, ENTERPRISE_ID, STATE, TabsActive, TRAINLEVEL_NAME) {
      this.setTYPE('edit')
      this.setActiveName('ClassDetailsList')
      this.setCLASS_ID(CLASS_ID)
      this.setENTERPRISE_ID(ENTERPRISE_ID)
      this.setSTATE(5)
      this.setTabsActive(TabsActive)
      this.setTRAINLEVEL_NAME(TRAINLEVEL_NAME)
    },
    handleDelete(CLASS_ID) {
      this.$confirm('你确定要删除该班级吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestFN('/class/delete', { CLASS_ID }).then((data) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {})
    },
    goToDelayDialogShow(CLASS_ID, END_TIME) {
      this.delayDialog.visible = true
      this.delayDialog.CLASS_ID = CLASS_ID
      this.delayDialog.END_TIME = END_TIME
      this.$nextTick(() => {
        this.$refs.delayDialogForm && this.$refs.delayDialogForm.resetFields()
      })
    },
    delaySubmit() {
      this.$refs.delayDialogForm.validate(valid => {
        if (valid) {
          requestFN('/class/postpone', { CLASS_ID: this.delayDialog.CLASS_ID, ...this.delayDialog.form }).then((data) => {
            if (data.result === 'success') {
              if (data.message === 'timeerror') {
                this.$message({
                  type: 'warning',
                  message: '选择的日期大于企业的服务期!'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: '延期成功!'
                })
              }
            }
            this.delayDialog.visible = false
            this.getList()
          })
        } else {
          this.$message.warning('请补全必填项')
        }
      })
    },
    handleAddClass() {
      this.setActiveName('AddClass')
      this.setCLASS_ID('')
      this.setENTERPRISE_ID('')
      this.setTYPE('add')
      this.setSTATE('')
      this.setTabsActive('')
    }
  }
}

</script>
<style>
.span-green{
  color: #52c41a;
}
.span-blue{
  color: #1E9FFF;
}
.span-orange{
  color: #e36c09;
}
</style>
