<template>
  <view class="order-card-component">
    <view class="order-card-header">
      <nut-row>
        <nut-col span="16">
          <view style="font-weight: bold; font-size: 34rpx">{{ title }}</view>
          <view style="color: #7d7c7c; font-size: 24rpx"
            >{{ room_num }}室 宜住{{ capacity }}人</view
          >
        </nut-col>
        <nut-col span="8">
          <image mode="aspectFill" :src="cover" />
        </nut-col>
      </nut-row>
    </view>
    <view class="order-card-status">
      <nut-tag :color="STATUS_COLOR[props.data.status]">{{
        STATUS_TEXT[props.data.status]
      }}</nut-tag>
    </view>
    <view class="order-card-price">
      <nut-row>
        <nut-col span="18">
          <view class="order-card-price-text">
            <view class="left"><nut-price :price="order_price" size="normal" /></view>
            <view class="right" style="margin-top: 10rpx"
              ><nut-price
                :price="original_total"
                size="small"
                strike-through
                style="color: #7d7c7c"
            /></view>
          </view>
        </nut-col>
        <nut-col span="6" class="order-card-price-num">
          <IconFont
            name="close"
            size="7"
            color="#000"
            style="margin-right: 5rpx; margin-bottom: 0.5rpx"
          ></IconFont
          ><text>{{ order_num }}</text>
        </nut-col>
      </nut-row>
    </view>
    <view :class="['calendar-select-page', calcBgColor ? 'bg-gray' : '']">
      <!-- <nut-row gutter="0">
        <nut-col span="9">
          <view class="check-in-text">入住日期</view>
          <view class="check-in-info">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view>
        </nut-col>
        <nut-col span="5" class="book-days" style="padding: 0 15rpx">
          <view class="book-days-text"
            >共{{ getDayDifference(plan_in, plan_out) }}晚</view
          >
        </nut-col>
        <nut-col span="9" style="text-align: right">
          <view class="check-in-text">退房日期</view>
          <view class="check-in-info">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view>
        </nut-col>
      </nut-row> -->
      <view style="display: flex;">
        <view style="flex: 2;">
          <view class="check-in-text">入住日期</view>
          <view class="check-in-info" style="margin-top: 5rpx;">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view>
        </view>
        <view style="flex: 1;" class="book-days">
          <view class="book-days-text"
            >共{{ getDayDifference(plan_in, plan_out) }}晚</view
          >
        </view>
        <view style="flex: 2; text-align: right;">
          <view class="check-in-text">退房日期</view>
          <view class="check-in-info" style="margin-top: 5rpx;">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view>
        </view>
      </view>
    </view>
    <view class="order-card-control">
      <nut-row>
        <nut-col span="6">
          <view class="order-info" @tap="showOrderInfo(order_id)">
            <text>入住信息</text>&nbsp;
            <IconFont
              v-if="show_info"
              name="rect-up"
              size="12"
              color="#7D7C7C"
            ></IconFont>
            <IconFont v-else name="rect-down" size="12" color="#7D7C7C"></IconFont>
          </view>
        </nut-col>
        <!-- 待支付状态下，剩余时间归零 操作隐藏 -->
        <nut-col span="18">
          <view v-if="showBtn" class="order-control">
            <nut-button
              v-if="pay_show || props.data.status === 5"
              @tap="cancelOrder(order_id)"
              plain
              color="#6A4925"
              size="small"
              >取消订单</nut-button
            >&nbsp;
            <nut-button
              v-if="pay_show"
              @tap="payOrder(order_id)"
              color="#6A4925"
              size="small"
              >立即支付</nut-button
            >
            <view v-if="delay_pay_show">
              <text style="font-size: 23rpx; color: red"> 支付超时，请重新下单！ </text>
            </view>
          </view>
        </nut-col>
      </nut-row>
    </view>
    <!-- 待支付状态下，剩余时间归零 显示隐藏 -->
    <view v-if="pay_show" class="order-remain-time">
      <text>支付剩余时间</text>&nbsp;
      <text style="font-size: 23rpx; color: red">
        {{ formatTime(remain_time) }}
      </text>
    </view>
    <view class="order-info-detail" v-if="show_info">
      <view class="order-info">
        <nut-row>
          <nut-col span="12">
            <view class="check-in-text">入住时间</view>
          </nut-col>
          <nut-col span="12">
            <view class="check-in-info"
              >{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日
              {{ state.sysInfo.check_in_time }} 后</view
            >
          </nut-col>
        </nut-row>
        <nut-row>
          <nut-col span="12">
            <view class="check-out-text">退房日期</view>
          </nut-col>
          <nut-col span="12">
            <view class="check-out-info"
              >{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日
              {{ state.sysInfo.check_out_time }} 前</view
            >
          </nut-col>
        </nut-row>
        <nut-row>
          <nut-col span="12">
            <view class="breakfast-text">早餐</view>
          </nut-col>
          <nut-col span="12">
            <view class="breakfast-num">{{ capacity }} 份</view>
          </nut-col>
        </nut-row>
        <view class="order-info-detail-tip">
          <view
            >{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日
            {{ state.sysInfo.last_check_time }}后未入住，订单将被取消</view
          >
        </view>
      </view>
      <view class="order-detail">
        <nut-row class="wrapper">
          <nut-col span="6">联系人：</nut-col>
          <nut-col span="18" class="right">{{ contact_name }}</nut-col>
        </nut-row>
        <nut-row class="wrapper">
          <nut-col span="6">联系电话：</nut-col>
          <nut-col span="18" class="right">{{ contact_phone }}</nut-col>
        </nut-row>
        <nut-row class="wrapper">
          <nut-col span="6">备注：</nut-col>
          <nut-col span="18" class="right">{{ order_remark }}</nut-col>
        </nut-row>
        <nut-row class="wrapper">
          <nut-col span="6">下单时间：</nut-col>
          <nut-col span="18" class="right">{{ order_created_time }}</nut-col>
        </nut-row>
        <nut-row class="wrapper">
          <nut-col span="6">订单号：</nut-col>
          <nut-col span="18" class="right">{{ order_id }}</nut-col>
        </nut-row>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { orderCancelAPI } from "@/api/index";

/**
 * 房间状态（9=已入住，2=已取消，3=未支付，5=已支付）
 * /


/**
 * 获取日期星期几
 * @param {String} dateString 日期字符串
 */
const getDayOfWeek = (dateString) => {
  var dateParts = dateString.split("-");
  var year = parseInt(dateParts[0]);
  var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始，所以要减去 1
  var day = parseInt(dateParts[2]);

  var date = new Date(year, month, day);
  var dayOfWeek = date.getDay();

  // 定义星期几的名称数组
  var days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

  return days[dayOfWeek];
};

/**
 * 计算日期间隔
 * @param {*} startDate
 * @param {*} endDate
 */
const getDayDifference = (startDate, endDate) => {
  var startParts = startDate.split("-");
  var startYear = parseInt(startParts[0]);
  var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始，所以要减去 1
  var startDay = parseInt(startParts[2]);

  var endParts = endDate.split("-");
  var endYear = parseInt(endParts[0]);
  var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始，所以要减去 1
  var endDay = parseInt(endParts[2]);

  var startDateObj = new Date(startYear, startMonth, startDay);
  var endDateObj = new Date(endYear, endMonth, endDay);

  // 跨年处理
  if (endYear > startYear) {
    endDateObj.setFullYear(endYear);
  }

  // 跨月处理
  if (endMonth > startMonth || (endMonth === startMonth && endDay > startDay)) {
    endDateObj.setMonth(endMonth);
  }

  // 计算两个日期之间的时间差（毫秒数）
  var timeDiff = endDateObj.getTime() - startDateObj.getTime();

  // 将时间差转换为天数
  var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));

  return dayDiff;
};

const STATUS_COLOR = {
  2: "#CECECE",
  3: "#D5842D",
  5: "#6A4925",
  9: "#656565",
};

const STATUS_TEXT = {
  2: "已取消",
  5: "待入住",
  9: "已入住",
  3: "待支付",
};

const id = ref(""); // 房间id
const cover = ref(""); // 封面图
const title = ref(""); // 标题
const original_total = ref(""); // 原价
const order_price = ref(""); // 优惠价
const capacity = ref(""); // 能住几个人
const num = ref(""); // 可售数量
const room_num = ref(""); // 房间描述 两室
const room_type = ref(""); //
const order_num = ref(""); // 订房数量
const plan_in = ref(""); //
const plan_out = ref(""); //
const contact_name = ref(""); //
const contact_phone = ref(""); //
const order_remark = ref(""); //
const order_created_time = ref(""); //
const order_id = ref(""); //

const booking_info = ref({
  days: 1, // 入住天数
  check_in: {
    year: "",
    month: "",
    day: "",
    day_of_week: "",
  },
  check_out: {
    year: "",
    month: "",
    day: "",
    day_of_week: "",
  },
});

// 日历背景色灰色的条件判断
const calcBgColor = computed(() => {
  return props.data.status === 9 || props.data.status === 2;
});

// 显示操作按钮的条件判断
const showBtn = computed(() => {
  return props.data.status === 5 || props.data.status === 3;
});

/**
 * 格式化时间
 * @param {*} seconds
 */
function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;

  let formattedTime = "";

  if (hours > 0) {
    formattedTime += hours.toString().padStart(2, "0") + ":";
  }

  if (minutes > 0 || hours > 0) {
    formattedTime += minutes.toString().padStart(2, "0") + ":";
  }

  formattedTime += remainingSeconds.toString().padStart(2, "0");

  return formattedTime;
}

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  sys: {
    type: Object,
    default: {},
  },
});
const emit = defineEmits(["onPay"]);

