<template>
  <div class="jobmonitoring_container body_container">
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="22">
          <a-input-search
            class="middle"
            allowClear
            placeholder="请输入任务ID或者任务名称"
            v-model.lazy="queryParams.keyWord"
            @search="querySearch"
          />
          <span class="search_label">集群：</span>
          <a-select
            class="middle"
            allowClear
            mode="multiple"
            :maxTagCount="1"
            :maxTagTextLength="1"
            placeholder="请选择"
            v-model="queryParams.clusterIds"
            :options="clusterList"
            @change="querySearch"
          >
          </a-select>
          <span class="search_label">运行状态：</span>
          <a-select
            class="middle"
            placeholder="请选择"
            v-model="queryParams.finishMode"
            :options="statueList"
            @change="querySearch"
          >
          </a-select>
          <span class="search_label">模块类别：</span>
          <a-select
            allowClear
            class="middle"
            placeholder="请选择"
            v-model="queryParams.jobType"
            :options="[{label:'数据集成', value:'transfer'}, {label:'数据开发', value:'datadev'}]"
            @change="querySearch"
          >
          </a-select>
        </a-col>
        <a-col :span="2" align="right">
          <a-button type="primary" icon="search" @click="querySearch"> 查询 </a-button>
        </a-col>
      </a-row>
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :sort-config="{ trigger: 'cell', defaultSort: {field: 'startTime', order: 'desc'}, orders: ['desc', 'asc', null] }"
          @sort-change="sortList"
          :data="lists"
          height="auto"
        >
          <vxe-column type="seq" title="序号" width="50" align="center" fixed="left"></vxe-column>
          <vxe-column field="jobName" title="任务名称" width="200" fixed="left">
            <template #default="{ row }">
              <span class="ant-btn ant-btn-link" @click="toDetail(row)">{{ row.jobName }}</span>
            </template>
          </vxe-column>
          <vxe-column field="jobType" title="模块类别" width="100">
            <template #default="{ row }">
              <span v-if="row.jobType == 'transfer'">数据集成</span>
              <span v-else-if="row.jobType == 'datadev'">数据开发</span>
              <span v-else>--</span>
            </template>
          </vxe-column>
          <vxe-column field="startTime" title="开始时间" width="160" sortable> </vxe-column>
          <vxe-column field="endTime" title="结束时间" width="160" sortable> </vxe-column>
          <vxe-column field="runtimeMode" title="运行模式" min-width="100">
            <template #default="{ row }">
              {{ row.runtimeMode | filterMode}}
            </template>
          </vxe-column>
          <vxe-column field="runningCount" title="运行中/成功/失败" width="170">
            <template #header="{}">
              <span>运行中/成功/失败</span>
              <a-tooltip placement="rightTop">
                <template slot="title">flink任务数量，即"转换"的数量</template>
                <a-icon type="info-circle" style="margin-left:5px;"/>
              </a-tooltip>
            </template>
            <template #default="{ row }">
              <span class="running">{{ row.runningCount || 0 }}</span>/
              <span class="success">{{ row.successCount || 0 }}</span>/
              <span class="fail">{{ row.failedCount || 0 }}</span>
            </template>
          </vxe-column>
          <vxe-column field="taskState" title="运行状态" min-width="120">
            <template #default="{ row }">
              <a-tag class="tag_or" v-if="row.taskState == 'SUCCESS'">运行成功</a-tag>
              <a-tag class="tag_value" v-else-if="row.taskState == 'RUNNING'">运行中</a-tag>
              <a-tag class="tag_and" v-else-if="row.taskState == 'WALKING'">异常运行中</a-tag>
              <a-tag class="tag_entry" v-else>{{ returnTaskState(row.taskState) }}</a-tag>
            </template>
          </vxe-column>
          <vxe-column field="id" title="任务ID" min-width="180"> </vxe-column>
          <vxe-column field="jobId" title="作业ID" min-width="180"> </vxe-column>
          <vxe-column field="clusterName" title="所属集群" min-width="140"> </vxe-column>
          <vxe-column field="createTime" title="创建时间" min-width="160"> </vxe-column>
          <vxe-column field="createBy" title="负责人" min-width="100"> </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description"> 暂无数据 </span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :total="total"
        @page-change="getFlowList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
    <jobmonitoring :visible.sync="detailFlag" :data="curData"></jobmonitoring>
  </div>
</template>
<script>
import jobmonitoring from './jobmonitoring'
const $dataIntegration = require("@/api/dataIntegration");
export default {
  components: {
    jobmonitoring
  },
  filters: {
    filterMode(val) {
      switch(val) {
        case "STREAMING":
          return "实时任务"
        case "BATCH":
          return "周期任务"
      }
    }
  },
  computed: {
    returnTaskState() {
      return (val) => {
        let item = this.statueList.find(item => { return item.value ==  val})
          if (item) {
            return item.label;
          } else {
            return "未知"
          }
      }
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        keyWord: undefined,
        clusterIds: undefined,
        runtimeMode: 'BATCH',
        finishMode: "",
        jobType: undefined,
        order: {
          field: "startTime",
          direction: "DESC"
        }
      },
      clusterList: [],
      lists: [],
      detailFlag: false,
      curData: {},
      statueList: []
    }
  },
  created() {
    this.getClusterList();
    this.getFlowList();
    this.statueList = $dataIntegration.monitorStatueList;
  },
  methods: {
    /**
     * @Author: y_zp
     * @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(() => {});
    },

    /**
     * @Author: y_zp
     * @description: 获取列表
     */
    getFlowList() {
      this.loading = true
      $dataIntegration
        .getTaskList({ ...this.queryParams })
        .then((req) => {
          let info = req
          this.total = Number(info.count)
          this.lists = info.data;
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @Author: y_zp
     * @description: 列表排序
     */
    sortList({ column }) {
      this.queryParams.order = {
        field: column.field,
        direction: column.order ? column.order.toLocaleUpperCase() : undefined
      }
      this.querySearch();
    },

    /**
     * @Author: y_zp
     * @description: 详情页
     */
    toDetail(row) {
      this.detailFlag = true;
      this.curData = row
    },

    /**
     * @Author: y_zp
     * @description: 查询
     */
    querySearch() {
      this.queryParams.pageNum = 1;
      this.getFlowList();
    },

  }
}
</script>
<style lang="less">
.jobmonitoring_container {
  .search_label.first {
    margin-left: 0;
  }
  .ant-select.middle {
    width: 160px;
  }
  .table_list {
    width: 100%;
    height: calc(100vh - 230px);
    display: inline-block;
    margin-top: 16px;
    .ant-btn {
      display: inline;
    }
    .running {
      color: #2d5afa;
      margin: 0 5px;
    }
    .success {
      color: #29DF7E;
      margin: 0 5px;
    }
    .fail {
      color: #EA4B4B;
      margin: 0 5px;
    }
  }
}
</style>