<script setup>
import { setToken, getToken } from "./utils/local-store.js";
import useUserStore from "@/store/modules/user";
import {
  getOrderList,
  immediatePay,
  cancelPay,
  loginFree,
} from "./api/index.js";
import qrCodeDialog from "./components/qrCodeDialog.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import qrcode from "qrcode";
import { md5 } from "md5js";
import { languageFormat } from "./utils/language.js";
import { useStorage } from "@vueuse/core/index";
const language = useStorage("language", 0);

const userStore = useUserStore();

const status = reactive({
  0: {
    txt: "待支付",
    text_en: "Pending Payment",
    color: "#F740A6",
    bgColor: "#FFE2F2",
  },
  1: {
    txt: "购票成功",
    text_en: "Transaction completed",
    color: "#FFCC00",
    bgColor: "#FFF7D9",
  },
  2: {
    txt: "交易关闭",
    text_en: "Transaction closed",
    color: "#757575",
    bgColor: "#DDDDDD",
  },
  3: {
    txt: "已退款",
    text_en: "Already refunded",
    color: "#757575",
    bgColor: "#DDDDDD",
  },
  4: {
    txt: "退款中",
    text_en: "In the process of refunding",
    color: "#F740A6",
    bgColor: "#FFE2F2",
  },
  5: {
    txt: "完成",
    text_en: "Finish",
    color: "#34C759",
    bgColor: "#D2FFDD",
  },
});
const props = defineProps({
  activityId: [String, Number],
});

