<template>
  <div class="promotionRulesDetail-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="promotionRulesDetail-back" >
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="promotionRulesDetail-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
        </template>
      </a-page-header>
      <a-card size="small" :bordered="false" class="promotionRulesDetail-cont">
        <a-descriptions bordered :column="2" size="small" v-if="detailsData">
          <a-descriptions-item label="活动名称：">{{ detailsData.name || '--' }}</a-descriptions-item>
          <a-descriptions-item label="活动时间：">
            <span v-if="detailsData.activeDateEnable=='0'">不限</span>
            <span v-else>{{ detailsData.activeDateStart }} ~ {{ detailsData.activeDateEnd }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="参与客户：">
            <span v-if="detailsData.buyerLimitEnable=='0'">全部客户</span>
            <p v-else style="margin: 0;">部分客户，共{{ detailsData.promoBuyerList.length }}个  <a-button id="promotionRules-rule-normalGoodsList" type="primary" size="small" class="button-success" @click="handleLook(detailsData.promoBuyerList)">查看</a-button></p>
          </a-descriptions-item>
          <a-descriptions-item label="活动经费上限：">
            <span v-if="detailsData.activeAmountEnable=='0'">不限</span>
            <span v-else>{{ detailsData.activeAmount }} 万元</span>
          </a-descriptions-item>
          <a-descriptions-item label="订单起订金额：">
            <span v-if="detailsData.orderAmountEnable=='0'">不限</span>
            <span v-else>{{ detailsData.orderAmount }} 万元</span>
          </a-descriptions-item>
          <a-descriptions-item label="备注：">{{ detailsData.remark || '--' }}</a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <!-- 列表 -->
        <p style="font-weight: bold;">促销规则：</p>
        <a-table
          class="sTable"
          ref="table"
          size="small"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data-source="promoRuleList"
          :scroll="{ y: tableHeight }"
          :loading="loading"
          :pagination="false"
          bordered>
          <!-- 操作 -->
          <template slot="action" slot-scope="text, record">
            <a-button
              v-if="record.promoRuleType!='PROMO_PROD'"
              size="small"
              type="link"
              class="button-info"
              @click="handleLookP(record.normalGoodsList, record.promoRuleType, 'normal')"
              id="promotionRulesDetail-edit-btn">查看正价品</a-button>
            <a-button
              size="small"
              type="link"
              class="button-warning"
              @click="handleLookP(record.promoGoodsList, record.promoRuleType, 'promo')"
              id="promotionRulesDetail-del-btn">查看{{ record.promoRuleType=='PROMO_PROD' ? '特价品' : record.promoRuleType=='ADD_PRICE_PURCH' ? '换购品' : '促销品' }}</a-button>
          </template>
        </a-table>
      </a-card>
    </a-spin>
    <!-- 查看客户/正价品/促销品 -->
    <a-modal
      centered
      class="promotionRulesDetail-look-modal"
      :footer="null"
      :maskClosable="false"
      title="查看"
      v-model="openModal"
      @cancle="openModal = false"
      width="80%">
      <a-table
        ref="lookTable"
        size="small"
        :rowKey="(record) => record.id"
        :columns="nowColumns"
        :data-source="lookLoadData"
        :pagination="false"
        :scroll="{ y: 500 }"
        bordered>
        <!-- 序号 -->
        <template slot="no" slot-scope="text, record, index">{{ index+1 }}</template>
        <!-- 起订量限制 -->
        <template slot="orderGoodsUnit" slot-scope="text, record">
          {{ record.orderGoodsUnit=='PROD_UNIT' ? '按设置数量':record.orderGoodsUnit=='FULL_BOX' ? '按整箱':'--' }}
          <span v-if="record.orderGoodsUnit=='PROD_UNIT'">  --  {{ record.orderGoodsQty }}</span>
        </template>
        <template slot="goodsPrice" slot-scope="text, record">
          <span>{{ (record.goodsPrice || record.goodsPrice==0) ? record.goodsPrice : '--' }}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { promoActiveDetailD } from '@/api/promoActive'
export default {
  data () {
    return {
      spinning: false,
      tableHeight: 0,
      detailsData: null,
      columns: [
        { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
        { title: '创建时间', dataIndex: 'createDate', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '促销类型', dataIndex: 'promoRuleTypeDictValue', width: '25%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '促销规则', dataIndex: 'promoRule', align: 'center', width: '37%', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: '18%', align: 'center' }
      ],
      loadData: [],
      openModal: false,
      custColumns: [
        { title: '序号', scopedSlots: { customRender: 'no' }, width: '5%', align: 'center' },
        { title: '客户名称', dataIndex: 'buyerName', align: 'center', width: '95%', customRender: function (text) { return text || '--' } }
      ],
      pColumns: [ //  正品
        { title: '序号', scopedSlots: { customRender: 'no' }, width: '4%', align: 'center' },
        { title: '类型', dataIndex: 'goodsTypeName', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '类型名称', dataIndex: 'goodsName', align: 'center', width: '25%', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '产品名称', dataIndex: 'name', align: 'center', width: '25%', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '产品编码', dataIndex: 'goodsCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '起订量限制', scopedSlots: { customRender: 'orderGoodsUnit' }, width: '14%', align: 'center' }
      ],
      promoColumns: [ //  促销品
        { title: '序号', scopedSlots: { customRender: 'no' }, width: '5%', align: 'center' },
        { title: '类型', dataIndex: 'goodsTypeName', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '类型名称', dataIndex: 'goodsName', width: '35%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '产品名称', dataIndex: 'name', align: 'center', width: '35%', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '产品编码', dataIndex: 'goodsCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }
      ],
      promoSpecialColumns: [ //  特价产品/加价促销品
        { title: '序号', scopedSlots: { customRender: 'no' }, width: '5%', align: 'center' },
        { title: '产品名称', dataIndex: 'name', align: 'center', width: '50%', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '产品编码', dataIndex: 'goodsCode', width: '30%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: this.promoRuleType == 'PROMO_PROD' ? '特惠单价(￥)' : '换购单价(￥)', width: '15%', scopedSlots: { customRender: 'goodsPrice' }, width: 200, align: 'center' }
      ],
      lookLoadData: [],
      promoRuleList: [],
      nowColumns: [],
      promoRuleType: '', //  当前查看类型     买产品送产品...
      loading: false
    }
  },
  methods: {
    //  详情
    getDetail () {
      const _this = this
      this.spinning = true
      this.loading = true
      promoActiveDetailD({ sn: this.$route.params.sn }).then(res => {
        this.loading = false
        this.spinning = false
        if (res.status == 200) {
          _this.detailsData = res.data
          if (_this.detailsData.promoRuleList) {
            _this.detailsData.promoRuleList.map((item, index) => {
              item.no = index + 1
              if (item.promoRuleType == 'BUY_PROD_GIVE_PROD') { //  买产品送产品
                item.promoRule = '购买满' + item.orderGoodsQty + '个正价产品，送' + item.promoQty + '个促销品'
              } else if (item.promoRuleType == 'BUY_PROD_GIVE_MONEY') { //  买产品送采购额
                if (item.promoType == 'promo_amount') {
                  item.promoRule = '购买满' + item.orderAmount + '元正价产品，送' + item.promoAmount + '元采购额可用于购买促销品'
                } else if (item.promoType == 'promo_amount_per') {
                  item.promoRule = '购买满' + item.orderAmount + '元正价产品可以返正价产品采购额的' + item.promoAmountPer * 100 + '%用于购买促销品'
                }
              } else if (item.promoRuleType == 'ADD_PRICE_PURCH') { //  加价换购
                item.promoRule = '购买满' + item.orderGoodsQty + '个正价产品，可以以换购价购买任意1个换购产品'
              }
            })
          } else {
            _this.detailsData.promoRuleList = []
          }
          // 活动经费上限   单位为万元
          if (_this.detailsData.activeAmountEnable && _this.detailsData.activeAmountEnable == '1' && _this.detailsData.activeAmount && _this.detailsData.activeAmount != 0) {
            _this.detailsData.activeAmount = Number(_this.detailsData.activeAmount) / 10000
          }
          // 订单起订金额   单位为万元
          if (_this.detailsData.orderAmountEnable && _this.detailsData.orderAmountEnable == '1' && _this.detailsData.orderAmount && _this.detailsData.orderAmount != 0) {
            _this.detailsData.orderAmount = Number(_this.detailsData.orderAmount) / 10000
          }
        }
      })
    },
    // 查看客户
    handleLook (record) {
      this.nowColumns = this.custColumns
      this.lookLoadData = record || []
      this.openModal = true
    },
    // 查看正价品/促销品
    handleLookP (record, promoRuleType, goodsType) {
      let columns = this.pColumns
      this.promoRuleType = promoRuleType
      if ((promoRuleType == 'BUY_PROD_GIVE_PROD') || (promoRuleType == 'BUY_PROD_GIVE_MONEY')) { //  买产品送产品/买产品送采购额
        if (goodsType == 'normal') { //  正品
          columns = this.pColumns
        } else if (goodsType == 'promo') { //  促销
          columns = this.promoColumns
        }
      } else if (promoRuleType == 'PROMO_PROD') { //  特价产品
        if (goodsType == 'promo') { //  促销
          columns = this.promoSpecialColumns
        }
      } else if (promoRuleType == 'ADD_PRICE_PURCH') { //  加价换购
        if (goodsType == 'normal') { //  正品
          columns = this.pColumns
        } else if (goodsType == 'promo') { //  促销
          columns = this.promoSpecialColumns
        }
      }
      record.map(item => {
        item.name = item.goodsName
      })
      this.nowColumns = columns
      this.lookLoadData = record || []
      this.openModal = true
    },
    //  返回列表
    handleBack () {
      this.$router.push({ path: '/promotionRulesManagement/promotionRules/list', query: { closeLastOldTab: true } })
    },
    pageInit () {
      const _this = this
      this.$nextTick(() => { // 页面渲染完成后的回调
        _this.setTableH()
      })
    },
    setTableH () {
      this.tableHeight = window.innerHeight - 400
    }
  },
  watch: {
    detailsData: {
      handler (newValue, oldValue) {
        if (newValue.promoRuleList) {
          this.promoRuleList = newValue.promoRuleList
        }
      },
      deep: true
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
      this.getDetail()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.pageInit()
      this.getDetail()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
  .promotionRulesDetail-wrap{
    position: relative;
    height: 100%;
    >.ant-spin-nested-loading{
      height: 100%;
      .ant-spin-container{
        height: 100%;
        .promotionRulesDetail-cont{
          min-height: 90%;
        }
      }
    }
    .promotionRulesDetail-back{
      margin-bottom: 10px;
    }
    .ant-descriptions-item-label.ant-descriptions-item-colon{
      width: 150px;
    }
    .ant-descriptions-item-content{
      max-width: 500px;
    }
  }
</style>
