<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 style="display:flex;justify-content: flex-start;align-items:center">
            <el-input v-model="query.search" placeholder="请输入礼品名称/编码进行搜索" prefix-icon="el-icon-search" clearable class="w-280" @change="getSearchList('1')" @clear="getSearchList('1')"></el-input>
            <div style="display:inline-block;font-size:14px;color:#909399;margin-left:10px">
              <p>1.使用该功能请在常规设置中关闭“无库存自动下架”的设置项；</p>
              <p>2.若礼品增加库存后将清空之前的统计数；</p>
            </div>
          </div>
          <!-- <div style="display:inline-block">
            <p>1.使用该功能请在常规设置中关闭“无库存自动下架”的设置项；</p>
            <p>2.若礼品增加库存后将清空之前的统计数；</p>
          </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" 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="count" sortable="custom" :render-header="renderHeader">
              <template slot-scope="{ row }">
                <!-- <span @click="removeMutil(row)">{{ row.count }}</span> -->
                <span>{{ row.count }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }"><el-button type="text" @click="checkDistribution(row)">查看分布</el-button></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"></dm-pagination>
            </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' }, '')])]);
    },
    getSearchList(value) {
      if (value) {
        this.query.currentPage = 1;
      }
      let params = {
        ...this.query
      };
      this.loading = true;
      request.get('/api-integral-mall/get-subscribe-page', { params }).then(res => {
        if (res.data.errorCode === 0) {
          let 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;
      let 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;
}
.info-name {
  display: inline-block;
  vertical-align: top;
  width: 60%;
}
.pro-ellipsis {
  color: #303133;
  height: 54px;
  line-height: 18px;
  font-size: 14px;
}
.category-ellipsis {
  color: #909399;
  font-size: 13px;
}
</style>
