<template>
  <van-popup v-model="data.show">
    <div class="model" v-if="data.index == 'default'">
      <div class="model-close" @click="modelCloseHandler"></div>
      <div class="model-content">
        <div class="model-head-line"></div>
        <div class="model-title">{{data.title}}</div>

        <div class="successModel">
          <div class="model-data">{{data.content}}</div>
          <div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
          <div
            v-if="data.labelBtnShow"
            class="label-btn"
            @click="labelBtnClickHandler"
          >{{data.labelBtnText}}</div>
          <div class="model-bottom-line"></div>
        </div>
      </div>
    </div>

    <div class="model" v-if="data.index == 'subcribe'">
      <div class="model-close" @click="modelCloseHandler"></div>
      <div class="model-content">
        <div class="model-head-line"></div>
        <div class="model-title">微信提示</div>

        <div class="successModel">
          <div class="model-data">
            扫码关注
            <br />及时了解最新赛况及结果哦！
          </div>
          <div class="qrcode">
            <img src="../../assets/imgs/walfare-qrcode.png" />
          </div>

          <div class="model-bottom-line"></div>
        </div>
      </div>
    </div>

    <!-- 规则-->
    <div class="model rule-model" v-if="data.index == 'rule'">
      <div class="model-close" @click="modelCloseHandler"></div>

      <div class="model-content">
        <div class="model-head-line"></div>
        <div class="model-title">{{data.title}}</div>

        <div class="rule-container">
          <div class="rule-line">
            <div>1.</div>
            <div>每位微信用户每天可投一票</div>
          </div>
          <div class="rule-line">
            <div>2.</div>
            <div>投票后可以获得一次抽奖机会</div>
          </div>
          <div class="rule-line">
            <div>3.</div>
            <div>严禁恶意刷人气，一经发现将立即取消选手人气评选资格</div>
          </div>
          <div class="rule-line">
            <div>4.</div>
            <div>本组委会保留最终解释权</div>
          </div>
          <div class="rule-line">
            <div>5.</div>
            <div>报名截止时间9月19日23:59，投票截止时间9月20日23:59，最终入围名单将在9月21日在立乐家微信公众号公布</div>
          </div>
          <div class="rule-line">
            <div>6.</div>
            <div>因不可抗因素造成网络人气评选被动停止的，以网络人气评选停止时间的人气值为准。</div>
          </div>
        </div>

        <div class="successModel">
          <div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
          <div class="model-bottom-line"></div>
        </div>
      </div>
    </div>

    <!-- 奖品-->
    <div class="model rule-model" v-if="data.index == 'prize'">
      <div class="model-close" @click="modelCloseHandler"></div>

      <div class="model-content">
        <div class="model-head-line"></div>
        <div class="model-title">{{data.title}}</div>
        <div class="rule-container">
          <div class="rule-line sm-width">
            <div>超级大奖:珠海长隆海洋王国2天1夜亲自游</div>
          </div>
          <div class="rule-line sm-width">
            <div>幸运大奖:立白集团立乐家商城1000元现金券</div>
          </div>
          <div class="rule-line sm-width">
            <div>超洁净奖:立白集团礼包</div>
          </div>
          <div class="rule-line sm-width">
            <div>好运来奖:立白集团立乐家商城无门槛现金券</div>
          </div>
          <div class="rule-line sm-width">
            <div>幸福满满奖:立白集团立乐家商城会员积分</div>
          </div>
        </div>

        <div class="successModel">
          <div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
          <div class="model-bottom-line"></div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
Vue.use(Popup);

export default {
  props: ["value"],
  data() {
    return {
      data: this.value
    };
  },
  methods: {
    modelCloseHandler() {
      this.$emit("close");
      this.data.show = false;
    },
    modelBtnClickHandler() {
      this.data.show = false;
      typeof this.data.confirmHandler == "function" &&
        this.data.confirmHandler();
    },
    labelBtnClickHandler() {
      this.data.show = false;
      typeof this.data.labelBtnHandler == "function" &&
        this.data.labelBtnHandler();
    }
  },
  created() {
    this.data = this.data
      ? this.data
      : {
          title: "",
          description: "",
          show: false,
          index: "default",
          btnShow: false,
          btnText: "",
          confirmHandler: null,
          labelBtnShow: false,
          labelBtnText: "",
          labelBtnHandler: null
        };
  }
};
</script>

<style lang="less" scoped>
.van-popup {
  background-color: transparent;
  top: 45%;
}
.model {
  display: flex;
  width: 480px;
  min-height: 576px;
  flex-direction: column;
  align-items: flex-end;
}

.model-head-line {
  height: 50px;
  background-color: transparent;
}
.model-bottom-line {
  height: 80px;
  background-color: transparent;
}

.model-close {
  width: 64px;
  height: 116px;
  background: url(../../assets/imgs/model-close.png);
  background-size: 100%;
  margin-right: 20px;
}

.model-content {
  width: 480px;
  min-height: 460px;
  height: auto;
  background: url(../../assets/imgs/model-bottom.png) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  border-radius: 30px;
  background-color: #fff;
}

.model-title {
  font-size: 45px;
  font-weight: bold;
}

.model-data {
  font-size: 30px;
  margin: 50px auto 70px auto;
  width: 400px;
  text-align: center;
}

.sys-btn-02 {
  width: 300px;
  font-size: 30px;
  line-height: 80px;
}

.label-btn {
  font-size: 26px;
  text-align: center;
}

.qrcode {
  width: 187px;
  height: 195px;
  line-height: 195px;
  background: url(../../assets/imgs/qrcode-bg.png) no-repeat;
  background-size: 100%;
  margin: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 170px;
  }
}

.rule-model {
  width: 600px !important;

  .model-content {
    width: 600px !important;
  }

  .rule-container {
    margin: 30px auto;
  }

  .rule-line {
    width: 520px;
    margin: auto;
    display: flex;
    align-items: flex-start;

    div {
      font-size: 24px;
      color: #303531;
      text-align: left;
      line-height: 50px;
    }

    div:first-child {
      min-width: 40px;
    }
  }

  .sm-width {
    width: 480px !important;
    margin-bottom: 30px;
    
    div {
      font-weight: 600;
    }
  }
}
</style>