<template>
  <div class="app-container">
    <div class="head-container">
      <el-button type="primary" icon="plus" @click="$refs.addActive.show()">添加活动</el-button>
      <el-button type="primary" icon="download" @click="$refs.downloadQR.show()">
        下载会员充值二维码
      </el-button>
      <div style="margin-top: 35px; font-size: 16px; color: #333">
        允许充值自定义金额：
        <el-switch
          v-model="shopInfo.isCustom"
          active-value="1"
          inactive-value="0"
          size="large"
          @change="customStatusChange"
        ></el-switch>
      </div>
    </div>
    <div class="head-container">
      <el-table :data="tableData.data" v-loading="tableData.loading">
        <el-table-column label="店铺ID" prop="shopId"></el-table-column>
        <el-table-column label="充值金额" prop="amount"></el-table-column>
        <el-table-column label="赠送金额" prop="giftAmount"></el-table-column>
        <el-table-column label="赠送积分" prop="giftPoints"></el-table-column>
        <el-table-column label="是否使用优惠券" prop="isUseCoupon">
          <template v-slot="scope">
            {{ scope.row.isUseCoupon == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template v-slot="scope">
            <el-button type="text" icon="edit" @click="$refs.addActive.show(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination
        :total="tableData.total"
        :current-page="tableData.page + 1"
        :page-size="tableData.size"
        @current-change="paginationChange"
        layout="total"
      ></el-pagination>
    </div>
    <addActive ref="addActive" @success="getTableData" />
    <QR ref="downloadQR"></QR>
  </div>
</template>

<script>
import handselTypes from "./handselTypes";
import addActive from "./components/addActive.vue";
import QR from "./components/downloadQR.vue";
import activeApi from "@/api/account/activate";
import dayjs from "dayjs";
export default {
  components: {
    addActive,
    QR,
  },
  data() {
    return {
      query: {
        shopId: "",
      },
      tableData: {
        data: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0,
      },
      shopInfo: {
        isCustom: "0",
      },
    };
  },
  filters: {
    handselTypeFilter(value) {
      return handselTypes.find((item) => item.value == value).label;
    },
    timeFilter(s) {
      return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 切换状态
    async statusChange(e, row) {
      if (row.couponName) {
        try {
          this.tableData.loading = true;
          const data = { ...row };
          data.isUseCoupon = e;
          console.log(data.isUseCoupon);
          await storageupActivate(data);
          this.getTableData();
        } catch (error) {
          console.log(error);
          this.tableData.loading = false;
        }
      } else {
        console.log(22);
        this.$message({
          message: "请选择优惠劵",
          type: "warning",
        });
        return false;
      }
    },
    // 重置查询
    resetHandle() {
      this.query.name = "";
      this.query.type = "";
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    // 获取商品列表
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await activeApi.getList({});
        this.tableData.loading = false;
        this.tableData.data = res;
        this.tableData.total = res.length;
      } catch (error) {
        console.log(error);
      }
    },
    customStatusChange() {
      this.updateShopInfo();
    },
    async updateShopInfo() {
      await tbShopInfoPut(this.shopInfo);
    },
  },
};
</script>
