<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form :inline="true">
        <el-form-item label="任务名称">
          <el-input clearable
                    size="mini"
                    v-model="params.taskName"
                    placeholder="请输入任务名称"></el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select clearable
                     size="mini"
                     v-model="params.taskType"
                     placeholder="请输入任务类型">
            <el-option v-for="item in taskTypes"
                       :key="item.id"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     icon="el-icon-search"
                     size="mini"
                     @click="onClickSearch">搜索</el-button>
          <el-button icon="el-icon-refresh"
                     size="mini"
                     @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bbsl-table-content"
         ref="contentPanel">
      <div class="bbsl-btn-content"
           ref="btnPanel">
        <el-button size="mini"
                   icon="el-icon-plus"
                   type="primary"
                   @click="openFormDiao">新增</el-button>
        <el-button size="mini"
                   icon="el-icon-delete"
                   type="danger"
                   @click="deleteSelect"
                   :disabled="!multipleSelection.length">删除</el-button>
      </div>

      <el-table stripe
                size="mini"
                :height="tableMaxHeight"
                ref="multipleSelection"
                v-loading="loading"
                border
                :default-sort="{prop: 'taskName', order: 'ascending'}"
                @row-dblclick="handleDbClick"
                :row-key="getRowKey"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width:100%"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}">
        <el-table-column type="selection"
                         width="55"
                         size="mini"
                         :reserve-selection="true"></el-table-column>
        <el-table-column min-width="200"
                         sortable
                         size="mini"
                         prop="taskName"
                         label="任务名称"
                         show-overflow-tooltip></el-table-column>

        <el-table-column min-width="100"
                         sortable
                         size="mini"
                         prop="taskType"
                         label="任务类型"
                         show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.taskType !== 1 ? '非定时任务' : '定时任务' }}
          </template>
        </el-table-column>
        <el-table-column min-width="240"
                         sortable
                         size="mini"
                         prop="taskClass"
                         label="任务执行类"
                         show-overflow-tooltip></el-table-column>

        <el-table-column min-width="120"
                         sortable
                         size="mini"
                         prop="taskRate&taskRateUnit"
                         label="任务调用频率"
                         show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.taskRate }}{{ scope.row.taskRateUnit }}
          </template>
        </el-table-column>
        <el-table-column min-width="160"
                         sortable
                         size="mini"
                         prop="sourceCode"
                         label="数据源"
                         show-overflow-tooltip></el-table-column>
        <el-table-column min-width="160"
                         sortable
                         size="mini"
                         prop="sourceTable"
                         label="源表名"
                         show-overflow-tooltip></el-table-column>
        <!-- <el-table-column
          min-width="120"
          sortable
          prop="taskMemo"
          label="任务说明"
          show-overflow-tooltip
        ></el-table-column> -->
        <el-table-column min-width="120"
                         label="操作"
                         size="mini"
                         fixed="right"
                         prop="operation"
                         show-overflow-tooltip>
          <template #default="scope">
            <el-dropdown split-button
                         @click="startUpJob(scope.row)"
                         @command="toLogQuery(scope.row)">
              {{
                scope.row.taskStatus === 'NONE'
                  ? '开始'
                  : scope.row.taskStatus === 'NORMAL'
                  ? '暂停'
                  : '开始'
              }}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="waterStation">日志查询</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination ref="paginationPanel"
                     align="right"
                     class="bbsl-pagination"
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageBean.page"
                     :page-sizes="[20, 30, 40, 50]"
                     :page-size="pageBean.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
    </div>
    <form-dialog v-if="showFormDia"
                 @closeFormDiao="closeFormDiao"
                 @refList="getDateList"
                 :showFormDia="showFormDia"
                 :title="title"
                 :pId="pId"></form-dialog>
  </div>
</template>

