import OHeader from '@/components/o-header'
import { defineComponent, onMounted, reactive } from 'vue'
import { Button, Cell, CellGroup, Image, showConfirmDialog, Tag } from 'vant'
import styles from './index.module.less'
import iconRefunded from './images/icon_refunded.png'
import iconRefunding from './images/icon_refunding.png'
import icon_success from './images/icon_success.png'
import iconClose from './images/icon_close.png'
import iconTradeing from './images/icon_tradeing.png'
import request from '@/helpers/request'
import { useRoute } from 'vue-router'
import { orderStatus } from '@/constant'
import { browser, moneyFormat } from '@/helpers/utils'
import { useEventListener, useWindowScroll } from '@vueuse/core'

export default defineComponent({
  name: 'payment-result',
  setup() {
    const route = useRoute()
    const state = reactive({
      orders: {} as any,
      goodsInfos: [] as any,
      background: 'transparent'
    })
    const getDetails = async () => {
      try {
        if (!route.query.orderNo) return
        const { data } = await request.post(
          '/api-student/open/userOrder/paymentStatus/' + route.query.orderNo
        )

        state.orders = data || {}
        const tempGoods = data.goodsInfos || []
        tempGoods.forEach((item: any) => {
          const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
          item.goodsUrl = img
        })
        state.goodsInfos = tempGoods
      } catch {
        //
      }
    }

    const onRefund = async () => {
      showConfirmDialog({
        message: '您是否确定撤销退费?'
      }).then(async () => {
        try {
          await request.post('/api-student/userPaymentOrder/cancelRefund/' + route.query.orderNo)
          getDetails()
        } catch {
          //
        }
      })
    }

    const formatImg = (type: any) => {
      const template = {
        WAIT_PAY: iconTradeing,
        PAYING: iconTradeing,
        PAID: icon_success,
        TIMEOUT: iconClose,
        FAIL: iconClose,
        CLOSED: iconClose,
        REFUNDING: iconRefunding,
        REFUNDED: iconRefunded
      }
      return template[type] || icon_success
    }

    onMounted(() => {
      getDetails()
      useEventListener(document, 'scroll', () => {
        const { y } = useWindowScroll()
        if (y.value > 52) {
          state.background = '#fff'
        } else {
          state.background = 'transparent'
        }
      })
    })
    return () => (
      <div class={styles.paymentResult}>
        <div class={styles.paymentTitle}>
          {browser().isApp && <OHeader border={false} background={state.background} />}

          {state.orders.id && (
            <>
              <div class={styles.orderType}>
                <Image class={styles.img} src={formatImg(state.orders.status)} />
                <span>{orderStatus[state.orders.status]}</span>
              </div>
              <div class={styles.orderPrice}>
                <span>￥</span>
                {moneyFormat(state.orders.paymentCashAmount)}
              </div>
            </>
          )}
        </div>

        <CellGroup inset class={styles.cellGroup}>
          <Cell>
            {{ title: () => '付款时间', value: () => <span>{state.orders.payTime || '--'}</span> }}
          </Cell>
          <Cell>
            {{ title: () => '订单编号', value: () => <span>{state.orders.orderNo}</span> }}
          </Cell>
        </CellGroup>

        <CellGroup inset class={styles.cellGroup}>
          <div class={styles.buyDetail}>
            <i></i> 购买详情
          </div>
          {state.goodsInfos.map((goods: any) => (
            <Cell>
              {{
                icon: () => <Image class={styles.buyImg} src={goods.goodsUrl} />,
                title: () => (
                  <div class={styles.buyContent}>
                    <p class={styles.goodsTitle}>{goods.goodsName}</p>
                    <Tag color="#EEEEEE" textColor="#666666">
                      {goods.brandName}
                    </Tag>
                  </div>
                ),
                value: () => <span>x 1</span>
              }}
            </Cell>
          ))}
        </CellGroup>

        {state.orders.status === 'REFUNDING' && browser().isApp && (
          <div class={'btnGroup'}>
            <Button type="primary" round block onClick={onRefund}>
              撤销退费
            </Button>
          </div>
        )}
      </div>
    )
  }
})
