<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"
        @change="onSearchDataChange">
      </el-date-picker>
      <el-select v-model="searchData.id" @change="onSearchChange">
        <el-option label="全部" value=""></el-option>
        <el-option v-for="item in enterpriseList" :key="item" :label="item.enterpriseName" :value="item.enterpriseId"></el-option>
      </el-select>
      <el-select v-model="searchData.code" @change="onSearchChange">
        <el-option label="全部" :value="null"></el-option>
        <el-option v-for="item in erpList" :key="item" :label="item.interFaceCatoryName" :value="item.interFaceCatoryCode"></el-option>
      </el-select>
    </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 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: [],
        id: undefined,
        code: undefined
      },
      tableData: [],
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 999
      },
      erpList: [],
      enterpriseList: [],
    }
  },
  created() {
    this.getLogsList();
  },
  mounted() {
    this.$emit('showTab', 'platform_erp_retry');
  },
  methods: {
    getLogsList() {
      this.getEnterpriseList();
      this.getErpList();
      // eslint-disable-next-line
      let { date, id, code } = this.searchData;
      let { currentPage, pageSize } = this.page;
      date = date.length ? date : ['',''];
      let params = {
        startTime: date[0] || undefined,
        endTime: date[1] || undefined,
        currentPage	: currentPage || 1,
        pageSize: pageSize || 20,
        enterpriseId: id || undefined,
        interfaceCode: code || undefined
      };
      getRequest('/gic-platform-operation/erp/list', params).then(res => {
        const { data } = res;
        console.log(data)
        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.errorCode == 0 ? 'success' : 'warn',
            message: data.errorCode == 0 ? '重试成功' : '重试失败',
          });
          this.getLogsList();
        })
      })
    }
  },
  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>