<script setup>
import { dayjs } from "element-plus";
import useUserStore from "@/store/modules/user";
import { setToken, getToken } from "./utils/local-store.js";
import { md5 } from "md5js";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  loginFree,
  activityDetail,
  sessionDetail,
  getSitePlaceInfo,
  getPriceLevelInfo,
} from "./api/index.js";
import { languageFormat, getDayName } from "./utils/language.js";
import { useStorage } from "@vueuse/core/index";
const language = useStorage("language", 0);

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

const props = defineProps({
  activityId: [String, Number],
});

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

const select_form = reactive({
  venueItem: {
    id: 0,
    dateStr: "",
    dayOpen: 1,
    nightOpen: 1,
    type: 0,
  }, // 所选场次
  session: -1, // 日/夜场 0：日场  1：夜场
  place: "", // 场馆
  ticket_block: 0, // 票档
  onClickVenue(e, index) {
    if (e.state == 1) return; // 表示
    select_form.venueItem = e;
    if (
      (e.dayOpen == 0 && select_form.session == 0) ||
      (e.nightOpen == 0 && select_form.session == 1)
    ) {
      select_form.session = -1;
      select_form.place = "";
      select_form.ticket_block = 0;
    }
  },
  // 选择日/夜场
  onClickSession(e) {
    if (
      (e == 0 && select_form.venueItem?.dayOpen == 1) ||
      (e == 1 && select_form.venueItem?.nightOpen == 1)
    ) {
      select_form.session = e;
      // select_form.place = "";
      select_form.ticket_block = 0;
    }
  },
  // 选择场馆
  onClickPlace(e) {
    if (e.state == 1) return;
    select_form.place = e.placeName;
    select_form.ticket_block = 0;
  },
  // 选择票档
  onClickPrice(e) {
    if (e.state == 1) return;
    select_form.ticket_block = e.priceId;
  },
  // 去选座
  async toSelectSeat() {
    // 检查登录
    // const ticketUserToken = getToken();
    // if (!ticketUserToken) {
    const userId = userStore.user?.userId; // userId
    if (!userId) {
      // 未登录，打开登录弹窗
      return userStore.setVisitor();
    }
    // }
    await login(userId);

    if (!select_form.venueItem?.id)
      return ElMessage({
        type: "warning",
        message: languageFormat(
          language.value,
          "请选择时间",
          "Please select the time"
        ),
      });
    if (select_form.session == -1)
      return ElMessage({
        type: "warning",
        message: languageFormat(
          language.value,
          "请选择场次",
          "Please select the session"
        ),
      });
    if (!select_form.place)
      return ElMessage({
        type: "warning",
        message: languageFormat(
          language.value,
          "请选择场馆",
          "Please choose the venue"
        ),
      });
    if (!select_form.ticket_block)
      return ElMessage({
        type: "warning",
        message: languageFormat(
          language.value,
          "请选择票档",
          "Please choose the ticket category"
        ),
      });

    router.push({
      path: "/seat/seat_picker",
      query: {
        id: props.activityId,
        openType: select_form.session,
        sessionId: select_form.venueItem?.id,
        sitePlace: select_form.place,
        ticketType: select_form.venueItem?.type,
        ticket_block: select_form.ticket_block,
        time_txt: select_form.venueItem?.dateStr,
      },
    });
  },
});

// 活动详情
const detail = reactive({
  loading: false,
  data: null,
  fetchData() {
    this.loading = true;
    activityDetail({ actId: props.activityId })
      .then((res) => {
        this.data = res.data;
      })
      .finally(() => (this.loding = false));
  },
});

// 获取场次信息
const timeVenue = reactive({
  loading: false,
  data: [],
  fetchData() {
    this.loading = true;
    sessionDetail({ actId: props.activityId })
      .then((res) => {
        this.data = res.data;
      })
      .finally(() => (this.loading = false));
  },
});

// 获取场馆
const sitePlaceInfo = reactive({
  data: [
    { placeName: "B4", state: "0" },
    { placeName: "B6", state: "0" },
  ],
  fetchData() {
    console.log(select_form.venueItem?.id, select_form.session);
    getSitePlaceInfo({
      sessionId: select_form.venueItem?.id,
      openType: select_form.session,
    }).then((res) => {
      this.data = res.data;
    });
  },
});

