<!-- 扫码弹窗 -->

<template>
  <div class="dialog">
    <el-dialog title="扫码支付" width="600" v-model="dialogVisible" @open="reset" @close="clearAutoCheckOrder">
      <div class="content">
        <div class="left">
          <el-image :src="icon" style="width: 60px; height: 60px"></el-image>
        </div>
        <div class="right" v-if="!userPayWait">
          <div class="amount">
            <span class="t">扫码支付</span>
            <span class="n">{{ props.money }}</span>
          </div>
          <div class="input">
            <el-input ref="inputRef" v-model="scanCode" style="height: calc(var(--el-component-size-large) + 30px)"
              placeholder="请扫描付款码" clearable @change="inputChange"></el-input>
            <div class="tips">注意：扫码支付请保证输入框获得焦点，输入内容结束后会自动支付，请勿重复操作</div>
          </div>
          <!-- <div class="number_warp">
                        <div class="item" v-for="item in 9" :key="item" @click="inputHandle(item)">{{ item }}</div>
                        <div class="item disabled">.</div>
                        <div class="item" @click="inputHandle(0)">0</div>
                        <div class="item" @click="delHandle">
                            <el-icon>
                                <CloseBold />
                            </el-icon>
                        </div>
                    </div> -->
          <div class="btn">
            <el-button type="primary" style="width: 100%" v-loading="loading">立即支付</el-button>
          </div>
        </div>
        <div class="pay_wait" v-else>
          <div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
          <div class="btn">
            <el-button type="primary" style="width: 100%" v-loading="checkPayStatusLoading" @click="checkPayStauts">
              <span v-if="!checkPayStatusLoading">查询用户支付状态</span>
              <span v-else>查询中...</span>
            </el-button>
          </div>
          <div class="btn">
            <el-button style="width: 100%" @click="resetScanCode">
              重新扫码
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import _ from "lodash";
import { onMounted, ref } from "vue";
import icon from "@/assets/icon_scan.png";
import { scanpay, queryOrder, quickPay, queryQuickPayStatus, accountPay, queryScanPay } from "@/api/pay";
import { useUser } from "@/store/user.js";
import { useGlobal } from '@/store/global.js'
import { formatDecimal } from '@/utils'
const store = useUser();
const global = useGlobal()
import {
  queryMembermember,
  createMembermember,
  membermemberScanPay,
  accountPaymember,
} from "@/api/member/index.js";
import { ElMessage } from "element-plus";
const emits = defineEmits(["success"]);

const props = defineProps({
  amount: {
    type: [Number, String],
    default: 0,
  },
  selecttype: {
    type: [Number, String],
    default: 0,
  },
  orderId: {
    type: [Number, String],
    default: "",
  },
  fast: {
    type: Boolean,
    default: false,
  },
  payType: {
    type: [Number, String],
    default: "",
  },
  money: {
    type: [Number, String],
    default: 0,
  }
});

const dialogVisible = ref(false);
const scanCode = ref("");
const inputRef = ref(null);

const loading = ref(false);
const userPayWait = ref(false);
const checkPayStatusLoading = ref(false);

const fastOrder = ref('')

// 提交扫码支付
async function submitHandle() {
  try {
    if (!scanCode.value) return;
    loading.value = true;
    if (props.selecttype == 1) {
      await membermemberScanPay({
        shopId: store.userInfo.shopId,
        memberId: props.orderId,
        amount: props.amount,
        authCode: scanCode.value,
        // payAmount: props.money < props.amount ? props.money : '',
        // discountAmount: props.money < props.amount ? formatDecimal(props.amount - props.money) : ''
      });
    } else {
      if (props.fast) {
        await quickPay({
          amount: props.amount,
          authCode: scanCode.value,
          payType: "scanCode",
        });
      } else {
        if (props.payType == 'scanCode') {
          await scanpay({
            orderId: props.orderId,
            authCode: scanCode.value,
            payAmount: props.money < props.amount ? props.money : '',
            discountAmount: props.money < props.amount ? formatDecimal(props.amount - props.money) : ''
          });
        }
        if (props.payType == 'deposit') {
          await accountPay({
            orderId: props.orderId,
            memberId: '',
            memberAccount: scanCode.value,
            payAmount: props.money < props.amount ? props.money : '',
            discountAmount: props.money < props.amount ? formatDecimal(props.amount - props.money) : ''
          })
        }
      }
    }

    loading.value = false;
    scanCode.value = "";
    ElMessage.success("支付成功");
    dialogVisible.value = false;
    emits("success");
  } catch (error) {
    console.log(error);
    if (error.code === "100015") {
      userPayWait.value = true;
      fastOrder.value = error.data
      autoCheckOrder()
    } else {
      scanCode.value = "";
      loading.value = false;
      console.log(error);
    }
  }
}


const timer = ref(null)
// 自动查询订单状态
function autoCheckOrder() {
  timer.value = setInterval(() => {
    checkPayStauts(false)
  }, 2000)
}

