<!--
  - Licensed to the Apache Software Foundation (ASF) under one or more
  - contributor license agreements.  See the NOTICE file distributed with
  - this work for additional information regarding copyright ownership.
  - The ASF licenses this file to You under the Apache License, Version 2.0
  - (the "License"); you may not use this file except in compliance with
  - the License.  You may obtain a copy of the License at
  -
  -     http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<template>
  <el-row class="box-card">
    <div class="btn-group" style="">
      <el-input
        :placeholder="$t('historyStatus.searchForm.jobName')"
        v-model="searchForm.jobName"
        clearable>
      </el-input>
      <el-input
        :placeholder="$t('historyStatus.searchForm.taskId')"
        v-model="searchForm.taskId"
        clearable>
      </el-input>
      <el-input
        :placeholder="$t('historyStatus.searchForm.serverIp')"
        v-model="searchForm.slaveId"
        clearable>
      </el-input>
      <el-select
        :placeholder="$t('historyStatus.searchForm.executeSource')"
        v-model="searchForm.source"
        clearable
      >
        <el-option
          v-for="item in sourceItem"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select
        :placeholder="$t('historyStatus.searchForm.executeType')"
        v-model="searchForm.executionType"
        clearable
      >
        <el-option
          v-for="item in executeTypeItem"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="btn-group" style="">
      <el-date-picker
        :placeholder="$t('historyStatus.searchForm.startTime')"
        v-model="searchForm.startTime"
        type="datetime"
        clearable>
      </el-date-picker>
      <el-date-picker
        :placeholder="$t('historyStatus.searchForm.CompleteTime')"
        v-model="searchForm.endTime"
        type="datetime"
        clearable>
      </el-date-picker>
      <el-select
        :placeholder="$t('historyStatus.searchForm.state')"
        v-model="searchForm.state"
        clearable
      >
        <el-option
          v-for="item in stateItems"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button
        icon="el-icon-search"
        @click="getJobStatus"
      ></el-button>
    </div>
    <div class="table-wrap">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          v-for="(item, index) in column"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          :total="total"
          :current-page="currentPage"
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </el-row>
</template>
<script>
import { mapActions } from 'vuex'
import API from '../api'
export default {
  name: 'HistoryStatus',
  data() {
    return {
      column: [
        {
          label: this.$t('historyStatus').column.jobName,
          prop: 'jobName'
        },
        {
          label: this.$t('historyStatus').column.taskId,
          prop: 'taskId'
        },
        {
          label: this.$t('historyStatus').column.serverIp,
          prop: 'slaveId'
        },
        {
          label: this.$t('historyStatus').column.executeSource,
          prop: 'source'
        },
        {
          label: this.$t('historyStatus').column.shardingItem,
          prop: 'shardingItems'
        },
        {
          label: this.$t('historyStatus').column.executeType,
          prop: 'executionType'
        },
        {
          label: this.$t('historyStatus').column.state,
          prop: 'state'
        },
        {
          label: this.$t('historyStatus').column.createTime,
          prop: 'creationTime'
        },
        {
          label: this.$t('historyStatus').column.remark,
          prop: 'message'
        }
      ],
      stateItems: [
        {
          value: 'TASK_STAGING',
          label: this.$t('historyStatus').searchForm.stateStaging
        }, {
          value: 'TASK_FAILED',
          label: this.$t('historyStatus').searchForm.stateFailed
        },
        {
          value: 'TASK_FINISHED',
          label: this.$t('historyStatus').searchForm.stateFinished
        }, {
          value: 'TASK_RUNNING',
          label: this.$t('historyStatus').searchForm.stateRunning
        },
        {
          value: 'TASK_ERROR',
          label: this.$t('historyStatus').searchForm.stateError
        }, {
          value: 'TASK_KILLED',
          label: this.$t('historyStatus').searchForm.stateKilled
        }
      ],
      sourceItem: [
        {
          value: 'CLOUD_SCHEDULER',
          label: 'CLOUD_SCHEDULER'
        },
        {
          value: 'CLOUD_EXECUTOR',
          label: 'CLOUD_EXECUTOR'
        }
      ],
      executeTypeItem: [
        {
          value: 'FAILOVER',
          label: 'FAILOVER'
        },
        {
          value: 'READY',
          label: 'READY'
        }
      ],
      searchForm: {
        jobName: '',
        taskId: '',
        slaveId: '',
        source: '',
        executionType: '',
        state: '',
        startTime: '',
        endTime: ''
      },
      tableData: [],
      cloneTableData: [],
      currentPage: 1,
      pageSize: 10,
      total: null
    }
  },
  created() {
    this.getJobStatus()
  },
  methods: {
    ...mapActions(['setRegCenterActivated']),
    handleCurrentChange(val) {
      const page = {
        per_page: this.pageSize,
        page: val
      }
      API.loadStatus(Object.assign(this.searchForm, page)).then(res => {
        const data = res.model.rows
        this.total = res.model.total
        this.tableData = data
      })
    },
    getJobStatus() {
      API.loadStatus(this.searchForm).then(res => {
        const data = res.model.rows
        this.total = res.model.total
        this.tableData = data
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.btn-group {
  margin-bottom: 20px;
}
.pagination {
  float: right;
  margin: 10px -10px 10px 0;
}
.el-input {
  width: 200px;
}
</style>