<template>
  <div id="api-retry">
    <!-- eslint-disable -->
    <header>
      <el-date-picker
        v-model="searchData.date"
        type="datetimerange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 400px"
        :default-time="['00:00:00', '23:59:59']"
        @change="onSearchDataChange">
      </el-date-picker>
      <el-select v-model="searchData.enterpriseId" filterable @change="onSearchChange" clearable>
        <el-option v-for="(item, index) in enterpriseList" :key="index" :label="item.enterpriseName" :value="item.enterpriseId"></el-option>
      </el-select>
      <el-select v-model="searchData.code" filterable @change="onSearchChange" clearable>
        <el-option v-for="(item, index) in erpList" :key="index" :label="item.interFaceCatoryName" :value="item.interFaceCatoryCode"></el-option>
      </el-select>
      <el-input v-model.trim="searchData.input" prefix-icon="el-icon-search" @keydown.enter.native="searchStrategy" placeholder="请输入" style="width:280px;margin-left:10px">
        <i
          class="el-input__icon el-icon-error"
          slot="suffix"
          v-show="searchData.input.length > 0"
          @click="clearSearch"
        ></i>
      </el-input>
    </header>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column
        label="品牌"
        show-overflow-tooltip>
        <template slot-scope="{row}">
          {{ row.enterpriseName || '--' }}
        </template>
      </el-table-column>
      <el-table-column
        label="接口名称"
        show-overflow-tooltip>
        <template slot-scope="{row}">
          {{ row.interfaceName || '--' }}
        </template>
      </el-table-column>
      <el-table-column
        label="重试状态"
        show-overflow-tooltip>
        <template slot-scope="{row}">
          {{ row.statusDesc || '--' }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="失败原因"
        show-overflow-tooltip>
        <template slot-scope="{row}">
          {{ row.targetCuInfo || '--' }}
        </template>
      </el-table-column> -->
      <el-table-column
        label="时间"
        show-overflow-tooltip>
        <template slot-scope="{row}">
          <div class="twoLine">
            {{ row.createTime | formatDate }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="90"
        fixed="right">
        <template slot-scope="{row}">
          <el-button v-if="$getButtonLimit($buttonCode.interfaceRetry)" :limit-code="$buttonCode.interfaceRetry" type="text" @click.prevent.native="retry(row.id)">重试</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-if="tableData.length > 0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="page.totalCount">
    </el-pagination>
  </div>
</template>
<script>
/* eslint-disable */
import { getRequest, putRequest } from '@/api/api';

export default {
  name: 'api-retry',
  data() {
    return {
      menuData: [
        {
          name: '接口重试',
          path: '/api-retry'
        }
      ],
      activeName: 'first',
      searchData: {
        date: [new Date(new Date().setHours(0,0,0,0)-24*60*60*1000), new Date()],
        enterpriseId: undefined,
        code: undefined,
        input: ''
      },
      tableData: [],
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 999
      },
      erpList: [],
      enterpriseList: [],
    }
  },
  created() {
    this.getEnterpriseList();
    this.getErpList();
    this.getLogsList();
  },
  mounted() {
    this.$emit('showTab', 'platform_erp_retry');
  },
  methods: {
    getLogsList() {
      // eslint-disable-next-line
      let { date, enterpriseId, code, input } = this.searchData;
      let { currentPage, pageSize } = this.page;
      date = date.length ? date : ['',''];
      let params = {
        startTime: this.formatDate(date[0]),
        endTime: this.formatDate(date[1]),
        currentPage	: currentPage || 1,
        pageSize: pageSize || 20,
        enterpriseId: enterpriseId || undefined,
        interfaceCode: code || undefined,
        id: input || undefined
      };
      getRequest('/gic-platform-operation/erp/list', params).then(res => {
        const { data } = res;
        if(data.errorCode == 0) {
          this.page.totalCount = data.totalCount;
          this.tableData = data.result || [];
        } else {
          this.$messaage.warning(data.message)
        }
      })
    },
    getEnterpriseList() {
      getRequest('/gic-platform-operation/enterprise/list', {}).then(res => {
        const { data } = res;
        if(data.errorCode == 0) {
          this.enterpriseList = data.result || [];
        } else {
          this.$messaage.warning(data.message)
        }
      })
    },
    getErpList() {
      getRequest('/gic-platform-operation/erp/interface/list', {}).then(res => {
        const { data } = res;
        if(data.errorCode == 0) {
          this.erpList = data.result || [];
        } else {
          this.$messaage.warning(data.message)
        }
      })
    },
    onSearchDataChange(val) {
      this.page.currentPage = 1;
      !val && (this.searchData.date = []);
      this.getLogsList();
    },
    onSearchChange() {
      this.page.currentPage = 1;
      this.getLogsList();
    },
    // 改变每页显示数量
    handleSizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getLogsList();
    },
    // 换页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getLogsList();
    },
    retry(id) {
      this.$confirm('是否确定重试', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          erpErrorId: id
        }
        putRequest(`/gic-platform-operation/erp/retry/${id}`, params).then(res => {
          const { data } = res;
          this.$message({
            type: data.result == 1 ? 'warning' : 'success',
            message: data.result == 1 ? data.message : '重试成功',
          });
          this.getLogsList();
        })
      })
    },
    // 清除搜索框内容
    clearSearch() {
      this.searchData.input = '';
      this.page.currentPage = 1;
      this.getLogsList();
    },
    // 搜索框回车
    searchStrategy() {
      this.page.currentPage = 1;
      this.getLogsList();
    },
    formatDate(val) {
      if(!val) return undefined;
      val = new Date(val);
      let y = val.getFullYear();
      let m = (val.getMonth() + 1).toString().padStart(2, '0');
      let d = val.getDate().toString().padStart(2, '0');
      let h = val.getHours().toString().padStart(2, '0');
      let mm = val.getMinutes().toString().padStart(2, '0');
      let s = val.getSeconds().toString().padStart(2, '0');
      return `${y}-${m}-${d} ${h}:${mm}:${s}`
    }
  },
  props: {
    // 左侧菜单选中 id
    activeSelTab: {
      type: [String, Number],
      default() {
        return 'platform_erp_retry';
      }
    }
  },
  filters: {
    formatDate(val) {
      if(!val) return '--';
      val = new Date(val);
      let y = val.getFullYear();
      let m = (val.getMonth() + 1).toString().padStart(2, '0');
      let d = val.getDate().toString().padStart(2, '0');
      let h = val.getHours().toString().padStart(2, '0');
      let mm = val.getMinutes().toString().padStart(2, '0');
      let s = val.getSeconds().toString().padStart(2, '0');
      return `${y}-${m}-${d}\xa0\xa0\xa0${h}:${mm}:${s}`
    }
  }
}
</script>
<style lang="scss" scoped>
#api-retry {
  padding: 20px;
  background-color: #fff;
  header {
    display: flex;
    // justify-content: space-between;
    margin-bottom: 20px;
    .el-select {
      margin-left: 10px;
    }
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
