<template>
  <div class="shopManage app-container">
    <div class="search">
      <div>
        <el-input v-model="query.setMealName" size="small" placeholder="请输入套餐等级"
          class="item-width-200"></el-input>

        <el-button class="ml10" type="primary" size="small" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
      </div>

      <el-button class="add-btn" type="primary" size="small" @click="handleAdd(0)">
        添加
      </el-button>

    </div>

    <el-table :data="tableData" tooltip-effect="dark" border v-loading="loading" style="width: 100%">
      <el-table-column align="center" label="套餐等级" prop="setMealName" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="computation" align="center" label="奖励规则" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ computation[scope.row.computation] }}
        </template>
      </el-table-column>
      <el-table-column prop="baseTotal" align="center" label="奖励金额(元)" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ currency(scope.row.baseTotal, {
            fromCents: true,
            symbol: '￥',
          }).format() }}
        </template>
      </el-table-column>
      <el-table-column prop="day" align="center" label="到账时间" show-overflow-tooltip>
        <template slot-scope="scope">
          次月{{ scope.row.day }}号进行发放
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间" show-overflow-tooltip>
      </el-table-column>



      <el-table-column prop="address" width="180px" fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
        :current-page="query.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import currency from "@/utils/currency";
import { inviteReceiptsRoleDelete, inviteReceiptsRolePage } from "@/api/invite"
export default {
  name: "shopManage",
  data() {
    return {
      that: this,
      codeImg: '',//收款码
      downName: '',//下载名称
      showCode: false,
      codeLoading: false,
      tableData: [],
      currency,
      loading: false,
      query: {
        setMealName: "",
        currentPage: 1,
        pageSize: 10,
      },
      computation: {
        "FIXED": "固定返现",
        "RATIO": "百分比返现"
      },
      total: 0,
    };
  },


  methods: {
    handleSearch() {
      this.query.currentPage = 1
      this.inviteReceiptsRolePage();

    },
    filterColor(val) {
      if (val == 0) {
        return 'gray'
      } else if (val == 1) {
        return 'gray'
      } else if (val == 2) {
        return 'green'
      } else if (val == 3) {
        return 'red'
      }
    },
    handleAdd(val) {
      this.$router.push({
        path: "/operationManage/marketingManage/invitePromotion/add" + (val || ""),
      });
    },

    handleEdit(row) {
      let data = JSON.stringify(row);
      this.$router.push({
        path: "/operationManage/marketingManage/invitePromotion/add",
        query: {
          title: "规则编辑",
          data,
        },
      });
    },
    handleDetail(id, title) {
      this.$router.push({
        path: "/operationManage/marketingManage/invitePromotion/add",
        query: {
          title: "规则详情",
          id,
        },
      });
    },


    handleDel(id) {
      this.$confirm(`此操作将删除该数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        inviteReceiptsRoleDelete({
          id
        }).then((res) => {
          if (res.state == "Success") {
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success",
            });
            this.inviteReceiptsRolePage();
          }
        });
      });
    },

    handleSizeChange(val) {
      this.query.currentPage = 1;
      this.query.pageSize = val;
      this.inviteReceiptsRolePage();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.inviteReceiptsRolePage();
    },

    inviteReceiptsRolePage() {
      this.loading = true;
      inviteReceiptsRolePage(this.query).then((res) => {
        this.loading = false;
        if (res.state == "Success") {
          this.tableData = res.content.records;
          this.total = res.content.total;
        }
      });
    },

  },
  created() {
    this.inviteReceiptsRolePage();
  },
};
</script>

<style lang="scss" scoped>
.shopManage {
  .search {
    justify-content: space-between;

    .add-btn {
      // margin-right: 20px;
    }
  }
}
</style>