<template>
  <van-popup v-model="data.show">
    <div class="model">
      <div class="model-close" @click="modelCloseHandler"></div>
      <!-- 积分或者优惠券 -->
      <div
        class="model-content"
        v-if="data.drawResult.prizeType == 'integral' || data.drawResult.prizeType == 'coupon'"
      >
        <div class="model-head-line"></div>
        <div class="model-title">恭喜获得</div>

        <div class="content">
          <div
            class="prize-thumb"
            v-bind:style="{backgroundImage:'url(' + data.drawResult.thumb + ')'}"
          ></div>
          <div class="prize-name">{{data.drawResult.prizeName}}</div>
          <div class="tip-container">
            <span class="use-tip">奖品说明</span>
          </div>
          <div class="tip-container" v-if="data.drawResult.prizeType == 'integral'">
            <span class="tip">积分可以在立乐家商城兑换礼品</span>
          </div>
          <div class="tip-container" v-if="data.drawResult.prizeType == 'coupon'">
            <span class="tip">优惠券可以在立乐家商城购物当现金使用</span>
          </div>
          <div
            class="sys-btn-02 base-top"
            @click="toViewIntegralHandler"
            v-if="data.drawResult.prizeType == 'integral'"
          >前往查看</div>
          <div
            class="sys-btn-02 base-top"
            @click="toViewCouponHandler"
            v-if="data.drawResult.prizeType == 'coupon'"
          >前往使用</div>
          <div class="sys-btn-02" @click="modelBtnClickHandler">返回抽奖</div>
        </div>
      </div>

      <!-- 实物-->
      <div class="model-content" v-if="data.drawResult.prizeType == 'real'">
        <div class="model-head-line"></div>
        <div class="model-title">恭喜获得</div>

        <div class="content">
          <div
            class="prize-thumb"
            v-bind:style="{backgroundImage:'url(' + data.drawResult.thumb + ')'}"
          ></div>
          <div class="prize-name">{{data.drawResult.prizeName}}</div>
          <div class="form-contaner">
            <div class="form-item">
              <div class="form-label">收件人：</div>
              <div class="form-input">
                <input v-model="submitForm.contactName" placeholder="请填写真实姓名" />
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">联系方式：</div>
              <div class="form-input">
                <input v-model="submitForm.contactMobile" placeholder="请填写手机号码" />
              </div>
            </div>
            <div class="form-item align-top">
              <div class="form-label">收件地址：</div>
              <div class="form-input">
                <textarea v-model="submitForm.address" placeholder="请填写真实收件地址" rows="3" cols="20"></textarea>
              </div>
            </div>
          </div>
          <div class="sys-btn-02 base-top" @click="submitContactHandler">确认提交</div>
        </div>
      </div>

      <!-- 不中奖-->
      <div class="model-content" v-if="data.drawResult.status == 0">
        <div class="model-head-line"></div>
        <div class="model-title"></div>
        <div class="content">
          <div
            class="prize-thumb"
            v-bind:style="{backgroundImage:'url(' + data.drawResult.thumb + ')'}"
          ></div>
          <div>
            <span class="tip" style="text-align:center">再接再厉，也许下一份大奖就是你的 ~</span>
          </div>
          <div class="sys-btn-02 base-top" @click="modelBtnClickHandler">返回抽奖</div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
let urls = {
  submit: "/jiajiaCHApi/app/prize/contracts/submit"
};

import { httpGet, httpPost } from "@/api/fetch-api";

import Vue from "vue";
import { Popup, Toast } from "vant";
import { Field } from "vant";

Vue.use(Field);
Vue.use(Popup);

export default {
  props: ["value"],
  data() {
    return {
      loading: false,
      data: this.value,
      submitForm: !this.value || !this.value.drawResult
        ? {
            drawCode: "",
            contactName: "",
            contactMobile: "",
            province: "",
            city: "",
            district: "",
            address: ""
          }
        : this.value.drawResult
    };
  },
  methods: {
    modelCloseHandler() {
      typeof this.data.confirmHandler == "function" &&
        this.data.confirmHandler();
      this.data.show = false;
    },
    modelBtnClickHandler() {
      this.data.show = false;
      typeof this.data.confirmHandler == "function" &&
        this.data.confirmHandler();
    },
    toViewIntegralHandler() {
      location.href = global_view_integral_url;
    },
    toViewCouponHandler() {
      location.href = global_view_coupon_url;
    },
    submitContactHandler() {
      if (!this.submitForm.contactName) {
        Toast("请填写真实姓名");
        return;
      }
      if (
        this.submitForm.contactMobile.indexOf("1") != 0 ||
        this.submitForm.contactMobile.length != 11
      ) {
        Toast("请填写正确的手机号码");
        return;
      }
      if (!this.submitForm.address) {
        Toast("请填写真实收件地址");
        return;
      }
      this.loading = true;
      Toast.loading({
        mask: true,
        forbidClick: true,
        message: "数据提交中..."
      });
      this.submitForm.drawCode = this.data.drawResult.drawCode;
      httpPost({ url: urls.submit, data: this.submitForm })
        .then(res => {
          Toast.clear();
          Toast("收件地址提交成功");
          this.$emit("submitSuccess");
        })
        .catch(e => {
          this.loading = false;
          Toast.clear();
          Toast("收件地址提交失败");
        });
    }
  },
  created() {
    this.data = this.data
      ? this.data
      : {
          show: false,
          drawResult: {}
        };
  }
};
</script>

<style lang="less" scoped>
.van-popup {
  background-color: transparent;
  top: 45%;
}

.model {
  display: flex;
  width: 650px;
  min-height: 576px;
  flex-direction: column;
  align-items: flex-end;
}

.prize-thumb {
  width: 240px;
  height: 240px;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 30px auto;
}

.prize-name {
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: bold;
}

.tip-container {
  text-align: left;
  padding-left: 50px;
  height: 50px;
  line-height: 80px;
}
.use-tip {
  padding: 5px 10px 5px 18px;
  background-color: #addfe1;
  color: #606561;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 3px;
  border-radius: 10px;
}

.tip {
  color: #606561;
  font-size: 26px;
  font-weight: 500;
  padding-left: 10px;
}

.base-top {
  margin-top: 60px !important;
}
.content {
  padding-bottom: 60px;
}

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

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

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

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

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

.sys-btn-02 {
  width: 350px;
  height: 90px;
  font-size: 30px;
  line-height: 80px;
  background-size: 350px 90px;
  margin-top: 30px;
}

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

.form-contaner {
  margin-top: 30px;
}

.form-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.align-top {
  align-items: flex-start !important;
}

.form-label {
  width: 140px;
  text-align: right;
  padding-right: 10px;
  font-size: 26px;
  font-weight: 600;
  color: #606561;
}
.form-input {
  display: flex;
}
.form-input input,
textarea {
  width: 370px;
  line-height: 50px;
  border-radius: 25px;
  padding: 5px 15px 5px 20px;
  border: 1px solid #82acae;
  background-color: #addfe1;
  color: #303030;
  font-size: 26px;
  font-weight: 600;
}
.form-input input {
  height: 50px;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  color: #4f9984;
  font-size: 26px;
}
</style>