<template>
  <div class="check-container">
    <div class="width-335">
      <p class="status-wrap">
        <span>{{ objPlaceCheck.order_pre_time }}</span>
        <span>{{ ['待支付', '已支付', '已退款', '部分退款', '已取消'][objPlaceCheck.order_status] }}</span>
      </p>
      <p class="place-name">{{ objPlaceCheck.place_name }}</p>
      <p class="outlet">{{ objPlaceCheck.bar_name }}</p>
      <p class="count">订位人数：{{ objPlaceCheck.order_user_num }}</p>
    </div>
    <div class="line-wrap">
      <div class="left-circle"></div>
      <div class="line"></div>
      <div class="right-circle"></div>
    </div>
    <div class="code">
      <img :src="codeUrl" alt="">
    </div>
    <p class="tip">二维码编号:{{ objPlaceCheck.order_number }}</p>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import QRCode from 'qrcodejs2'
import { mapGetters } from 'vuex'

export default {
  name: 'index',
  data () {
    return {
      codeUrl: ''
    }
  },
  computed: {
    ...mapGetters({
      objPlaceCheck: 'placeCheck/objPlaceCheck'
    })
  },
  async mounted () {
    await this.$nextTick()
    this.createQRCode()
  },
  methods: {
    createQRCode () {
      const orderNumber = this.objPlaceCheck.order_number
      const codeText = JSON.stringify({
        type: 1,
        place_number: orderNumber
      })
      if (!orderNumber) {
        Dialog.alert({
          title: '提示',
          message: '订单编号不存在, 点击：我的订座 - 我的订座二维码，然后重试',
          messageAlign: 'left'
        }).then(() => {
          this.$router.replace({ name: 'PlaceReserve' })
        })
        return
      }
      if (!this.qrcode) {
        this.qrcode = new QRCode('af-qrcode', {
          width: 140,
          height: 140,
          text: codeText,
          colorDark: '#000',
          colorLight: '#fff'
        })
      } else {
        this.qrcode.clear()
        this.qrcode.makeCode(codeText)
      }
      this.codeUrl = ''
      setTimeout(() => {
        const canvas = document.getElementById('af-qrcode').getElementsByTagName('canvas')[0]
        this.codeUrl = canvas.toDataURL('image/png', 1)
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.check-container {
  width: 100%;
  padding-top: 16px;
  margin-top: 10px;
  background: #fff;
  border-radius: 8px;
}

.width-335 {
  padding: 0 20px;
}

.status-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 17px;

    &:nth-of-type(1) {
      color: #1F1E1E;
    }

    &:nth-of-type(2) {
      color: #CCC6C6;
    }
  }
}

.place-name {
  margin-top: 16px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1F1E1E;
  line-height: 25px;
  letter-spacing: 1px;
}

.outlet {
  margin-top: 4px;
  font-size: 14px;
  color: #736F6F;
  line-height: 20px;
}

.count {
  margin-top: 12px;
  font-size: 14px;
  color: #736F6F;
  line-height: 20px;
}

.line {
  width: 105%;
  margin-top: 16px;
  border-bottom: 8px dotted #F2F2F2;
}

.line-wrap {
  position: relative;
  left: 0;
  top: 0;
  margin-top: 12px;

  .left-circle,
  .right-circle {
    position: absolute;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #F2F2F2;
  }

  .left-circle {
    left: -8px;
  }

  .right-circle {
    right: -8px;
  }

  .line {
    width: 335px;
    padding-top: 4px;
    margin: 0 auto;
    border-bottom: 8px dotted #F2F2F2;
  }
}

.code {
  width: 260px;
  height: 260px;
  margin: 22px auto;

  img {
    display: block;
    width: 100%;
  }
}

.tip {
  padding-bottom: 42px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #736F6F;
  line-height: 20px;
  text-align: center;
}
</style>
