<template>
  <div class="app-list content-layer min-h">
    <div class="list-head">
      <!-- <p>{{$t('my_applications')}}</p> -->
      <p>{{$t('place_1')}}</p>
    </div>

    <Steps :current="current" class="steps">
        <Step :title="$t('place_1')" content=""></Step>
        <Step :title="$t('place_2')" content=""></Step>
        <Step :title="$t('place_3')" content="" style="width: 120px"></Step>
    </Steps>

    <div class="result">
      <h3 class="result__h">{{ isSucceed ? $t('result_4') : $t('result_pendding') }}</h3>
      <p class="result__id">{{$t('result_1')}}{{order_id}}</p>
      <div>
        <router-link :to="{name: 'myOrder'}">
          <Button size="large" class="result__btn">{{$t('result_2')}}</Button>
        </router-link>
        <router-link :to="{name: 'mySetMeal'}">
          <Button size="large" class="result__btn" type="primary">{{$t('result_3')}}</Button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { PaySuccess } from '@/api/order'
import { getToken } from '@/libs/util'

export default {
  name: '',

  data () {
    return {
      current: 2,
      access_token: getToken(),
      isSucceed: false,
      order_id: ''
    }
  },
  created () {
    this.order_id = this.$route.query.id
    this.getOrderRes()
  },
  methods: {
    getOrderRes () {
      let _this = this
      let count = 1
      var isOk = setInterval(function () {
        if (!_this.isSucceed) {
          _this.APIPaySuccess()
          count += 1
          if (count > 30) {
            clearInterval(isOk)
          }
        } else {
          clearInterval(isOk)
        }
      }, 500)
    },
    APIPaySuccess () {
      let _this = this
      const formdata = new FormData()
      formdata.append('access_token', _this.access_token)
      formdata.append('order_id', _this.order_id)
      PaySuccess(formdata).then(res => {
        if (res.data.is_pay) {
          _this.isSucceed = true
        }
      })
    }
  }
}
</script>

<style  lang='scss' scoped>
.list-head {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  margin-bottom: 20px;

  p {
    font-size: 18px;
  }
}
.steps {
  margin: 50px auto;
  display: flex;
  justify-content: center;
}
.inputbox {
  width: 50%;
}
.result {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  &__h {
    font-size: 24px;
  }
  &__id {
    font-size: 20px;
    margin: 20px;
  }
  &__btn {
    margin: 0 10px;
  }
}
</style>
