<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 style="margin-bottom:22px">
          <div class="infoTips">
            <div class="infoTipsTitle">
              <i class="el-icon-info" style="color:#1890FF" /> 温馨提示
            </div>
            <div class="infoTipsContent">
              <p>1.使用该功能请在常规设置中关闭“无库存自动下架”的设置项；</p>
              <p>2.若礼品增加库存后将清空之前的统计数；</p>
            </div>
          </div>
          <div>
            <el-input
              v-model="query.search"
              placeholder="请输入礼品名称/编码进行搜索"
              prefix-icon="el-icon-search"
              clearable
              class="w-280"
              @change="getSearchList('1')"
              @clear="getSearchList('1')"
            />
          </div>
        </div>
        <div v-loading="loading">
          <el-table :data="tableData" style="width: 100%" @sort-change="sortChange">
            <el-table-column label="礼品">
              <template slot-scope="{ row }">
                <div class="gift-info">
                  <img :src="row.giftProImageUrl" style="margin-right:10px" alt>
                  <div class="info-name">
                    <p class="pro-ellipsis">
                      {{ row.giftProName }}
                    </p>
                    <p class="category-ellipsis">
                      编码：{{ row.giftProCode }}
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="统计开始时间">
              <template slot-scope="{ row }">
                {{ formatDate(row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column
              label="当前人数"
              prop="giftCount"
              sortable="custom"
              :render-header="renderHeader"
            >
              <template slot-scope="{ row }">
                <!-- <span @click="removeMutil(row)">{{ row.count }}</span> -->
                <span>{{ row.giftCount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button v-if="row.hasSku" type="text" @click="checkDistribution(row)">
                  查看分布
                </el-button>
                <span v-else>--</span>
              </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
                @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>
      <el-dialog title="查看分布" :visible.sync="dialogVisible" width="40%">
        <div v-loading="dialogLoading">
          <el-table :data="DistributionData" style="width: 100%" @sort-change="sortChange2">
            <el-table-column
              :label="item"
              v-for="(item, index) in columns"
              :key="index"
              :prop="columns[index]"
            >
              <!-- <template slot-scope="{ row }">{{ row }}</template> -->
            </el-table-column>
            <!-- <el-table-column label="尺码"></el-table-column>
            <el-table-column sortable="custom" prop="count" label="当前人数"></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 slot="footer" style="text-align:right;margin-top:10px">
            <el-button type="primary" @click="dialogVisible = false">
              关闭
            </el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import qs from 'qs';
import request from '../../../service/request.js';
import getInputVal from '../../../utils/common.js';
export default {
  data () {
    return {
      formatDate: getInputVal.formatDate,
      loading: false,
      dialogLoading: false,
      query: {
        search: '',
        pageSize: 20,
        currentPage: 1,
        sort: '',
      },
      pageSizes: '',
      total: '',
      tableData: [],
      dialogVisible: false,
      DistributionData: [],
      columns: [],
    };
  },
  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.get('/api-integral-mall/get-subscribe-page', { params }).then(res => {
        if (res.data.errorCode === 0) {
          const resResult = res.data.result;
          this.tableData = resResult.result;
          this.total = resResult.totalCount;
          this.pageSizes = resResult.totalPage;
          this.loading = false;
        } else {
          this.$message.error(res.data.message);
          this.loading = false;
        }
      });
    },
    checkDistribution (value) {
      console.log(value);
      this.dialogVisible = true;
      const params = {
        giftProId: value.giftProId,
      };
      this.dialogLoading = true;
      request
        .get('/api-integral-mall/get-subscribe-info', { params })
        .then(res => {
          if (res.data.errorCode === 0) {
            console.log(res.data.result);
            this.DistributionData = res.data.result.data;
            this.columns = res.data.result.columns;
            console.log(this.DistributionData);
          }
        })
        .finally(() => (this.dialogLoading = false));
    },
    // removeMutil(value) {
    //   console.log(value);
    //   let params = {
    //     giftProId: value.giftProId
    //   };
    //   request.get('/api-integral-mall/distinct-subscribe', { params }).then(res => {
    //     if (res.data.errorCode === 0) {
    //       console.log(res.data.result);
    //     }
    //   });
    // },
    sortChange (value) {
      // this.sortColumn = value.prop;
      if (value.order == 'ascending') {
        this.query.sort = 'asc';
      } else if (value.order == 'descending') {
        this.query.sort = 'desc';
      }
      this.getSearchList();
    },
  },
  // components: {}
};
</script>
<style scoped>
.section {
  background: #fff;
  margin: 24px;
  padding: 24px;
}
.w-280 {
  width: 280px;
}
.w-140 {
  width: 140px;
}
.gift-info img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  padding: 4px;
  border: 1px solid #dcdfe6;
  vertical-align: middle;
}
.info-name {
  display: inline-block;
  vertical-align: top;
  width: 60%;
}
.pro-ellipsis {
  color: #303133;
  margin-top: 10px;
  height: 30px;
  line-height: 18px;
  font-size: 14px;
}
.category-ellipsis {
  color: #909399;
  font-size: 13px;
}
.infoTips {
  margin-bottom: 20px;
  background: #e6f7ff;
  border-radius: 4px;
  border: 1px solid #91d5ff;
  padding: 13px 16px;
  color: #606266;
}
.infoTipsTitle {
  font-size: 14px;
  line-height: 22px;
}
.infoTipsContent {
  line-height: 22px;
  font-size: 13px;
}
</style>
