<template>
  <div class="report-center">
    <topNav :nav="nav"></topNav>
    <div class="right-content">
      <div class="report-content">
        <div class="report-search-box">
          <!-- 时间 -->
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>

        <el-table :data="reportTable" ref="myTable" class="table-no-line-wrap" style="width: 100%">
          <el-table-column prop="reportId" label="报表中心"></el-table-column>
          <el-table-column prop="createTime" label="操作时间">
            <template slot-scope="scope">
              <p>{{ scope.row.createTime[0] }}</p>
              <p>{{ scope.row.createTime[1] }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="applyClerkName" label="操作人名称"></el-table-column>
          <el-table-column prop="reportName" label="文件名称" width="320"></el-table-column>
          <el-table-column prop="dateArea" label="时间范围" width="260"></el-table-column>
          <el-table-column prop="dataCount" label="数据总量"></el-table-column>
          <el-table-column prop="dataContent" label="数据频道页名称"></el-table-column>
          <el-table-column prop="exportEnterpriseName" label="导出文件范围"></el-table-column>
          <el-table-column prop="fileStatus" label="文件状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="downLoad(scope.row.downloadUrl)" v-if="scope.row.fileStatus === '已生成'">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" v-show="totalCount > 0">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="totalCount"> </el-pagination>
        </div>
      </div>
    </div>
    <!-- <vue-gic-footer></vue-gic-footer> -->
  </div>
</template>

<script>
import topNav from '../../../components/nav/nav';
import { postRequest } from '@/api/api';
import { dateformat } from '@/utils'

export default {
  name: 'report-center',

  components: {
    topNav
  },

  data() {
    return {
      date: [
        dateformat(new Date(new Date() - 3600 * 1000 * 24 * 30), 'yyyy-MM-dd'),
        dateformat(new Date(), 'yyyy-MM-dd')
      ],
      reportTable: [],
      totalCount: 0,
      nav: [
        {
          name: '集团管理',
          path: ''
        },
        {
          name: '报表中心',
          path: ''
        }
      ]
    };
  },

  watch: {
    date(newval) {
      console.log(newval);
    }
  },

  methods: {
    getData(params) {
      postRequest('/api-report/list-clique-download-report', params).then(res => {
        if (res.data.errorCode == 0) {
          const data = res.data.result;
          console.log(data);
          this.totalCount = data.totalCount;
          this.reportTable = data.result || [];
          if (data.result && data.result.length) {
            this.reportTable = data.result.map(el => ({
              ...el,
              createTime: dateformat(new Date(el.createTime), 'yyyy-MM-dd hh:mm:ss').split(' ')
            }));
          } else {
            this.reportTable = [];
          }
        }
      }).catch(err => {
        console.log(err);
      });
    },
    downLoad(url) {
      window.location.href = url;
    },
    // 页数变
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getData(this.params);
    },
    // 页码变
    handleCurrentChange(val) {
      this.params.currentPage = val;
      this.getData(this.params);
    }
  },

  beforeMount() {
    this.params = {
      startTime: this.date[0],
      endTime: this.date[1],
      currentPage: 1,
      pageSize: 20,
      requestProject: 'gic-clique'
    };
    this.getData(this.params);
  }
};
</script>

<style lang="less">
.report-center {
  .report-content {
    background-color: #fff;
    padding: 24px;
    .report-search-box {
      margin-bottom: 10px;
    }
  }
  .right-content {
    margin: 24px;
    min-height: calc(100% - 250px);
  }
  .pagination {
    margin-top: 6px;
    text-align: right;
  }
}
</style>