<style scoped>
.user-panel {
  margin: 10px auto;
}
.avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
<template>
  <el-dialog v-drag-dialog
      :visible.sync="showDialog"
      :modal-append-to-body="false"
      append-to-body
      :modal="true"
      :title="modalTitle"
      style="text-align:left;"
      @close="closeDialog"
      :close-on-click-modal="false"
        width="1200px"
  >
    <div class="user-panel" v-loading="loading">
      <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
        <el-form-item label="中奖人电话" prop="lotteryPersonnelPhone">
          <el-input type="text" size="mini" v-model="queryModel.lotteryPersonnelPhone"></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-upload2" @click="exportXls">导出</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="lotteryPersonnelImage"  label="头像">
            <template slot-scope="{row}">
            <a v-if="row.lotteryPersonnelImage" :href="row.lotteryPersonnelImage" target="_blank">
              <el-image
              style="width: 50px; height: 50px"
              :src="row.lotteryPersonnelImage"
              fit="fit"></el-image>
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="lotteryPersonnelNickName" label="昵称" ></el-table-column>
        <el-table-column prop="lotteryPersonnelPhone" label="中奖人电话" ></el-table-column>
        <el-table-column prop="awardName" label="奖项" ></el-table-column>
        <el-table-column prop="awardPrizeName" label="奖品" width="350"></el-table-column>
        <el-table-column prop="activityName" label="所属活动" width="280"></el-table-column>
        <!-- <el-table-column label="操作" width="200">
          <template slot-scope="{row}" >
            <el-button size="mini" type="warning" @click="handleEdit(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination 
        style="text-align:center"
        :current-page.sync="pageIndex"
        :total="totalElements"
        :page-sizes="pageSizeList"
        @current-change="changePage"
        @size-change="pageSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
      <awardInfo-detail
          v-if="showDetailModal"
          @close="onDetailModalClose"
          :title="title"
          :activityId="activityId"
          :businessKey="businessKey"
        ></awardInfo-detail>
    </div>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import winningInfoApi from "@/api/base/winningInfo";
import awardInfoDetail from "./awardInfo-detail";
import { getToken } from "@/utils/auth"; // get token from cookie

export default {
    props: ["activityId", "modalTitle"],
  data() {
    return {
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        totalPages: 0,
        totalElements: 0,
        field: "",
        direction: "",
        pageSizeList: [10, 20, 30],
        multipleSelection: [],
        formModel: {

        },
        queryModel:{
          lotteryPersonnelPhone:"",
        },
        ruleValidate: {
            name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        },
        dataDictionaryList: [],
        showDialog: true,
        loading: false,
        submitting: false,
        showDetailModal:false,
        batchImportFileList: [],
        xlsLoading: false,
        uploadUrlXls: Constant.serverUrl + "/base/lotteryPersonnelInfo/importXls",
        uploadXlsData: {
            subFolder: "lotteryPersonnelInfo",
        },
        headers: {
            Authorization: getToken(),
        },
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
    changePage(pageIndex,exportFlag) {
        var self = this;
  
        self.loading = true;
  
        self.pageIndex = pageIndex;
        var formData = new FormData();
  
        formData.append("pageIndex", self.pageIndex);
        if(exportFlag!=null){
            formData.append("exportFlag", exportFlag);
            formData.append("pageSize", 10000);
        }
        else{
            formData.append("pageSize", self.pageSize);
        }

        formData.append("activityId", self.activityId);

        formData.append("lotteryPersonnelPhone", self.queryModel.lotteryPersonnelPhone);
      

        winningInfoApi
          .pageList(formData)
          .then(function(response) {
            self.loading = false;
  
            var jsonData = response.data;
  
            if(jsonData.result) {
                if(exportFlag){
                    //导出
                    self.$message({
                        showClose: true,
                        type: "success",
                        message: `报表已生成，<a href="${jsonData.data}">请点击链接下载</a>`,
                        dangerouslyUseHTMLString: true,
                        duration: 30000
                    });
                }
                else{
                    //分页查看
                    var page = jsonData.data;

                    self.tableData = page.data;
                    self.totalPages = page.totalPages;
                    self.totalElements = page.recordsTotal;
                }
            }
            else{
                self.$message.warning(jsonData.message);
            }
          })
          .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;
      },

      exportXls() {
        this.changePage(1,true);
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      },
    handleAvatarSuccess(res, file) {
        var self = this;
        self.formModel.extended1 = res.data;

        self.fileUrl =
          res.data + "?x-oss-process=image/resize,m_lfit,h_300,w_300";
    },
    beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
    },
    handleAdd() {
        var self = this;
        
        self.title = "新增";
        self.businessKey = "";
        self.showDetailModal = true;
      },
    handleEdit(record) {
        var self = this;
  
        self.title = "编辑";
        self.businessKey = record.id;
        self.showDetailModal = true;
    },
    handleDelete(record) {
        var self = this;
  
        self
          .$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            winningInfoApi.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: "删除成功!"
                });
              }
            });
          });
      },
    onDetailModalClose(refreshed){
    this.showDetailModal = false;

    if(refreshed){
        this.changePage(this.pageIndex);
    }
    },
    beforeUpload(file, fileList) {
          //导入前判断
          var self = this;
          self.xlsLoading = true;
          return true;
      },
              //批量导入-上传成功
              handleBatchImportSuccess(response, file, fileList) {
        var self = this;
        self.xlsLoading = false;

        if (response.result) {
            self.$message.success(response.message);
            this.batchImportFileList = [];
            this.changePage(1);


        } else {
            //this.$message.error(response.message);
            this.batchImportFileList = [];
            this.changePage(1);

            if (response.data != null) {
            //下载有错误信息提示的报表
            //window.open(response.data);
            self.$message({
                showClose: true,
                dangerouslyUseHTMLString: true,
                message:
                response.message +
                `,<a href="${response.data}" target="_blank">点击下载未导入的数据报表</a>&nbsp;`,
                duration: 30000,
            });
            }
        }

        this.batchImportVisible = false;
      },
      //批量导入-预览
      handleBatchImportPreview(file) {
        console.log(file.url);
      },
      //批量导入-移除
      handleBatchImportRemove(file, fileList) {
        console.log(file, fileList);
      },
      //批量导入-移除前操作
      beforeBatchImportRemove(file, fileList) {
        console.log(file, fileList);
      },
      //批量导入-文件超出个数限制时的钩子
      handleBatchImportExceed(files, fileList) {
      this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
          } 个文件`
        );
      },
  },
  mounted: function ()  {
    this.changePage(1);
  },
  components: {
    "awardInfo-detail": awardInfoDetail,
  }
};
</script>