<template>
  <div style="transform: translateX(-110%)" class="absolute w-1070px h-2338px top-432px left-80px flex flex-col gap-y-20px">
    <!-- Park Events -->
    <div class="park-panel-item h-503px overflow-hidden">
      <div class="park-item-title">Park Events</div>
      <div class="text-32px text-#A7B7CA leading-45px">
        Events <span class="text-42px text-#fff leading-51px">{{ dataSource.eventList?.length ?? 'N/A'  }}</span>
      </div>
      <div class="h-304px overflow-y-auto events-box" ref="eventsContainerRef">
        <div class="flex" ref="eventsContentRef">
          <div class="time-line mr-20px flex flex-col pt-13px">
            <div
              v-for="(item, index) in dataSource.eventList"
              :key="item.id"
              class="w-3px bg-#24afeb relative shrink-0"
              :style="{
                height:
                  index === 0 ? '220px' : index === dataSource.eventList.length - 1 ? '0' : '162px',
              }"
            >
              <img
                src="@/assets/images/circle-point.svg"
                class="w-26px h-27px absolute top-[-13px] left-[-12px]"
                alt=""
              />
            </div>
          </div>
          <div class="flex flex-col gap-y-20px">
            <div
              class="flex items-center event-item"
              v-for="item in dataSource.eventList"
              :key="item.id"
            >
              <el-image :src="item.eventImageUrl" class="w-156px h-117px"></el-image>
              <div class="text-24px leading-34px m-l-20px">
                <div class="h-68px line-clamp-2">
                  {{ item.eventDescription }}
                </div>
                <div class="flex items-center text-#A7B7CA">
                  <span class="m-r-60px">Time: {{ item.time }}</span>
                  <span>Venue: {{ item.venue }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Park Ticket Type -->
    <div class="park-panel-item h-460px flex flex-col">
      <div class="park-item-title">Park Ticket Type</div>
      <div class="text-32px text-#A7B7CA leading-45px">
        Monthly ticket sales
        <span class="text-42px text-#fff leading-51px">{{
          dataSource.parkTicketType?.sales || 'N/A'
        }}</span>
      </div>
      <div class="flex-1 flex">
        <div class="flex-1 relative">
          <Pie :options="parkTicketTypeOption" />
          <img src="@/assets/images/cir-d.png" class="absolute top-141px left-220px" alt="" />
        </div>
        <div class="flex-1 flex flex-col justify-center gap-18px">
          <div
            class="flex items-center"
            v-for="(item, index) in dataSource.parkTicketType?.lists || []"
            :key="item.id"
          >
            <div
              class="w-23px h-12px bg-#287CE8 mr-10px"
              :style="{ background: parkTicketColors[index % 4] }"
            ></div>
            <span class="text-32px leading-45px text-#D3D3D3"
              >{{ item.ticketType }}（{{ item.ticketRate }}%）</span
            >
          </div>
        </div>
      </div>
    </div>

    <!-- Visitor Origin Breakdown By Country -->
    <div class="park-panel-item h-837px">
      <div class="park-item-title mb-30px">Visitor Origin Breakdown By Country</div>
      <div class="w-full h-280px">
        <Bar :options="visitorOriginBreakdownByCountryBarOption" />
      </div>
      <div class="flex">
        <div class="flex-1">
          <div class="text-#fff text-36px leading-50px m-y-40px">Gender distribution</div>
          <div class="mb-43px">
            <div class="text-#A7B7CA text-36px leading-50px mb-18px">
              Woman<span class="num ml-8px text-42px leading-50px text-#fff">{{
                dataSource.visitorOrigin?.women || 'N/A'
              }}</span>
            </div>
            <div class="w-410px h-27px progress-bar">
              <div
                class="h-18px progress-bar-inner"
                :style="{
                  width: parkTicketPercent.women > 100 ? '100%' : parkTicketPercent.women + '%',
                }"
              ></div>
            </div>
          </div>
          <div>
            <div class="text-#A7B7CA text-36px leading-50px mb-18px">
              Man<span class="num ml-8px text-42px leading-50px text-#fff">{{
                dataSource.visitorOrigin?.man || 'N/A'
              }}</span>
            </div>
            <div class="w-410px h-27px progress-bar">
              <div
                class="h-18px progress-bar-inner"
                :style="{
                  width: parkTicketPercent.man > 100 ? '100%' : parkTicketPercent.women + '%',
                }"
              ></div>
            </div>
          </div>
        </div>
        <div class="flex-1 flex flex-col">
          <div class="text-#fff text-36px leading-50px m-y-40px shrink-0">By age group</div>
          <div class="flex-1 flex">
            <div class="flex-1">
              <Bar :options="ageGroupBar" />
            </div>
            <div class="flex-1">
              <div class="flex-1 flex flex-col justify-center gap-40px">
                <div
                  class="flex items-center"
                  v-for="(item, index) in dataSource.visitorOrigin?.byAgeGroup || []"
                  :key="item.id"
                >
                  <div
                    class="w-21px h-12px bg-#766EE1 mr-10px"
                    :style="{ background: colorList[index % 4][0] }"
                  ></div>
                  <span class="text-24px leading-34px text-#A8C7DA"
                    >{{ item.ageGroup }}（{{ item.ageRatio }}%）</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- New VOG Measurements -->
    <div class="park-panel-item h-477px flex flex-col">
      <div class="park-item-title shrink-0">New VOG Measurements</div>
      <div class="flex-1">
        <Bar :options="newVOGMeasurementsBar" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject, type Ref, watch, reactive } from 'vue';
