<!--
 * @Description: 异常调度列表组件
 * @Author: liusheng
 * @Date: 2024-11-13 15:30:56
-->
<template>
  <div :style="bodyStyle">
    <!-- 过滤条件 -->
    <abnormal-schd-filter @refreshPage="handleRefreshPage"/>
    <!-- 用户列表 -->
    <el-table :style="tableWidth" :data="abnormalList" :header-cell-style="{background:'#EFF5F9', color:'#8F9399'}">
      <el-table-column min-width="10%" label="应用">
        <template slot-scope="scope">
          <div class="cell-text">{{ scope.row.app }}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="12%" label="任务名称" >
        <template slot-scope="scope">
          <div class="cell-text" style="display:flex;">
            {{ scope.row.task }}
            <el-tooltip class="opr-icon mouse-pointer" effect="dark" :content="scope.row.taskDesc" placement="right">
              <img style="margin-top:2px;" width="18px" height="18px" src="./components/icon-task-tooltip.png" />
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="8%" label="类型">
        <template slot-scope="scope">
          <div class="cell-text">{{ scope.row.typeText }}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="6%" label="状态">
        <template slot-scope="scope">
          <div class="cell-text">{{ scope.row.statusText }}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="8%" label="执行规则">
        <template slot-scope="scope">
          <div class="cell-text">{{ scope.row.execRule }}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="24%" label="说明">
        <template slot-scope="scope">
          <div class="cell-text">{{ scope.row.remark }}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="14%" label="执行时间">
        <template slot-scope="scope">
          <div class="cell-text">{{ scope.row.execTime }}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="9%" label="执行人">
        <template slot-scope="scope">
          <div class="cell-text">{{ scope.row.executer }}</div>
        </template>
      </el-table-column>
      <!-- 操作栏 -->
      <el-table-column min-width="7%" label="操作">
        <template slot-scope="scope">
          <reexec-confirm-popup v-if="scope.row.status == 2 || scope.row.status == 0" style="color:#FF4D4F" 
            :visible="popupVisible" :task="scope.row.task" @update:visible="handleConfirmPopupVisible" 
            @confirm="handleReexecute(scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagenation-block">
      <pagination :page.sync="page" :pageSize.sync="pageSize" :total="total" @refresh="pageAbnormalSchedules"/>
    </div>
  </div>
</template>

<script>
import AbnormalSchdFilter from './components/AbnormalSchdFilter.vue';
import ReexecConfirmPopup from './components/ReexecConfirmPopup.vue';

export default {
  name: 'AbnormalSchedule',
  props: {
    offsetX: {    //内容显示的X轴偏移量，相当于margin-left和margin-right
      type: Number,
      default: 40
    },
    offsetY: {    //内容显示Y轴偏移量，相当于margin-top和margin-bottom
      type: Number,
      default: 0
    }
	},

  components: {
    'abnormal-schd-filter': AbnormalSchdFilter,
    'reexec-confirm-popup': ReexecConfirmPopup,
  },
  
  data() {
    return {
      abnormalList: [],
      filterData: {},
      page: 1,
      pageSize: this.commonConst.PAGE_SIZE,
      total: 0,

      popupVisible: false,  //是否显示重新执行弹窗
    }
  },
  
  computed: {
    bodyStyle() {
      return 'margin:' + this.offsetY + 'px ' + this.offsetX + 'px';
    },

    tableWidth() {
      return "width:" + (this.$root.contentWidth * this.offsetX) + "px";
    },
  },

  methods: {
    pageAbnormalSchedules() {
      let filterParams = {...this.filterData, page: this.page, pageSize: this.pageSize};
      let requestData = {
        method: 'GET',
        url: this.commonUrl.URL_PAGE_ABNORMAL_SCHEDULES ,
        param: filterParams,
      };
      this.vueRequest(requestData).then(result => {
        if (result == null) return;
        
        this.dataPvgList = result.data;
        
        this.total = result.totalNumber;
        this.abnormalList = result.data;
      })
    },

    handleRefreshPage(filterData) {
      this.page = 1;
      this.filterData = filterData;
      this.pageAbnormalSchedules();
    },

    handleConfirmPopupVisible(val) {
      this.popupVisible = val;
    },

    handleReexecute(id) {
      let requestData = {
        method: 'POST',
        url: this.commonUrl.URL_REEXECUTE_ABNORMAL_SCHEDULE,
        contentType: this.commonConst.CNTYPE_FORM_DATA,
        param: { id: id}
      };
      this.vueRequest(requestData).then(result => {
        this.pageAbnormalSchedules();
        if (result == null) {
          return;
        }
        this.$message({message: '重新执行成功', type: 'success'});
      })
    }
  },

  mounted() {
    this.pageAbnormalSchedules();
  }
}
</script>

<style scoped>
.cell-text {
  font-size: 14px;
  color: #657180;
  margin-right: 8px
}

.opr-icon {
  margin-left: 8px;
}

.pagenation-block {
  width: 100%;
  margin-top: 25px;
  text-align: right;
  border: 0px solid blud;
}
</style>
