<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-input class="mr10 w220" v-model="listParams.search" clearable placeholder="请输入福利id" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-input class="mr10 w220" v-model="listParams.activityName" clearable placeholder="请输入操作人姓名搜索" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-date-picker class="w300 mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width: 100%">
      <el-table-column label="上传时间" prop="createTime" width="300px">
        <template slot-scope="scope">
          <div v-html="listTime(scope.row.createTime)"></div>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="操作人" min-width="150px"></el-table-column>
      <el-table-column prop="fileName" label="文件名称" min-width="150px"></el-table-column>
      <el-table-column prop="giftName" label="福利名称" min-width="120px">
        <template slot-scope="scope">
          <el-button type="text" @click="goDetail(scope.row)">{{ scope.row.giftName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="上传结果" min-width="150px">
        <template slot-scope="scope">
          <div v-if="scope.row.statusFlag === 1">
            成功<span class="blue">{{ scope.row.successNum }}</span>条，失败<span class="danger-color">{{ scope.row.errorNum }}</span>条
          </div>
          <div v-else-if="scope.row.statusFlag === 0">上传中</div>
          <div v-else>上传失败</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150px">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.statusFlag === 2" @click="uploadReview(scope.row)">重新上传</el-button>
          <el-button type="text" v-if="scope.row.statusFlag === 1 && scope.row.errorNum !== 0" @click="checkDetail(scope.row)">查看失败原因</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix">
      <dm-pagination class="fr mb0" v-if="tableList.length" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    </div>
    <el-dialog title="查看详情" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <div>
        <el-table :data="errorData">
          <el-table-column prop="errorMsg" label="错误信息"></el-table-column>
        </el-table>
        <div class="pagination-conteiner" style="background:#fff;" v-show="totalError > 0">
          <div class="pagination">
            <dm-pagination small background @size-change="handleSizeErrorChange" @current-change="handleCurrentErrorChange" :current-page.sync="currentErrorPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageErrorSize" layout="total, sizes, prev, pager, next" :total="totalError" v-if="totalError != 0"> </dm-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { page, formate } from '@/mixins/table.js';
import { listTime } from '@/utils/index.js';
import fetch from '@/api/common.js';
const { virtualUploadLog, virtualErrorPage } = fetch;

export default {
  name: 'StockRecord',
  mixins: [ page, formate ],
  props: {
    type: {
      type: [ Number, String ], // 0 礼品 1 卡券
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dateTime: [ , ],
      listParams: {
        source: this.type,
        search: '',
        creatorName: '',
        modifyType: '', // 调整类型(1:加，2:减)
        startTime: '',
        endTime: '',
        currentPage: 1,
        pageSize: 20
      },
      listParams2: {
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      tableList: [],
      dialogVisible: false,
      totalError: '',
      uploadLogId: '',
    };
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    listTime,
    getTableList() {
      if(this.loading) {
        return;
      }
      this.formatterTimeFunc('startTime', 'endTime', 'yyyy-MM-dd', 'dateTime');
      this.loading = true;
      const params = {
        ...this.listParams,
        pageNum: this.listParams.currentPage
      };
      virtualUploadLog(params).then(res => {
        this.loading = false;
        const data = res.result;
        this.tableList = data.result || [];
        this.total = data.totalCount;
        // 删除至最后一页没数据的情况，页码-1
        if (this.tableList.length === 0 && this.listParams.currentPage !== 1) {
          this.listParams.currentPage -= 1;
          this.getTableList();
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    checkDetail(item){
      this.dialogVisible = true;
      this.uploadLogId = item.uploadLogId;
      this.getDetail();
    },
    getDetail(){
      let params = {
        id: this.uploadLogId,
        key: '',
        ...this.listParams2,
        pageNum: this.listParams2.currentPage
      };
      virtualErrorPage(params).then(res => {
        this.errorData = res.result.result || [];
        this.totalError = res.result.totalCount;
      });
    },
    goDetail(item){
      if(item.source === 0){
        this.$router.push({ path: '/gift-manage/virtual-gift-detail', query: { giftId: item.giftId } });
      }else{
        this.$router.push({ path: '/gic-card/info', query: { id: item.giftId } });
      }
    },
    uploadReview(item){
      if(item.source === 0){
        this.$router.push({ path: '/gift-manage/virtual-gift', query: { giftId: item.giftId } });
      }else{
        this.$router.push({ path: '/gic-card/list', query: { couponId: item.giftId } });
      }
    },
  },
};
</script>
