<template>
  <layout class="drag" style="height: 99.5%;">
    <drag height="calc(54% - 20px)">
      <div slot="header">
        <el-form
          :model="searchForm"
          ref="searchForm"
          :inline="true"
          size="mini"
          v-enter-submit="search"
          @submit.native.prevent
        >
          <el-form-item label="类型">
            <el-select
              style="width: 150px"
              v-model="searchForm.taskType"
              value-key=""
              placeholder="请选择"
              @change="typeChange"
              clearable
            >
              <el-option
                v-for="(item, index) in types"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              native-type="submit"
              @click="search"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item label="">
            <el-button type="success" @click="showEdit()"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
        <div class="table_wrap">
          <my-table
            :sourceData="sourceData"
            :tableColumns="tableColumns"
            :selection="true"
            @currentChange="currentChange"
          ></my-table>
        </div>
      </div>
      <div slot="footer">
        <el-tabs
          v-model="activeName"
          type="border-card"
          style="height: 100%; width: 100%"
        >
          <el-tab-pane label="日志" name="1">
            <div style="height: calc(100% - 30px)">
              <my-table
                :sourceData="logList"
                :tableColumns="logTableColumns"
              ></my-table>
            </div>
            <pagination
              :setValue="setpaginationOptions"
              :options="paginationOptions"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </drag>
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      :visible.sync="editVisible"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form
        :model="editForm"
        ref="editForm"
        label-width="100px"
        size="mini"
        :inline="true"
      >
        <el-form-item label="类型" prop="taskType" required>
          <el-select
            style="width: 168px"
            v-model="editForm.taskType"
            value-key=""
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="任务开始时间"
          v-if="editForm.quartzType === 'SIMPLE'"
        >
          <el-date-picker
            style="width: 168px"
            v-model="editForm.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          label="执行频率:"
          prop="interval"
          required
          v-if="editForm.quartzType === 'SIMPLE'"
        >
          每
          <el-input
            style="width: 50px"
            v-model="editForm.interval"
            placeholder="1"
          ></el-input>
          &nbsp;
          <el-select
            style="width: 60px"
            v-model="editForm.unit"
          >
            <el-option label="秒" value="s"></el-option>
            <el-option label="分" value="m"></el-option>
            <el-option label="时" value="h"></el-option>
            <el-option label="天" value="day"></el-option>
            <el-option label="月" value="month"></el-option>
          </el-select>
          <el-button @click="editForm.quartzType = 1"
            >高级</el-button
          >
        </el-form-item>
        <cron
          v-else
          @change="changeCron"
          @close="cronPopover = false"
          v-model="editForm.cron"
        >
          <el-button @click="editForm.quartzType = 'SIMPLE'"
            >返回</el-button
          >
        </cron>
        <el-form-item label="任务描述" size="normal">
          <el-input
            style="width: 438px"
            v-model="editForm.note"
            placeholder=""
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="editVisible = false" size="mini"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="submit"
          size="mini"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </layout>