import * as echarts from 'echarts';
import { Receiver } from '@/utils/sseReceiver';
import { getIDBData } from '@/utils/database';

import Pie from '@/components/charts/Pie.vue';
import Bar from '@/components/charts/Bar.vue';

import type { EChartsOption } from 'echarts';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import dayjs from 'dayjs';
// park event类型
interface ParkEvent {
  endDate: string;
  eventDescription: string;
  eventImageUrl: string;
  eventTitle: string;
  id: number;
  parkCode: string;
  startDate: string;
  syncTraceId: string;
  synchTime: string;
  time: string;
  venue: string;
}
// park ticket类型
interface ParkTicketType {
  lists: {
    id: number;
    monthlySalesTotal: number;
    parkCode: string;
    statisticsDate: string;
    syncTraceId: string;
    synchTime: string;
    ticketRate: number;
    ticketType: string;
  }[];
  sales: number;
}
// 游客来源 breakdown by country类型
interface VisitorOriginBreakdownByCountry {
  byAgeGroup: {
    ageGroup: string;
    ageRatio: number;
    id: number;
    parkCode: string;
    statisticsDate: string;
    syncTraceId: string;
    synchTime: string;
  }[];
  man: number;
  visitorCountryBreakdown: {
    country: string;
    dataDate: string;
    man: number;
    parkCode: string;
    percentage: number;
    visitorCount: number;
    women: number;
  }[];
  women: number;
}

// vog 类型
interface INewVOGType {
  id: number;
  measurementTime: string;
  parkCode: string;
  syncTraceId: string;
  synchTime: string;
  vogValue: number;
}

const eventsContainerRef = ref<HTMLElement | null>(null);
const eventsContentRef = ref<HTMLElement | null>(null);

useAutoScroll(eventsContainerRef, eventsContentRef, {
  speed: 50,
  loop: true,
  delay: 3000,
  direction: 'down',
});
// 当前园区code
const parkCode = inject<Ref<string>>('parkCode');

// 数据源
const dataSource = reactive<{
  eventList: ParkEvent[];
  parkTicketType?: ParkTicketType;
  visitorOrigin?: VisitorOriginBreakdownByCountry;
  newVOGmeasurements?: INewVOGType[];
}>({
  eventList: [],
  parkTicketType: undefined,
  visitorOrigin: undefined,
  newVOGmeasurements: undefined,
});

