<script setup>
import { ref, watch, nextTick, computed, onMounted, onUnmounted  } from "vue";
import { orderCreateApi, orderStatusApi, orderPayApi } from "@/api/store.js";
import { ElMessage } from "element-plus";
import { audioplay } from "@/utils/audio.js";
import mitt from "@/utils/mitt.js";
import { useUserStore } from "@/store/user.js";

const drawer = ref(false);
const active = ref(1);
const input = ref("");
const codeRef = ref("");

const userStore = useUserStore();

const cancelClick = () => {
  beforeClose();
};

const open = () => {
  nextTick(() => {
    setTimeout(() => {
      loading.value = false;
      input.value = "";
      reLoad.value = true;
      codeRef.value?.focus();
      changeActive(active.value);
    }, 300);
  });
};

const changeActive = (e) => {
  active.value = e;
  if (active.value == 2) {
    // 添加键盘事件监听器
    window.addEventListener("keydown", keyboard);
  } else{
    window.removeEventListener("keydown", keyboard);
    nextTick(()=>{
      input.value = "";
      codeRef.value?.focus();
    })
  }
};

const form = ref({});
const cart_id = ref([]);
const setForm = (e) => {
  form.value = e.data;
  cart_id.value = e.cart_id;
};

const setRePay = (e) => {
  form.value.order_price = e.price;
  order_id.value = e.order_id;
};

const emit = defineEmits(["paySuccess"]);

const reLoad = ref(false);

const numList = ref([
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "0",
  "00",
  ".",
]);

let timecount = 0; //刷新间隔

const regexWechat = /^(10|11|12|13|14|15)\d{16}$/; //微信条码正则 10-15开头18位
const regexPay = /^(25|26|27|28|29|30)\d{14,22}$/; //支付宝条码正则 25-30开头16-24位

const order_id = ref("");
// 支付
const handleEnter = () => {
  loading.value = true;
  codeRef.value.blur();

  if (order_id.value) orderPay(order_id.value);
  else {
    let pay_type;
    if (regexWechat.test(input.value)) pay_type = "micropay";
    else if (regexPay.test(input.value)) pay_type = "alipayBar";
    else {
      loading.value = false;
      input.value = "";
      codeRef.value.focus();
      return ElMessage.error("请输入正确的支付码");
    }
    orderCreateApi({
      address_id: "",
      key: form.value.key,
      cart_id: cart_id.value,
      pay_type: pay_type,
      auth_code: input.value,
      staff_id: userStore.userInfo.service.service_id,
    })
      .then((res) => {
        if (res.status == 200 && (res.message == "支付成功" || res.message == "success")) {
          drawer.value = false;
          ElMessage({
            message: res.message=='success'?'支付成功':res.message,
            type: "success",
          });
          audioplay(res.data.message||res.data.result.message);
          beforeClose();
        } else {
          if (!res.data.group_order_sn) {
            order_id.value = res.data.result.order_id;
            loading.value = false;
            return ElMessage({
              message: res.message,
              type: "error",
            });
          } else {
            order_id.value = res.data.group_order_id;
            count.value = 0;
            timecount = 0;
            getOrderStatus(res.data.group_order_sn);
          }
        }
      })
      .catch((err) => {
        loading.value = false;
        nextTick(() => {
          codeRef.value?.focus();
        });
      });
  }
};

const orderPay = (id) => {
  let query;
  if (active.value == 1) {
    let pay_type;
    if (regexWechat.test(input.value)) pay_type = "micropay";
    else if (regexPay.test(input.value)) pay_type = "alipayBar";
    else {
      loading.value = false;
      input.value = "";
      codeRef.value.focus();
      return ElMessage.error("请输入正确的支付码");
    }
    query = {
      type: pay_type,
      auth_code: input.value,
    };
  } else
    query = {
      type: "cash_payment",
    };
  orderPayApi(id, query)
    .then((res) => {
      if (res.status == 200 && (res.message == "支付成功" || res.message == "success")) {
        drawer.value = false;
        ElMessage({
          message: res.message=='success'?'支付成功':res.message,
          type: "success",
        });
        audioplay(res.data.message||res.data.result.message);
        beforeClose();
      } else {
        order_id.value = res.data.group_order_id;
        count.value = 0;
        timecount = 0;
        getOrderStatus(res.data.group_order_sn);
      }
    })
    .catch((err) => {
      input.value = "";
      loading.value = false;
      nextTick(() => {
        codeRef.value?.focus();
      });
    });
};

const count = ref(0); // 累计请求3次, 如果3次都失败, 则只能重新支付
const getOrderStatus = (id) => {
  if (!id) return;
  count.value++;
  timecount += 5000;
  orderStatusApi({
    order_sn: id,
  })
    .then((res) => {
      if (res.data.paid == 1 || res.message == "支付成功") {
        ElMessage({
          message: res.message,
          type: "success",
        });
        audioplay(res.data.message);
        beforeClose();
      } else {
        ElMessage({
          message: res.message,
          type: "error",
        });
        input.value = "";
        loading.value = false;
        nextTick(() => {
          codeRef.value?.focus();
        });
      }
    })
    .catch((err) => {
      if (reLoad.value && count.value < 3)
        setTimeout(
          () => {
            getOrderStatus(id);
          },
          15000 - timecount > 0 ? 15000 - timecount : 0
        );
      else {
        input.value = "";
        loading.value = false;
        nextTick(() => {
          codeRef.value?.focus();
        });
      }
    });
};

