<template>
  <div class="pay-result">
    <div class="head">
      <div class="content">
        <div v-if="appStatus === 0">
          <div class="icon">
            <van-icon name="checked" size="2rem" color="#0ad4af" />
          </div>
          <div class="ok">{{ getI18n('paySuccess') }}</div>
          <div class="msg">{{ getI18n('payMsg') }}</div>
        </div>
        <div v-if="appStatus === 1">
          <div class="icon">
            <van-icon name="clear" size="2rem" color="#FF682E" />
          </div>
          <div class="ok">{{ getI18n('payFail') }}</div>
        </div>
        <div class="switch-lang">
          <!-- <select v-model="selectedLange" @change="changeLange">
            <option v-for="(item, index) in langCountrys" :key="index" :value="item.value">
              {{ item.name }}
            </option>
          </select> -->
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="colse" @click="closePage()">{{ getI18n('close') }}</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

const route = useRoute()

const query = route.query || {}
const appStatus = ref(Number(query.appStatus)) // 0 成功, 1 失败
const appType = ref(query.appType)
const appId = ref(query.appId)
const redirect = ref(query.redirect)

const closePage = () => {
  location.href = `${location.origin}/#/${redirect.value}/${appId.value}?type=${appType.value}`
}

// const changeLange = (event) => {
//   store.dispatch('app/setLanguage', selectedLange.value)
//   sysLange.value = selectedLange.value
// }
const { t } = useI18n()
const getI18n = (field) => {
  return t(`${field}`)
}

onMounted(() => {})
</script>

<style scoped lang="scss">
* {
  color: black;
}

.pay-result {
  background: #ffffff;
  min-height: 100%;
  .head {
    .content {
      .switch-lang {
        margin-top: 0.5rem;
        font-size: 0.32rem;
        position: relative;
        text-align: center;
        .down-icon {
          position: absolute;
        }
      }
      .icon {
        text-align: center;
        padding: 0.5rem 0rem 0rem 0rem;
      }
      .ok {
        text-align: center;
        font-size: 0.6rem;
      }
      .msg {
        text-align: center;
        font-size: 0.35rem;
        padding-top: 0.2rem;
      }
    }
  }
  .bottom {
    height: 1.2rem;
    width: 100%;
    margin-top: 0.5rem;
    .colse {
      margin: auto;
      color: #ffffff;
      width: 4.5rem;
      height: 1rem;
      font-size: 0.4rem;
      text-align: center;
      line-height: 1rem;
      background: #0ad4af;
      border-radius: 0.2rem;
    }
  }
}
</style>