const order = reactive({
  showCodeDialog: false,
  qrInfo: {},
  pay_loading: false,
  pageNo: 1,
  pageSize: 10,
  total: 0,

  noPay: {},
  minutes: 0,
  seconds: 0,
  data: [],
  timer: null,
  qrCodeData: "",
  fetchData() {
    getOrderList({ pageNo: order.pageNo, pageSize: order.pageSize }).then(
      (res) => {
        order.noPay = res.data.lists.find((it) => it.state == 0);
        order.data = res.data.lists;
        order.total = res.data.count;
      }
    );
  },
  payment(it) {
    if (order.pay_loading) return;
    order.pay_loading = true;
    immediatePay({ orderSn: it.orderSn, payType: 1 })
      .then((res) => {
        order.qrInfo = res.data;
        qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
          if (err) {
            console.error(err);
          } else {
            order.qrCodeData = url;
          }
        });
        order.showCodeDialog = true;
      })
      .finally(() => (order.pay_loading = false));
  },
  handleClose() {
    order.showCodeDialog = false;
    order.qrCodeData = "";
  },
  // 取消支付
  cancelPayment(it) {
    ElMessageBox.confirm(
      languageFormat(
        language.value,
        "确认取消支付吗？",
        "Are you sure to cancel the payment?"
      ),
      languageFormat(language.value, "提示", "tip"),
      {
        confirmButtonText: languageFormat(language.value, "确认", "confirm"),
        cancelButtonText: languageFormat(language.value, "取消", "cancel"),
        type: "warning",
        draggable: true,
      }
    )
      .then(() => {
        cancelPay({ orderSn: it.orderSn }).then(() => {
          order.fetchData();
          ElMessage({
            type: "success",
            message: languageFormat(
              language.value,
              "操作成功",
              "Operate successfully"
            ),
          });
        });
      })
      .catch(() => {});
  },
  countDown(time) {
    // 当前时间
    let nowTime = new Date();
    let endTime = new Date(time);
    // 两个日期相差的时间戳，以毫秒为单位（1000ms = 1s）
    let totalTime = endTime - nowTime;
    // 结束时间大于现在的时间
    if (totalTime > 0) {
      order.timer = setInterval(() => {
        if (totalTime >= 0) {
          //获取分钟数
          let minutes = Math.floor(
            (((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60
          );
          //获取秒数
          let seconds = Math.floor(
            (((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60
          )
            .toString()
            .padStart(2, "0");

          order.minutes = minutes;
          order.seconds = seconds;

          totalTime -= 1000;
          // console.log(totalTime)
        } else {
          clearInterval(order.timer); // 停止调用函数
        }
      }, 1000);
    }
  },
});

watch(
  () => order.noPay,
  (val) => {
    if (val) {
      order.countDown(val.payEndTime);
    }
  }
);

onUnmounted(() => {
  clearInterval(order.timer);
});

// 用户免登录
const login = async () => {
  const userId = userStore.user?.userId;
  const sign = md5(`uid=${userId}lgo1acfkw51jfo`, 32);
  return loginFree({
    userId: userId,
    sign,
  }).then((res) => {
    setToken(res.data.token);
    order.fetchData();
  });
};
onMounted(() => {
  login();
});
</script>

<template>
  <div class="container">
    <div
      v-for="(it, index) in order.data"
      :key="index"
      @click="
        $router.push({
          path: '/seat/order_detail',
          query: { orderSn: it.orderSn, id: it.actId },
        })
      "
      class="order-item"
    >
      <div class="info_box">
        <img class="cover_img" :src="it.coverImg" />
        <div class="info">
          <div class="title">{{ it.name }}</div>
          <div class="common">
            {{ languageFormat(language, "时间", "Event Date & Time") }}：{{
              it.dateStr
            }}
          </div>
          <div class="common">
            {{ languageFormat(language, "地址", "Location") }}：{{
              it.placeName
            }}
          </div>
          <div class="common">
            {{ languageFormat(language, "订单编号", "Order No.") }}：{{
              it.orderSn
            }}
          </div>
          <div class="common">
            {{ languageFormat(language, "张数", "Location") }}：{{ it.ticketNum
            }}{{ languageFormat(language, "张", "tickets") }}
          </div>
          <div class="common">
            {{ languageFormat(language, "金额", "Ticket Price") }}：{{it.payType=='2'?'€':'￥'}}{{ it.payAmount }}
          </div>
          <div class="status">
            <div class="label">
              {{ languageFormat(language, "订单状态", "Order Status") }}：
            </div>
            <div class="value">
              <div
                :style="{
                  borderColor: status[it.state].color,
                  background: status[it.state].bgColor,
                  color: status[it.state].color,
                }"
                class="tag"
              >
                {{
                  language == 0
                    ? status[it.state].txt
                    : status[it.state].text_en
                }}
              </div>
              <div v-if="it.state == 0" class="tip">
                <span v-if="language == 0"
                  >请尽快完成支付，还剩{{ order.minutes }}分{{
                    order.seconds
                  }}秒</span
                >
                <span v-else
                  >Time left {{ order.minutes }}:{{ order.seconds }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="it.state == 0" class="btn_box">
        <div class="pay">
          {{ languageFormat(language, "立即支付", "Pay Now") }}
        </div>
        <div class="can_pay" @click.stop="order.cancelPayment(it)">
          {{ languageFormat(language, "取消支付", "Cancel the payment") }}
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        v-show="order.total > 0"
        v-model:current-page="order.pageNo"
        v-model:page-size="order.pageSize"
        background
        layout="prev, pager, next"
        :total="order.total"
        @current-change="order.fetchData()"
      />
    </div>

    <el-dialog
      v-model="order.showCodeDialog"
      title="支付"
      width="300"
      @closed="order.handleClose()"
    >
      <div>
        <img class="qrcode" :src="order.qrCodeData" />
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.qrcode {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 26px 0;
  font-family: SourceHanSansCN, SourceHanSansCN;
  .order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36px;
    background: #fff;
    box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
    border-radius: 8px;
    margin-bottom: 30px;
    cursor: pointer;
    .info_box {
      display: flex;
      gap: 20px;
      .cover_img {
        width: 155px;
        height: 200px;
        object-fit: fill;
      }
      .info {
        .title {
          font-weight: bold;
          font-size: 22px;
          color: #000000;
          line-height: 33px;
          margin-bottom: 25px;
          margin-bottom: 10px;
        }
        .common {
          font-weight: 500;
          font-size: 16px;
          color: #4e4e4e;
          margin-bottom: 6px;
        }
        .status {
          display: flex;

          .label {
            font-weight: 500;
            font-size: 16px;
            color: #4e4e4e;
            line-height: 24px;
          }
          .value {
            display: flex;
            align-items: center;
            gap: 20px;
            .tag {
              padding: 6px 14px;
              border-radius: 6px;
              border: 1px solid #34c759;
            }
            .tip {
              font-size: 16px;
              color: #f740a6;
              line-height: 24px;
            }
          }
        }
      }
    }
    .btn_box {
      display: flex;
      flex-direction: column;
      gap: 12px;
      .pay {
        width: 175px;
        height: 40px;
        background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
        border-radius: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
      .can_pay {
        width: 175px;
        height: 40px;
        background: #fff;
        border-radius: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #493ceb;
        line-height: 40px;
        border: 1px solid #493ceb;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
}
</style>