<template>
  <div class="full-box reportCss" style="overflow: hidden">
    <div class="" style="width: 100%;height:100%;" v-if="!detailTableShow">
      <div class="top-tip-box t-title">当前位置：报表管理</div>
      <div class="" style="width: 100%;height: 40px">
        <div class="" style="width: auto;">
          <div class="sl-row-label" style="width: 100px;line-height:34px;">报表名称：</div>
          <el-input v-model="filter.name" placeholder="请输入内容" style="width:200px;float: left;"></el-input>
        </div>
        <el-button class="search-btn" type="primary" @click="searchresult">查询</el-button>
      </div>
      <div class="table-result-boxx" style="height: calc(100% - 80px);display: flex;">
        <div class="table-container-style">
          <el-table :data="tableData.list" height="200">
            <el-table-column type="index" align="center" label="编号" width="80"></el-table-column>
            <el-table-column prop="name" align="center" label="标题" ></el-table-column>
            <el-table-column prop="dataTime" align="center" label="日期"></el-table-column>
            <el-table-column prop="createTime" align="center" label="生成时间"></el-table-column>
            <el-table-column prop="createTime" align="center" label="操作" width="100">
              <template slot-scope="scope">
                <div class="table-edit-btn" @click="detailTable(scope.row)">详情</div>
                <div class="table-edit-btn" @click="exportModule(scope.row)">下载</div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
        </div>
      </div>
    </div>
    <!---->
    <transition name="el-zoom-in-bottom">
      <div class="" style="width: 100%;height:100%;" v-if="detailTableShow">
        <div class="top-tip-box t-title">当前位置：报表管理 -  {{detailTableName}}
          <el-button class="back-btn" type="primary" @click="detailTableShow = false">返回</el-button>
        </div>
        <div class="table-result-boxx" style="height: calc(100% - 40px);display: flex;">
          <div class="table-container-style">
            <el-table :data="detailTableData" height="200">
              <el-table-column type="index" align="center" label="编号" width="80"></el-table-column>
              <el-table-column   :align="item.prop == 'name' ? 'center' : 'right'" v-for="(item, index) in tableHead" :key="index" :label="item.name" show-overflow-tooltip >
                <!--<template slot="header" slot-scope="scope">{{scope.row.list[index].title}}</template>-->
                <template slot-scope="scope">{{scope.row[item.prop]}}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  let month = new Date().getMonth()==0?1:new Date().getMonth()+1;
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  export default {
    name: 'yjManage',
    data () {
      return {
        activeName:'first',
        timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
        filter:{name:'',},

        tableData:{
          list: [],
          pageNum: 1,
          pageSize: 10,
          pages: 0,
          total: 0,
        },
        detailTableShow:false,
        detailTableName:'',
        tableHead:[],
        detailTableData:[],
      }
    },
    mounted (){},
    created(){
      this.getDataList();
    },
    watch:{

    },
    methods:{
      searchresult(){
        this.getDataList(1);
      },
      getDataList: function (pager) {
        let _this = this;
        _this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
        /*if(!_this.$Util.isEmpty(_this.timeFilter)){
          if(_this.timeFilter.length === 1){
            _this.filter.startDate = _this.timeFilter[0];
          }else if(_this.timeFilter.length === 2){
            _this.filter.startDate = _this.timeFilter[0];
            _this.filter.endDate = _this.timeFilter[1];
          }
        }*/
        _this.$http.get('/dx-economy-api/reportForms/page', {params: $.extend({pageNum: _this.tableData.pageNum,pageSize: _this.tableData.pageSize},_this.filter)}).then(function (resp) {
          var _data = resp.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
            _this.tableData.list = _data.data.list;
            _this.tableData.pageNum = _data.data.pageNum;
            _this.tableData.pageSize = _data.data.pageSize;
            _this.tableData.pages = _data.data.pages;
            _this.tableData.total = _data.data.total;
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
      handlePageChange(currentPage){
        this.getDataList(currentPage)
      },
      detailTable(rowData){
        let vm = this
        vm.detailTableShow = true;
        vm.detailTableName = rowData.name;
        vm.tableHead = JSON.parse(rowData.title);
        vm.detailTableData = JSON.parse(rowData.content);
        console.log(vm.detailTableData)

      },
      exportModule : function (rowData) {
        let vm = this;
        vm.$http.get('/dx-economy-api/reportForms/export/'+rowData.id,{params:{}}).then(function (resp) {
          let _data = resp.data,fileID = _data.data;
          if (_data.code == 200 && !vm.$Util.isEmpty(fileID)) {
            // 下载文件
            vm.$http.get('/dx-economy-api/file/'+fileID).then(() => {
              /*vm.$notify({
                title: '提示',
                message: '导出报表成功！',
                type: 'success'
              });*/
            });
          } else {
            vm.$message.error(_data.message);
          }
        });
      }
    }
  }
</script>
<style></style>
<style scoped>
  .back-btn{height:28px;float:right;margin-top:5px;line-height: 28px;padding: 0 20px;border-radius: 0;border: 1px solid #fff;background: rgba(7,182,255,0.1);margin-left:20px;}
  .aaa{}
  .aaa{}
  .aaa{}
  .aaa{}
</style>