<template>
  <div>
    <div class="tab-top">
      <el-input :placeholder="placeholderText" v-model="search" class="mr10 w350" clearable @keyup.enter.native="getSearchList" @clear="getSearchList">
        <el-select v-model="searchType" slot="prepend" placeholder="礼品名称" style="width:140px;" @change="handleChangeType">
          <el-option label="礼品名称" :value="1"></el-option>
          <el-option label="礼品编码" :value="2"></el-option>
          <el-option label="福利id" :value="3"></el-option>
        </el-select>
      </el-input>
      <el-input placeholder="请输入操作人姓名搜索" prefix-icon="el-icon-search" v-model="creatorName" class="mr10 w220" clearable @keyup.enter.native="getSearchList" @clear="getSearchList"></el-input>
      <el-date-picker v-model="timeValue" type="daterange" @change="changeTime" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
    <div class="table-content" v-loading="loading">
      <el-table :data="tableData" ref="multipleTable" 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"></el-table-column>
        <el-table-column label="上传结果" min-width="150px">
          <template slot-scope="scope">
            <div v-if="scope.row.statusFlag === 0">
              <span v-if="scope.row.progress === 0">上传中</span>
              <span v-else>上传失败</span>
            </div>
            <div v-else>
              成功<span class="blue">{{ scope.row.successNum }}</span>条，失败<span class="danger-color">{{ scope.row.errorNum }}</span>条，<el-button type="text" @click="checkDetail">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" min-width="150px">
          <template slot-scope="scope">
            <div v-if="scope.row.statusFlag === 0">处理中</div>
            <div v-else>
              成功<span class="blue">{{ scope.row.success }}</span>条，失败<span class="danger-color">{{ scope.row.fail }}</span>条，<el-button type="text" @click="checkDetail">查看详情</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination-conteiner" style="background:#fff;" v-show="total > 0">
        <div class="pagination">
          <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total" v-if="total != 0"> </dm-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="查看详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <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 { formatDateTimeByType, listTime } from '@/utils/index.js';
import api from '@/api/gift.js';
const { virtualUploadLog } = api;
export default {
  components: {
    // klal
  },
  data() {
    return {
      bread: [
        {
          breadName: '礼品管理'
        },
        {
          breadName: '库存上传记录'
        }
      ],
      formatDateTimeByType,
      listTime,
      // activeName: '0',
      mixins: [ page, formate ],
      proType: '',
      status: '',
      batchOperate: '',
      total: 0,
      sortOrder: '',
      sortColumn: '',
      tableData: [],
      loading: false,
      // 搜索条件
      search: '',
      giftId: '',
      giftName: '',
      giftNo: '',
      creatorName: '',
      startTime: '',
      endTime: '',
      currentPage: 1,
      pageSize: 20,
      searchType: 1,
      placeholderText: '请输入关键词搜索',
      isShow: false,
      timeValue: [ new Date() - 7 * 24 * 60 * 60 * 1000, new Date().valueOf() ],
      dialogVisible: false,
    };
  },
  created() {
    this.$emit('updateBread', this.bread);
    this.$emit('showAside', true);
    this.init();
    console.log(new Date().getHours());
  },
  methods: {
    init() {
      this.getTableList();
    },
    getSearchList() {
      this.pageNum = 1;
      this.getTableList();
    },
    changeTime(){
      if(this.timeValue){
        this.startTime = this.formatDateTimeByType(this.timeValue[0], 'yyyy-MM-dd');
        this.endTime = this.formatDateTimeByType(this.timeValue[1], 'yyyy-MM-dd');
      }else{
        this.startTime = '';
        this.endTime = '';
      };
      this.currentPage = 1;
      this.pageSize = 20;
      this.getTableList();
    },
    // 列表筛选条件更改
    handleChangeType() {
      if (this.searchType === 1) {
        this.placeholderText = '请输入礼品名称';
        this.giftName = this.search;
      } else if (this.searchType === 2) {
        this.placeholderText = '请输入礼品编码';
        this.giftNo = this.search;
      } else if (this.searchType === 3) {
        this.placeholderText = '福利id';
        this.giftId = this.search;
      }
    },
    // 实物礼品列表
    getTableList() {
      console.log('获取列表详情');
      let params = {
        giftNo: this.giftNo,
        giftName: this.giftName,
        giftId: this.giftId,
        creatorName: this.creatorName,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        startTime: this.startTime,
        endTime: this.endTime
      };
      virtualUploadLog(params).then(res =>{
        console.log(res);
        this.tableData = res.result.result;
        console.log(this.tableData);
      });
    },
    checkDetail(){
      this.dialogVisible = true;
    }
  },
};
</script>
<style lang="scss" scoped>
.tab-top {
  height: 32px;
  margin: 20px 20px 0px 20px;
}
.table-content {
  margin: 20px;
  padding-bottom: 20px;
  .img-text {
    height: 60px;
    img {
      width: 60px;
      height: 60px;
      border: 1px solid #dcdfe6;
      padding: 4px;
      border-radius: 2px;
    }
    .text {
      display: inline-block;
      vertical-align: top;
      width: 75%;
      margin-left: 3px;
      font-size: 13px;
      line-height: 14px;
      .goods-descript {
        color: #606266;
        line-height: 18px;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .goods-code {
        color: #909399;
        font-size: 12px;
        line-height: 16px;
      }
    }
    & :hover .el-icon-edit-outline {
      display: inline-block;
      cursor: pointer;
    }
    .el-icon-edit-outline:hover {
      color: #2f54ed;
    }
  }
  .stock-box {
    &:hover .el-icon-edit-outline {
      display: inline-block;
      cursor: pointer;
    }
  }
}
.el-icon-edit-outline:hover {
  color: #2f54ed;
}
.undeline-dash{
  border-bottom: 1px dashed #2F54EB;
  font-weight:500;
}
.spanclass{
  display: inline-block;
  line-height: 32px;
}
</style>
<style>
.damolish .el-tooltip__popper{
  width: 240px;
}
</style>