<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-input
        class="mr10 w260"
        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 w260"
        v-model="listParams.creatorName"
        clearable
        placeholder="请输入操作人姓名搜索"
        @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-date-picker
        class="w350 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" min-width="200px">
        <template slot-scope="scope">
          <div v-html="listTime(scope.row.createTime)"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="creatorName"
        label="操作人"
        min-width="180px"></el-table-column>
      <el-table-column
        prop="fileName"
        label="文件名称"
        min-width="200px"></el-table-column>
      <el-table-column prop="giftName" label="福利名称" min-width="150px">
        <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="180px">
        <template slot-scope="scope">
          <div v-if="scope.row.statusFlag === 1">
            成功<span class="success-color">{{ scope.row.successNum }}</span>条，失败<span class="danger-color">{{ scope.row.errorNum }}</span>条
          </div>
          <div v-else-if="scope.row.statusFlag === 0" class="state-point state-point-loading">上传中</div>
          <div v-else class="state-point state-point-error">上传失败</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130px">
        <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="showDetail(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>
    <detail :dialog-visible.sync="dialogVisible" :id="uploadLogId"></detail>
  </div>
</template>

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

export default {
  name: 'StockRecord',
  components: {
    Detail,
  },
  mixins: [ page, formate ],
  props: {
    type: {
      type: [ Number, String ], // 0 礼品 1 卡券
      required: true,
    },
    queryParams: {
      // 额外参数
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      dateTime: [ new Date() - 7 * 24 * 60 * 60 * 1000, new Date() ],
      listParams: {
        source: this.type,
        search: '',
        creatorName: '',
        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,
        ...this.queryParams
      };
      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;
        });
    },
    showDetail({ uploadLogId }) {
      this.uploadLogId = uploadLogId;
      this.dialogVisible = true;
    },
    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>
<style scoped>
.w260{
  width: 260px;
}
</style>