<template>
  <div class="mall-section-container">
    <div class="mall-content-section">
      <div class="mall-content-title">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '' }">
            <a href="/report/#/memberSummary">首页</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item>积分商城</el-breadcrumb-item>
          <el-breadcrumb-item>活动</el-breadcrumb-item>
          <el-breadcrumb-item>秒杀</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>
          <span>秒杀</span>
        </h3>
      </div>
      <div class="section">
        <div class="operate-top">
          <div class="fl">
            <div class="search-item m-r-10">
              <el-select
                v-model="query.activityStatus"
                placeholder="所有活动状态"
                clearable
                class="w-160"
                @change="getSearchList('1')"
              >
                <el-option label="未开始" :value="0" />
                <el-option label="进行中" :value="1" />
                <el-option label="已结束" :value="2" />
              </el-select>
            </div>
            <div class="search-item m-r-10">
              <el-input
                v-model.trim="query.activityName"
                placeholder="请输入关键词进行搜索"
                prefix-icon="el-icon-search"
                clearable
                class="w-300"
                @change="getSearchList('1')"
              />
            </div>
            <div class="search-item">
              <el-date-picker
                class="date-picker"
                @change="getSearchList('1')"
                v-model="dateValue"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </div>
          <div class="fr">
            <el-button size="small" @click="exportExcel">
              导出
            </el-button>
            <el-button
              type="primary"
              @click="addActivity"
              :limit-code="$buttonCode.flashSaleAdd"
              v-if="$getButtonLimit($buttonCode.flashSaleAdd)"
            >
              新建活动
            </el-button>
          </div>
        </div>
        <div v-loading="loading">
          <el-table :data="tableData" style="width: 100%" @sort-change="sortChange">
            <el-table-column label="活动名称" prop="activityName" />
            <el-table-column label="活动时间" sortable="custom" width="250px">
              <template slot-scope="{ row }">
                <div>{{ getTimeAll(row.beginTime) }}&nbsp;至</div>
                <div>{{ getTimeAll(row.endTime) }}</div>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="activityStatus">
              <template slot-scope="{ row }">
                <span :class="[row.activityStatus === 0 ? 'dm-status--warning' : row.activityStatus === 1 ? 'dm-status--primary--flash' : 'dm-status--info']" />{{ row.activityStatus === 0 ? '未开始' : row.activityStatus === 1 ? '进行中' : '已结束' }}
              </template>
            </el-table-column>
            <el-table-column label="商品种类">
              <template slot-scope="{ row }">
                {{ row.activityProList ? row.activityProList.length : '--' }}
              </template>
            </el-table-column>
            <el-table-column label="上架/售卖/剩余库存">
              <template slot-scope="{ row }">
                {{ row.activityTotalSumStock || 0 }}/{{ row.activityTotalSalesStock }}/{{ row.activityTotalSurplusStock || 0 }}
              </template>
            </el-table-column>
            <el-table-column label="适用会员" :render-header="renderHeader">
              <template slot-scope="{ row }">
                {{ row.memberSearchType === 1 ? '所有会员' : row.memberSearchType === 2 ? row.memberSearchParams.split(',').length + '个会员分组' : '部分会员' }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="200px">
              <template slot-scope="{ row }">
                {{ getTimeAll(row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="edit(scope.row)"
                  style="margin-right:12px"
                  :limit-code="$buttonCode.flashSaleEdit"
                  v-if="$getButtonLimit($buttonCode.flashSaleEdit)"
                >
                  编辑
                </el-button>
                <!-- <dm-delete @confirm="deleteList(scope.row, 0, scope.$index)" tips="确定删除该商品吗?"> -->
                <el-button
                  type="text"
                  @click="deleteList(scope.row, 0, scope.$index)"
                  :limit-code="$buttonCode.flashSaleDelete"
                  v-if="$getButtonLimit($buttonCode.flashSaleDelete)"
                >
                  删除
                </el-button>
                <!-- </dm-delete> -->
              </template>
            </el-table-column>
            <template slot="empty">
              <div class="no-data-wrap">
                <div class="no-data-icon">
                  <img src="../../../../static/img/no-data_icon.png">
                </div>
                <p>暂无数据</p>
              </div>
            </template>
          </el-table>
          <div class="pagination-conteiner" v-show="tableData.length > 0">
            <div class="pagination">
              <dm-pagination
                v-if="total != 0"
                background
                hide-on-single-page
                @size-change="getSearchList('1')"
                @current-change="getSearchList"
                :current-page="query.currentPage"
                :page-sizes="pageSizes"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-export-excel
      :dataArr="tableData"
      :dialogVisible.sync="dialogVisible"
      :type="2"
      :excelUrl="excelUrl"
      :params="query"
      :projectName="projectName"
    />
  </div>
</template>

<script>
import qs from 'qs';
import request from '../../../service/request.js';
import getInputVal from '../../../utils/common.js';
export default {
  data () {
    return {
      query: {
        activityName: '',
        beginTime: '',
        endTime: '',
        activityStatus: 1,
        currentPage: 1,
        pageSize: 20,
        sort: '',
      },
      total: '',
      getTimeAll: getInputVal.formatDate,
      loading: false,
      tableData: [],
      dialogVisible: false,
      projectName: '',
      excelUrl: '/api-integral-mall/download-integral-activity-excel ', // 下载数据的地址
    };
  },
  computed: {
    dateValue: {
      get () {
        return [this.query.beginTime, this.query.endTime];
      },
      set (val) {
        // [this.query.beginTime, this.query.endTime] = val ? [this.getTimeAll(val[0]), this.getTimeAll(val[1])] : ['', ''];
        [this.query.beginTime, this.query.endTime] = val || ['', ''];
      },
    },
  },
  created () {
    this.getSearchList();
  },
  methods: {
    renderHeader (h, { column, $index }, index) {
      return h('span', {}, [h('span', {}, '适用会员'), h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '若命中多个活动，则优先展示最近开始的活动' } }, [h('i', { slot: 'reference', class: 'iconfont icon-xinxixianshi', style: 'margin-left:6px' }, '')])]);
    },
    getSearchList (value) {
      if (value) {
        this.query.currentPage = 1;
      }
      const params = {
        ...this.query,
      };
      this.loading = true;
      request.post('/api-integral-mall/get-activity-page', params).then(res => {
        if (res.data.errorCode === 0) {
          if (res.data.result.result) {
            this.tableData = res.data.result.result;
            this.total = res.data.result.totalCount;
          } else {
            this.tableData = [];
            this.total = 0;
          }
          this.loading = false;
        } else {
          this.$message.error(res.data.message);
          this.loading = false;
        }
      });
    },
    sortChange (value) {
      // console.log(value);
      // this.sortColumn = value.prop;
      if (value.order == 'ascending') {
        this.query.sort = 'asc';
      } else if (value.order == 'descending') {
        this.query.sort = 'desc';
      }
      this.getSearchList();
    },
    deleteList (item, value, index) {
      this.$confirm('<div>删除后活动将不存在，确认删除？</div>', '提示', {
        closeOnClickModal: false,
        showClose: false,
        type: 'warning',
        customClass: 'show-title',
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
      })
        .then(() => {
          const params = {
            activityId: item.activityId,
          };
          request.post('/api-integral-mall/delete-activity', qs.stringify(params)).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success('删除成功');
              this.getSearchList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {

        });
    },
    addActivity () {
      this.$router.push({ name: 'flashSaleAdd', query: { activityId: '', edit: false, canEdit: '' } });
    },
    edit (item) {
      this.$router.push({ name: 'flashSaleInfo', query: { activityId: item.activityId, edit: true, canEdit: '' } });
    },
    // 导出发货单
    exportExcel () {
      this.dialogVisible = true;
      // window.location = `${exportOnlineListExcel}?orderStatus=${this.listParams.orderStatus}&changeType=${this.listParams.changeType}&searchParams=${this.listParams.searchParams}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
    },
  },
};
</script>
<style scoped>

.m-r-10 {
  margin-right: 10px;
}

.gift-info img {
  width: 75px;
  height: 75px;
  border-radius: 4px;
  padding: 4px;
  border: 1px solid #dcdfe6;
}
.info-name {
  display: inline-block;
  vertical-align: top;
  width: 60%;
}
.pro-ellipsis {
  color: #303133;
  height: 54px;
  line-height: 18px;
  /* width: 230px; */
  font-size: 14px;
}
.category-ellipsis {
  color: #909399;
  font-size: 13px;
}
.el-icon-edit {
  margin-left: 5px;
  cursor: pointer;
}
.operate-span {
  font-size: 13px;
  cursor: pointer;
}
.intergral-edit .el-icon-edit {
  display: none;
}
.intergral-edit:hover .el-icon-edit {
  display: inline-block;
}
.icon-xinxixianshi {
  margin-left: 5px;
  color: #909399;
  font-size: 14px;
  cursor: pointer;
}
.page-info {
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #f4f4f5;
  color: #606266;
  margin-bottom: 22px;
  line-height: 1.5;
}
.page-info h3 {
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
}
.page-info .el-icon-info {
  color: #1890ff;
  margin-right: 10px;
  font-size: 14px;
}
</style>