// 清除自动查询扫码支付订单
function clearAutoCheckOrder() {
  clearInterval(timer.value)
  timer.value = null
  // 开启叫号功能
  global.updateData(true)
}

// 查询用户支付状态
async function checkPayStauts(tips = true) {
  try {
    if (props.selecttype == 1) {
      // 会员扫码充值
      const res = await queryScanPay({ flowId: fastOrder.value.id });
      if (res.status == 0) {
        userPayWait.value = false
        loading.value = false;
        scanCode.value = "";
        ElMessage.success("支付成功");
        dialogVisible.value = false;
        clearAutoCheckOrder()
        emits("success");
        return;
      }
      if (res.status == 7) {
        if (tips) {
          ElMessage.warning("用户支付中...");
        }
        return;
      } else {
        clearAutoCheckOrder()
        ElMessage.error(res.payRemark || "支付失败！");
        return;
      }
    } else {
      // 其他扫码支付
      if (props.fast) {
        // 快捷收银
        const res = await queryQuickPayStatus({ orderId: fastOrder.value.orderNo });
        if (res.status == 0) {
          userPayWait.value = false
          loading.value = false;
          scanCode.value = "";
          ElMessage.success("支付成功");
          dialogVisible.value = false;
          clearAutoCheckOrder()
          emits("success");
          return;
        }
        if (res.status == 1) {
          if (tips) {
            ElMessage.warning("用户支付中...");
          }
          return;
        } else {
          clearAutoCheckOrder()
          ElMessage.error(res.payRemark || "支付失败！");
          return;
        }
      } else {
        // 扫码下单
        const res = await queryOrder({ orderId: props.orderId });
        if (res.status == "closed") {
          userPayWait.value = false
          loading.value = false;
          scanCode.value = "";
          ElMessage.success("支付成功");
          dialogVisible.value = false;
          clearAutoCheckOrder()
          emits("success");
          return;
        }
        if (res.status == "paying") {
          if (tips) {
            ElMessage.warning("用户支付中...");
          }
          return;
        } else {
          clearAutoCheckOrder()
          ElMessage.error(res.payRemark || "支付失败！");
          return;
        }
      }
    }
  } catch (error) {
    console.log(error);
  }
}

// 重新扫码
function resetScanCode() {
  clearAutoCheckOrder()
  userPayWait.value = false;
  loading.value = false;
  scanCode.value = "";
  inputRef.value.focus();
}

// 输入
function inputHandle(n) {
  scanCode.value += n;
  inputRef.value.focus();
}

// 删除
function delHandle() {
  if (!scanCode.value) return;
  scanCode.value = scanCode.value.substring(0, scanCode.value.length - 1);
  inputRef.value.focus();
}

// 监听扫码枪回车事件
// function enterHandle() {
//     inputRef.value.focus()
// }

const inputChange = _.debounce(function (e) {
  // console.log(e);
  submitHandle();
}, 100);

function show() {
  dialogVisible.value = true;
  setTimeout(() => {
    inputRef.value.focus();
  }, 500);
}

function close() {
  dialogVisible.value = false;
}

function reset() {
  loading.value = false;
  scanCode.value = "";
  // 关闭叫号功能
  global.updateData(false)
}

defineExpose({
  show,
  close,
  loading,
});
</script>

<style scoped lang="scss">
.tips {
  padding-top: 10px;
  color: #999;
}

.dialog :deep(.el-dialog__body) {
  padding: 0 !important;
}

.content {
  display: flex;

  .left {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efefef;
  }

  .right {
    flex: 1;
    padding: var(--el-font-size-base);

    .amount {
      display: flex;
      height: calc(var(--el-component-size-large) + 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--primary-color);
      background-color: #555;
      border-radius: 6px;
      padding: 0 var(--el-font-size-base);
      font-size: calc(var(--el-font-size-base) + 10px);
    }

    .input {
      padding: var(--el-font-size-base) 0;

      :deep(.el-input__inner) {
        font-size: calc(var(--el-font-size-base) + 10px);
      }
    }

    .number_warp {
      --h: 50px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: var(--h) var(--h) var(--h) var(--h);
      gap: 8px;

      .item {
        background-color: #dddddd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--el-font-size-base) + 10px);
        border-radius: 4px;

        &.disabled {
          color: #999;
          background-color: #efefef;

          &:active {
            background-color: #efefef;
          }
        }

        &:active {
          background-color: #b9b9b9;
        }
      }
    }

    // .btn {
    //     padding-top: 20px;
    // }
  }

  .pay_wait {
    flex: 1;
    padding: 0 var(--el-font-size-base);
    height: 400px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loading {
      width: 200px;
      height: 200px;
      --el-loading-spinner-size: 100px;

      :deep(.el-loading-text) {
        font-size: 20px;
      }
    }

    .btn {
      width: 200px;
      padding-top: var(--el-font-size-base);
    }
  }
}
</style>
