<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>
                <el-option label="进行中" :value="1"></el-option>
                <el-option label="已结束" :value="2"></el-option>
              </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')"></el-input>
            </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="结束日期"></el-date-picker>
            </div>
          </div>
          <div class="fr">
            <el-button type="primary" @click="addActivity">新建活动</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>
            <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']"> </span>{{ 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="适用会员" :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">编辑</el-button>
                <!-- <dm-delete @confirm="deleteList(scope.row, 0, scope.$index)" tips="确定删除该商品吗?"> -->
                <el-button type="text" @click="deleteList(scope.row, 0, scope.$index)">删除</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"></dm-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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: []
    };
  },
  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;
      }
      let 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(() => {
          let 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(() => {
          return;
        });
    },
    addActivity() {
      this.$router.push({ name: 'flashSaleInfo', query: { activityId: '', edit: false, canEdit: '' } });
    },
    edit(item) {
      // this.$router.push({ name: 'flashSaleInfo', query: { giftId: item.integralMallProId, coupCardId: item.proReferId, canEdit: item.canEdit } });
      this.$router.push({ name: 'flashSaleInfo', query: { activityId: item.activityId, edit: true, canEdit: '' } });
    }
  },
  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 ? val : ['', ''];
      }
    }
  }
};
</script>
<style scoped>
.section {
  background: #fff;
  margin: 24px;
  padding: 24px;
}
.m-r-10 {
  margin-right: 10px;
}
.w-280 {
  width: 280px;
}
.w-300 {
  width: 300px;
}
.w-140 {
  width: 140px;
}
.w-160 {
  width: 160px;
}
.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>
