<template>
  <div>
    <!-- 福利信息列表 -->
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <el-button type="primary" plain class="first-element-btn" @click="dialogCreateVisible=true">增加</el-button>
      <div class="gap-right-8" style="display:inline-block; width:200px;">
        <el-input
          placeholder="输入关键词查找"
          ref="search-bar"
          v-model="filter.keywords"
          class="input-with-select"
          @keyup.enter.native="onFilterChanged"
        >
          <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
        </el-input>
      </div>
    </div>

    <el-scrollbar
      wrap-class="column-wrapper scrollable-items-container"
      :native="false"
      style="height: 250px;"
    >
      <el-table
        stripe
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="status" label="状态" :formatter="StatusText"></el-table-column>
        <el-table-column :formatter="dateFormatter" prop="createtime" label="发布时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="editInfo(scope.row.id)">修改</el-button>
              <el-button type="text" @click="deleteInfo(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <el-pagination
      background
      layout="total,sizes, prev, pager, next"
      @size-change="handleSizeChange"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="totalCount"
      :current-page.sync="currentPage"
      @current-change="changePage"
    ></el-pagination>

    <el-dialog
      append-to-body
      title="添加信息"
      width="450px"
      :visible.sync="dialogCreateVisible"
      :close-on-click-modal="false"
      @open="CreateOpen"
    >
      <RewardCreate ref="RewardCreateCom" @send-success="InfoSendSuccess"></RewardCreate>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="CreateSend">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog
      append-to-body
      title="编辑信息"
      width="450px"
      :visible.sync="dialogEditVisible"
      :close-on-click-modal="false"
    >
      <RewardCreate ref="RewardEditCom" @send-success="InfoSendSuccess"></RewardCreate>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditSend">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import qs from "qs";
import RewardCreate from "@/views/dashboard/components/RewardCreate";
export default {
  name: "RewardList",
  components: { RewardCreate },
  data() {
    return {
      dialogCreateVisible: false,
      dialogEditVisible: false,
      pageSize: 10,
      totalCount: 0,
      currentPage: 1,
      tableData: [],
      loading: false,
      filter: {
        keywords: "",
        status: []
      }
    };
  },
  methods: {
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format("YYYY年MM月DD日");
    },

    InfoSendSuccess(data) {
      this.dialogCreateVisible = false;
      this.dialogEditVisible = false;
      this.loadTableData();
    },

    editInfo(id) {
      this.dialogEditVisible = true;
      const _this = this;
      this.$nextTick(() => {
        _this.$refs["RewardEditCom"].FormReset();
        _this.$refs["RewardEditCom"].FormApi = "/integral.php/reward/update";
        _this.$refs["RewardEditCom"].loadInfo(id);
      });
    },
    CreateOpen() {
      const _this = this;
      this.$nextTick(() => {
        _this.$refs["RewardCreateCom"].FormReset();
        _this.$refs["RewardCreateCom"].clearFiles();
      });
    },
    EditSend() {
      this.$refs["RewardEditCom"].FormSend();
    },
    CreateSend() {
      this.$refs["RewardCreateCom"].FormSend();
    },
    StatusText: function(row, column, cellValue) {
      let text = "";
      switch (cellValue) {
        case 0:
          text = "隐藏";
          break;
        case 1:
          text = "显示";
          break;
      }
      return text;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.onFilterChanged();
    },
    onFilterChanged: function() {
      this.currentPage = 1;
      this.loadTableData();
    },
    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false;
      }
      this.loadTableData();
    },
    loadTableData() {
      this.loading = true;
      var self = this;
      var params = {
        keywords: this.filter.keywords,
        page: this.currentPage,
        offset:
          (this.currentPage == 1 ? 0 : this.currentPage - 1) * this.pageSize,
        limit: this.pageSize
      };
      this.$http('get',"/integral.php/reward/get_reward_list",params)
        .then(function(response) {
          if (response.status == 200) {
            self.loading = false;
            var jsonData = response.data;
            try {
              self.totalCount = jsonData.data.total;
              self.tableData = jsonData.data.list;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    deleteInfo(id) {
      console.log(id);
      var self = this;
      this.$confirm("确定要删除此信息吗？", "删除信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (!id) {
            return false;
          }
          const params = {
            id: id
          };

          this.$http("post","/integral.php/reward/delete",params,'','',
            {transformRequest: [
              data => {
                const paramArray = new Array();
                for (const it in data) {
                  paramArray.push(
                    encodeURIComponent(it) + "=" + encodeURIComponent(data[it])
                  );
                }
                return paramArray.join("&");
              }
            ]},
            // headers: {
            //   "Content-Type": "application/x-www-form-urlencoded"
            // }
          )
            .then(function(response) {
              var message = "";
              if (response.status == 200) {
                var data = response.data;
                message = data.msg;
                if (data.code == 1) {
                  self.$message({
                    message: message,
                    type: "success"
                  });
                  self.loadTableData();
                } else {
                  self.$message({
                    message: message,
                    type: "error"
                  });
                }
              } else {
                message = "服务器太忙了";
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {});
    }
  },
  created() {
    this.loadTableData();
  }
};
</script>