const beforeClose = () => {
  window.removeEventListener("keydown", keyboard);
  reLoad.value = false;
  loading.value = false;
  input.value = "";
  collection.value = "";
  collectionArray.value = [];
  codeRef.value?.blur();
  emit("paySuccess");
  drawer.value = false;
};

const loading = ref(false);

defineExpose({
  drawer,
  setForm,
  setRePay,
  beforeClose
});

const collectionArray = ref([]);
const collection = ref(""); //输入的金额
const changePrice = computed(() => {
  // 找零
  if (+collection.value > 0) {
    return (collection.value - form.value.order_price).toFixed(2);
  }
  return -1;
});
const defaultcalc = ref(false);

//清除计算机输入的数字
const delNum = (type) => {
  if (type === -1) {
    collectionArray.value = [];
  } else {
    collectionArray.value.pop();
  }
  collection.value = collectionArray.value.length
    ? collectionArray.value.join("")
    : 0;
};
//输入实际收款金额
const numTap = (item) => {
  if (defaultcalc.value === false) {
    collection.value = "";
    defaultcalc.value = true;
  }
  let x = String(collection.value).indexOf(".") + 1;
  let y = String(collection.value).length - x;
  console.log(x, y);
  if (x === 0 || y < 2) {
    if (collectionArray.value.join("") <= 9999999) {
      collectionArray.value.push(item);
    }
    collection.value =
      collectionArray.value.join("") > 99999999
        ? 99999999
        : collectionArray.value.join("");
  }
};
// 现金结算
const cashBnt = () => {
  if (
    changePrice.value === "" ||
    changePrice.value === null ||
    changePrice.value === undefined || 
    +collection.value < +form.value.order_price
  ) return ElMessage.error("收款金额应该大于等于应收金额");
  if (order_id.value) orderPay(order_id.value);
  else
    orderCreateApi({
      address_id: "",
      key: form.value.key,
      cart_id: cart_id.value,
      pay_type: "cash_payment",
      staff_id: userStore.userInfo.service.service_id,
    })
      .then((res) => {
        if (res.status == 200 && res.message == "支付成功") {
          drawer.value = false;
          ElMessage({
            message: res.message,
            type: "success",
          });
          changeActive(1);
          audioplay(res.data.message);
          beforeClose();
        } else {
          if (!res.data.group_order_sn) {
            order_id.value = res.data.result.order_id;
            collection.value = "";
            collectionArray.value = [];
            loading.value = false;
            return ElMessage({
              message: res.message,
              type: "error",
            });
          } else {
            order_id.value = res.data.group_order_id;
            count.value = 0;
            timecount = 0;
            getOrderStatus(res.data.group_order_sn);
          }
        }
      })
      .catch((err) => {
        loading.value = false;
      });
};

// 监听键盘函数
const keyboard = (event) => {
  let e = event || window.event;
  let key = e.keyCode;
  if(key == 37)return changeActive(2);
  if(key == 120)return mitt.emit('F9');
  if(key == 27)return beforeClose();
  event.stopPropagation(); // 阻止事件冒泡传递
  event.preventDefault(); // 阻止默认事件原有功能
  switch (key) {
    case 96:
    case 48:
      numTap(0);
      break;
    case 97:
    case 49:
      numTap(1);
      break;
    case 98:
    case 50:
      numTap(2);
      break;
    case 99:
    case 51:
      numTap(3);
      break;
    case 100:
    case 52:
      numTap(4);
      break;
    case 101:
    case 53:
      numTap(5);
      break;
    case 102:
    case 54:
      numTap(6);
      break;
    case 103:
    case 55:
      numTap(7);
      break;
    case 104:
    case 56:
      numTap(8);
      break;
    case 105:
    case 57:
      numTap(9);
      break;
    case 110:
      numTap(".");
      break;
    case 190:
      numTap(".");
      break;
    case 8:
      delNum();
      break;
    case 13:
      cashBnt();
      break;
  }
};

// 条码输入框是否聚焦
const isFocus = ref(false)

// 键盘事件
const aleft = () => {
  if(!drawer.value||(isFocus.value&&input.value.length>0)) return;
  if(active.value==2) return changeActive(1);
};
const aright = () => {
  if(!drawer.value||(isFocus.value&&input.value.length>0)) return;
  if(active.value==1) return changeActive(2);
};
onMounted(() => {
  mitt.on("left", aleft);
  mitt.on("right", aright);
});

onUnmounted(() => {
  mitt.off("left", aleft);
  mitt.off("right", aright);
});

</script>

