<template>
  <div class="app-container">
    <!-- <div class="mb10">
      <el-button @click="getBack">返回管理商品</el-button>
    </div> -->
    <el-form :inline="true" :model="search" :size="ELsize">
      <el-form-item label="商品名称" prop="title">
        <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">
      <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="" align="center" label="成本价格">
      </el-table-column> -->
      <el-table-column
        prop="added"
        align="center"
        :formatter="added"
        label="商品状态"
      >
      </el-table-column>
      <el-table-column prop="realSales" align="center" label="实际销量">
      </el-table-column>
      <el-table-column prop="isJoin" align="center" label="是否已参加拼团">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isJoin">是</el-tag>
          <el-tag v-else type="success">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope" v-if="scope.row.isJoin == false">
          <el-button
            type="text"
            size="small"
            @click="
              addOrUpdateHandle(
                scope.row.productId
              )
            "
            >添加</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="getBack"></GbPdAdd>
  </div>
</template>

<script>
// import seviceApi from "@/api/serviceApi.js";
import getListApi from "@/mixins/getListApi";
import { productForActivityPage, shopProductInfo } from "@/api/goods";
import GbPdAdd from "./components/GbPdAdd.vue";

export default {
  mixins: [getListApi],
  data() {
    return {
      listURL: productForActivityPage,
      initializationShow: false,
    };
  },
  components: {
    GbPdAdd,
  },
  watch: {
    $route() {},
  },
  mounted() {
    this.search.groupBuyId = this.$route.query.id;
    this.getList();
  },
  methods: {
    added(row, column) {
      let status = row.added;
      if (status === true) {
        return "上架";
      } else {
        return "下架";
      }
    },
    // 新增 / 修改
    addOrUpdateHandle(productId) {
      shopProductInfo(productId).then((res) => {
        if (res.code == 200) {
          let productSkuSetList = res.data.productSkuSetList.map((v) => {
            v.originalSalePrice = v.originalSalePrice
              ? v.originalSalePrice * 1
              : v.salePrice * 1;
            v.salePrice = v.salePrice * 1;
            v.id = undefined;
            v.originalStock = v.stock ? v.stock * 1 : 0;
            v.stock = 0;
            v.createTime = undefined;
            v.updateTime = undefined;
            return v;
          });
          this.$nextTick(() => {
            this.$refs.gbPdAddRef.init(
              "",
              this.search.groupBuyId,
              productId,
              productSkuSetList,
              res.data,
            );
          });
        }
      });
      return;
    },
    // 返回管理商品
    getBack() {
      this.$tab.closeOpenPage();
      this.$router.go(-1);
    },
  },
};
</script>
<style>
.mb10 {
  margin-bottom: 10px;
}
</style>
