<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">
        <div class="tab tab-active">
          活动规则
          <img
            class="img-border"
            src="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"
          />
        </div>
        <div class="tab" @click="onClickTab('3-6')">中奖纪录</div>
      </div>
      <div class="content" v-html="comp.props.ruleTxet.val">
        
      </div>
      <img
        class="img-back"
        src="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"
        @click="onClickBack"
      />
    </div>
  </div>
</template>

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

export default {
  name: "Comp",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      selected: "1"
    };
  },
  methods: {
    onClickTab(pageType) {
      this.$parent.changeSelectedPage(pageType);
    },
    onClickBack() {
      this.$parent.changeSelectedPage("3-1");
    }
  },

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

    switch (that.sup8.env) {
      case that.sup8._def.env.design:
        that.env = "设计器模式";
        break;
      case that.sup8._def.env.preview:
        that.env = "预览模式";
        break;
      case that.sup8._def.env.run:
        that.env = "运行模式";
        break;
      default:
        break;
    }
  },

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

<style scoped>
.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%;
  left: 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 .content {
  overflow-y: auto;
  height: 80%;
  margin-top: 3%;
  text-align: left;
  padding: 3%;
  font-size: 1rem;
}

.img-back {
  position: absolute;
  width: 30%;
  left: 35%;
  bottom: 1%;
}

/* 设计器 */
.env-design .root {
  height: 538px !important;
}
.env-design .img-border {
  top: 8%;
}
</style>
