<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="logo">抽奖系统</div>
        </el-col>
        <el-col :span="18"></el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-tabs v-model="activeTab" type="card" @tab-click="tabChange">
        <el-tab-pane label="抽奖配置" name="setting">
          <prize-setting :data="settings" :prizes="prizes" @submit="saveSetting"></prize-setting>
        </el-tab-pane>
        <el-tab-pane label="中奖名单" name="winner">
          <winner :data="winners" :prizes="prizes" @search="searchWinner" @cancel="cancelWinner" @exportExcel="exportExcel"></winner>
        </el-tab-pane>
        <el-tab-pane label="奖品管理" name="prize">
          <prize :data="prizes" :uploadAction="uploadAction" @submit="savePrize"></prize>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import getApi from '../apis.js'
import request from '../utils/request.js'

export default {
  name: 'admin-board',
  components: {
    'prize-setting': () => import('../components/setting.vue'),
    'winner': () => import('../components/winner.vue'),
    'prize': () => import('../components/prize.vue')
  },
  created() {
    this.getSettingList()
    this.getPrizeList()
  },
  data() {
    return {
      activeTab: 'setting',

      // 人员列表
      users: [],
      // 中奖名单
      winners: [],
      // 奖品列表
      prizes: [],
      // 抽奖配置
      settings: [],

      uploadAction: getApi('file.upload').url,
    }
  },
  methods: {
    tabChange(tab) {
      switch (tab.name) {
        case 'winner':
          this.getWinnerList()
          break;
        case 'prize':
          this.getPrizeList()
          break;
      }
    },
    getSettingList() {
      const api = getApi('setting.prize.list')
      request(api).then(({ settings }) => {
        this.settings = settings
      })
    },
    saveSetting(data) {
      const api = getApi('setting.prize.save')
      request({ ...api, data: { data: window.JSON.stringify(data) } }).then(({ settings }) => {
        this.settings = settings
      })
    },
    getPrizeList() {
      const api = getApi('prize.list')
      request(api).then(({ prizes }) => {
        this.prizes = prizes
      })
    },
    getWinnerList() {
      const api = getApi('winner.list')
      request({ ...api }).then(({ winners }) => {
        this.winners = winners
      })
    },
    searchWinner(params) {
      const api = getApi('winner.list')
      request({ ...api, params }).then(({ winners }) => {
        this.winners = winners
      })
    },
    cancelWinner({ UserId, PrizeId: pid }) {
      const api = getApi('winner.cancel', { UserId })
      request({ ...api, params: { pid }}).then(() => {
        this.winners = this.winners.filter(x => x.Status != -1)

        this.$message({
            type: 'success',
            message: '取消成功!'
          })
      })
    },
    savePrize(data) {
      const api = getApi('prize.save')
      request({ ...api, data: { data: window.JSON.stringify(data) } }).then(({ prizes }) => {
        this.prizes = prizes
      })
    },
    exportExcel(params) {
      const api = getApi('excel.winner')
      const searchStr = !params ? '' : ['?'].concat(Object.keys(params).map((k) => `${k}=${params[k]}`)).join('&')
      window.open(`http://localhost:8080${api.url}${searchStr}`)
    }
  }
}
</script>


<style>

.el-header, .el-footer {
  color: #fff;
  background-color: rgb(84, 92, 100);
  border-bottom: 1px solid #ebebeb;
}

.el-header .logo {
  line-height: 60px;
}

</style>

