<template>
    <div class="result-table">
      <b-table striped hover bordered :items="items"></b-table>
      <button type="button" class="kalacloudExportExcel-button" v-on:click="download">导出至 Excel</button>
    </div>
</template>
<script>
import XLSX from 'xlsx';
export default {
    name: 'xlsxTest',
    data() {
      return {
      }
    },
    methods: {
      download : function() {
        const data = XLSX.utils.json_to_sheet(this.items)
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, data, 'kalacloud-data')
        XLSX.writeFile(wb,'kalacloudExportExcel.xlsx')
      }
    }
}
</script>

<template>
<div>
    <el-row><el-button
          @click.native.prevent="refreash"
          type="text"
          size="small">
          刷新
        </el-button></el-row>
    <el-table
    :data="tableData"
    ref="multipleTable"
    tooltip-effect="dark"
    border
    size="small"
    style="width: 100%; margin-top: 15px"
    @selection-change="handleSelectionChange"
    @filter-change="filterChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="matchname" label="比赛名"></el-table-column>
    <el-table-column prop="school" label="学校名"></el-table-column>
    <el-table-column prop="collage" label="学院"></el-table-column>
    <el-table-column prop="dtype" label="用户类型">
      <template slot-scope="scope">
        <el-tag
          :type="
            scope.row.dtype == '2'
              ? 'primary'
              : scope.row.dtype == '1'
              ? 'success'
              : 'warning'
          "
        >
          {{scope.row.dtype === "2"? "管理员": scope.row.dtype === "1"? "校园代理": "城市代理"}}
          </el-tag
        >
      </template>
    </el-table-column>
   <el-table-column
      fixed="right"
      label="操作"
      width="160">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
                <el-button
          @click.native.prevent="exportInfo(scope.$index, tableData)"
          type="text"
          size="small">
          导出竞赛信息
        </el-button>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="user_state" label="状态" column-key="user_state"
      :filters="[{text:'启用',value:'AVAILABLE'},{text:'禁用',value:'DISABLE'}]">
      <template slot-scope="scope">
        <el-tag :type="scope.row.user_state == 'AVAILABLE' ? 'success':'warning'">
          {{scope.row.user_state == 'AVAILABLE' ? '可用':'禁用'}}</el-tag>
      </template>
    </el-table-column> -->
  </el-table>
</div>
</template>
<script>
// import XLSX from 'xlsx';
import * as XLSX from 'xlsx';
import { Request } from '../../utils/matchrequest'
export default {
  data() {
    return {
      tableData: [],
      tmp:[],
      matchDetailList:[]
    }
  },
  created(){
    this.getlist()
  },
  methods: {
      async getlist(){
        let _this = this
          var username = window.localStorage.getItem("username")
          let formData = {
            username: username,
          }
        this.yzy.post('match/getmatchlist', formData, function (res) {
            console.log("返回值#################")
            console.log(res)
            // this.data.tmp=JSON.parse(res)
            // this.data.tableData=JSON.parse(res)
          //  this.tableData = JSON.parseArray(res)
          // this.tableData = JSON.parse(res.data)
          let mm=[] 
          for(var i=0;i<res.data.length;i++){
            mm.push(res.data[i])
          }
          console.log(mm)
          // console.log(res.data[0])
          // let tt=[]
          // for(var item in res.data[0][0]){
          //     tt.push(item)
          //     console.log(item)
          // }
          _this.tableData = res.data
        })
      },
      refreash(){
          this.getlist()
      },
      deleteRow(index, rows) {
        //删除操作
        console.log(rows.id)
        rows.splice(index, 1);
      },
      // 查询该竞赛所以参赛学生信息
     async getMatchDetail(id,index){
        let _this = this
        let formData = {
          matchid:id
        }
      console.log("formData##################")
      console.log(formData)
        let url = 'getmatchinfolist'
        this.yzy.post('match/' + url, formData, function (res) {
          console.log(res)
          _this.matchDetailList = res.data
          console.log("this.matchDetailList####################")
          console.log(_this.matchDetailList)
          _this.importExcel(index)
        })
      },
      exportInfo(index, rows){
        console.log("this.tableData[index].pk_id#############")
        console.log(this.tableData[index].id)
        this.getMatchDetail(this.tableData[index].id,index)
      },
      importExcel(index, rows){
          const data = XLSX.utils.json_to_sheet(this.matchDetailList)
          const wb = XLSX.utils.book_new()
          XLSX.utils.book_append_sheet(wb, data, 'kalacloud-data')
          console.log(data)
          // 导出竞赛名+大学名
          XLSX.writeFile(wb,this.tableData[index].matchname+":"+this.tableData[index].school+'.xlsx')
      }
  }
};
</script>
<style>
.upload-demo {
  width: 100%;
}
</style>