<template>
  <div class="root" :style="{backgroundColor:comp.props.bgColor.val }">
        <!-- 背景图片 -->
        <img class="img-bg" :src="comp.props.bgImg.val" />

        <div class="dailog">
        <div class="row mb-10">
            <div class="tab" @click="onClickTab('3-5')">活动规则</div>
            <div class="tab tab-active">
            中奖纪录
            <img class="img-border" :src="img.border" />
            </div>
        </div>
        <div v-if="winningRecord.length>0" class="record">
            <div class="cl record-list" v-for="w in winningRecord" :key="w.WRNo">
                <div class="gift-l l cl">
                    <img class="l record-img" v-if="w.GiftType==2" src="data:image/png;base64,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" alt="红包">
                    <img class="l record-img" v-if="w.GiftType==4" src="data:image/png;base64,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" alt="积分">
                    <div class="l">
                        <div class="record-title" v-if="w.GiftType==2">{{w.CommonCount}}元红包</div>
                        <div class="record-title" v-if="w.GiftType==4">{{w.CommonCount}}积分</div>
                        <div class="record-time">{{w.GetTime}}</div>
                    </div>
                </div>
                <div class="gift-r l">
                    <span class="gift-btn">已发放</span>
                </div>
            </div>
        </div>
        <div class="no-record" v-show="winningRecord.length==0">
            <img class="img-no-record" :src="img.gift" />
            <div>您暂时还没获得任何奖品</div>
        </div>

        <img class="img-back" :src="img.back" @click="onClickBack" />
        </div>
  </div>
</template>

<script>
import eventBus from "../../../../../src/assets/js/eventBus.js";
import { Toast,Indicator } from "mint-ui";
import apiHelper from "@/assets/js/apiHelper.js";

export default {
    name: "Comp",
    props: ["comp", "cfg", "selectedPage"],
    data() {
        return {
            selected: "1",
            img: {
                border:
                "http://image.supercarrier8.com/h5_template/m_001/%E6%B4%BB%E5%8A%A8%E8%A7%84%E5%88%99/%E6%BB%91%E5%8A%A8.png",
                gift:
                "http://image.supercarrier8.com/h5_template/m_001/%E5%9B%BE%E6%A0%87%E6%97%A0%E4%BB%BB%E4%BD%95%E5%A5%96%E5%93%81.png",
                back:
                "http://image.supercarrier8.com/h5_template/m_001/%E6%B4%BB%E5%8A%A8%E8%A7%84%E5%88%99/%E8%BF%94%E5%9B%9E.png"
            },
            winningRecord:[]
        };
    },
    methods: {
        onClickTab(pageType) {
            this.$parent.changeSelectedPage(pageType);
        },
        onClickBack() {
            this.$parent.changeSelectedPage("3-1");
        },
        getWinningRecords() {
            let that = this;
            Indicator.open();
            apiHelper.getWinningRecords(that.sup8.context.eno,that.sup8.h5Template.ActivityId,that.sup8.context.userId, function(res) {
                Indicator.close();
                if (res.flag) {
                    that.winningRecord = res.data;
                }else{
                    that.winningRecord = [];
                }
            });
        },
    },

    created: function() {
        var that = this;
        that.mergeCompProps(that.comp);

        switch (that.sup8.env) {
            case that.sup8._def.env.design:
                that.env = "设计器模式";
                that.winningRecord = [
                    {WRNo:1,GiftName:"中商红包",RechargeTime:"2019-10-29 14:52:23",GiftType:2},
                    {WRNo:2,GiftName:"中商积分",RechargeTime:"2019-10-29 14:52:23",GiftType:4},
                ]
                break;
            case that.sup8._def.env.preview:
                that.env = "预览模式";
                break;
            case that.sup8._def.env.run:
                that.env = "运行模式";
                this.getWinningRecords();
                break;
            default:
                break;
        }
    },

    mounted: function() {
        var that = this;
    }
};
</script>

<style scoped>
.mb-10{
    margin-bottom: .625rem;
}
.root {
  height: 100vh;
  overflow: hidden;
  background-color: #fa6044;
}
.img-bg {
  width: 100% !important;
  overflow: hidden;
  z-index: 1;
}

.img-border {
  position: absolute;
  width: 5rem;
  top: 6%;
  right: 18%;
}

.dailog {
  position: absolute;
  background-color: white;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  border-radius: 4px;
  text-align: center;
}

.dailog .row {
  width: 98%;
  margin-left: 1%;
  /* border-bottom: 1px solid gray; */
}

.dailog .tab {
  width: 40%;
  display: inline-block;
  font-size: 1rem;
  padding-top: 0.8rem;
  padding-bottom: 0.5rem;
}

.dailog .tab.tab-active {
  color: #fa6044;
}

.dailog .no-record {
  overflow-y: auto;
  height: 80%;
  margin-top: 3%;
  text-align: left;
  padding: 3%;
  font-size: 0.8rem;
  color: gray;
  text-align: center;
}

.dailog .img-no-record {
  width: 30%;
  margin-top: 30%;
}
.record{
    padding: 1rem;
    height: 71vh;
    overflow-y:auto;
    font-size: .5rem;
}
.record-img{
    width: 2rem;
    padding: .4rem;
}
.img-back {
  position: absolute;
  width: 30%;
  left: 35%;
  bottom: 1%;
}
.l{
    float: left;
}
.r{
    float: right;
}
.gift-l{
    width: 70%;
    height: 3.25rem;
}
.gift-r{
    width: 30%;
    height: 3.25rem;
    line-height: 3.25rem;
    text-align: right;
}
.record-title{
    width: 8rem;
    overflow: hidden;
    padding-top: .2rem;
    font-weight: bold;
    margin-bottom: .4rem;
    text-align: left;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size: .9rem;
}
.record-time{
    text-align: left;
    font-size: .8rem;
}
.gift-btn{
    display:inline-block;
    width: 4rem;
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    border: 1px solid rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    border-radius: 20px;
    font-size: .9rem;
}
.record-list{
    padding: .4rem 0;
    border-bottom:1px solid #d3d3d3;
}
/* 设计器 */
.env-design .root {
  height: 538px !important;
}

.env-design .img-border {
  top: 8%;
}
</style>