const setData = () => {
  if (parkCode?.value) {
    getIDBData('Park_Events' + parkCode.value).then((res) => {
      dataSource.eventList = res?.value;
    });
    getIDBData('Park_Ticket_Type' + parkCode.value).then((res) => {
      dataSource.parkTicketType = res?.value;
    });
    getIDBData('Park_Visitor_Origin_Breakdown_By_Country' + parkCode.value).then((res) => {
      dataSource.visitorOrigin = res?.value;
    });
    getIDBData('New_VOG_measurements' + parkCode.value).then((res) => {
      dataSource.newVOGmeasurements = res?.value;
    });
  }
};

watch(
  () => parkCode?.value,
  (val) => {
    val && setData();
  },
);

// 获取websoket
const ws = Receiver.getInstance(import.meta.env.VITE_APP_SOCKET_SERVER + '/kpi/ws/data');
ws.onMessage(async () => {
  setData();
});

const parkTicketColors = ['#287CE8', '#32B8F0', '#41E4DE', '#6768F4'];

// park ticket type饼图
const parkTicketTypeOption = computed((): EChartsOption => {
  const list = dataSource.parkTicketType?.lists || [];
  return {
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      top: '0',
    },
    series: [
      {
        type: 'pie',
        center: ['60%', '50%'],
        radius: ['70%', '80%'],
        padAngle: 5,
        data: list.map((item, index) => ({
          value: item.monthlySalesTotal,
          name: item.ticketType,
          itemStyle: { color: parkTicketColors[index % 4] },
        })),
        label: {
          show: false,
        },
        tooltip: {
          show: false,
        },
      },
      {
        type: 'pie',
        center: ['60%', '50%'],
        radius: ['60%', '70%'],
        padAngle: 5,
        data: list.map((item, index) => ({
          value: item.monthlySalesTotal,
          name: item.ticketType,
          itemStyle: { color: parkTicketColors[index % 4] + '3F' },
        })),
        label: {
          show: false,
        },
        tooltip: {
          show: false,
        },
      },
    ],
  };
});

// 票价占比
const parkTicketPercent = computed(() => {
  const { man = 0, women = 0 } = dataSource.visitorOrigin || {};
  const count = man + women;
  return {
    man: (man / count) * 100,
    women: (women / count) * 100,
  };
});

// visitor origin breakdown by country柱状图
const visitorOriginBreakdownByCountryBarOption = computed((): EChartsOption => {
  const list = (dataSource.visitorOrigin?.visitorCountryBreakdown || []).sort((a, b) => b.visitorCount - a.visitorCount).slice(0, 5);
  return {
    grid: {
      left: 250,
      right: '8%',
      bottom: '0%',
      top: '0%',
    },
    yAxis: {
      type: 'category',
      data: list.map((item) => item.country),
      axisLabel: {
        color: '#A7B7CA',
        fontFamily: 'PingFangSC-Regular, sans-serif',
        fontSize: '32px',
      },
      axisLine: { show: false },
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        data: list.map((item) => item.visitorCount),
        type: 'bar',
        itemStyle: {
          // 渐变色
          color: new (echarts as any).graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: '#59A4FF',
            },
            {
              offset: 1,
              color: '#0059FF',
            },
          ]),
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 20,
          fontFamily: 'URWGothic-Book',
          formatter: (params) => {
            return `${params.value}(${list[params.dataIndex]?.percentage}%)`;
          },
        },
        barWidth: 20,
      },
    ],
  };
});

