<template>
  <div class="app-container">
    <div v-if="detail">
      <div class="row">
        <div class="label">活动名称</div>
        <div class="value">{{detail.name}}</div>
      </div>
      <div class="row">
        <div class="label">活动有效期</div>
        <div class="value">{{detail.startTime | dateToDayFilter}} 至 {{detail.endTime | dateToDayFilter}}</div>
      </div>
      <div class="row">
        <div class="label">兑换码有效期</div>
        <div class="value">{{detail.exchangeStartTime | dateToDayFilter}} 至 {{detail.exchangeEndTime | dateToDayFilter}}</div>
      </div>
      <div class="row">
        <div class="label">优惠券有效期</div>
        <div class="value">{{detail.couponStartTime | dateToDayFilter}} 至 {{detail.couponEndTime | dateToDayFilter}}</div>
      </div>
      <div class="row">
        <div class="label">活动说明</div>
        <div class="value">{{detail.remark}}</div>
      </div>

      <el-divider></el-divider>

      <div v-for="(item, index) in detail.promotionLuckDrawCoupons" :key="index">
        <div class="title">优惠券{{index + 1}}</div>

        <div class="row">
          <div class="label">优惠券名称</div>
          <div class="value">{{item.couponName}}</div>
        </div>
        <div class="row">
          <div class="label">优惠券类型</div>
          <div class="value">{{item.couponType | couponTypeFilter}}</div>
        </div>
        <div class="row" v-if="item.couponType == 'SATISFY'">
          <div class="label">订单满足金额</div>
          <div class="value">{{item.orderLimitAmount}}</div>
        </div>
        <div class="row">
          <div class="label">优惠券面值</div>
          <div class="value">{{item.discountAmount}}</div>
        </div>
        <div class="row">
          <div class="label">发放数量</div>
          <div class="value">{{item.totalNum}}</div>
        </div>
        <div class="row">
          <div class="label">兑换码</div>
          <div class="value">
            <el-link type="primary" @click="toRecords(item.id)">查看兑换记录</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" @click="exportCode(item.id)">导出兑换码</el-link>
          </div>
        </div>
        <div class="row">
          <div class="label">使用说明</div>
          <div class="value">{{item.useRemark}}</div>
        </div>
        <div class="row" v-if="item.couponType == 'GOODS'">
          <div class="label">商品信息</div>
          <div class="value">
            <div class="table">
              <el-table :data="item.goodsList" border fit stripe max-height="300px">
                <el-table-column align="center" label="商品图片" prop="imgUrl" width="85">
                  <template slot-scope="scope">
                    <el-image style="width: 60px; height: 60px; display: block;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover"></el-image>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="商品名称" prop="goodsName" min-width="200"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button @click="goBack">返 回</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { getDetail } from "@/api/draw";
import { downloadFiles } from '@/utils/util'

const defaultObj = {
  couponName: '',
  couponType: 'SATISFY', 
  orderLimitAmount: '',
  discountAmount: '',
  totalNum: '',
  exchange: 1,
  useRemark: '',
  goodsList: [],
}

export default {
  filters: {
    couponTypeFilter(val) {
      const MAP = {
        SATISFY: '满减券',
        GOODS: '商品券',
      }
      return MAP[val]
    }
  },

  data() {
    return {
      id: null,
      detail: null,
    }
  },
  computed: {
    
  },

  created() {
    const { id } = this.$route.query;
    this.id = id;
    this.getDetail();
  },

  methods: {
    // 获取详情
    getDetail() {
      getDetail({promotionLuckDrawId: this.id}).then(res => {
        this.detail = res.data;
      })
    },

    // 查看兑换记录
    toRecords(id) {
      this.$router.push({
        path: '/activity/draw_records',
        query: {
          promotionLuckDrawCouponId: id
        }
      })
    },

    // 导出兑换码
    exportCode(id) {
      downloadFiles('promotion/luck/draw/code/export', {promotionLuckDrawCouponId: id});
    },

    goBack() {
      this.$router.go(-1);
      // this.$store.dispatch("tagsView/delView", this.$route);
    },
  }
}
</script>

<style lang="scss" scoped>
  .row {
    display: flex;
    margin-bottom: 20px;
    font-size: 14px;
    .label {
      color: #999999;
      flex-shrink: 0;
      width: 100px;
      font-weight: 500;
      margin-right: 20px;
      text-align: right;
    }
    .value {
      color: #333333;
      font-weight: 500;
      flex: 1;
    }
  }

  .title {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    .el-button {
      margin-left: 20px;
    }
  }
</style>