import ColProtocol from '@/components/col-protocol'
import { Button, Dialog, Popup, Toast } from 'vant'
import ColPopup from '@/components/col-popup'
import { defineComponent } from 'vue'
import { postMessage } from '@/helpers/native-message'
import styles from './index.module.less'
import UserAuth from './userAuth'
import request from '@/helpers/request'
import qs from 'query-string'

// 调用原生支付
// postMessage({ api: 'paymentOrder', content: { orderNo: 0 } })
// listenerMessage({ api: 'paymentResult', callback: (res: any) => {
//   status: 'success | fail'
// }})

// import iconTips from '@common/images/icon_tips.png'
import Payment from './payment'
import UrlPayment from '../adapay/payment'
import ColHeader from '@/components/col-header'
import { state } from '@/state'
import {
  beforeSubmit,
  orderInfos,
  orderStatus,
  orderTenantInfos,
  resestState
} from './orderStatus'
import OrderVideo from './order-video'
import OrderLive from './order-live'
import OrderPractice from './order-practice'
import OrderVip from './order-vip'
import OrderMusic from './order-music'
import { moneyFormat } from '@/helpers/utils'
import OrderPinao from './order-pinao'
import { getMusicDetail } from '@/student/trade/tradeOrder'
import OrderActive from './order-active'
import UseCoupon from './use-coupons'
import OrderAlbum from './order-album'
import { useRect } from '@vant/use'
import QrcodePayment from './qrcode-payment'
import OrderTennatAlbum from './order-tennat-album'