const remain_time = ref(0); // 剩余时间秒数

const show_info = ref(false);
const showOrderInfo = (id) => {
  show_info.value = !show_info.value;
};

// 控制待支付状态下的显示
const pay_show = computed(() => {
  let flag = false;
  if (props.data.status === 3 && remain_time.value) {
    // 倒计时进行时
    flag = true;
  } else if (props.data.status === 3 && !remain_time.value) {
    // 倒计时结束
    flag = false;
  }
  return flag;
});

// 支付超时显示
const delay_pay_show = computed(() => {
  return props.data.status === 3 && !remain_time.value;
});

const cancelOrder = (id) => {
  Taro.showModal({
    title: "温馨提示",
    content: "是否确认取消订单？",
    success: async (res) => {
      if (res.confirm) {
        if (id) {
          // 取消订单
          const { code, data } = await orderCancelAPI({ id });
          if (code) {
            Taro.showToast({
              title: "取消成功",
              icon: "success",
              duration: 2000,
            });
            props.data.status = 2; // 取消订单状态置为已取消
          }
        }
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

const payOrder = (id) => {
  // 订单的支付信息
  emit("onPay", { id, remain_time: remain_time.value, price: order_price.value });
};

let timeId = null;

const state = reactive({
  sysInfo: {},
});

onMounted(async () => {
  id.value = props.data.id;
  cover.value = props.data.cover
    ? props.data.cover
    : "https://cdn.ipadbiz.cn/meihua/img1@2x.png";
  title.value = props.data.title;
  room_num.value = props.data.room_num;
  capacity.value = props.data.capacity;
  num.value = props.data.num;
  original_total.value = props.data.original_total;
  order_price.value = props.data.order_price;
  room_type.value = props.data.room_type;
  order_num.value = props.data.order_num;
  plan_in.value = props.data.plan_in;
  plan_out.value = props.data.plan_out;
  remain_time.value = props.data.pay_time;
  contact_name.value = props.data.contact_name;
  contact_phone.value = props.data.contact_phone;
  order_remark.value = props.data.order_remark;
  order_id.value = props.data.id;
  order_created_time.value = props.data._created_time;
  //
  let check_in = plan_in.value.split("-");
  let check_out = plan_out.value.split("-");
  //
  booking_info.value.check_in = {
    year: check_in[0],
    month: check_in[1],
    day: check_in[2],
  };
  booking_info.value.check_out = {
    year: check_out[0],
    month: check_out[1],
    day: check_out[2],
  };
  // 进入页面后，开始倒计时
  timeId = setInterval(() => {
    remain_time.value ? (remain_time.value -= 1) : 0;
  }, 1000);
});

watch(
  () => props.data,
  (val) => {
    if (val) {
      id.value = val.id;
      cover.value = val.cover ? val.cover : "https://cdn.ipadbiz.cn/meihua/img1@2x.png";
      title.value = val.title;
      room_num.value = val.room_num;
      capacity.value = val.capacity;
      num.value = val.num;
      original_total.value = val.original_total;
      order_price.value = val.order_price;
      room_type.value = val.room_type;
      order_num.value = val.order_num;
      plan_in.value = val.plan_in;
      plan_out.value = val.plan_out;
      remain_time.value = val.pay_time;
      contact_name.value = val.contact_name;
      contact_phone.value = val.contact_phone;
      order_remark.value = val.order_remark;
      order_created_time.value = val._created_time;
      order_id.value = val.id;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

watch(
  () => props.sys,
  (val) => {
    if (val) {
      state.sysInfo = val;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onUnmounted(() => {
  timeId && clearInterval(timeId);
});
</script>

<style lang="less">
:root,
page {
  --nut-price-medium-size: 35rpx;
}

.order-card-component {
  margin: 1rem;
  margin-top: 0.5rem;
  // padding: 0.5rem 0;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #f9f9f9;
  border-radius: 0.5rem;
  overflow: hidden;
  .order-card-header {
    padding: 0.5rem;
    image {
      width: 100%;
      height: 3rem;
      border-radius: 10rpx;
    }
  }
  .order-card-status {
    padding: 0 0.5rem;
  }
  .order-card-price {
    padding: 0.5rem;
    .order-card-price-text {
      height: 2rem;
      display: flex;
      align-items: center;
      .left {
        color: #eb2e2e;
        font-size: 1.3rem;
        font-weight: bold;
      }
      .right {
        color: #7d7c7c;
        text-decoration: line-through;
        font-size: 0.85rem;
        margin-left: 5px;
      }
    }
    .order-card-price-num {
      text-align: right;
      text {
        font-size: 28rpx;
      }
    }
  }
  .calendar-select-page {
    margin: 0 0.5rem;
    background-color: #f6ece1;
    border-radius: 10rpx;
    padding: 1rem 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    &.bg-gray {
      background-color: #f0f0f0;
    }
    .check-in-text {
      color: #7d7c7c;
      font-size: 3.5vw;;
    }
    .check-in-info {
      color: #7d7c7c;
      font-size: 3.5vw;
      font-weight: bold;
    }
    .book-days {
      padding: 0 10rpx;
      .book-days-text {
        color: #7d7c7c;
        margin-top: 15%;
        font-size: 0.8rem;
        text-align: center;
        background-color: #fff;
        padding: 0.25rem 0;
        border-radius: 0.5rem;
      }
    }
  }
  .order-card-control {
    padding: 0.5rem;
    padding-bottom: 0;
    .order-info {
      display: flex;
      align-items: center;
      margin: 20rpx 0;
      height: 60rpx;
      text {
        font-size: 26rpx;
        color: #7d7c7c;
      }
    }
    .order-control {
      display: flex;
      align-items: center;
      height: 100rpx;
      justify-content: flex-end;
    }
  }
  .order-remain-time {
    display: flex;
    justify-content: flex-end;
    font-size: 23rpx;
    margin-bottom: 1rem;
    margin-right: 1rem;
  }
  .order-info-detail {
    .order-info {
      border-bottom: 1px dashed #979797;
      padding: 0.5rem;
      padding-top: 0;
      .check-in-text {
        color: #7d7c7c;
        font-size: 0.85rem;
      }
      .check-in-info {
        color: #7d7c7c;
        font-size: 0.85rem;
        text-align: right;
      }
      .check-out-text {
        color: #7d7c7c;
        font-size: 0.85rem;
        margin: 0.25rem 0;
      }
      .check-out-info {
        color: #7d7c7c;
        font-size: 0.85rem;
        text-align: right;
        margin: 0.25rem 0;
      }
      .breakfast-text {
        color: #7d7c7c;
        font-size: 0.85rem;
      }
      .breakfast-num {
        color: #7d7c7c;
        font-size: 0.85rem;
        text-align: right;
      }
      .order-info-detail-tip {
        font-size: 0.85rem;
        margin-top: 0.25rem;
        &::before {
          content: "*";
          color: red;
          margin: auto;
          display: inline-block;
        }
        view {
          color: #7d7c7c;
          margin: auto;
          display: inline-block;
        }
      }
    }
    .order-detail {
      padding: 0.5rem;
      font-size: 28rpx;
      color: #7d7c7c;
      .wrapper {
        margin-bottom: 10rpx;
        .right {
          text-align: right;
        }
      }
    }
  }
}
</style>