<template>
  <div class="page_info">
    <div class="search_pannel">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
        @submit.native.prevent
      >
        <el-form-item label="bean名称">
          <el-input
            v-model="dataForm.beanName"
            :placeholder="$t('schedule.beanName')"
            clearable
          />
        </el-form-item>
      </el-form>
      <div class="search_btn">
        <el-button type="primary" @click="getDataList()">
          {{ $t("query") }}
        </el-button>
        <el-button plain @click="clear()"> 重置 </el-button>
      </div>
    </div>
    <div class="card_info">
      <div class="function_btn">
        <el-button
          v-if="$hasPermission('sys:schedule:save')"
          type="primary"
          icon="el-icon-plus"
          @click="addOrUpdateHandle()"
        >
          {{ $t("add") }}
        </el-button>
        <el-button
          v-if="$hasPermission('sys:schedule:pause')"
          plain
          class="btn_color"
          icon="el-icon-video-play"
          @click="pauseHandle()"
        >
          {{ $t("schedule.pauseBatch") }}
        </el-button>
        <el-button
          v-if="$hasPermission('sys:schedule:run')"
          plain
          class="btn_color"
          icon="el-icon-thumb"
          @click="runHandle()"
        >
          {{ $t("schedule.runBatch") }}
        </el-button>
        <el-button
          v-if="$hasPermission('sys:schedule:log')"
          plain
          class="btn_color"
          icon="el-icon-reading"
          @click="logHandle()"
        >
          {{ $t("schedule.log") }}
        </el-button>
        <el-button
          v-if="$hasPermission('sys:schedule:delete')"
          plain
          class="btn_color"
          icon="el-icon-delete"
          @click="deleteHandle()"
        >
          {{ $t("deleteBatch") }}
        </el-button>
      </div>
      <div class="info_list">
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          style="width: 100%"
          :header-cell-style="{ background: '#e6e7ea', color: '#0C1935' }"
          @selection-change="dataListSelectionChangeHandle"
          @sort-change="dataListSortChangeHandle"
          :height="screenHeight"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          />
          <el-table-column
            prop="beanName"
            label="bean名称"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="params"
            label="参数"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cronExpression"
            label="cron表达式"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="remark"
            label="备注"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="status"
            label="状态"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" size="small" type="success">
                {{ $t("schedule.status1") }}
              </el-tag>

              <el-tag v-else size="small" type="danger">
                {{ $t("schedule.status0") }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            :resizable="false"
            header-align="center"
            align="center"
            width="220"
          >
            <template slot-scope="scope">
              <el-link
                v-if="$hasPermission('sys:schedule:update')"
                type="primary"
                :underline="false"
                @click="addOrUpdateHandle(scope.row.id)"
              >
                修改
              </el-link>
              <el-link
                v-if="$hasPermission('sys:schedule:pause')"
                type="primary"
                :underline="false"
                @click="pauseHandle(scope.row.id)"
              >
                暂停
              </el-link>
              <el-link
                v-if="$hasPermission('sys:schedule:resume')"
                type="primary"
                :underline="false"
                @click="resumeHandle(scope.row.id)"
              >
                恢复
              </el-link>
              <el-link
                v-if="$hasPermission('sys:schedule:run')"
                type="primary"
                :underline="false"
                @click="runHandle(scope.row.id)"
              >
                执行
              </el-link>
              <el-link
                v-if="$hasPermission('sys:schedule:delete')"
                type="primary"
                :underline="false"
                @click="deleteHandle(scope.row.id)"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template v-if="total > 0">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        />
      </template>
    </div>
    <el-drawer
      :size="addOrUpdateVisible ? '25%' : '60%'"
      :visible.sync="drawer"
      :with-header="false"
      :modal="false"
      @close="closedrawer"
    >
      <add-or-update
        ref="addOrUpdate"
        @refreshDataList="getDataList()"
        v-if="addOrUpdateVisible"
      ></add-or-update>
      <log v-if="logVisible" ref="log" />
    </el-drawer>
  </div>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./schedule-add-or-update";
import Log from "./schedule-log";
export default {
  components: {
    AddOrUpdate,
    Log,
  },
  mixins: [mixinViewModule],
  data() {
    return {
      screenHeight: "512px",
      mixinViewModuleOptions: {
        getDataListURL: "/sys/schedule/page",
        getDataListIsPage: true,
        deleteURL: "/sys/schedule",
        deleteIsBatch: true,
      },
      dataForm: {
        beanName: "",
      },
      logVisible: false,
    };
  },
  mounted() {
    this.setTableHeight();
    // 页面创建完成后添加监听
    window.addEventListener("resize", this.setTableHeight);
  },
  methods: {
    setTableHeight() {
      setTimeout(() => {
        this.screenHeight = getComputedStyle(
          document.querySelector(".info_list")
        ).height;
      }, 1000);
    },
    clear() {
      this.dataForm.beanName = "";
    },
    // 暂停
    pauseHandle(id) {
      if (!id && this.dataListSelections.length <= 0) {
        return this.$message({
          message: this.$t("prompt.Batch"),
          type: "warning",
          duration: 500,
        });
      }
      this.$confirm(
        this.$t("prompt.info", { handle: this.$t("schedule.pause") }),
        this.$t("prompt.title"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$http
            .put(
              "/sys/schedule/pause",
              id ? [id] : this.dataListSelections.map((item) => item.id)
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getDataList();
                },
              });
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    // 恢复
    resumeHandle(id) {
      if (!id && this.dataListSelections.length <= 0) {
        return this.$message({
          message: this.$t("prompt.Batch"),
          type: "warning",
          duration: 500,
        });
      }
      this.$confirm(
        this.$t("prompt.info", { handle: this.$t("schedule.resume") }),
        this.$t("prompt.title"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$http
            .put(
              "/sys/schedule/resume",
              id ? [id] : this.dataListSelections.map((item) => item.id)
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getDataList();
                },
              });
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    // 执行
    runHandle(id) {
      if (!id && this.dataListSelections.length <= 0) {
        return this.$message({
          message: this.$t("prompt.Batch"),
          type: "warning",
          duration: 500,
        });
      }
      this.$confirm(
        this.$t("prompt.info", { handle: this.$t("schedule.run") }),
        this.$t("prompt.title"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$http
            .put(
              "/sys/schedule/run",
              id ? [id] : this.dataListSelections.map((item) => item.id)
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getDataList();
                },
              });
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    // 日志列表
    logHandle() {
      this.logVisible = true;
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.log.init();
      });
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.setTableHeight);
  },
};
</script>
