<template>
  <HeaderNav :title="title" :is_back="false"></HeaderNav>
  <view class="head-background">
    <image mode="widthFix" :src="staticImage.bg" class="img" width="100%"/>
  </view>

  <view class="body-background row">
    <view class="done-container row">
      <view class="image col-12 row">
        <u-image mode="aspectFill" class="img" :src="staticImage.orderDone" height="250" width="250"></u-image>
      </view>
      <view class="title col-12 row">
        <u-text :text="content" color="#020B18" size="36" mode="name" lineHeight="50" align="center"></u-text>
      </view>
      <view class="button col-12 row">

        <view class="button-group">
          <view class="button" style="margin-bottom: 20rpx;" v-if="(type === 'order')">
            <MzButton
                @click="navTo('/pages/UserOrderPage/index?url=/pages/Index/index')"
                button-width="360rpx"
                button-color="#4DC3B8"
                font-color="#ffffff"
                title="我的订单"
            >

            </MzButton>
          </view>
          <view class="button" style="margin-bottom: 20rpx;" v-else>
            <MzButton
                @click="navTo('/pages/UserCoupons/index?url=/pages/Index/index')"
                button-width="360rpx"
                button-color="#4DC3B8"
                font-color="#ffffff"
                title="我的卡券"
            >

            </MzButton>
          </view>
          <view class="button">
            <MzButton
                @click="goHome"
                button-width="360rpx"
                title="返回首页"
            >

            </MzButton>
          </view>

        </view>
      </view>
    </view>
  </view>
  <!--  <view class="foot-button border-box">-->
  <!--    <MzButton-->
  <!--        type="primary"-->
  <!--        text="确认兑换"-->
  <!--        shape="circle"-->
  <!--        :custom-style="{-->
  <!--              color:'#020B18',-->
  <!--              backgroundColor:'#FF9545',-->
  <!--              border:'none',-->
  <!--              fontSize:'36',-->
  <!--              fontWeight:'400',-->
  <!--              height:'80rpx'-->
  <!--            }"-->
  <!--        @click="submit"-->
  <!--    ></MzButton>-->
  <!--  </view>-->
</template>

<script>
import api from "@/utils/functions.js";
import {imghost} from "@/config/host";
import HeaderNav from "@/components/HeaderNav/Index.vue"
import MzButton from "@/components/MzButton/Index.vue";

export default {
  computed: {},
  components: {
    MzButton,
    HeaderNav
  },
  data() {
    return {
      title: '支付成功',
      content: '',
      desc: '',
      size: {
        height: 0
      },
      detail: {},
      staticImage: {
        bg: imghost + '/BG.png',
        // orderDone: imghost + '/order-done.png',
        orderDone: imghost + '/draw-Zj-img.png',
      },
      type: '',
      order_item_id: undefined,
    }
  },
  onLoad(option) {
    // this.getDetail(option.id)
    this.type = option.type ? option.type : 'order';
    if (this.type === 'order') {
      this.content = '支付成功！';
    } else {
      this.content = '支付成功！';
    }
  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this);
    info.select('.foot-button').boundingClientRect(function (data) {

    }).exec(function (res) {
    });
    info.select('.address-height').boundingClientRect(function (data) {

    }).exec(function (res) {
      let otherHeight = 0;
      res.forEach((item, index) => {
        otherHeight += item.height;
      });
      that.size.height = height - headerHeight - otherHeight - uni.$u.getPx('72rpx');
    });
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    getDetail(id) {
      roomDetail({
        house_id: id
      }).then(res => {
        console.log(res.data)
        this.detail = res.data;
      });
    },
    goHome() {
      uni.reLaunch({
        url: '/pages/Index/index'
      });
    },
    submit() {
    },
  },
  onPageScroll(res) {

  },
  created() {

  },
  mounted() {

  },
}
</script>

<style lang="scss">
@import './components/done.scss';
</style>