// 获取票档
const price = reactive({
  data: [],
  fetchData() {
    getPriceLevelInfo({
      actId: props.activityId,
      sessionId: select_form.venueItem?.id,
      openType: select_form.session,
      sitePlace: select_form.place,
      ticketType: select_form.venueItem?.type,
    }).then((res) => {
      this.data = res.data;
    });
  },
});

watchEffect(() => {
  if (select_form.session != -1 && select_form.venueItem?.id) {
    if (select_form.session == 1 && select_form.place == "B4") {
      select_form.place = "";
    }
    sitePlaceInfo.fetchData();
  }
});

watchEffect(() => {
  if (
    select_form.venueItem?.id &&
    select_form.session != -1 &&
    select_form.place
  ) {
    price.fetchData();
  }
});

// 主流程开始
watch(
  () => props.activityId,
  async (activityId) => {
    if (!activityId) {
      // [TODO] dialog提示缺少活動ID讓然後返回
      ElMessageBox.confirm("缺少活动id", "提示", {
        confirmButtonText: "确认",
        type: "warning",
        showCancelButton: false,
        draggable: true,
      }).then((res) => {
        router.push("/");
      });
      return;
    }

    detail.fetchData();
    timeVenue.fetchData();
  },
  { immediate: true }
);
</script>

<template>
  <div>
    <!-- top -->
    <div class="container top">
      <img class="cover_img" :src="detail.data?.coverImg" />
      <div class="info">
        <div class="title">{{ detail.data?.name }}</div>
        <div class="time">
          {{ languageFormat(language, "时间", "Event Date & Time") }}：{{
            detail.data?.startTime
              ? dayjs(detail.data?.startTime).format("YYYY.MM.DD")
              : ""
          }}
          {{
            detail.data?.startTime
              ? getDayName(
                  new Date(detail.data?.startTime),
                  language == 1 ? "en-US" : "zh-CN"
                )
              : ""
          }}
          —
          {{
            detail.data?.endTime
              ? dayjs(detail.data?.endTime).format("YYYY.MM.DD")
              : ""
          }}
          {{
            detail.data?.endTime
              ? getDayName(
                  new Date(detail.data?.endTime),
                  language == 1 ? "en-US" : "zh-CN"
                )
              : ""
          }}
        </div>
        <div class="address">
          {{ languageFormat(language, "地址", "Location") }}：{{
            detail.data?.address
          }}
        </div>
        <!-- 时间 -->
        <div class="select_item_box">
          <div class="label">
            {{ languageFormat(language, "时间", "Event Date & Time") }}
          </div>
          <div class="select_item">
            <div
              v-for="(it, index) in timeVenue.data"
              :key="index"
              :class="[
                it.id == select_form.venueItem?.id ? 'tagActive' : 'tag',
              ]"
              @click="select_form.onClickVenue(it)"
            >
              {{ it.dateStr }}
              <div v-if="it.type == 1" class="tag_t">
                {{ languageFormat(language, "套票", "Package ticket") }}
              </div>
            </div>
          </div>
        </div>
        <!-- 场次 -->
        <div class="select_item_box">
          <div class="label">
            {{ languageFormat(language, "场次", "Session") }}
          </div>
          <div class="select_item">
            <div
              :class="[
                select_form.venueItem?.dayOpen == 1
                  ? select_form.session == 0
                    ? 'tagActive'
                    : 'tag'
                  : 'tagDisabled',
              ]"
              @click="select_form.onClickSession(0)"
            >
              {{ languageFormat(language, "日场", "Day session") }}
            </div>
            <div
              :class="[
                select_form.venueItem?.nightOpen == 1
                  ? select_form.session == 1
                    ? 'tagActive'
                    : 'tag'
                  : 'tagDisabled',
              ]"
              @click="select_form.onClickSession(1)"
            >
              {{ languageFormat(language, "夜场", "Night session") }}
            </div>
          </div>
        </div>
        <!-- 场馆 -->
        <div class="select_item_box">
          <div class="label">
            {{ languageFormat(language, "场馆", "Venue") }}
          </div>
          <div class="select_item">
            <div
              v-for="(it, index) in sitePlaceInfo.data"
              :key="index"
              :class="[
                it.state == 0
                  ? it.placeName == select_form.place
                    ? 'tagActive'
                    : 'tag'
                  : 'tagDisabled',
              ]"
              @click="select_form.onClickPlace(it)"
            >
              {{ it.placeName }}
            </div>
          </div>
        </div>
        <!-- 票档 -->
        <div
          v-if="price.data?.length && select_form.place"
          class="select_item_box"
        >
          <div class="label">
            {{ languageFormat(language, "票档", "Ticket Category") }}
          </div>
          <div class="select_item">
            <div
              v-for="(it, index) in price.data"
              :key="index"
              :class="[
                it.state == 0
                  ? it.priceId == select_form.ticket_block
                    ? 'tagActive'
                    : 'tag'
                  : 'tagDisabled',
              ]"
              @click="select_form.onClickPrice(it)"
            >
              <span v-if="language == 1">€</span>
              {{ it.price }}
              <span v-if="language == 0">元</span>
            </div>
          </div>
        </div>
        <!-- button -->
        <div class="btn" @click="select_form.toSelectSeat()">
          {{ languageFormat(language, "选座购票", "Seat selection") }}
        </div>
      </div>
    </div>

    <!-- bottom -->
    <div class="container bottom">
      <div class="title">
        {{ languageFormat(language, "活动介绍", "Event Details") }}
      </div>
      <div class="rich_content" v-html="detail.data?.introduceInfo"></div>

      <div class="title" style="margin-top: 30px">
        {{ languageFormat(language, "购票须知", "Ticketing Information") }}
      </div>
      <div class="rich_content" v-html="detail.data?.buyNotice"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
  border-radius: 8px;
  box-sizing: border-box;
  font-family: SourceHanSansCN, SourceHanSansCN;
  padding-bottom: 20px;
}

