<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="1300px"
  >
    <div class="user-panel" v-loading="loading">
        
        <el-row class="button-group">
            <el-button type="primary" size="small" plain icon="el-icon-circle-plus" @click="handleAdd">新增</el-button>
        </el-row>
        <el-divider></el-divider>
        <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="prizeName" label="奖品名称" width="350"></el-table-column>
        <el-table-column prop="num" label="奖品数量" ></el-table-column>
        <el-table-column prop="activityName" label="所属活动" width="300"></el-table-column>
        <el-table-column  prop="image"  label="奖品图片">
            <template slot-scope="{row}">
            <a v-if="row.image" :href="row.image" target="_blank">
              <el-image
              style="width: 50px; height: 50px"
              :src="row.image"
              fit="fit"></el-image>
            </a>
          </template>
        </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 awardInfoApi from "@/api/base/awardInfo";
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: {

        },
        ruleValidate: {
            name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        },
        dataDictionaryList: [],
        showDialog: true,
        loading: false,
        submitting: false,
        showDetailModal:false,
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
    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);

        formData.append("activityId", self.activityId);
        
  
        awardInfoApi
          .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;
      },
    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(() => {
            awardInfoApi.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);
    }
    },
  },
  mounted: function ()  {
    this.changePage(1);
  },
  components: {
    "awardInfo-detail": awardInfoDetail,
  }
};
</script>