<template>
    <div>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#">基础设置管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/base/activityInfo">抽奖活动管理</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <!--
        要resetFields起作用，必须配置:model和prop
      -->
      <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
        <el-form-item label="活动名称" prop="name">
          <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="ios-search"
            @click="changePage(1)"
            :loading="loading"
          >查询</el-button>&nbsp;
          <el-button
            type="info"
            size="mini"
            style="margin-left: 8px"
            @click="handleReset('queryForm')"
          >重置</el-button>&nbsp;
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-row class="button-group">
        <el-button type="primary" size="small" plain icon="el-icon-circle-plus" @click="handleAdd">新增</el-button>
      </el-row>
      <el-table
        :data="tableData"
        style="min-height:400px;"
        v-loading="loading"
        stripe
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name" label="活动名称" ></el-table-column>
        <el-table-column prop="startTime" label="开始时间" ></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column label="操作" width="450">
          <template slot-scope="{row}" >
            <el-button size="mini" type="warning" @click="handleEdit(row)">编辑</el-button>
            <el-button size="mini" type="primary" @click="handleAwardSet(row)">奖项设置</el-button>
            <el-button size="mini" type="success" @click="handlePersonList(row)">人员名单</el-button>
            <el-button size="mini" type="danger" @click="handleWinningList(row)">中奖名单</el-button>
            <el-button size="small" type="primary" icon="el-icon-circle-plus" @click="handleStartLottery(row)">抽奖</el-button>
            <!-- <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageIndex"
        :total="totalElements"
        :page-sizes="pageSizeList"
        @current-change="changePage"
        @size-change="pageSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
        <activityInfo-detail
          v-if="showDetailModal"
          @close="onDetailModalClose"
          :modalTitle="modalTitle"
          :businessKey="businessKey"
        ></activityInfo-detail>
        <awardInfo-list
          v-if="showDetailModal1"
          @close="onDetailModalClose1"
          :modalTitle="modalTitle1"
          :activityId="businessKey"
        ></awardInfo-list>
        <lotteryPersonnelInfo-list
          v-if="showDetailModal2"
          @close="onDetailModalClose2"
          :modalTitle="modalTitle2"
          :activityId="businessKey"
        ></lotteryPersonnelInfo-list>
        <winningInfo-list
          v-if="showDetailModal3"
          @close="onDetailModalClose3"
          :modalTitle="modalTitle3"
          :activityId="businessKey"
        ></winningInfo-list>
        <startLottery-test
          v-if="showDetailModal4"
          @close="onDetailModalClose4"
          :modalTitle="modalTitle4"
          :activityId="businessKey"
        ></startLottery-test>
    </div>
  </template>
  <script>
  import Constant from "@/constant";
  import activityInfoDetail from "./activityInfo-detail";
  import awardInfoList from "./awardInfo-list";
  import lotteryPersonnelInfoList from "./lotteryPersonnelInfo-list";
  import winningInfoList from "./winningInfo-list";
  import startLotteryTest from "./startLottery-test";
  import activityInfoApi from "@/api/base/activityInfo";
  import NProgress from "nprogress"; // progress bar
  import "nprogress/nprogress.css"; // progress bar style
  
  export default {
    name: 'baseActivityList',
    data() {
      var self = this;
  
      return {
        queryModel: {
          path: ""
        },
        loading: false,
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        totalPages: 0,
        totalElements: 0,
        field: "",
        direction: "",
        pageSizeList: [10, 20, 30],
        multipleSelection: [],
        permId:"",
        modalTitle: "",
        modalTitle1:"",
        modalTitle2:"",
        modalTitle3:"",
        modalTitle4:"",
        showDetailModal: false,
        showDetailModal1:false,
        showDetailModal2:false,
        showDetailModal3:false,
        showDetailModal4:false,
      };
    },
    methods: {
      changePage(pageIndex) {
        var self = this;
  
        self.loading = true;
  
        self.pageIndex = pageIndex;
        var formData = new FormData();
  
        formData.append("pageIndex", self.pageIndex);
        formData.append("pageSize", self.pageSize);
  
        activityInfoApi
          .pageList(formData)
          .then(function(response) {
            self.loading = false;
  
            var jsonData = response.data;
  
            if(jsonData.result){
              var pageInfo = jsonData.data;
  
              self.tableData = pageInfo.data;
              self.totalPages = pageInfo.totalPages;
              self.totalElements = pageInfo.recordsTotal;
            }
            else {
              self.$message({
                  message: jsonData.message + "",
                  type: "warning"
                });
            }
          })
          .catch(error => {
            self.loading = false;
            // self.$message.error(error + "");
          });
      },
      pageSizeChange(pageSize) {
        this.pageSize = pageSize;
      },
      sortChange(data) {
        this.field = data.column.field;
        this.direction = data.order == "ascending" ? "asc" : "desc";
  
        this.changePage(this.pageIndex);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      },
      handleAdd() {
        var self = this;
        
        self.modalTitle = "新增";
        self.businessKey = "";
        self.showDetailModal = true;
      },
      handleEdit(record) {
        var self = this;
  
        self.modalTitle = "编辑";
        self.businessKey = record.id;
        self.showDetailModal = true;
      },
      handleAwardSet(record){
        var self = this;
  
        self.modalTitle1 = "奖项设置";
        self.businessKey = record.id;
        self.showDetailModal1 = true;
      },
      handlePersonList(record){
        var self = this;
  
        self.modalTitle2 = "人员名单";
        self.businessKey = record.id;
        self.showDetailModal2 = true;
      },
      handleWinningList(record){
        var self = this;
  
        self.modalTitle3 = "中奖名单";
        self.businessKey = record.id;
        self.showDetailModal3 = true;
      },
      handleStartLottery(record){
        var self = this;
  
        self.modalTitle4 = "开始抽奖";
        self.businessKey = record.id;
        self.showDetailModal4 = true;
      },
      handleDelete(record) {
        var self = this;
  
        self
          .$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            activityInfoApi.remove(record.id).then(function(response) {
              var jsonData = response.data;
  
              if (jsonData.result) {
                // var index = self.tableData.indexOf(record);
                // self.tableData.splice(index, 1);
                self.changePage(self.pageIndex);
  
                self.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
          });
      },
      handleBatchDelete() {
        var self = this;
  
        var idList = this.multipleSelection.map(record => {
          return record.id;
        });
  
        this.$confirm("是否确认删除选中项？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            activityInfoApi.batchRemove(idList).then(function(response) {
            var jsonData = response.data;
  
            if (jsonData.result) {
              self.changePage(self.pageIndex);
  
              self.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        });
      },
      handleImport() {
        // 读取所有菜单
        var self = this;
  
        self.showImportModal = true;
      },
      onDetailModalClose(refreshed){
        this.showDetailModal = false;
  
        if(refreshed){
          this.changePage(this.pageIndex);
        }
      },
      onDetailModalClose1(refreshed){
        this.showDetailModal1 = false;
  
        if(refreshed){
          this.changePage(this.pageIndex);
        }
      },
      onDetailModalClose2(refreshed){
        this.showDetailModal2 = false;
  
        if(refreshed){
          this.changePage(this.pageIndex);
        }
      },
      onDetailModalClose3(refreshed){
        this.showDetailModal3 = false;
  
        if(refreshed){
          this.changePage(this.pageIndex);
        }
      },
      onDetailModalClose4(refreshed){
        this.showDetailModal4 = false;
  
        if(refreshed){
          this.changePage(this.pageIndex);
        }
      },
    },
    mounted: function() {
      this.changePage(1);
    },
    components: {
      "activityInfo-detail": activityInfoDetail,
      "awardInfo-list":awardInfoList,
      "lotteryPersonnelInfo-list":lotteryPersonnelInfoList,
      "winningInfo-list":winningInfoList,
      "startLottery-test":startLotteryTest,
    }
  };
  </script>
  <style lang="scss" scoped>
  .el-breadcrumb {
    margin: 10px;
    line-height: 20px;
  }
  
  .el-divider {
    margin: 5px 0;
  }
  
  .demo-form-inline {
    margin-left: 10px;
    text-align: left;
  }
  
  .button-group {
    padding: 10px;
    text-align: left;
  }
  </style>