<template>
  <div class="app-container">
    <el-tabs v-model="tabsCurrent" @tab-click="changeTopTabs">

      <el-tab-pane label="活动管理" name="activity">
        <div class="mymain-container">
          <div class="btn-group clearfix" style="margin-bottom: 20px">
            <div class="fl">
              <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">添加秒杀活动</el-button>
            </div>
          </div>

          <div class="tabs-container clearfix">
            <div class="fl">
              <el-tabs v-model="activityTypeCurrent" type="card" @tab-click="getActivityListByScreen">
                <el-tab-pane label="全部" name="0"></el-tab-pane>
                <el-tab-pane label="未开始" name="1"></el-tab-pane>
                <el-tab-pane label="进行中" name="2"></el-tab-pane>
                <el-tab-pane label="已结束" name="3"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="fr">
              <el-date-picker
                v-model="activityScreenForm.activityDate"
                @change="getActivityListByScreen"
                type="daterange"
                size="small"
                style="margin-right: 20px; width: 260px !important;"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="活动开始时间"
                end-placeholder="活动结束时间">
              </el-date-picker>
              <el-input placeholder="请输入活动名称进行搜索" v-model="activityScreenForm.keyword" size="small" style="width: 240px; margin-top: 10px;" clearable>
                <el-button slot="append" icon="el-icon-search" size="small" @click="getActivityListByScreen"></el-button>
              </el-input>
            </div>
          </div>

          <div class="table">
            <el-table v-loading="activity_listLoading" :data="activity_dataList" element-loading-text="Loading" border fit stripe>
              <el-table-column align="center" label="活动名称" prop="secKillName" min-width="120"></el-table-column>
              <el-table-column align="center" label="参与产品数量" prop="specCount" min-width="120"></el-table-column>
              <el-table-column align="center" label="活动时间" min-width="200">
                <template slot-scope="scope">
                  {{ scope.row.startTime | dateToDayFilter }} 至 {{ scope.row.endTime | dateToDayFilter }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="参与场次" prop="stages" width="280">
                <template slot-scope="scope">
                  <el-tag v-for="(item, index) in scope.row.stages" :key="index" size="small">{{item.name}}点</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商户" prop="companyName" min-width="120"></el-table-column>
              <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                  {{ scope.row.activityStatus | SEC_KILL_CURRENT_STATUS_FILTER }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="addOrEdit('edit', scope.row.secKillId)">编辑</el-button>
                  <template>
                    <el-popconfirm v-if="scope.row.status" style="margin-left: 10px;" title="确定关闭吗？" @onConfirm="changeActivityStatus(scope.row.secKillId, 0)" >
                      <el-button slot="reference" type="text">关闭</el-button>
                    </el-popconfirm>
                    <el-popconfirm v-else style="margin-left: 10px;" title="确定开启吗？" @onConfirm="changeActivityStatus(scope.row.secKillId, 1)" >
                      <el-button slot="reference" type="text">开启</el-button>
                    </el-popconfirm>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination clearfix">
            <div class="fr">
              <el-pagination
                @size-change="handleActivitySizeChange"
                @current-change="handleActivityCurrentChange"
                :current-page="activity_currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="activity_listTotal">
              </el-pagination>
            </div>
          </div>
        </div>

      </el-tab-pane>


      <el-tab-pane label="商品管理" name="goods">
        <div class="mymain-container">
          <div class="tabs-container clearfix">
            <div class="fl">
              <el-tabs v-model="goodsTypeCurrent" type="card" @tab-click="getSeckillGoodsListByScreen">
                <el-tab-pane label="全部" name="0"></el-tab-pane>
                <el-tab-pane label="未开始" name="1"></el-tab-pane>
                <el-tab-pane label="进行中" name="2"></el-tab-pane>
                <el-tab-pane label="已结束" name="3"></el-tab-pane>
                <el-tab-pane label="已关闭" name="4"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="fr">
              <el-input placeholder="请输入商品名称进行搜索" v-model="goodsScreenForm.keyword" size="small" style="width: 240px; margin-top: 10px;" clearable>
                <el-button slot="append" icon="el-icon-search" size="small" @click="getSeckillGoodsListByScreen"></el-button>
              </el-input>
            </div>
          </div>
          
          <div class="table">
            <el-table v-loading="goods_listLoading" :data="goods_dataList" element-loading-text="Loading" border fit stripe>
              <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200"></el-table-column>
              <el-table-column align="center" label="商品图片" prop="imgUrl" width="80">
                <template slot-scope="scope">
                  <el-image style="width: 50px; height: 50px;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover"></el-image>
                </template>
              </el-table-column>
              <el-table-column align="center" label="活动时间" prop="startTime" min-width="240">
                <template slot-scope="scope">
                  <div>开始时间：{{scope.row.startTime}}</div>
                  <div>结束时间：{{scope.row.endTime}}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="返佣" prop="amount"></el-table-column>
              <el-table-column align="center" label="秒杀价" prop="price"></el-table-column>
              <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                  {{ scope.row.status | SEC_KILL_CURRENT_STATUS_FILTER }}
                </template>
              </el-table-column>
              
              <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-popconfirm title="确定删除吗？" @onConfirm="deleteGoods(scope.row.secKillSpecId)" >
                    <el-button slot="reference" type="text">删除</el-button>
                  </el-popconfirm>
                  <template>
                    <el-popconfirm v-if="scope.row.status == 1 || scope.row.status == 2" style="margin-left: 10px;" title="确定关闭吗？" @onConfirm="changeGoodsStatus(scope.row.secKillSpecId, 0)" >
                      <el-button slot="reference" type="text">关闭</el-button>
                    </el-popconfirm>
                    <el-popconfirm v-if="scope.row.status == 4" style="margin-left: 10px;" title="确定开启吗？" @onConfirm="changeGoodsStatus(scope.row.secKillSpecId, 1)" >
                      <el-button slot="reference" type="text">开启</el-button>
                    </el-popconfirm>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination clearfix">
            <div class="fr">
              <el-pagination
                @size-change="handleGoodsSizeChange"
                @current-change="handleGoodsCurrentChange"
                :current-page="goods_currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="goods_listTotal">
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getActivityList, getSeckillGoodsList, closeActivityStatus, openActivityStatus, closeGoodsStatus, openGoodsStatus, deleteGoods } from '@/api/seckill'

export default {
  data() {
    return {
      tabsCurrent: 'activity',
      activity_dataList: null, // 列表数据
      activity_listLoading: true, // 列表加载loading
      activity_currentPage: 1, // 当前页码
      activity_pageSize: 10, // 每页数量
      activity_listTotal: 0, // 列表总数
      activityTypeCurrent: 0,
      activityScreenForm: {
        keyword: '',
        activityDate: '',
      },

      goods_dataList: null, // 列表数据
      goods_listLoading: true, // 列表加载loading
      goods_currentPage: 1, // 当前页码
      goods_pageSize: 10, // 每页数量
      goods_listTotal: 0, // 列表总数
      goodsTypeCurrent: 0,
      goodsScreenForm: {
        keyword: ''
      }
    }
  },
  created() {
    this.getActivityList();
  },
  methods: {
    // 切换顶部tabs
    changeTopTabs() {
      if(this.tabsCurrent == 'activity') {
        this.getActivityList();
      }else {
        this.getSeckillGoodsList();
      }
    },

    // 获取活动列表
    getActivityList() {
      getActivityList({
        pageNum: this.activity_currentPage,
        pageSize: this.activity_pageSize,
        keyword: this.activityScreenForm.keyword,
        status: this.activityTypeCurrent,
        startTime: this.activityScreenForm.activityDate ? this.activityScreenForm.activityDate[0] + ' 00:00:00' : '',
        endTime: this.activityScreenForm.activityDate ? this.activityScreenForm.activityDate[1] + ' 23:59:59' : '',
      }).then(res => {
        this.activity_dataList = res.data.records;
        this.activity_listTotal = res.data.total;
        this.activity_listLoading = false;
      })
    },

    // 筛选后重新获取列表
    getActivityListByScreen() {
      this.activity_currentPage = 1;
      this.getActivityList();
    },

    // 更改活动列表每页数量
    handleActivitySizeChange(val) {
      this.activity_pageSize = val;
      this.activity_currentPage = 1;
      this.getActivityList();
    },

    // 更改活动列表当前页
    handleActivityCurrentChange(val) {
      this.activity_currentPage = val;
      this.getActivityList();
    },

    // 获取商品列表
    getSeckillGoodsList() {
      getSeckillGoodsList({
        pageNum: this.goods_currentPage,
        pageSize: this.goods_pageSize,
        keyword: this.goodsScreenForm.keyword,
        status: this.goodsTypeCurrent,
      }).then(res => {
        this.goods_dataList = res.data.records;
        this.goods_listTotal = res.data.total;
        this.goods_listLoading = false;
      })
    },

    // 筛选后重新获取列表
    getSeckillGoodsListByScreen() {
      this.goods_currentPage = 1;
      this.getSeckillGoodsList();
    },

    // 更改商品列表每页数量
    handleGoodsSizeChange(val) {
      this.goods_pageSize = val;
      this.goods_currentPage = 1;
      this.getSeckillGoodsList();
    },

    // 更改商品列表当前页
    handleGoodsCurrentChange(val) {
      this.goods_currentPage = val;
      this.getSeckillGoodsList();
    },

    // 添加活动
    addOrEdit(type, id) {
      if(type == 'add') {
        this.$router.push({
          path: '/activity/seckill_add',
          query: {}
        })
      }else {
        this.$router.push({
          path: '/activity/seckill_add',
          query: {
            id
          }
        })
      }
    },

    // 操作 - 更改活动状态(type: 禁用0，启用1)
    changeActivityStatus(id, type) {
      if(type == 0) {
        closeActivityStatus({secKillId: id}).then(res => {
          this.getActivityList();
          this.$successMsg();
        })
      }else {
        openActivityStatus({secKillId: id}).then(res => {
          this.getActivityList();
          this.$successMsg();
        })
      }
    },

    // 操作 - 更改商品状态(type: 禁用0，启用1)
    changeGoodsStatus(id, type) {
      if(type == 0) {
        closeGoodsStatus({secKillSpecId: id}).then(res => {
          this.getSeckillGoodsList();
          this.$successMsg();
        })
      }else {
        openGoodsStatus({secKillSpecId: id}).then(res => {
          this.getSeckillGoodsList();
          this.$successMsg();
        })
      }
    },

    // 操作 - 删除商品
    deleteGoods(id) {
      deleteGoods({secKillSpecId: id}).then(res => {
        this.getSeckillGoodsList();
        this.$successMsg();
      })
    },

  },

}
</script>

<style scoped>
  .app-container >>> .el-tabs__header {
    margin-bottom: 0;
  }
  .app-container >>> .el-tabs__nav-wrap::after {
    background: none;
  }
  .app-container >>> #tab-activity, .app-container >>> #tab-goods {
    font-size: 16px;
  }
  .table >>> .el-tag {
    margin-right: 6px;
  }
  .table >>> .el-tag:last-child {
    margin-right: 0;
  }
</style>
