<script setup lang="ts">
import { usePay } from '@/hooks'
import orderApi from '@/api/order'

const props = withDefaults(
  defineProps<{
    visible: boolean
    learningMode: anyObj
    startDay: string
    price: number | null
  }>(),
  {
    price: 0,
  },
)
const emit = defineEmits(['update:visible', 'confirm'])

const { qrCode, status: statusValue, start, end } = usePay()
const status = computed(() => {
  return { '-1': 'timeout', 0: 'pending', 1: 'success' }[statusValue.value]
})

const isLoading = ref(false)
const createOrder = async () => {
  isLoading.value = true
  try {
    return await orderApi.createInspectorPrepayOrder({
      money: props.price,
      orderType: 1,
      inspectorCourseList: [props.startDay + ' 19:00:00'],
      inspectorModeId: props.learningMode.id,
    })
  } finally {
    isLoading.value = false
  }
}

const modelValue = ref(props.visible)
watch(
  () => props.visible,
  newVal => {
    if (modelValue.value !== newVal) {
      modelValue.value = newVal

      if (newVal) {
        start(createOrder)
      } else {
        end()
      }
    }
  },
)
watch(modelValue, newVal => {
  emit('update:visible', newVal)
})
function handleConfirm() {
  emit('confirm')
}

function reloadQrCode() {
  start(createOrder)
}
</script>

<template>
  <mj-dialog
    v-model="modelValue"
    class="urge-pay-dialog"
    title="支付"
    :showFooter="false"
    :show-close="status !== 'success'"
  >
    <div class="pay-dialog-body">
      <div v-if="['pending', 'timeout'].includes(status)" class="pending-info">
        <h2>{{ learningMode.mode === 1 ? '1v1' : '1vN' }} 督学服务</h2>
        <div class="pay-qrcode">
          <div class="qrcode">
            <div v-if="isLoading" class="loadincontainer">
              <Icon name="global_loading" loading :size="80"></Icon>
            </div>
            <img
              v-else-if="qrCode"
              :src="qrCode"
              :class="{ blur: status === 'timeout' }"
              alt="支付二维码"
              @click="status = 'success'"
            />
          </div>
          <div v-if="status === 'timeout'" class="mask" @click="status = 'pending'">
            <img src="../../assets/pay-dialog/reload.svg" alt="重新获取" @click="reloadQrCode" />
            <p>二维码过期，请重新刷新</p>
          </div>
        </div>
        <p>请使用微信扫码支付</p>
        <div class="price">¥{{ price }}</div>
      </div>
      <div v-else-if="status === 'success'" class="success-info">
        <p>{{ learningMode.mode === 1 ? '1v1' : '1vN' }} 督学服务购买成功！</p>
        <p>将为您匹配督学师，请耐心等待～</p>
        <Btn tilt @click="handleConfirm">确定</Btn>
      </div>
    </div>
  </mj-dialog>
</template>

<style scoped lang="scss">
.success-info {
  text-align: center;

  p {
    color: $font-color;
    text-align: center;
    font-family: $font-special, sans-serif;
    font-size: 3.33vh;
    font-weight: 400;
    line-height: 5vh;

    &:first-child {
      margin-top: 12.17vh;
    }

    + p {
      margin-top: 2vh;
    }
  }

  .x-button {
    margin-top: 11.5vh;
    margin-bottom: 0.67vh;
  }
}

.pending-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loadincontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}

.pay-qrcode {
  position: relative;
  margin-top: 0.67vh;

  .qrcode {
    width: 320px;
    height: 26.67vh;
    background: #fff;
    position: relative;
  }

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

    &.blur {
      filter: blur(8px);
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    p {
      position: relative;
      color: #fff;
      margin-top: 1.33vh;
      font-family: $font-special, sans-serif;
      line-height: 3vh;
      font-size: 2vh;
    }

    img {
      position: relative;
      width: 96px;
      height: 8vh;
    }
  }
}

h2 {
  color: $font-color;
  font-size: 2.67vh;
  line-height: 4vh;
  margin-top: 2.33vh;
  font-family: $font-special, sans-serif;
}

p {
  color: $font-color;
  text-align: center;
  font-size: 2vh;
  line-height: 3vh;
  margin-top: 0.67vh;
}

.price {
  margin-top: 0.67vh;
  color: var(--red, #fc4444);
  font-size: 3.33vh;
  line-height: 5vh;
}
</style>
<style lang="scss">
.urge-pay-dialog .el-dialog__body .body .content.full {
  height: auto;
}
</style>