</template>
<script>
import { get, post } from '../../common/api/axios'
import MyTable from '@/common/components/base/tableView.vue'
import pagination from '../../mixins/pagination'
import cron from '../../components/base/cron'
export default {
  name: 'system_timed_task',
  components: {
    cron,
    MyTable,
  },
  mixins: [pagination],
  data() {
    return {
      types: [],
      searchForm: {},
      sourceData: [],
      isEdit: false,
      editVisible: false,
      defaultEditForm: JSON.stringify({
        unit: '',
        quartzType: 'SIMPLE',
        cron: '',
      }),
      editForm: {},
      cronPopover: true,
      activeName: '1',
      logList: [],
    }
  },
  computed: {
    tableColumns() {
      return [
        {
          label: '任务类型',
          type: '',
          width: 200,
          key: 'taskTypeTxt',
          align: 'left',
        },
        {
          label: '分组',
          type: '',
          width: 100,
          key: 'taskGroup',
        },
        {
          label: '定时器类型',
          type: '',
          width: 100,
          key: 'quartzType',
        },
        { label: 'cron', type: '', width: '', key: 'cron' },
        {
          label: '开始时间',
          type: '',
          width: 130,
          key: 'startTime',
        },
        {
          label: '间隔',
          type: '',
          width: 100,
          key: 'interval',
          align: 'right',
        },
        {
          label: '单位',
          type: '',
          width: 100,
          key: 'unitTxt',
        },
        {
          label: '状态',
          type: '',
          width: 60,
          key: 'status',
          render: item => (
            <el-switch
              value={item.status}
              active-value={true}
              inactive-value={false}
              onChange={status =>
                this.statusChange(item, status)
              }
            />
          ),
        },
        {
          label: '任务描述',
          type: '',
          width: '',
          key: 'note',
          align: 'left',
        },
        {
          label: '创建时间',
          type: '',
          width: 130,
          key: 'createTime',
        },
        {
          label: '操作',
          type: '',
          width: 100,
          fixed: 'right',
          key: '',
          render: item => (
            <div>
              <span
                class="icon-view icon-edit-view"
                title="编辑"
              >
                <i
                  class="el-icon-edit"
                  onClick={() => this.showEdit(item)}
                ></i>
              </span>
              <span
                class="icon-view icon-del-view"
                title="删除"
              >
                <i
                  class="el-icon-delete-solid"
                  onClick={() => this.remove(item.id)}
                ></i>
              </span>
              <span
                onClick={() => this.clearLog(item.id)}
                class="icon-view icon-tools-view"
                title="清空日志"
              >
                <svg
                  t="1627348192624"
                  style="margin-top:3px"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1348"
                  width="18"
                  height="18"
                >
                  <path
                    d="M274.688 811.52c-8.32 10.688-20.48 24-36.48 39.936a44.736 44.736 0 0 1-43.136 11.52l-78.08-20.864-23.104-8.704c-29.632-25.536-44.608-61.44-39.36-95.552 5.76-37.12 32.32-67.648 82.112-88.704 34.368-14.656 67.584-74.176 89.664-157.44l3.84-14.464-2.24-4.032-14.272-4.48c-17.856-5.504-30.08-16.96-34.432-31.808-4.352-14.912-0.064-30.72 12.096-43.904l123.776-135.488c9.92-10.752 24.832-19.392 41.856-23.936 16.64-4.416 33.984-4.672 48.64-0.768l123.584 33.024 4.096-2.368 55.36-205.824c8.704-32.448 43.968-51.456 78.72-42.24l83.2 22.272c34.752 9.28 55.808 43.392 47.104 75.84l-55.36 205.824 2.368 4.096 118.528 31.68c14.592 3.84 29.568 12.8 41.728 24.96 12.416 12.352 21.12 27.2 24.192 41.472l39.36 179.072c3.84 17.536-0.384 33.28-11.648 44.032a43.776 43.776 0 0 1-25.92 11.712l-12.928 1.408-2.944 3.072-1.024 12.864c-2.56 34.048-6.4 62.976-17.92 139.52l-6.528 43.648c-3.84 26.048-6.528 46.976-8.768 66.304-4.224 36.544-23.488 65.28-54.656 81.6-15.424 8.128-32 12.672-45.824 13.44l-4.032 0.192-90.432-24.32a18.88 18.88 0 0 1-12.16-26.688l35.392-71.552-20.352 26.24a515.328 515.328 0 0 1-47.36 50.56 19.008 19.008 0 0 1-18.112 4.672l-75.456-20.16a18.88 18.88 0 0 1-12.16-26.624l35.456-71.552-20.352 26.24a510.336 510.336 0 0 1-47.36 50.56 18.944 18.944 0 0 1-18.112 4.672l-88.448-23.68a18.944 18.944 0 0 1-12.096-26.56l35.392-71.552-20.352 26.24a515.84 515.84 0 0 1-47.36 50.56 18.944 18.944 0 0 1-18.112 4.672l-62.528-16.704a18.944 18.944 0 0 1-12.096-26.688l35.392-71.488-20.352 26.24z m577.024-413.824l-142.784-38.208a22.272 22.272 0 0 1-15.808-27.264l61.056-227.072a22.272 22.272 0 0 0-15.808-27.264L657.728 56.32a22.4 22.4 0 0 0-27.328 15.744l-60.992 227.136a22.336 22.336 0 0 1-27.392 15.744l-147.84-39.552c-14.848-3.968-37.248 1.728-46.464 11.84l-113.92 124.544a11.072 11.072 0 0 0 5.376 18.24l669.184 178.816a11.136 11.136 0 0 0 13.824-13.12l-36.16-164.608-34.304-33.408zM317.44 709.76a22.4 22.4 0 0 1 27.328-6.848l3.392 1.6h0.128a21.888 21.888 0 0 1 10.432 29.248c-15.616 32.896-27.136 56.32-34.432 70.4-3.584 6.912-7.232 13.696-10.88 20.48l-11.648 21.12 34.176 9.152 2.944-0.64 6.208-4.928c29.504-23.68 61.888-59.136 97.088-106.176a22.4 22.4 0 0 1 27.264-6.848l3.52 1.6 0.128 0.064c10.944 5.12 15.616 18.24 10.432 29.12-15.616 32.896-27.136 56.32-34.432 70.4-3.904 7.552-7.552 14.336-10.88 20.48l-11.712 21.12 54.592 14.592 2.944-0.64 6.208-4.928c29.44-23.68 61.76-58.88 96.896-105.92 6.4-8.512 17.984-11.328 27.584-6.72l3.2 1.536a22.208 22.208 0 0 1 10.432 29.504c-15.36 32.384-26.752 55.68-34.112 69.76a854.4 854.4 0 0 1-10.88 20.48l-11.712 21.12 55.04 14.72 2.944-0.64 6.208-4.928c29.44-23.68 61.76-58.944 96.96-105.984 6.4-8.512 17.92-11.328 27.52-6.784l3.2 1.536h0.064a22.016 22.016 0 0 1 10.432 29.44c-21.44 44.608-36.48 74.752-45.12 90.304l-11.712 21.248 63.104 16.832 5.248-0.768c8.064-1.664 15.552-4.48 22.4-8.448 17.024-9.792 26.432-24.96 28.928-46.336 1.856-16.128 31.552-223.616 33.6-255.552l0.832-12.736-2.432-3.456-592.512-158.272-4.096 2.368-4.096 14.976a572.608 572.608 0 0 1-27.584 80c-24.192 55.04-53.568 90.112-86.784 104.192-32.64 13.824-52.224 32.64-55.68 54.848-2.56 16.256 4.096 33.92 17.792 48.64l3.072 3.328 92.16 25.152 3.008-0.64 6.144-4.928 97.152-106.24z"
                    fill="#ffffff"
                    p-id="1349"
                  ></path>
                </svg>
              </span>
            </div>
          ),
        },
      ]
    },
    logTableColumns() {
      return [
        {
          label: 'Task Id',
          width: 100,
          key: 'taskId',
          align: 'right',
        },
        {
          label: '状态',
          width: 70,
          key: 'status',
          render: item => (
            <span
              style={{
                color:
                  item.status === 'FAILURE'
                    ? 'red'
                    : item.status === 'SUCCESS'
                    ? 'green'
                    : '#ddd',
              }}
            >
              {item.status}
            </span>
          ),
        },
        { label: '开始时间', width: 130, key: 'startTime' },
        { label: '结束时间', width: 130, key: 'endTime' },
        {
          label: '错误信息',
          width: '',
          key: 'errorMessage',
          align: 'left',
        },
      ]
    },
  },
  mounted() {
    this.getlist()
    get('quartzTask/typeList').then(res => {
      this.types = res.data
    })
  },
  methods: {
    clearLog(taskId) {
      get('quartzTask/clearLogs', {
        taskId: taskId,
      }).then(res => {
        this.$message.success(res.message)
        this.getDetail(taskId)
      })
    },
    currentChange(item) {
      if (item.row) {
        this.getDetail(item.row.id)
      }
    },
    getDetail(id) {
      const {
        pageSize,
        currentPage,
      } = this.paginationOptions
      get('quartzTask/logs', {
        id,
        currentPage,
        pageSize,
      }).then(res => {
        this.paginationOptions.total = res.data.total
        this.logList = res.data.records
      })
    },
    statusChange(item, status) {
      let url
      if (status) {
        url = 'quartzTask/resume'
      } else {
        url = 'quartzTask/pause'
      }
      get(url, { id: item.id }).then(res => {
        this.$message.success(res.message)
        if (res.code === 200) {
          this.$set(item, 'status', status)
        }
      })
    },

    changeCron(val) {
      console.log(val)
    },
    remove(id) {
      get('quartzTask/delete', { ids: id }).then(res => {
        this.$message.success(res.message)
        this.getlist()
      })
    },
    search() {
      this.getlist()
    },
    getlist() {
      post('quartzTask/list', {
        ...this.searchForm,
      }).then(res => {
        this.sourceData = res.data
      })
    },
    submit() {
      this.$refs.editForm.validate(v => {
        if (!v) return
        const url = this.isEdit
          ? 'quartzTask/update'
          : 'quartzTask/add'
        delete this.editForm.createTime
        delete this.editForm.updateTime
        post(url, this.editForm).then(res => {
          this.$message.success(res.message)
          this.editVisible = false
          this.getlist()
        })
      })
    },
    async showEdit(item) {
      if (item) {
        let res
        try {
          res = await get('quartzTask/get', { id: item.id })
          this.editForm = res.data
        } catch (error) {
          console.log(error)
        }
        this.isEdit = true
      } else {
        this.isEdit = false
        this.editForm = JSON.parse(this.defaultEditForm)
      }
      this.editVisible = true
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    typeChange(v) {
      for (const iterator of this.types) {
        if (iterator.value === v) {
          this.editForm.taskType = iterator.key
          break
        }
      }
    },
  },
}
</script>
