<template>
  <div class="app-container">
    <!-- <div class="mb10">
      <el-button @click="getBack">返回拼团列表</el-button>
    </div> -->
    <el-form :inline="true" :model="search" :size="ELsize" v-show="showSearch">
      <el-form-item label="商品名称">
        <el-input
          v-model="search.title"
          placeholder="商品名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          :size="ELsize"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table :data="dataList" row-key="Id" border style="width: 100%">
      <el-table-column prop="title" align="center" label="商品名称">
      </el-table-column>
      <el-table-column prop="minSalePrice" align="center" label="销售价格">
      </el-table-column>
      <el-table-column prop="minPrice" align="center" label="活动价格">
      </el-table-column>
      <el-table-column prop="groupPeopleNum" align="center" label="团购规模">
      </el-table-column>
      <el-table-column prop="realStockTotal" align="center" label="可售数量">
      </el-table-column>
      <el-table-column prop="resultSaleNum" align="center" label="已售数量">
      </el-table-column>
      <el-table-column prop="sort" align="center" label="商品排序">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goOrder(scope.row)">
            团详情
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="upGbPdAdd(scope.row.id, scope.row.productId)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 弹窗,修改 -->
    <GbPdAdd ref="gbPdAddRef" @updataList="getList" :showInventory="false"></GbPdAdd>
  </div>
</template>

<script>
import getListApi from "@/mixins/getListApi";
import GbPdAdd from "./components/GbPdAdd.vue";
import {
  groupBookingActivitygoodsPage_api,
  groupBookingActivitygoodsDel_api,
} from "@/api/marketing/groupBooking.js";

export default {
  mixins: [getListApi],
  data() {
    return {
      listURL: groupBookingActivitygoodsPage_api,
      initializationShow: false,
    };
  },
  components: {
    GbPdAdd,
  },
  watch: {
    // $route() {
    //   this.getList();
    // },
  },
  mounted() {
    this.queryParams.groupBuyId = this.$route.query.id;
    this.getList();
  },

  methods: {
    goOrder(item) {
      this.$router.push({
        path: "/marketing/groupBooking/groupOrder",
        query: { groupBuyId: item.groupBuyId, groupBuyProductId: item.id },
      });
    },
    deleteHandle(id) {
      this.$confirm(`确定要删除该条数据?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          groupBookingActivitygoodsDel_api(id).then((res) => {
            if (res && res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },

    // 商品列表
    addOrUpdateHandle(id) {
      this.$router.push({
        path: "/marketing/groupBooking/gbAddList",
        query: { id: this.queryParams.groupBuyId },
      });
    },
    // 编辑
    upGbPdAdd(id, productId) {
      this.$nextTick(() => {
        this.$refs.gbPdAddRef.init(id, this.queryParams.groupBuyId, productId);
      });
    },
    // 返回拼团列表
    getBack() {
      this.$tab.closeOpenPage();
      this.$router.go(-1);
    },
  },
};
</script>
<style>
.mb10 {
  margin-bottom: 10px;
}
</style>
