<template>
  <div>
    <el-row>
      <el-col>
        <div style="text-align: right;float:right;margin-bottom: 10px">
          <el-input style="width:200px;" size="mini" v-model="queryTaskName"
                    placeholder="任务名称"></el-input>
          <el-button @click="query" type="primary" size="mini" style="margin-left:20px;"><i
              class="el-icon-search"></i> 查询
          </el-button>
          <el-button @click="resetQuery" type="info" size="mini" style="margin-left:20px;float:right"><i
              class="el-icon-refresh"></i> 重置
          </el-button>
        </div>
        <myTable :metaData="metadata" :tableData="tableData" :isLoading="isLoading"
                 @selection-change="handleSelectionChange">
          <template v-slot="{ index }">
            <el-tooltip class="item" effect="dark"
                        content="立即运行一次"
                        placement="top">
              <el-button type="info" icon="el-icon-s-promotion" @click="runTask(index)" size="mini"
                         plain circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark"
                        content="删除"
                        placement="top">
              <el-button type="danger" icon="el-icon-delete" @click="deleteTaskById(index)" size="mini"
                         plain circle></el-button>
            </el-tooltip>
          </template>
        </myTable>
        <el-pagination
            style="padding: 15px"
            background
            layout="total, prev, pager, next, jumper"
            :total="total"
            :current-page="pageIndex"
            @current-change="onPageChange"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from "vue";
import {mapActions, mapState} from "vuex";
import {
  Select,
  Row,
  Col,
  Button,
  Message,
  Pagination,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  MessageBox
} from "element-ui";
import myTable from "../components/CustomTable"

Vue.use(Select);
Vue.use(Row);
Vue.use(Col);
Vue.use(Button);
Vue.use(Pagination);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

import taskApi from "../../js/api/taskApi";

export default {
  name: "SingleWebsiteTaskTab",
  components: {
    'myTable': myTable
  },
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      multipleSelection: [],
      formLabelWidth: "100px",
      formInputWidth: "290px",
      tableName: "task",
      pageIndex: 0,
      taskStatusOptions: [
        {value: 0, label: "已暂停"},
        {value: 1, label: "已启动"}
      ],
      nodeOptions: [],
      queryTaskName: "",
      queryProject: "",
      queryNode: "",
      queryTaskStatus: null,
      filterSingleSiteTask: true,
    };
  },
  computed: {
    metadata: function () {
      const temp = [];
      this.$store.state.metadata.metadata.forEach((element) => {
        if (element.tableName === "task_single") {
          let tempElement = {...element};
          tempElement.minWidth = tempElement.columnWidth + "%";
          tempElement.columnWidth = 0;
          temp.push(tempElement);
        }
      });
      return temp;
    },
    ...
        mapState({
          tableData: (state) => state.taskSingle.tasks,
          total: (state) => state.taskSingle.total,
          isLoading: (state) => state.taskSingle.isLoading
        })
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteTaskById(index) {
      MessageBox.confirm("是否删除？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            let ids = [this.tableData[index].id]
            taskApi.delTasks(ids, (response) => {
              if (response.data.code === 200) {
                Message({
                  message: "删除成功：" + this.tableData[Number(index)]["name"],
                  type: "success",
                });
              }
              this.refresh()
            })
          })
          .catch(() => {
          })
    },
    runTask(index) {
      let ids = [];
      ids.push(this.tableData[index]["id"]);
      taskApi.startTasks(ids, (response) => {
        if (response.data.code === 200) {
          Message({
            message: "启动" + this.tableData[Number(index)]["name"],
            type: "success",
          });
        }
      });
    },
    setQueryDataBody() {
      let dataBody = {
        taskType: 0
      }
      if (this.queryTaskName.length > 0) {
        dataBody.name = this.queryTaskName
      }
      if (this.queryProject.length > 0) {
        dataBody.project = this.queryProject
      }
      if (this.queryTaskStatus !== null) {
        dataBody.enableFlag = this.queryTaskStatus
      }
      if (this.queryNode.length > 0) {
        dataBody.server = this.queryNode
      }
      return dataBody;
    },
    resetQueryDataBody() {
      let dataBody = {
        taskType: 0
      }
      this.queryTaskName = ""
      this.queryProject = ""
      this.queryTaskStatus = null
      this.queryNode = ""
      return dataBody;
    },
    onPageChange(index) {
      this.pageIndex = index;
      this.queryPageable({
        index: this.pageIndex - 1,
        size: 10,
        dataBody: this.setQueryDataBody()
      });
    },
    ...mapActions({
      queryPageable: "taskSingle/queryPageable"
    }),
    query() {
      this.pageIndex = 1
      this.queryPageable({
        index: 0,
        size: 10,
        dataBody: this.setQueryDataBody()
      });
    },
    resetQuery() {
      this.pageIndex = 1
      this.queryPageable({
        index: 0,
        size: 10,
        dataBody: this.resetQueryDataBody()
      });
    },
    refresh() {
      this.queryPageable({
        index: this.pageIndex - 1,
        size: 10,
        dataBody: this.setQueryDataBody()
      });
    }
  },
  mounted: function () {
    this.pageIndex = 1
    this.queryPageable({
      index: this.pageIndex - 1,
      size: 10,
      dataBody: {
        taskType: 0,
      }
    });
  },
};

</script>

<style scoped>
.el-pagination {
  display: flex;
  justify-content: center;
}

.el-table .cell,
.el-table th > .cell {
  text-align: center;
}
</style>