export default defineComponent({
  name: 'order-detail',
  data() {
    const query = this.$route.query
    return {
      loading: false, // 是否加载中，为了处理0元订单（）
      orderType: query.orderType as string,
      recomUserId: query.recomUserId, // 推荐人id
      activityId: query.activityId, // 活动编号
      id: query.id,
      agreeStatus: false,
      popupShow: false,
      paymentStatus: false,
      orderAmount: 0, // 订单金额，用于使用优惠券，余额，优惠等
      orderPrice: 0, // 支付金额，最后支付金额
      dataLoading: true,
      exists: false, // 是否签署过用户注册协议
      bottomHeight: 0,
      paymentVendor: '', //支付厂商
      paymentVersion: 'V1', // 支付版本,可用值:V1 老版,V2 新版
      paymentChannels: [] as any, // 可以选择的支付类型
      showQrcode: false,
      orderTimer: null as any,
      qrCodeUrl: '',
      pay_channel: '',
      orderInfo: {} as any,
      config: {} as any, // 支付信息
      orderNo: '' //
    }
  },
  unmounted() {
    // 销毁时解绑监听
    orderStatus.orderInfo = {
      orderNo: '',
      actualPrice: 0,
      payStatus: false
    }
  },
  computed: {
    orderList() {
      // 商品列表
      const orderObject = orderStatus.orderObject
      return orderObject.orderList || []
    }
  },
  async mounted() {
    await this.getUserRegisterProtocol()
    // 判断是否是曲目购买（只有智能陪练才会有入口），其它地方不会有入口
    this.dataLoading = true
    if (this.orderType == 'MUSIC' && this.id) {
      try {
        const item = await getMusicDetail(this.id)
        orderStatus.orderObject.orderType = 'MUSIC'
        orderStatus.orderObject.orderName = item.musicSheetName
        orderStatus.orderObject.orderDesc = item.musicSheetName
        orderStatus.orderObject.actualPrice = item.musicPrice
        orderStatus.orderObject.recomUserId = this.recomUserId
        orderStatus.orderObject.activityId = this.activityId
        // 判断当前订单是否在支付中
        if (['WAIT_PAY', 'PAYING'].includes(item.orderStatus)) {
          orderStatus.orderObject.orderNo = item.orderNo
        } else if (['PAID', 'CLOSE', 'FAIL'].includes(item.orderStatus)) {
          // 判断订单是否是其它状态
          Toast('订单有误')
          postMessage({ api: 'back', content: {} })
        }
        orderStatus.orderObject.orderList = [
          {
            orderType: 'MUSIC',
            goodsName: item.musicSheetName,
            actualPrice: item.musicPrice,
            ...item
          }
        ]
      } catch {
        //
      }
    }

    await this.getOrderPayType()

    this.orderAmount = orderStatus.orderObject.actualPrice || 0
    this.orderPrice = orderStatus.orderObject.actualPrice || 0
    this.dataLoading = false
    // 0元支付特别处理
    if (this.orderPrice === 0 && orderStatus.orderObject.orderType) {
      this.loading = true
      this.onSubmit()
    }

    this.$nextTick(() => {
      // paymentButton
      // 处理超过一屏显示
      const { height } = useRect((this as any).$refs.paymentButtom)
      this.bottomHeight = height + 10
    })

    if (!orderStatus.orderObject.orderType) {
      Dialog.alert({
        title: '提示',
        message: '商品信息已更新，请返回后重新购买',
        confirmButtonText: '确定',
        confirmButtonColor: '#2dc7aa'
      }).then(() => {
        this.$router.back()
      })
      return
    }
  },
  methods: {
    async getUserRegisterProtocol() {
      // 获取是否签署过《用户注册协议》
      try {
        const res = await request.get(
          state.platformApi + '/sysUserContractRecord/checkContractSign',
          {
            params: {
              contractType: 'REGISTER'
            }
          }
        )
        this.exists = res.data
      } catch {
        //
      }
    },
    /** 查询支付类型 */
    async getOrderPayType() {
      try {
        const orderObject = orderStatus.orderObject
        // 单独处理其它支付类型下面用的bizId
        let bizId =
          orderObject.orderList.length > 0 ? orderObject.orderList[0].id : ''
        if (orderObject.orderType === 'PRACTICE') {
          bizId =
            orderObject.orderList.length > 0
              ? orderObject.orderList[0].teacherId
              : ''
        }
        if (
          orderObject.orderType === 'LIVE' ||
          orderObject.orderType === 'VIDEO'
        ) {
          bizId =
            orderObject.orderList.length > 0
              ? orderObject.orderList[0].courseGroupId
              : ''
        }
        const { data } = await request.post(
          state.platformApi + '/userOrder/orderPayType',
          {
            data: {
              goodType: orderObject.orderType,
              bizId,
              recomUserId: orderObject.recomUserId
                ? orderObject.recomUserId
                : null
            }
          }
        )

        // 判断是否已经有支付方式了
        const paymentConfig = orderStatus.orderObject.paymentConfig || {}
        if (paymentConfig.paymentVersion && orderStatus.orderObject.orderNo) {
          this.paymentVersion = paymentConfig.paymentVersion || 'V1'
          this.paymentVendor = paymentConfig.paymentVendor
        } else {
          this.paymentVersion = data.paymentVersion || 'V1'
          this.paymentVendor = data.paymentVendor
        }

        this.paymentChannels = data.paymentChannels // 可以选择的支付类型
      } catch {
        //
      }
    },
    async onAuthSuccess() {
      this.popupShow = false
      await this.getUserRegisterProtocol()
      this.onSubmit() // 实名成功后自动支付
    },
    async onSubmit() {
      // console.log(this.orderInfos)
      if (this.orderPrice > 0) {
        if (!this.agreeStatus) {
          Toast('请先阅读并同意《酷乐秀平台服务协议》')
          return
        }
        const users = state.user.data
        // 判断是否需要实名认证, 姓名，卡号，是否签协议  || !this.exists
        if (!users?.realName || !users?.idCardNo) {
          this.popupShow = true
          return
        }
      }

      // 判断是否有订单号
      if (orderStatus.orderObject.orderNo) {
        if (this.paymentVersion === 'V1') {
          this.paymentStatus = true
        } else {
          this.orderInfo = orderStatus.orderObject.paymentConfig || {}
          this.orderNo = orderStatus.orderObject.orderNo
          const paymentChannel = this.orderInfo.paymentConfig.paymentChannel

          // 判断是否为原生支付
          if (
            this.orderInfo.paymentVendor?.indexOf('wxpay') > -1 ||
            this.orderInfo.paymentVendor?.indexOf('alipay') > -1
          ) {
            this.paymentStatus = true
          } else {
            if (paymentChannel) {
              const payCode = beforeSubmit(paymentChannel)
              this.onConfirm({
                payCode,
                pay_channel: paymentChannel
              })
            } else {
              this.paymentStatus = true
            }
          }
        }

        return
      }

      // 正常支付
      try {
        const orderObject = orderStatus.orderObject

        if (this.paymentVersion === 'V1') {
          const url =
            state.platformType === 'TEACHER'
              ? '/api-teacher/userOrder/executeOrder'
              : '/api-student/userOrder/executeOrder'
          const res = await request.post(url, {
            data: {
              orderName: orderObject.orderName,
              orderDesc: orderObject.orderDesc,
              orderType: orderObject.orderType,
              actualPrice: this.orderPrice || 0,
              recomUserId: orderObject.recomUserId,
              activityId: orderObject.activityId,
              couponId: orderObject.couponId,
              orderInfos: [...orderInfos()]
            }
          })
          const result = res.data || {}
          // 支付成功
          if (result.status == 'PAID') {
            this.$router.replace({
              path: '/tradeDetail',
              query: {
                orderNo: result.orderNo
              }
            })
            return
          }
          // 拉起支付方式
          orderStatus.orderObject.orderNo = result.orderNo
          orderStatus.orderObject.actualPrice = result.actualPrice
        } else {
          const url =
            state.platformType === 'TEACHER'
              ? '/api-teacher/userOrder/executeOrder/v2'
              : '/api-student/userOrder/executeOrder/v2'
          const res = await request.post(url, {
            data: {
              activityId: orderObject.activityId || null,
              couponIds: orderObject.couponId,
              goodsInfos: [...orderTenantInfos()],
              orderDesc: orderObject.orderDesc,
              orderName: orderObject.orderName,
              orderType: orderObject.orderType,
              paymentCashAmount: this.orderPrice || 0,
              paymentType: this.paymentVendor,
              recomUserId: orderObject.recomUserId || null
            }
          })
          const result = res.data || {}
          // 支付成功
          if (res.code === 999) {
            Dialog.alert({
              title: '提示',
              message: '商品信息已更新，请返回后重新购买',
              confirmButtonText: '确定',
              confirmButtonColor: '#2dc7aa'
            }).then(() => {
              this.$router.back()
            })
            return
          }
          if (result.status == 'PAID') {
            this.$router.replace({
              path: '/tradeDetail',
              query: {
                orderNo: result.orderNo
              }
            })
            return
          }
          orderStatus.orderObject.paymentConfig = res.data || {}
          orderStatus.orderObject.orderNo = res.data?.orderNo
          this.orderInfo = result
          this.orderNo = result.orderNo
        }

        this.paymentStatus = true
      } catch {
        this.loading = false
        if (this.orderPrice === 0) {
          Dialog.alert({
            title: '提示',
            message: '支付失败，请稍后重试！',
            confirmButtonText: '确定',
            confirmButtonColor: '#2dc7aa'
          })
        }
      }
    },
    onBackOut() {
      // 关闭订单后需要重置数据
      resestState()
    },
    onCouponSelect(item: any) {
      console.log('onCouponSelect', item)
      let discountCount = 0
      ;(item || []).forEach((item: any) => {
        discountCount += Number(item.discountPrice)
      })

      const lastAmount = Number(
        (Number(this.orderAmount) - Number(discountCount)).toFixed(2)
      )
      this.orderPrice = lastAmount >= 0 ? lastAmount : 0

      // 设置优惠券编号
      const couponIds = (item || []).map((item: any) => {
        return item.couponIssueId
      })
      orderStatus.orderObject.couponId = couponIds.join(',') || ''
    },
    onConfirm(val: any) {
      const config: any = this.orderInfo.paymentConfig || {}
      orderStatus.orderObject.paymentConfig.paymentConfig.paymentChannel =
        val.pay_channel
      this.pay_channel = val.pay_channel

      const params = qs.stringify({
        pay_channel: val.pay_channel,
        wxAppId: config.wxAppId,
        alipayAppId: config.alipayAppId,
        paymentType: this.orderInfo.paymentType,
        body: config.body,
        price: config.price,
        orderNo: config.merOrderNo,
        userId: config.userId
      })
      if (val.payCode === 'payResult') {
        window.location.href =
          window.location.origin + state.payBackPath + '#/payResult?' + params
      } else {
        this.qrCodeUrl =
          window.location.origin + state.payBackPath + '#/payDefine?' + params
        this.showQrcode = true
        this.paymentStatus = false

        setTimeout(() => {
          this.getPaymentOrderStatus()
        }, 300)
      }
    },
    // 轮询查询订单状态
    async getPaymentOrderStatus() {
      // 循环查询订单
      // const orderNo = state.orderNo
      const orderTimer = setInterval(async () => {
        // 判断是否在当前路由，如果不是则清除定时器
        if (this.$route.name != 'orderDetail') {
          clearInterval(orderTimer)
          return
        }
        this.orderTimer = orderTimer
        try {
          const urlFix =
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
          const { data } = await request.get(
            `${urlFix}/userOrder/detailByOrderNo/${this.orderNo}`,
            {
              hideLoading: true
            }
          )

          if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
            // 默认关闭支付二维码弹窗
            this.showQrcode = false
            clearInterval(this.orderTimer)
            setTimeout(() => {
              this.$router.replace({
                path: '/tradeDetail',
                query: {
                  orderNo: this.orderNo
                }
              })
            }, 100)
          }
        } catch (e: any) {
          //
          console.log(e, 'error')
          clearInterval(this.orderTimer)
        }
      }, 5000)
    }
  },
  render() {
    return (
      <div
        class={styles['order-detail']}
        style={{
          paddingBottom: this.bottomHeight + 'px'
        }}
      >
        <ColHeader />

        {!this.loading && (
          <>
            {this.orderList.map((item: any) => {
              if (item.orderType === 'VIDEO') {
                return <OrderVideo item={item} />
              } else if (item.orderType === 'LIVE') {
                return <OrderLive item={item} />
              } else if (item.orderType === 'PRACTICE') {
                return <OrderPractice item={item} />
              } else if (item.orderType === 'VIP') {
                return <OrderVip item={item} />
              } else if (item.orderType === 'MUSIC') {
                return <OrderMusic item={item} />
              } else if (item.orderType === 'PIANO_ROOM') {
                return <OrderPinao item={item} />
              } else if (item.orderType === 'ACTI_REGIST') {
                return <OrderActive item={item} />
              } else if (item.orderType === 'ALBUM') {
                return <OrderAlbum item={item} />
              } else if (item.orderType === 'TENANT_ALBUM') {
                return <OrderTennatAlbum item={item} />
              }
            })}

            {/* 优惠券使用 */}
            {!this.dataLoading && (
              <UseCoupon
                discountPrice={orderStatus.orderObject.discountPrice}
                orderType={this.orderType}
                orderAmount={this.orderAmount}
                onCouponSelect={this.onCouponSelect}
                disabled={orderStatus.orderObject.orderNo ? true : false}
              />
            )}

            <div class={styles.paymentInfo} ref="paymentButtom">
              {this.orderPrice > 0 && (
                <div
                  class={[
                    styles.protocol,
                    state.projectType === 'tenant' && styles.protocolTenant
                  ]}
                >
                  <ColProtocol
                    v-model={this.agreeStatus}
                    showHeader
                    style={{ paddingLeft: 0, paddingRight: 0 }}
                  />
                </div>
              )}

              <div class={styles.btnGroup}>
                <div class={styles.priceSection}>
                  支付金额：
                  <div class={styles.price}>
                    <span class={styles.priceUnit}>￥</span>
                    <span class={styles.priceNum}>
                      {moneyFormat(this.orderPrice)}
                    </span>
                  </div>
                </div>
                <Button
                  type="primary"
                  round
                  class={[
                    styles.btn,
                    state.projectType === 'tenant' && styles.btnTenant
                  ]}
                  onClick={this.onSubmit}
                >
                  立即支付
                </Button>
              </div>
            </div>
          </>
        )}
        <ColPopup v-model={this.popupShow}>
          <UserAuth exists={this.exists} onSuccess={this.onAuthSuccess} />
        </ColPopup>

        <Popup
          show={this.paymentStatus}
          closeOnClickOverlay={false}
          position="bottom"
          round
          closeOnPopstate
          safeAreaInsetBottom
          style={{ minHeight: '30%' }}
        >
          {/* 判断类型使用什么去支付 */}
          {this.paymentVersion === 'V1' ? (
            <Payment
              v-model={this.paymentStatus}
              orderInfo={orderStatus.orderObject}
              onBackOut={this.onBackOut}
            />
          ) : (
            //      this.paymentVersion = data.paymentVersion || 'V1'
            // this.paymentVendor = data.paymentVendor
            // this.paymentChannels = data.paymentChannels // 可以选择的支付类型
            <UrlPayment
              paymentConfig={{
                ...orderStatus.orderObject,
                orderNo: this.orderNo
              }}
              // paymentVersion={this.paymentVersion}
              paymentVendor={this.paymentVendor}
              paymentChannels={this.paymentChannels}
              onClose={() => (this.paymentStatus = false)}
              onBackOut={this.onBackOut}
              onConfirm={(val: any) => this.onConfirm(val)}
            />
          )}
        </Popup>

        <Popup
          v-model:show={this.showQrcode}
          round
          class={styles.qrcodePopup}
          onClose={() => {
            // 二维码关闭时清除定时器
            clearInterval(this.orderTimer)
          }}
        >
          <QrcodePayment
            url={this.qrCodeUrl}
            pay_channel={this.pay_channel}
            // orderType={orderType.value}
          />
        </Popup>
      </div>
    )
  }
})