<template>
  <el-drawer
    size="60rem"
    v-model="drawer"
    direction="rtl"
    @open="open"
    :before-close="beforeClose"
  >
    <template #header>
      <h4>选择支付方式</h4>
    </template>
    <template #default>
      <div class="dra-body">
        <div class="header">
          <div
            class="left"
            :class="{ active: active == 1 }"
            @click="changeActive(1)"
          >
            微信/支付宝
          </div>
          <div
            class="right"
            :class="{ active: active == 2 }"
            @click="changeActive(2)"
          >
            现金收款
          </div>
        </div>
        <div style="color: #999; padding: 2rem 0 0.3rem 0">应收金额(元):</div>
        <div style="color: #f5222d; padding-bottom: 2rem">
          ¥<span style="font-size: 1.6rem">{{ form.order_price }}</span>
        </div>
        <div
          v-loading="loading"
          element-loading-text="支付中"
          class="card1"
          v-if="active == 1"
        >
          <el-input
            ref="codeRef"
            v-model="input"
            autofocus
            class="code-input"
            placeholder="请点击输入框聚焦扫码或输入编码号"
            @keyup.enter="handleEnter"
            @focus="isFocus=true;"
            @blur="isFocus=false;"
          />
          <div class="tips"></div>
        </div>
        <div class="card2" v-else>
          <div class="drawer-body">
            <div class="counter">
              <div class="received">
                <span v-if="collection">{{ collection }}</span>
                <span v-else style="font-size: 1rem; color: #999"
                  >按下键盘输入客户支付金额</span
                >
              </div>
              <div class="balance" v-if="changePrice >= 0">
                <div>需找零(元)：<span class="money">￥{{ changePrice }}</span></div>
                <div class="tips">按回车(Enter)确认支付</div>
              </div>
              <div class="balance" v-else>
                <div>不够找零, 请支付更多金额</div>
                <div class="tips">按下小键盘输入金额</div>
              </div>
              <div class="keypad">
                <div class="left">
                  <el-button
                    v-for="item in numList"
                    :key="item"
                    @click="numTap(item)"
                    >{{ item }}</el-button
                  >
                </div>
                <div class="right">
                  <el-button @click="delNum"
                    ><el-icon><Delete /></el-icon
                  ></el-button>
                  <el-button @click="delNum(-1)">C</el-button>
                  <el-button class="enter" :class="{'enter-disable': +collection < +form.order_price}" :disabled="+collection < +form.order_price" @click="cashBnt">
                    确认
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div style="width: 100%; display: flex; justify-content: center">
        <el-button class="cancel-btn" @click="cancelClick">取消收款</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.dra-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  .header {
    width: 25rem;
    display: flex;
    & > div {
      flex: 1;
      border: 1px solid #ccc;
      text-align: center;
      padding: 0.6rem 0;
      cursor: pointer;
    }
    .left {
      border-right: none;
      border-radius: 5rem 0 0 5rem;
    }
    .right {
      border-left: none;
      border-radius: 0 5rem 5rem 0;
    }
    .active {
      background-color: #1890ff;
      color: #fff;
      transition: 300ms;
      border-color: #1890ff;
    }
  }
  .card1 {
    .code-input {
      width: 100%;
      height: 3rem;
    }
    .tips {
      width: 38rem;
      height: 16rem;
      background: url('@/assets/pay.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.cancel-btn {
  width: 60%;
  border-color: #1890ff;
  color: #1890ff;
  border-radius: 5rem;
  height: 3rem;
  font-size: 1.2rem;
}

.drawer-body {
  width: 100%;
  overflow-x: hidden;
}

.counter {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background-color: #f3f9ff;

  .received {
    height: 3.0rem;
    padding: 0 1.25rem;
    border: 1px solid #1890ff;
    box-shadow: 0 0 0.18rem #1890ff;
    border-radius: 0.5rem;
    background-color: #ffffff;
    font-size: 1.62rem;
    line-height: 3.0rem;
    color: #333;
  }

  .balance {
    width: 100%;
    box-sizing: border-box;
    padding: 1.12rem 0 1.12rem 0.625rem;
    text-align: start;
    font-size: 0.95rem;
    color: #303133;
    display: flex;
    justify-content: space-between;

    .money {
      color: #ff4a00;
    }
    .tips{
      font-size: 0.8rem;
      color: #999;
    }
  }

  .keypad {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 0.625rem;

    .left {
      grid-column-end: span 3;
      display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 0.625rem;
    }

    .right {
      display: grid;
      grid-template-columns: auto;
      grid-gap: 0.625rem;
    }

    .el-button {
      height: 3.875rem;
      width: 8.125rem;
      margin: 0 !important;
      border: 0;
      border-radius: 0.5rem;
      font-weight: 500;
      font-size: 1.75rem !important;
      line-height: 3.87rem;
      color: #1890ff;

      &:focus {
        box-shadow: none;
      }
    }

    .enter {
      grid-row-end: span 4;
      height: 8.37rem;
      line-height: 8.37rem;
      background-color: #1890ff;
      font-weight: 500;
      font-size: 1.35rem !important;
      color: #ffffff;
      position: relative;
    }
    .enter-disable {
      background-color: #ccc;
    }
  }
}
</style>
