<template>
  <div>
    <el-container style="margin-left: 10px;">
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            v-model="keywords"
            placeholder="通过任务名搜索任务,记得回车哦..."
            clearable
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            prefix-icon="el-icon-search"
            @change="keywordsChange"
            @keyup.enter.native="searchEmp"
          />
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 5px"
            icon="el-icon-search"
            @click="searchEmp"
          >搜索
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 5px;display: inline"
            icon="el-icon-plus"
            @click="showAddEmpView"
          >
            添加任务
          </el-button>
          <el-button
            slot="reference"
            type="primary"
            size="mini"
            style="margin-left: 5px"
            icon="el-icon-download"
            @click="dataDownload"
          >导出数据
          </el-button>
          <el-button
            v-if="emps.length>0"
            :disabled="multipleSelection.length==0"
            style="margin-left: 5px;margin-right: 20px;display: inline"
            type="danger"
            size="mini"
            @click="deleteManyEmps"
          >批量删除
          </el-button>



        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <el-table
            v-loading="tableLoading"
            :data="emps"
            border
            height="450px"
            stripe
            size="mini"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              header-align="center"
            />
            <el-table-column
              prop="jobClassName"
              header-align="center"
              label="任务别名"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="jobClassPath"
              header-align="center"
              label="执行类路径"
            />
            <el-table-column
              :formatter="jobTypeFormat"
              prop="jobClassType"
              header-align="center"
              label="类型"
            />
            <el-table-column
              fixed="right"
              header-align="center"
              width="180"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  icon="el-icon-edit"
                  @click="showEditEmpView(scope.row)"
                >编辑
                </el-button>
                <el-button
                  type="danger"
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  icon="el-icon-delete"
                  @click="deleteEmp(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;margin: 2px; float: right">
            <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[10, 25, 50, 100]"
              :total="totalCount"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="currentChange"
            />
          </div>
        </div>
      </el-main>
    </el-container>
    <el-form
      ref="addEmpForm"
      :model="emp"
      :rules="rules"
      style="margin: 0px;padding: 0px;"
      label-width="100px"
    >
      <div style="text-align: left">
        <el-dialog
          :title="dialogTitle"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          style="padding: 0px;"
          width="600px"
          @close="cancelEidt"
        >
          <el-form-item
            label="任务别名"
            prop="jobClassName"
          >
            <el-input
              v-model="emp.jobClassName"
              :disabled="emp.id != ''"
              placeholder="请输入任务别名"
            />
          </el-form-item>
          <el-form-item
            label="执行类路径"
            prop="jobClassPath"
          >
            <el-input
              v-model="emp.jobClassPath"
              placeholder="请输入执行类路径"
            />
          </el-form-item>
          <el-form-item
            label="任务类型"
            prop="jobClassType"
          >
            <el-select
              v-model="emp.jobClassType"
              placeholder="请选择任务类型"
              style="width: 100%"
            >
              <el-option
                v-for="item in jobtype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              size="mini"
              @click="cancelEidt"
            >取 消</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="addEmp('addEmpForm')"
            >确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      btnLonding:false,
      emps: [],
      keywords: '',
      dialogTitle: '',
      multipleSelection: [],
      depTextColor: '#c0c4cc',
      totalCount: -1,
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      tableLoading: false,
      emp: {
        id: '',
        jobClassName: '',
        jobClassPath: '',
        jobClassType: ''
      },
      rules: {
        jobClassName: [{ required: true, message: '必填:任务别名', trigger: 'blur' }],
        jobClassPath: [{ required: true, message: '必填:任务执行类路径', trigger: 'blur' }],
        jobClassType: [{ required: true, message: '必填:任务类型', trigger: 'blur' }]
      },
      jobtype: [{ label: '数据生成', value: 'dataCreate' }, { label: '文件解析', value: 'filejx' }, {
        label: '文件生成',
        value: 'fileCreate'
      }, { label: '其他', value: 'other' }]
    }
  },
  mounted: function() {
    this.loadEmps()
  },
  methods: {
    // 任务类型格式化
    jobTypeFormat(row, column, cellValue, index) {
      for (let i = 0; i < this.jobtype.length; i++) {
        if (this.jobtype[i].value === cellValue) {
          return this.jobtype[i].label
        }
      }
    },
    // 时间格式化
    dateFormat(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')// 使用moment插件进行日期格式化
    },
    cancelSearch() {
      this.emptyEmpData()
      this.loadEmps()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteManyEmps() {
      this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = ''
        for (var i = 0; i < this.multipleSelection.length; i++) {
          ids += this.multipleSelection[i].id + ','
        }
        this.doDelete(ids)
      }).catch(() => {
      })
    },
    deleteEmp(row) {
      this.$confirm('此操作将永久删除[' + row.jobClassName + '], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(row.id)
      }).catch(() => {
      })
    },
    doDelete(ids) {
      this.tableLoading = true
      this.$axios.delete('/initJobClasses/delete/' + ids).then(resp => {
        this.tableLoading = false
        if (resp && resp.code === 0) {
          this.loadEmps()
        }
      })
    },
    keywordsChange(val) {
      if (val === '') {
        this.loadEmps()
      }
    },
    searchEmp() {
      this.loadEmps()
    },
    currentChange(currentChange) {
      this.currentPage = currentChange
      this.loadEmps()
    },
    handleSizeChange(handleSizeChange) {
      this.pageSize = handleSizeChange
      this.loadEmps()
    },
    loadEmps() {
      this.tableLoading = true
      let kw = this.keywords
      if (kw === '') {
        kw = '1'
      }
      this.$axios.get('/initJobClasses/' + this.currentPage + '/' + this.pageSize + '/' + kw).then(resp => {
        this.tableLoading = false
        if (resp && resp.code === 0) {
          this.emps = resp.data.emps
          this.totalCount = resp.data.count
        }
      }).catch((error) => {
        console.log('获取初始化定时任务信息出错' + error.response)
      })
    },
    addEmp: function(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.emp.id) {
            // 更新
            this.tableLoading = true
            this.$axios.put('/initJobClasses', this.emp).then(resp => {
              this.tableLoading = false
              this.dialogVisible = false
              this.emptyEmpData()
              this.loadEmps()

              this.$message.success(resp.data.msg)
            })
          } else {
            // 添加
            this.tableLoading = true
            // const formData = new FormData()
            // formData.append('jobClassName', this.emp.jobClassName)
            // formData.append('jobClassPath', this.emp.jobClassPath)
            // formData.append('jobClassType', this.emp.jobClassType)
            this.$axios.post('/initJobClasses', this.emp
            ).then(resp => {
              this.tableLoading = false
              this.dialogVisible = false
              this.emptyEmpData()
              this.loadEmps()
              if (resp.data.status === 500) {
                this.$message.error(resp.data.msg)
              } else {
                this.$message.success(resp.data.msg)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    cancelEidt() {
      this.dialogVisible = false
      this.emptyEmpData()
      this.loadEmps()
    },
    showEditEmpView(row) {
      this.dialogTitle = '编辑初始化任务'
      this.emp = row
      this.emp.id = row.id
      this.emp.jobClassName = row.jobClassName
      this.emp.jobClassPath = row.jobClassPath
      this.emp.jobClassType = row.jobClassType
      this.dialogVisible = true
    },
    showAddEmpView() {
      this.dialogTitle = '添加初始化任务'
      this.dialogVisible = true
    },
    emptyEmpData() {
      this.emp = {
        id: '',
        jobClassName: '',
        jobClassPath: '',
        jobClassType: ''
      }
    },
    dataDownload() {
      try {
        const formData = new FormData()
        formData.append('jobClassName', this.keywords)
        this.$axios.post('/initJobClasses/dataDownload', formData, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.$message.success('导出成功')
        })
      } catch (ex) {
        console.log(ex)
      }
    }
  }
}
</script>
<style>
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
