<script setup>
import { getOrderList, immediatePay, cancelPay } from "./api/index.js";
import qrCodeDialog from "./components/qrCodeDialog.vue";
import { ElMessageBox, ElMessage } from "element-plus";

const status = reactive({
  0: {
    txt: "待支付",
    color: "#F740A6",
    bgColor: "#FFE2F2",
  },
  1: {
    txt: "已支付",
    color: "#757575",
    bgColor: "#DDDDDD",
  },
  2: {
    txt: "未支付",
    color: "#34C759",
    bgColor: "#D2FFDD",
  },
  3: {
    txt: "已退款",
    color: "#FFCC00",
    bgColor: "#FFF7D9",
  },
});

const order = reactive({
  showCodeDialog: false,
  qrInfo: {},
  pay_loading: false,
  pageNo: 1,
  pageSize: 10,
  total: 0,
  data: [],
  fetchData() {
    getOrderList({ pageNo: order.pageNo, pageSize: order.pageSize }).then(
      (res) => {
        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;
        order.showCodeDialog = true;
      })
      .finally(() => (order.pay_loading = false));
  },
  // 取消支付
  cancelPayment(it) {
    ElMessageBox.confirm("确定取消支付吗？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true,
    })
      .then(() => {
        cancelPay({ orderSn: it.orderSn }).then(() => {
          order.fetchData();
          ElMessage({
            type: "success",
            message: "操作成功",
          });
        });
      })
      .catch(() => {});
  },
});

order.fetchData();
</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 },
        })
      "
      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">时间：{{ it.dateStr }}</div>
          <div class="common">地址：{{ it.placeName }}</div>
          <div class="common">订单编号：{{ it.orderSn }}</div>
          <div class="common">张数：{{ it.ticketNum }}张</div>
          <div class="common">金额：￥{{ it.payAmount }}</div>
          <div class="status">
            <div class="label">订单状态：</div>
            <div class="value">
              <div
                :style="{
                  borderColor: status[it.state].color,
                  background: status[it.state].bgColor,
                  color: status[it.state].color,
                }"
                class="tag"
              >
                {{ status[it.state].txt }}
              </div>
              <div v-if="it.state == 0" class="tip">
                请尽快完成支付，还剩{{ it.min }}分{{ it.sec }}秒
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="it.state == 0" class="btn_box">
        <div class="pay" @click.stop="order.payment(it)">立即支付</div>
        <div class="can_pay" @click.stop="order.cancelPayment(it)">
          取消支付
        </div>
      </div>
    </div>

    <qrCodeDialog
      :showCodeDialog="order.showCodeDialog"
      :qrCode="order.qrInfo?.scanCodeUrl"
    />

    <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>
  </div>
</template>

<style scoped lang="scss">
.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>