<script setup lang="ts">
import { payConfigApi, payGetCashierApi, payPaymentApi } from '~/server/orderApi'
import { ref, reactive } from 'vue'
import QrcodeVue from 'qrcode.vue'
const { routeQuery } = useRouterItem()

//收银台信息
const {
  data: payInfo,
  refresh,
  pending: listLoading,
} = await useAsyncData(async () => payGetCashierApi(routeQuery.orderNo))
if (!payInfo.value) linkNavigateTo(`/users/order_list`, { type: 1 })

const bgColor = reactive<any>({
  bgColor: '',
  Color: '#E93323',
  width: '36rpx',
  timeTxtwidth: '16rpx',
  isDay: true,
  fontSize: '14px',
})

/**
 * 获取支付配置
 */
const payTypeList = ref<any[]>([
  {
    name: '微信支付',
    id: 1,
    value: 'weixin',
    tips: '使用微信扫码支付',
    payStatus: false,
    icon: 'icon-weixinzhifu',
  },
  {
    name: '支付宝支付',
    id: 2,
    value: 'alipay',
    tips: '使用支付宝扫码支付',
    payStatus: false,
    icon: 'icon-zhifubaozhifu',
  },
  {
    name: '余额支付',
    id: 3,
    value: 'yue',
    tips: '余额',
    payStatus: false,
    userBalance: '',
    icon: 'icon-yuezhifu',
  },
])
const loading = ref<boolean>(false)
const isShow = ref<boolean>(false)
const getPayConfig = async () => {
  loading.value = true
  await payConfigApi()
    .then((res) => {
      payTypeList.value[2].payStatus = res.yuePayStatus
      payTypeList.value[2].userBalance = res.userBalance ? res.userBalance : 0
      payTypeList.value[0].payStatus = res.payWechatOpen
      payTypeList.value[1].payStatus = res.aliPayStatus
      if (payTypeList.value.length) {
        isShow.value = false
      } else {
        isShow.value = true
      }
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
getPayConfig()

/**
 * 选择支付方式
 * @param type
 */
const payType = ref<string>('weixin')
const handlePayItem = (type: string) => {
  payType.value = type
}

/**
 * 立即支付
 */
import useDialog from '~/composables/useDialog'
const { bool: dialogVisibleQrcode, DialogOpen, DialogClose } = useDialog()
const payQrcode = ref<string>('') //支付二维码
const payChannel = ref<string>('')
const btnloading = ref<boolean>(false)
const handleOrderPay = async () => {
  if (!payType.value) return feedback.msgWarning('请选择支付方式')
  if (payType.value === 'yue') {
    payChannel.value = 'yue'
  } else if (payType.value == 'alipay') {
    payChannel.value = 'alipayPc'
  } else {
    payChannel.value = 'native'
  }
  btnloading.value = true
  let data = {
    orderNo: routeQuery.orderNo,
    payChannel: payChannel.value,
    payType: payType.value,
  }
  try {
    const res = await payPaymentApi(data)
    if (res.payType === 'alipay') {
      payQrcode.value = res.alipayRequest
      DialogOpen()
    } else if (res.payType === 'yue') {
      linkNavigateTo(`/order/order_pay_status`, { orderNo: routeQuery.orderNo })
    } else {
      payQrcode.value = res.jsConfig.mwebUrl
      DialogOpen()
    }
    btnloading.value = false
  } catch (err: any) {
    // linkNavigateTo(`/order/order_pay_status`, { orderNo: routeQuery.orderNo })
    btnloading.value = false
  }
}

/**
 * 支付弹窗
 */

import feedback from '~/utils/feedback'
import useRouterItem from '~/composables/useRouterItem'
import { linkNavigateTo } from '~/utils/util'

const handleCloseQrcode = () => {
  DialogClose()
}

//我已支付
const getPaymentStatus = () => {
  linkNavigateTo(`/order/order_pay_status`, { orderNo: routeQuery.orderNo })
}

//倒计时结束
const stopTime = () => {
  linkNavigateTo(`/order/order_pay_status`, { orderNo: 0 })
}
</script>

<template>
  <div class="wrapper_1200 order_payment">
    <page-header title="收银台"></page-header>
    <!--提示语-->
    <div v-loading="listLoading" class="w-100% borRadius bg-#FFF py-56px px-30px flex-between-center mbtom20">
      <div class="acea-row">
        <img class="backImg w100px h90px" src="~/assets/images/tjchenggong.png" alt="" />
        <div class="ml-30px acea-row flex-col w-745px">
          <div class="text-20px fontColor333 fw-700 lg-20px mb-27px">订单提交成功，去付款吧~</div>
          <div class="acea-row text-14px fontColor333 lh-14px mb-12px">
            请在
            <countDown
              class="ml-5px mr-5px"
              :is-day="true"
              :tip-text="' '"
              :day-text="' '"
              :hour-text="' : '"
              :minute-text="' : '"
              :second-text="' '"
              :datatime="payInfo.cancelDateTime / 1000"
              :isCol="false"
              :bgColor="bgColor"
              @stopTime="stopTime"
            >
            </countDown
            >内完成支付，超时后订单将会自动取消
          </div>
          <div class="borRadius text-14px lh-20px">
            收货信息：{{ payInfo?.consigneeName }} {{ payInfo?.consigneePhone }} {{ payInfo?.consigneeAddress }}
          </div>
        </div>
      </div>
      <div class="acea-row flex-col flex-justify-around">
        <div class="fontColor333 text-14px mbtom20">
          应付总额：
          <span class="font-color text-14px oppoSans-M"
            >￥<span class="text-30px font-color dinProRegular">{{ payInfo?.payPrice }}</span></span
          >
        </div>
        <div class="text-14px fontColor6 text-right">共{{ payInfo?.totalNum }}件商品</div>
      </div>
    </div>
    <!--支付方式-->
    <div v-if="isShow" class="titleNo">暂无支付方式！</div>
    <div v-else class="w-100% borRadius bg-#FFF py-30px px-30px">
      <div class="fonts16 text-#282828 mbtom30">选择以下支付方式</div>
      <div v-loading="loading" class="acea-row mbtom30">
        <template v-for="item in payTypeList" :key="item.id">
          <div
            v-if="item.payStatus"
            @click="handlePayItem(item.value)"
            :class="payType === item.value ? 'borderSolRed' : 'pay-type'"
            class="w-270px h-80px b-rd-8px flex-x-center flex-y-center mr-20px cursors"
          >
            <span class="iconfont mr-14px" :class="item.icon"></span>
            <div class="acea-row flex-col flex-justify-around">
              <div class="fonts16 text-#4E4E4E mb-6px">{{ item.name }}</div>
              <div class="font12 text-#969696">
                {{ item.tips }}
                <span v-if="item.userBalance">：￥{{ item.userBalance }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="acea-row row-right">
        <div
          v-loading="btnloading"
          @click="handleOrderPay"
          class="cursors b-rd-25px bg-color text-center text-#fff w-150px h-50px text-16px line-height-50px"
        >
          立即支付
        </div>
      </div>
    </div>
    <!-- 支付弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="dialogVisibleQrcode"
      width="450px"
      :title="payType == 'alipay' ? '支付宝支付' : '微信支付'"
      center
      :show-close="false"
      :before-close="handleCloseQrcode"
    >
      <div class="flex-x-center text-#333 text-14px mb-20px mt-4px" style="align-items: end;">
        支付：<span class="font-color font-600 oppoSans-M">￥</span><span class="font-color text-30px font-600 lh-30px dinProRegular">{{payInfo?.payPrice}}</span>
      </div>
      <div class="flex-x-center">
        <qrcode-vue :value="payQrcode" :size="280" level="H" />
      </div>
      <div class="mt-30px text-16px text-#333 text-center">
        请使用{{ payType == 'alipay' ? '支付宝' : '微信' }}扫描二维码支付
      </div>
      <template #footer>
        <div class="dialog-footer flex-x-center">
          <div
            class="borderSol w-120px h-44px lh-43px text-16px text-#333 b-rd-25px cursors"
            @click="handleCloseQrcode"
          >
            放弃支付
          </div>
          <div class="handleBtn w-120px h-44px lh-43px text-16px ml-20px cursors" @click="getPaymentStatus">
            我已支付
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dialog__title){
  font-size: 20px !important;
  font-weight: 500;
  color: #333333 !important;
}
.pay {
  &-type {
    border: 1px solid #cccccc;
  }
}
.order_payment {
  .iconfont {
    font-size: 36px;
  }
}

.icon-yuezhifu {
  color: #fe9c01;
}
.icon-weixinzhifu {
  color: #09bb07;
}
.icon-zhifubaozhifu {
  color: #00aaea;
}
</style>
