import { Button, Cell, CellGroup, Icon, RadioGroup, Radio, showConfirmDialog } from 'vant'
import { defineComponent, reactive } from 'vue'
import styles from './index.module.less'
import { browser, moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'payment',
  props: {
    paymentConfig: {
      type: Object,
      default: {}
    }
  },
  emits: ['backOut', 'close', 'confirm'],
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      payType: 'wx',
      pay_channel: ''
    })
    const onClose = () => {
      // 继续支付则直接关闭弹窗就可
      showConfirmDialog({
        message: '是否放弃本次付款',
        confirmButtonText: '继续付款',
        cancelButtonText: '放弃',
        showCancelButton: true
      }).catch(async () => {
        await onCancel()
        emit('backOut')
        emit('close')
      })
    }

    // 需要关闭订单
    const onCancel = async (noBack?: boolean) => {}
    const onSubmit = async () => {
      // 支付...
      const pt = state.payType
      // 判断当前浏览器
      if (browser().weixin) {
        // 微信浏览器
        if (pt == 'zfb') {
          state.pay_channel = 'alipay_qr'
          getCodePay('qrCode')
        } else if (pt == 'wx') {
          state.pay_channel = 'wx_pub'
          getCodePay('pay')
        }
      } else if (browser().alipay) {
        // 支付宝浏览器
        if (pt == 'zfb') {
          state.pay_channel = 'alipay_wap'
          // 支付宝 H5 支付
          getCodePay('pay')
        } else if (pt == 'wx') {
          state.pay_channel = 'wx_pub'
          getCodePay('qrCode')
        }
      } else {
        if (pt == 'zfb') {
          state.pay_channel = 'alipay_qr'
        } else if (pt == 'wx') {
          state.pay_channel = 'wx_pub'
        }
        getCodePay('qrCode')
      }
    }

    const getCodePay = (code) => {
      // 二维码页面， 唤起支付页面
      const payCode = code == 'qrCode' ? 'payCenter' : 'payResult'
      emit('confirm', {
        payCode,
        pay_channel: state.pay_channel
      })
    }
    return () => (
      <div class={styles.payment}>
        <Icon onClick={onClose} name="cross" size={20} />
        <div class={[styles.title]}>选择支付方式</div>

        <div class={styles.payAmount}>
          <p>应付金额</p>
          <div class={styles.amount}>
            <span>￥</span>
            {moneyFormat(props.paymentConfig.currentPrice)}
          </div>
        </div>
        <RadioGroup v-model={state.payType}>
          <CellGroup border={false}>
            <Cell
              border={true}
              center
              onClick={() => {
                // wx_lite
                state.payType = 'wx'
              }}
              v-slots={{
                icon: () => <Icon name="wechat-pay" color="#15c434" size={22} />,
                'right-icon': () => <Radio name="wx" />,
                title: () => (
                  <div class={styles.payTypeRe}>
                    微信支付 <span class={styles.recommend}>推荐</span>
                  </div>
                )
              }}
            ></Cell>
            <Cell
              title="支付宝支付"
              border={true}
              // class="van-hairline--bottom"
              center
              onClick={() => {
                // alipay
                state.payType = 'zfb'
              }}
              v-slots={{
                icon: () => <Icon name="alipay" color="#009fe9" size={22} />,
                'right-icon': () => <Radio name="zfb" />
              }}
            ></Cell>
          </CellGroup>
        </RadioGroup>

        <div class={styles.blank}></div>
        <Button type="primary" class={styles.payBtn} block round onClick={onSubmit}>
          确认支付
        </Button>
      </div>
    )
  }
})