<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-date-picker
          v-model="search.questTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="拼团状态">
        <el-select v-model="search.status" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </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="goodsTitle"
        align="center"
        label="商品名称"
        width="300px"
      >
      </el-table-column>
      <el-table-column prop="goodsCover" align="center" label="商品图片">
        <template slot-scope="scope">
          <el-image
            class="table-img"
            :src="scope.row.goodsCover"
            :preview-src-list="[scope.row.goodsCover]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="formatStartTime" align="center" label="开团时间">
      </el-table-column>
      <el-table-column prop="completeTime" align="center" label="成团时间">
        <template slot-scope="scope">
          <div>{{ scope.row.completeTime || "--" }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="formatEndTime" align="center" label="截至时间">
      </el-table-column>
      <el-table-column prop="validPersonNumber" align="center" label="人数">
        <template slot-scope="scope">
          {{ scope.row.validPersonNumber }} /
          {{ scope.row.groupPersonNumber }}
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="拼团状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">建团中</el-tag>
          <el-tag type="success" v-if="scope.row.status == 1">建团成功</el-tag>
          <el-tag type="info" v-if="scope.row.status == 2">组团完成</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 3">建团失败</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 4">组团失败</el-tag>
        </template>
      </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="groupPeople(scope.row)"
            >拼团人员</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"
    />

    <!-- 拼团人员 -->
    <GbPersonnel ref="gbPersonnelRef"/>
  </div>
</template>

<script>
import getListApi from "@/mixins/getListApi";
import {
  groupBuyTeamPage_api
} from "@/api/marketing/groupBooking.js";
import GbPersonnel from "./components/GbPersonnel"

export default {
  mixins: [getListApi],
  data() {
    return {
      listURL: groupBuyTeamPage_api,
      initializationShow: false,
      // 日期范围字段映射配置
      dateRangeMapping: {
        // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
        questTime: { start: 'questStartTime', end: 'questEndTime' }
      },
      peopleTable: [],
      options: [
        {
          label: "建团中",
          value: 0,
        },
        {
          label: "建团成功",
          value: 1,
        },
        {
          label: "组团完成",
          value: 2,
        },
        {
          label: "建团失败",
          value: 3,
        },
        {
          label: "组团失败",
          value: 4,
        },
      ],
    };
  },
  components: { GbPersonnel },
  mounted() {
    this.queryParams.pageNum = 1; // 重置页码为1
    this.queryParams.groupBuyId = this.$route.query.groupBuyId;
    this.queryParams.groupBuyProductId = this.$route.query.groupBuyProductId;
    this.getList();
  },

  methods: {
    // 商品列表
    addOrUpdateHandle(id) {
      this.$router.push({
        path: "/marketing/groupBooking/gbAddList",
        query: { id: this.search.group_buy_id },
      });
    },
    // 拼团人员
    groupPeople(item) {
      this.$refs.gbPersonnelRef.init(item.id);
    },
    // 返回拼团列表
    getBack() {
      this.$tab.closeOpenPage();
      this.$router.go(-1);
    },
  },
};
</script>
<style>
.mb10 {
  margin-bottom: 10px;
}
</style>
