<template>
  <div class="down-list">
    <el-table
      v-loading="loading"
      class="search-table"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        key="fileName"
        prop="fileName"
        label="名称"
        min-width="170"
        align="center"
      />
      <el-table-column
        key="createdTime"
        prop="createdTime"
        label="创建时间"
        min-width="170"
        align="center"
      />
      <el-table-column
        key="status"
        prop="status"
        label="状态"
        min-width="170"
        align="center"
      >
        <template slot-scope="scope">
          <div class="status_base">
            <div :class="'status-circle status-' + scope.row.status" /><div>{{ getStatusDesc(scope.row.status) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        min-width="400"
      >
        <template slot-scope="scope">
          <div
            class="download-btn"
            @click="download(scope.row.path)"
          >
            下载
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="[15, 30, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import {
    exportList
  } from '@/api/downList';
  const STATUS_DESC_MAP = {
    1: '处理中',
    2: '完成',
    3: '失败'
  };
  export default {
    data() {
      return {
        pageSize: 15,
        pageNo: 1,
        totalCount: 0,
        loading: false,
        tableData: [],
      };
    },
    created () {
      this.queryList();
    },
    methods: {
      queryList () {
        exportList({
          pageSize: this.pageSize,
          pageNo: this.pageNo
        }).then(res => {
          if (res && res.code === '000000') {
            this.totalCount = res.data.allSize;
            this.tableData = res.data.list;
          }
        });
      },
      getStatusDesc (status) {
        return STATUS_DESC_MAP[status];
      },
      download(link) {
        window.location.href = link;
      },
      handleSizeChange(value) {
        this.pageNo = 1;
        this.pageSize = value;
        this.queryList();
      },
      handleCurrentChange(value) {
        this.pageNo = value;
        this.queryList();
      },
    },
  };
</script>

<style lang="scss" scoped>
.down-list {
  margin: 15px;
  .status_base {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .status-circle {
      content: '';
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      margin-right: 5px;
    }
    .status-1 {
      background-color: rgb(219, 223, 12);;
    }
    .status-2 {
      background-color: rgb(87, 238, 82);;
    }
    .status-3 {
      background-color: rgb(238, 68, 16);;
    }
  }
  .download-btn {
    color: rgb(7, 180, 59);
    cursor: pointer;
  }
  .download-btn:hover {
    color: rgb(98, 233, 86);
  }
}
</style>