<template>
  <div class="app-container">
    <el-form :inline="true" :model="search" ref="queryForm" v-show="showSearch">
      <el-form-item label="活动名称" prop="name">
        <el-input
          v-model="search.name"
          placeholder="活动名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="活动状态" prop="active_state" :size="ELsize">
        <el-select v-model="search.active_state" 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">
      <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="name" align="center" label="活动名称">
      </el-table-column>
      <el-table-column prop="productNum" align="center" label="活动商品">
      </el-table-column>
      <el-table-column
        prop="startTime,endTime,startHour,endHour,weekTransform"
        align="center"
        label="活动时间"
        width="400"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.startTime }}至{{ scope.row.endTime }}</div>
          <div v-if="scope.row.cycleMode == 0">
            每天 {{ scope.row.startHour }}—{{ scope.row.endHour }}
          </div>
          <div v-if="scope.row.cycleMode == 1">
            每周
            <span v-for="(item, index) in scope.row.weekList" :key="item.id">
              <template v-if="item == 1">一</template>
              <template v-if="item == 2">二</template>
              <template v-if="item == 3">三</template>
              <template v-if="item == 4">四</template>
              <template v-if="item == 5">五</template>
              <template v-if="item == 6">六</template>
              <template v-if="item == 0">日</template>
              <template v-if="index < scope.row.weekList.length - 1"
                >,</template
              >
            </span>

            {{ scope.row.startHour }}—{{ scope.row.endHour }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="activeTimeState"
        align="center"
        label="活动状态"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.discard">
            <el-tag type="danger">已终止</el-tag>
          </template>
          <template v-else>
            <el-tag type="info" v-if="scope.row.activeTimeState === 0"
              >未开始</el-tag
            >
            <el-tag type="success" v-else-if="scope.row.activeTimeState == 1"
              >进行中</el-tag
            >
            <el-tag type="danger" v-else>已结束</el-tag>
          </template>
        </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"
            v-if="
              scope.row.activeTimeState != 1 &&
              scope.row.activeTimeState != 2
            "
            @click="addOrUpdateHandle(scope.row.id)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="goSeckillPd(scope.row.id)"
            >管理商品</el-button
          >
          <el-button
            type="text"
            size="small"
            class="c-error"
            v-if="scope.row.activeTimeState != 1"
            @click="deleteHandle(scope.row.id)"
            >删除</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="goSeckillStop(scope.row.id)"
            v-if="scope.row.activeTimeState == 1 && !scope.row.discard"
            >终止</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"
    />

    <!-- 弹窗, 新增 / 修改 -->
    <SeckillAddUpdate
      ref="seckillAddUpdate"
      @updataList="updataList"
    ></SeckillAddUpdate>
  </div>
</template>

<script>
import { seckillActivityPage_api, seckillActivityDel_api, seckillActivityDiscard_api } from "@/api/marketing/seckill";
import getListApi from "@/mixins/getListApi";
import SeckillAddUpdate from "./components/SeckillAddUpdate";

export default {
  mixins: [getListApi],
  data() {
    return {
      listURL: seckillActivityPage_api,
      options: [
        {
          label: "未开始",
          value: 0,
        },
        {
          label: "进行中",
          value: 1,
        },
        {
          label: "已结束",
          value: 2,
        },
        {
          label: "已终止",
          value: 3,
        },
      ],
    };
  },

  components: {
    SeckillAddUpdate,
  },
  mounted() {},
  methods: {
    updataList(e) {
      if (e == 1) {
        this.getList();
      }
    },
    // 活动状态
    activeTimeState(row, column) {
      let status = row.activeTimeState;
      if (status === 0) {
        return "未开始";
      } else if (status === 1) {
        return "进行中";
      } else {
        return "已结束";
      }
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.$nextTick(() => {
        this.$refs.seckillAddUpdate.init(id);
      });
    },
    // 管理商品页
    goSeckillPd(id) {
      // this.$router.push({name:'seckill-pd'},);
      this.$router.push({
        path: "/marketing/seckill/seckillPd",
        query: { id: id },
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定要删除该条数据?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          seckillActivityDel_api(id).then((res) => {
            if (res && res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    goSeckillStop(id) {
      this.$confirm(`确定要终止该秒杀活动吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          seckillActivityDiscard_api(id).then((res) => {
            if (res && res.code == 200) {
              this.$message.success("终止成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
