<template>
  <div id="bulkLogsDetail">
    <nav-path :navpath="navpath"></nav-path>
    <div class="contentBulkIntegral">
      <div class="contentInfo">
        <div class="flex">
          <span class="headerTips">总条数：{{ count.all }} 条，成功导入 {{ count.success }} 条，<span class="headerTipsError">错误 {{ count.error }} 条</span></span>
          <el-button type="primary" @click="exportExcel"><i class="iconfont icon-icon_yunxiazai"></i> 导出</el-button>
        </div>
        <el-table
          :data="tableData">
          <el-table-column
            prop="sequence"
            label="序号">
            <template slot-scope="{ row }">
              {{ row.sequence || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="errorCause"
            label="错误提示">
          </el-table-column>
          <el-table-column
            prop="cardNum"
            label="会员卡号">
            <template slot-scope="{ row }">
              {{ row.cardNum || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="batchType == 11 || batchType == 12"
            prop="opIntegral"
            label="变更额度">
            <template slot-scope="{ row }">
              {{ row.opIntegral || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="batchType == 11"
            label="成本主体">
            <template slot-scope="{ row }">
              {{ row.costStoreName || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="batchType == 13"
            label="等级编码">
            <template slot-scope="{ row }">
              {{ row.gradeCode || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="batchType == 13"
            label="等级名称">
            <template slot-scope="{ row }">
              {{ row.gradeName || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="batchType == 14"
            label="门店代码">
            <template slot-scope="{ row }">
              {{ row.costStoreCode || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="batchType == 14"
            label="门店名称">
            <template slot-scope="{ row }">
              {{ row.costStoreName || '--' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="原因备注">
            <template slot-scope="{ row }">
              {{ row.remark || '--' }}
            </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>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import { doFetch, doFetchqs } from "../../components/axios/api";
import NavPath from "@/common/navbar/navbar.vue";
import url from "../../components/axios/url";
import {
  checkFalse,
  checkStatus,
  checkSuccess
} from "../../../static/js/checkStatus";

export default {
  data() {
    return {
      navpath: [{ name: "首页", path: "" }, { name: "微信会员", path: "" }, { name: "批量导入", path: "" }, { name: "日志详情", path: "" }],
      tableData: [],
      // 换页
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 0
      },
      // 判断积分类型
      integralType: '积分扣除',
      // 条数
      count: {
        all: 0,
        success: 0,
        error: 0
      },
      batchId: '',
      batchType: '',
    }
  },
  methods: {
    // 导出
    exportExcel() {
      window.location.href = `${url.downloadErrorData}?requestProject=member&batchType=${this.batchType}&batchId=${this.batchId}` ;
    },
    // 换页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getLogsDetail();
    },
    // 修改每页显示数量
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getLogsDetail();
    },
    // 获取数据
    getLogsDetail() {
      let params = {
        batchId: this.batchId,
        batchType: this.batchType,
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize
      }
      doFetchqs(url.queryBatchRetErrInfo, params).then(res => {
        if(res.data.errorCode == 0) {
          let value = res.data.result;
          console.log(value)
          this.page.totalCount = value.totalCount;
          this.tableData = value.result;
        } else {
          checkFalse(res.data.message)
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
  },
  created() {
    console.log(sessionStorage.getItem('bulkLogsDetail'))
    const { batchId, batchType, total, succeedNum, errorNum } = JSON.parse(sessionStorage.getItem('bulkLogsDetail'));
    this.batchId = batchId;
    this.batchType = batchType;
    console.log(this.batchType)
    this.count.all = total;
    this.count.success = succeedNum;
    this.count.error = errorNum;
    this.getLogsDetail();
  },
  components: {
    NavPath
  }
}
</script>
<style lang="scss" scoped>
#bulkLogsDetail {
  height: 100%;
  .el-table{
    width:99.9%;
  }
  .contentBulkIntegral {
    padding: 22px 24px;
    .contentInfo {
      padding: 30px 24px;
      background-color: #fff;
      .headerTips {
        color: #303133;
        font-size: 14px;
      }
      .headerTipsError {
        color: #F5222D;
      }
      .flex {
        padding-bottom: 22px;
      }
      /deep/ .el-table th>.cell {
        font-weight: 700;
        color: #303133;
      }
      /deep/ .el-pagination {
        text-align: right;
        margin: 20px 0 40px;
      }
    }
  }
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
