<template>
  <a-modal
    centered
    class="productPreview-modal"
    :footer="null"
    :maskClosable="false"
    v-model="isShow"
    @cancel="isShow=false"
    width="50%">
    <template slot="title">
      <div v-if="resObj"><strong>{{ resObj.tit }}</strong>（已选<span style="color:#ed1c24;">{{ dataList.length }}</span>项）</div>
      <span v-else>预览弹窗</span>
    </template>
    <a-spin :spinning="spinning" tip="Loading...">
      <div style="height:540px;">
        <ve-table
          :max-height="500"
          :columns="columns"
          :table-data="newDataList"
          :border-around="true"
          :border-y="true"
        />
        <div v-show="newDataList&&newDataList.length==0" class="empty-data" style="height:'300px'"><a-empty description="暂无数据" :image="simpleImage"/></div>
      </div>
      <div class="btn-cont">
        <a-button
          type="primary"
          id="productPreview-export"
          v-if="resObj&&resObj.promotionRuleSn"
          style="margin-right:20px;"
          @click="handleExport"
          :loading="exportLoading">导出</a-button>
        <a-button id="productPreview-back" @click="isShow = false">关闭</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { Empty } from 'ant-design-vue'
import { hdExportExcel } from '@/libs/exportExcel'
// 接口
import { excelProductExcel } from '@/api/promotion'
export default {
  name: 'ProductPreviewModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      spinning: false,
      isShow: this.openModal, //  是否打开弹框
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE, // 空数据图片
      titName: '', // 弹窗标题
      resObj: {}, // 预览数据
      exportLoading: false, // 导出按钮加载状态
      columns: [
        { title: '序号', field: 'no', key: 'a', width: 20, align: 'center', operationColumn: false },
        { title: '产品编码', field: 'productCode', key: 'b', width: '45%', align: 'center', operationColumn: false, renderBodyCell: ({ row, column }) => { return row[column.field] || '--' } },
        { title: '起订量', field: 'unitTypeInfo', key: 'c', width: '45%', align: 'center', operationColumn: false, renderBodyCell: ({ row, column }) => { return row[column.field] || '--' } }
      ],
      newDataList: this.dataList// 列表数据
    }
  },
  methods: {
    // 初始化
    pageInit (obj) {
      this.resObj = obj
    },
    //  导出
    handleExport () {
      const _this = this
      _this.exportLoading = true
      _this.spinning = true
      const ajaxData = {
        promotionRuleSn: _this.resObj.promotionRuleSn,
        promotionProductType: _this.resObj.promotionProductType,
        scopeLevel: _this.resObj.scopeLevel || 1
      }
      hdExportExcel(excelProductExcel, ajaxData, '促销活动' + this.resObj.tit, function () {
        _this.exportLoading = false
        _this.spinning = false
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        if (this.dataList && this.dataList.length > 0) {
          this.newDataList = this.dataList.map((item, i) => {
            item.no = i * 1 + 1
            return item
          })
        }
      }
    }
  }
}
</script>

<style lang="less">
  .productPreview-modal{
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .btn-cont {
      text-align: center;
      margin: 5px 0 10px;
    }
  }
</style>
