<template>
  <a-modal
    v-model="visible"
    :title="$t('执行任务列表')"
    :width="500"
    wrapClassName="batch_start_task"
    :okText="$t('确定')"
    :cancelText="$t('取消')"
    :confirm-loading="submitLoading"
    @ok="startSubmit"
  >
    <a-form-model
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item :label="$t('选择集群')">
        <a-select
          class="middle"
          :placeholder="$t('请选择')"
          v-model="form.clusterId"
          :options="clusterList"
        >
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('开始时间')">
        <a-date-picker
          show-time
          :locale="locale"
          v-model="form.lowerBound"
          :placeholder="$t('请选择开始时间')"
        />
      </a-form-model-item>
      <a-form-model-item :label="$t('结束时间')">
        <a-date-picker
          show-time
          :locale="locale"
          v-model="form.upperBound"
          :placeholder="$t('请选择结束时间')"
        />
      </a-form-model-item>
    </a-form-model>
    <div class="task_list">
      <vxe-table
        ref="taskList"
        show-overflow
        show-header-overflow
        border="inner"
        resizable
        :row-config="{ isHover: true }"
        :data="dataList"
        height="auto"
      >
        <vxe-column
          type="checkbox"
          width="60"
          align="center"
          key="checkbox"
        ></vxe-column>
        <vxe-column
          field="jobDesc"
          :title="$t('任务名称')"
        >
          <template #default="{ row }">
            {{ row.scheduleJob ? row.scheduleJob.jobDesc : "--" }}
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </a-modal>
</template>
<script>
  const $dispatchcenter = require('w-vue-chongqing/src/api/dispatchCenter');
  const $dataIntegration = require('w-vue-chongqing/src/api/dataIntegration');

  export default {
    props: {
      show: [Boolean],
      info: [Object, Array],
    },
    data() {
      return {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
        dataList: [],
        clusterList: [],
        form: {
          clusterId: undefined,
          jobIds: [],
          lowerBound: undefined,
          upperBound: undefined,
        },
        submitLoading: false,
      };
    },
    computed: {
      visible: {
        get() {
          return this.show;
        },
        set(val) {
          this.$emit('update:show', val);
        },
      },
    },
    watch: {
      visible(val) {
        if (val) {
          this.dataList = this.info;
          this.$nextTick(() => {
            this.form = {
              clusterId: undefined,
              jobIds: [],
              lowerBound: moment().format('YYYY-MM-DD 00:00:00'),
              upperBound: moment().format('YYYY-MM-DD 23:59:59'),
            };
            this.getClusterList();
            this.$refs.taskList.setAllCheckboxRow(true);
          });
        }
      },
    },
    created() {},
    methods: {
      /**
       * @Author: Jason Liu
       * @description: 获取集群信息
       */
      getClusterList() {
        $dataIntegration
          .getClusterManager({
            pageNum: 1,
            pageSize: 10000,
            queryParams: {
              F_isDel_eq: 0,
            },
          })
          .then((req) => {
            this.clusterList = req.data.map((item) => {
              return {
                value: item.clusterId,
                label: item.name,
              };
            });
          })
          .finally(() => {});
      },
      startSubmit() {
        let list = this.$refs.taskList.getCheckboxRecords();
        if (list.length == 0) {
          this.$message.warn($t('请选择需要执行的任务'));
          return false;
        } else if (moment(this.form.upperBound).isBefore(moment(this.form.lowerBound))) {
          this.$message.warn($t('开始时间不能大于结束时间'));
          return false;
        } else {
          this.submitLoading = true;
          this.form.jobIds = list.map((item) => {
            return item.scheduleJob.jobInfoId;
          });
          $dispatchcenter
            .batchExecute(this.form)
            .then(() => {
              this.visible = false;
              this.$message.success($t('批量执行任务成功'));
              this.$emit('callback');
            })
            .finally(() => {
              this.submitLoading = false;
            });
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .batch_start_task {
    .ant-calendar-picker {
      width: 100%;
    }
    .title {
      font-size: 16px;
      margin-bottom: 6px;
    }
    .task_list {
      height: calc(100vh - 420px);
    }
  }
</style>