<script>
import FormDialog from './components/taskForm-dialog.vue'
import { TableMixin } from '@/mixins/tableMixin'
import collocation from '@/api/collocation.js'
export default {
  name: 'collocation',
  components: {
    FormDialog
  },
  mixins: [TableMixin],
  data () {
    return {
      pageBean: {
        pageSize: 20,
        page: 1
      },
      params: {
        taskName: '',
        taskType: undefined
      },
      total: 0,
      taskClass: '', //任务执行类
      taskRate: null, //任务调用频率
      taskRateUnit: '', //任务调用频率单位(m:分钟，h:小时，d:天，w:周，M:月，Y：年)
      sourceCode: '', //数据源
      sourceTable: '', //源表名
      taskMemo: '', //任务说明
      tableData: [],
      taskTypes: [
        { value: 1, label: '定时任务' },
        { value: 2, label: '非定时任务' }
      ],
      operation: '操作',
      logQuery: '日志查询',
      taskStatus: '', //NONE停止任务 NORMAL运行任务 PAUSED暂停任务
      loading: false,
      multipleSelection: [], // 复选框
      showFormDia: false,
      title: '',
      pId: ''
    }
  },
  created () {
    this.getDateList(true)
  },
  methods: {
    // 搜索
    onClickSearch () {
      this.pageBean.page = 1
      this.getDateList()
    },

    // 重置
    resetQuery () {
      this.params.taskName = ''
      this.params.taskType = undefined
      this.pageBean.page = 1
      this.getDateList()
    },

    // 新增
    openFormDiao () {
      this.title = '新增'
      this.showFormDia = true
    },
    handleSizeChange (val) {
      this.pageBean.pageSize = val
      this.getDateList()
    },
    handleCurrentChange (val) {
      this.pageBean.page = val
      this.getDateList()
    },
    closeFormDiao () {
      this.showFormDia = false
    },

    // 获取分页数据
    getDateList () {
      let data = {
        pageBean: this.pageBean,
        querys: [
          {
            property: 'taskName',
            operation: 'LIKE',
            value: this.params.taskName,
            group: 'filter',
            relation: 'AND'
          }
        ]
      }
      let data1 = {
        property: 'taskType',
        operation: 'EQUAL',
        value: this.params.taskType,
        group: 'filter',
        relation: 'AND'
      }
      if (this.params.taskType) {
        data.querys.push(data1)
      }
      collocation.listQuery(data, res => {
        if (res.state && res.rows) {
          res.rows.forEach(ii => {
            console.log(ii)
            this.taskTypes.forEach(ee => {
              if (ee.value === ii.taskType) {
                ii['taskType'] = ee.label
              }
            })
          })
        }
        this.total = res.total
        this.tableData = res.rows
        this.loading = false
      })
    },

    // 批量删除
    deleteSelect () {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          collocation
            .remove(this.multipleSelection, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000
                  // offset: 80
                })
                // this.multipleSelection = [];
                this.$refs.multipleSelection.clearSelection()
                this.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch(res => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80
              })
              this.getDateList()
            })
        })
        .catch(() => { })
    },
    // 删除单个数据
    handleDelete (row) {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          collocation
            .remove(row.id, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000
                  // offset: 80
                })
              }
              this.pageBean.page = 1
              this.getDateList()
            })
            .catch(res => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80
              })
              this.getDateList()
            })
        })
        .catch(() => { })
    },
    // 任务启动状态
    startUpJob (row) {
      console.log(row.id)
      let taskId = row.id
      if (row.taskStatus === 'NONE') {
        console.log(row.taskStatus)
        collocation.startUpJob(taskId, res => {
          if (res.state) {
            console.log(res)
            row.taskStatus = 'NORMAL'
          }
        })
      }
      if (row.taskStatus === 'PAUSED') {
        console.log(row.taskStatus)
        collocation.startUpJob(taskId, res => {
          if (res.state) {
            console.log(res)
            row.taskStatus = 'NORMAL'
            this.$message({
              message: '开启成功',
              type: 'success',
              duration: 2000
            })
          }
        })
      }
      if (row.taskStatus === 'NORMAL') {
        console.log(row.taskStatus)
        collocation.stopJob(taskId, res => {
          if (res.state) {
            console.log(res)
            row.taskStatus = 'PAUSED'
            this.$message({
              message: '暂停成功',
              type: 'success',
              duration: 2000
            })
          }
        })
      }
    },
    //  修改
    handleUpdate (row) {
      this.title = '修改'
      this.pId = row.id
      this.showFormDia = true

    },
    handleSelectionChange (val) {
      this.multipleSelection = val.map(item => {
        return item.id
      })
    },
    // 指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },

    // 跳转日志查询
    toLogQuery (row) {
      console.log(row);

      this.$router.push({
        path: 'LogQuery',
        query: { id: row.id, taskName: row.taskName }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-content {
  display: flex;
}
.el-select-dropdown__item span {
  color: rgb(51, 51, 51) !important;
}
.el-select-dropdown__item {
  color: #9a9a9a !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #f5f7fa;
}
.btn-content :first-child {
  margin: 0 0 0 0 !important;
}
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//   width: 6px;
//   height: 15px;
// }
.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}
::-webkit-scrollbar {
  background: #fff !important;
}

//滚动条的宽度
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #e4e4e4;
  border-radius: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 6px;
}
.bbsl-pagination {
  bottom: 10px !important;
}
</style>