const colorList = [
  ['#C8C23B', '#B7A121'],
  ['#5DB8F9', '#2B5FD0'],
  ['#8BC781', '#47A13E'],
  ['#AEAAF2', '#484CBD'],
];
// age group 极坐标
const ageGroupBar = computed((): EChartsOption => {
  const list = dataSource.visitorOrigin?.byAgeGroup || [];

  return {
    polar: {
      radius: [30, '90%'],
      center: ['45%', '50%'],
    },
    angleAxis: {
      clockwise: false,
      startAngle: 90,
      endAngle: 360,
      max: 100,
      axisLine: {
        show: false, // 隐藏轴线
      },
      axisTick: {
        show: false, // 隐藏刻度线
      },
      axisLabel: {
        show: false, // 隐藏刻度标签
      },
      splitLine: {
        show: false, // 隐藏分割线
      },
    },
    radiusAxis: {
      type: 'category',
      data: ['a', 'b', 'c', 'd'],
      axisLine: {
        show: false, // 隐藏轴线
      },
      axisTick: {
        show: false, // 隐藏刻度线
      },
      axisLabel: {
        show: false, // 隐藏刻度标签
      },
      splitLine: {
        show: false, // 隐藏分割线
      },
    },
    series: [
      {
        type: 'bar',
        barGap: '-100%',
        barWidth: 10,
        data: [100, 100, 100, 100],
        itemStyle: {
          color: 'rgba(168, 198, 218, 0.20)',
        },
        coordinateSystem: 'polar',
      },
      {
        type: 'bar',
        barWidth: 10,
        coordinateSystem: 'polar',
        data: list.map((item, index) => ({
          name: item.ageGroup,
          value: item.ageRatio,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: colorList[index % 4][0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colorList[index % 4][1], // 100% 处的颜色
                },
              ],
            },
          },
        })),
      },
    ],
  };
});

// new VOG Measurements柱状图
const newVOGMeasurementsBar = computed((): EChartsOption => {
  const list = dataSource.newVOGmeasurements || [];
  return {
    grid: {
      top: 50,
      left: '5%',
      right: '5%',
      bottom: 0,
    },
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#456189',
          width: 3,
        },
      },
      axisLabel: {
        fontSize: 24,
        fontFamily: 'PingFangSC-Regular, sans-serif',
        color: '#FFFFFF',
      },
      data: list.map((item) => dayjs(item.measurementTime).format('HH:mm')),
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#456189',
          width: 3,
        },
      },
      axisLabel: {
        fontSize: 24,
        fontFamily: 'PingFangSC-Regular, sans-serif',
        color: '#FFFFFF99',
      },
      splitLine: { show: false },
    },
    series: [
      {
        data: list.map((item) => item.vogValue),
        type: 'bar',
        barWidth: 19,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(108, 145, 189, 0.15)',
          borderRadius: [60, 60, 0, 0],
        },
        label: {
          show: true,
          position: 'top',
          color: '#FFFFFF',
          fontSize: 24,
          distance: 20,
        },
        markPoint: {
          data: list.map((item, index) => ({
            name: '1',
            coord: [index, item.vogValue],
          })),
          symbolSize: 44,
          symbol:
            'image://data:image/png;base64,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',
        },
        itemStyle: {
          borderRadius: [60, 60, 0, 0],
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(1, 188, 244, 1)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(38, 52, 80, 0)', // 100% 处的颜色
              },
            ],
          },
        },
      },
    ],
  };
});
</script>

<style lang="less" scoped>
.event-item {
  width: 980px;
  height: 142px;
  background: url(@/assets/images/event-border.png) no-repeat center / contain;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 10px;
}
.events-box {
  background: linear-gradient(to bottom, rgba(16, 44, 88, 0.6) 0%, rgba(16, 44, 88, 0.6) 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
  mask-image: linear-gradient(to bottom, black 60%, transparent);
}
.time-line {
  width: 26px;
  display: flex;
  align-items: center;
}
.progress-bar {
  box-sizing: border-box;
  padding: 4px;
  background: rgba(17, 43, 60, 0.5);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0, 162, 255, 0.5);
  &-inner {
    background: linear-gradient(270deg, #59a4ff 0%, #0059ff 100%);
    border-radius: 4px 4px 4px 4px;
  }
}
</style>
