<template>
  <el-dialog title="选择优惠券" top="5vh" :visible.sync="dialogVisible">
    <div class="head-container">
      <el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
        <!-- <el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column> -->
        <el-table-column label="名称" prop="title" />
        <el-table-column label="使用门槛">
          <template v-slot="scope">
            {{
              `满${scope.row.fullAmount}${scope.row.discountAmount ? "减" + scope.row.discountAmount + "元" : ""
              }`
            }}
          </template>
        </el-table-column>
        <el-table-column label="总发放数量" prop="number" />
        <el-table-column label="已使用" prop="useNumber" />
        <el-table-column label="剩余" prop="leftNumber" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
      @current-change="paginationChange" @size-change="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <span slot="footer" class="dialog-footer" v-if="!radio">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import { getTbShopCoupon, delTbShopCoupon } from '@/api/coupon'
export default {
  props: {
    // 是否为单选
    radio: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      searhForm: {
        name: "",
        category: "",
      },
      categoryList: [],
      tableData: {
        page: 1,
        size: 10,
        total: 0,
        loading: false,
        list: [],
      },
      goods: [],
    };
  },
  methods: {
    // 单选商品
    selectHandle(row) {
      this.$emit("success", [{ ...row }]);
      this.close();
    },
    // 确定选商品
    confirmHandle() {
      let res = this.$refs.table.selection;
      this.$emit("success", res);
      this.close();
    },
    // 重置查询
    resetHandle() {
      this.searhForm.name = "";
      this.searhForm.category = "";
      this.tableData.page = 0;
      this.tableData.size = 10;
      this.tableData.list = [];
      this.getTableData();
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    // 商品列表
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await getTbShopCoupon({
          page: this.tableData.page,
          size: this.tableData.size,
          name: this.searhForm.name,
          categoryId: this.searhForm.category,
          shopId: localStorage.getItem("shopId"),
          sort: "id",
        });
        this.tableData.list = res.content;
        this.tableData.total = res.totalElements;

        if (this.goods.length) {
          this.$nextTick(() => {
            this.selection();
          });
        }
        setTimeout(() => {
          this.tableData.loading = false;
        }, 500);
      } catch (error) {
        console.log(error);
      }
    },
    // 商品分类
    async tbShopCategoryGet() {
      try {
        const res = await getTbShopCoupon({
          page: 0,
          size: 100,
          sort: "id",
          shopId: localStorage.getItem("shopId"),
        });
        this.categoryList = res.content;
      } catch (error) {
        console.log(error);
      }
    },
    async show(goods, categoryId) {
      this.dialogVisible = true;
      if (goods && goods.length) {
        this.goods = goods;
      } else {
        this.goods = [];
      }
      this.resetHandle();

      console.log(categoryId);

      if (categoryId) {
        this.searhForm.category = categoryId;
      }

      console.log(this.searhForm);
    },
    close() {
      this.dialogVisible = false;
    },
    selection() {
      this.goods.forEach((row) => {
        this.tableData.list.forEach((item, index) => {
          if (row.id == item.id) {
            this.$refs.table.toggleRowSelection(this.tableData.list[index]);
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.shop_info {
  display: flex;
  align-items: center;

  span {
    margin-left: 10px;
  }
}
</style>