<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions">
    <div class="activeData">
      <h3>实时统计</h3>
      <div class="couponTit">活动名称：{{ formData.activityName || '--' }}</div>
      <div class="dataListBox">
        <div class="dataItem">
          <span>{{ activityInfo.orders }}</span>
          <p>成交笔数</p>
        </div>
        <div class="dataItem">
          <span>{{ activityInfo.users }}</span>
          <p>成交人数</p>
        </div>
        <div class="dataItem">
          <span>{{ activityInfo.total }}</span>
          <p>成交金额</p>
        </div>
      </div>

      <div class="tabListInfo">活动成交的商品</div>

      <!-- 查询结果 -->
      <div>
        <el-table
          v-loading="listLoading" max-height="600" element-loading-text="正在查询中。。。" :data="list"
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
          v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
        >
          <el-table-column prop="productId" label="商品id" />
          <el-table-column label="商品主图">
            <template slot-scope="scope">
              <img height="80" width="80" :src="scope.row.image" alt srcset>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="sectionPrice" label="活动价" />
          <el-table-column prop="stockNumber" label="库存" />
          <el-table-column prop="valume" label="活动销量" />
          <el-table-column prop="total" label="活动成交金额" />
          <el-table-column prop="number" label="商品限量（件）" />
        </el-table>
      </div>

      <div>
        <el-pagination
          :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="(val) => ((listQuery.pageSize = val) && getList())"
          @current-change="(val) => ((listQuery.page = val) && getList())"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getShopId } from '@/utils/auth'
import { getDatas } from '@/api/active'

export default {
  name: 'ActivityDetail',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1000px',
        title: '查看活动数据详情'
      },
      visible: false,
      formData: {
        activityName: ''
      },
      activityInfo: {
        orders: '',
        users: '',
        total: ''
      },
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 10,
        signType: 2,
        shopId: getShopId(),
        activityId: '',
        signId: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      this.listQuery.activityId = params.activityId
      this.listQuery.signId = params.signId
      if (params.activityId) {
        // this.getInfo(params.activityId)
        this.getList()
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          xxx: res.data.xxx || ''
        })
      } finally {
        loading.close()
      }
    },
    async getList() {
      this.listLoading = true
      try {
        const res = await getDatas(this.listQuery)
        this.activityInfo = res.data
        this.list = res.data.datas.list
        this.total = res.data.datas.total
      } finally {
        this.listLoading = false
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.activeData {
	padding: 20px;

	.couponTit {
		margin: 20px 0;
	}

	.dataListBox {
		display: flex;
		justify-content: center;
		margin: 30px 0;

		.dataItem {
			width: 220px;
			height: 120px;
			border-radius: 8px;
			border: 1px solid #999999;
			text-align: center;
			margin: 0 10px;

			span {
				display: block;
				margin-top: 35px;
			}
		}
	}

	.tabListInfo {
		margin: 20px 0;
	}
}
</style>