.top {
  display: flex;
  padding: 19px;
  margin-top: 26px;
  .cover_img {
    width: 390px;
    height: 517px;
    object-fit: fill;
    margin-right: 36px;
  }

  .info {
    padding-top: 12px;
    .title {
      font-weight: bold;
      font-size: 28px;
      color: #000000;
      line-height: 42px;
      margin-bottom: 34px;
    }
    .time {
      font-weight: 500;
      font-size: 16px;
      color: #4a4a4a;
      line-height: 24px;
      margin-bottom: 16px;
    }
    .address {
      font-weight: 500;
      font-size: 16px;
      color: #4a4a4a;
      line-height: 24px;
      margin-bottom: 33px;
    }

    .select_item_box {
      display: flex;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        font-weight: 600;
        font-size: 16px;
        color: #000;
        line-height: 24px;
        margin-right: 12px;
        flex-shrink: 0;
      }

      .select_item {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        user-select: none;
        .tag_t {
          padding: 1px 15px;
          font-weight: 400;
          font-size: 14px;
          color: #493ceb;
          border-radius: 6px;
          border: 1px solid #453dea;
          margin-left: 5px;
        }
        .tag {
          display: flex;
          padding: 12px 18px;
          background: #eeeeee;
          border-radius: 4px;
          border: 1px solid #29343c;
          font-size: 14px;
          color: #4a4a4a;
          cursor: pointer;
        }

        .tagActive {
          display: flex;
          padding: 12px 18px;
          background: #fff;
          border-radius: 4px;
          border: 1px solid #493ceb;
          font-size: 14px;
          color: #493ceb;
          cursor: pointer;
        }
        .tagDisabled {
          padding: 12px 18px;
          background: #878787;
          border-radius: 4px;
          border: 1px solid #29343c;
          font-size: 14px;
          color: #4a4a4a;
          cursor: no-drop;
        }
      }
    }
    .btn {
      width: 175px;
      height: 40px;
      background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
      border-radius: 20px;
      line-height: 40px;
      text-align: center;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      cursor: pointer;
    }
  }
}

.bottom {
  padding: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
  .title {
    padding: 20px 30px;
    background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
    font-weight: bold;
    font-size: 20px;
    color: #ffffff;
    line-height: 30px;
    margin-bottom: 30px;
  }
  .rich_content {
    margin-top: 30px;
  }
}
</style>