<template>
  <view class="data-detail-page" :class="{ mobile: isMobile }">
    <!-- 页面头部 -->
    <sub-header
      title="港口数据"
      @goBack="goBack"
      @showMoreOptions="showMoreOptions"
    />

    <!-- 数据卡片 -->
    <view class="cards-section">
      <view class="section-title">数据概览</view>
      <view class="card-grid">
        <view v-for="card in cardData" :key="card.id" class="data-card">
          <view class="card-icon">
            <i :class="card.icon"></i>
          </view>
          <view class="card-content">
            <text class="card-value">{{ card.value }}</text>
            <text class="card-label">{{ card.title }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 图表分析 -->
    <view class="charts-section">
      <view class="section-title">图表分析</view>
      <view class="chart-tabs">
        <view
          class="chart-tab"
          :class="{ active: activeTab === 'cargo' }"
          @click="switchTab('cargo')"
        >
          船舶作业货物信息
        </view>
        <view
          class="chart-tab"
          :class="{ active: activeTab === 'customer' }"
          @click="switchTab('customer')"
        >
          客户排名
        </view>
        <view
          class="chart-tab"
          :class="{ active: activeTab === 'location' }"
          @click="switchTab('location')"
        >
          作业地点作业量
        </view>
      </view>
      <view class="chart-content">
        <!-- 船舶作业货物信息 -->
        <view v-show="activeTab === 'cargo'" class="charts-container">
          <view class="chartsMain">
            <l-echart ref="chartRef" type="2d" :height="'auto'" />
          </view>
          <view class="chartsMain">
            <l-echart ref="cargoChartRef" type="2d" :height="'auto'" />
          </view>
        </view>

        <!-- 客户排名 -->
        <view v-show="activeTab === 'customer'" class="charts-container">
          <view class="chartsMain">
            <l-echart ref="customerChartRef" type="2d" :height="'auto'" />
          </view>
        </view>

        <!-- 作业地点作业量 -->
        <view v-show="activeTab === 'location'" class="charts-container">
          <view class="chartsMain">
            <l-echart ref="locationChartRef" type="2d" :height="'auto'" />
          </view>
        </view>
      </view>
    </view>

    <!-- 数据表格 -->
    <view class="table-section">
      <view class="section-title">详细数据</view>
      <view class="table-container">
        <view class="data-table">
          <view class="table-header">
            <view
              v-for="header in tableHeaders"
              :key="header.key"
              class="table-cell header-cell"
            >
              {{ header.title }}
            </view>
          </view>
          <view
            v-for="(row, index) in tableData"
            :key="index"
            class="table-row"
          >
            <view
              v-for="header in tableHeaders"
              :key="header.key"
              class="table-cell"
            >
              {{ row[header.key] }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import SubHeader from "../components/subHeader.vue";
import * as echarts from "echarts";

// 声明uni全局对象
declare const uni: any;

// 声明全局类型
declare global {
  interface Window {
    uni: any;
  }
}

// 类型定义
interface CardData {
  id: number;
  title: string;
  value: string;
  icon: string;
}

interface TableHeader {
  key: string;
  title: string;
}

interface TableData {
  port: string;
  berth: string;
  ship: string;
  cargo: string;
  weight: string;
  status: string;
}

// 响应式数据
const pageTitle = ref("港口数据");
const activeTab = ref("cargo");
const chartRef = ref<any>(null);
const cargoChartRef = ref<any>(null);
const customerChartRef = ref<any>(null);
const locationChartRef = ref<any>(null);

// 设备信息
const isMobile = ref(false);

const cardData = ref<CardData[]>([
  { id: 1, title: "报港次数", value: "173次", icon: "fas fa-ship" },
  { id: 2, title: "完船次数", value: "197次", icon: "fas fa-anchor" },
  {
    id: 3,
    title: "作业票作业量",
    value: "260193.687吨",
    icon: "fas fa-weight",
  },
  {
    id: 4,
    title: "船舶报港吨数",
    value: "218928.400吨",
    icon: "fas fa-ship",
  },
  {
    id: 5,
    title: "完船作业吨数",
    value: "252643.653吨",
    icon: "fas fa-anchor",
  },
]);

const tableHeaders = ref<TableHeader[]>([
  { key: "port", title: "港口" },
  { key: "berth", title: "泊位" },
  { key: "ship", title: "船舶" },
  { key: "cargo", title: "货物" },
  { key: "weight", title: "重量(吨)" },
  { key: "status", title: "状态" },
]);

const tableData = ref<TableData[]>([
  {
    port: "上海港",
    berth: "A1",
    ship: "中远海运",
    cargo: "集装箱",
    weight: "50000",
    status: "作业中",
  },
  {
    port: "宁波港",
    berth: "B2",
    ship: "马士基",
    cargo: "散货",
    weight: "75000",
    status: "已完成",
  },
  {
    port: "青岛港",
    berth: "C3",
    ship: "长荣海运",
    cargo: "油品",
    weight: "30000",
    status: "待作业",
  },
]);

// 方法

const goBack = () => {
  uni.navigateBack();
};

const showMoreOptions = () => {
  uni.showActionSheet({
    itemList: ["刷新", "返回首页"],
    success: (res) => {
      switch (res.tapIndex) {
        case 0:
          // 刷新数据
          uni.reLaunch({
            url: "/pages/businessDatas/portData",
          });
          uni.showToast({ title: "数据已刷新", icon: "success" });
          break;
        //返回首页
        case 1:
          uni.reLaunch({
            url: "/pages/index/index",
          });
          uni.showToast({ title: "已返回工作台", icon: "success" });
          break;
      }
    },
  });
};

// 客户排名原始数据
const customerRankingRawData = [
  { name: "江苏鑫顺通新材料有限公司", value: 64641.52 },
  { name: "连云港耀捷建设工程有限公司", value: 44569.54 },
  { name: "江苏德邦兴华化工科技有限公司", value: 27887.37 },
  { name: "连云港海鲲物流有限公司", value: 19028.98 },
  { name: "张家港红喜物流有限公司", value: 16538.4 },
  { name: "成忠", value: 15557.77 },
  { name: "江苏米耘环保科技有限公司", value: 13952.03 },
  { name: "南京恒之通船务有限公司", value: 12684 },
  { name: "连云港市瑞豪贸易有限公司", value: 8098 },
  { name: "佰鼎风禾(江苏)供应链管理有限公司", value: 6546.48 },
];

// 作业地点作业量原始数据
const locationWorkloadRawData = [
  { name: "抓1", value: 12163.26 },
  { name: "抓2", value: 11872.35 },
  { name: "倒台", value: 93673.52 },
  { name: "1#", value: 59712.06 },
  { name: "2#", value: 9359.546 },
  { name: "3#", value: 8825.58 },
  { name: "4#", value: 14898.896 },
  { name: "5#", value: 19450.075 },
  { name: "6#", value: 17650.25 },
  { name: "7#", value: 21368.56 },
  { name: "8#", value: 35275.316 },
  { name: "抓2对面", value: 222.0 },
  { name: "二期大库", value: 9.1 },
  { name: "调度室后", value: 679.966 },
  { name: "直灌", value: 0 },
];

// 自动排序客户排名数据
const customerRankingData = (() => {
  // 按数值从小到大排序
  const sortedData = customerRankingRawData.sort((a, b) => a.value - b.value);

  return {
    legend: ["10月"],
    yAxisData: sortedData.map((item) => item.name),
    seriesData: sortedData.map((item) => item.value),
  };
})();

// 作业地点作业量数据（不排序，按原始顺序）
const locationWorkloadData = {
  legend: ["10月"],
  yAxisData: locationWorkloadRawData.map((item) => item.name),
  seriesData: locationWorkloadRawData.map((item) => item.value),
};

// 初始化客户排名图表
const initCustomerChart = (chart: any) => {
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: "3%",
      right: "8%",
      bottom: "3%",
      top: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: customerRankingData.yAxisData,
      axisLabel: {
        fontSize: 12,
        width: 80,
        overflow: "truncate",
      },
    },
    series: [
      {
        name: customerRankingData.legend[0],
        type: "bar",
        data: customerRankingData.seriesData,
        label: {
          show: true,
          position: "right",
          formatter: "{c}",
          fontSize: 11,
          color: "#333",
        },
      },
    ],
  };

  chart.setOption(option);
  console.log("客户排名图表初始化成功");
};

// 初始化作业地点作业量图表
const initLocationChart = (chart: any) => {
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: "3%",
      right: "8%",
      bottom: "3%",
      top: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: locationWorkloadData.yAxisData,
      axisLabel: {
        fontSize: 12,
        width: 80,
        overflow: "truncate",
      },
    },
    series: [
      {
        name: locationWorkloadData.legend[0],
        type: "bar",
        data: locationWorkloadData.seriesData,
        label: {
          show: true,
          position: "right",
          formatter: "{c}",
          fontSize: 11,
          color: "#333",
        },
      },
    ],
  };

  chart.setOption(option);
  console.log("作业地点作业量图表初始化成功");
};

// 切换tab
const switchTab = (tab: string) => {
  activeTab.value = tab;

  // 如果切换到客户排名tab，确保图表正确显示
  if (tab === "customer") {
    nextTick(() => {
      setTimeout(() => {
        if (customerChartRef.value) {
          customerChartRef.value.init(echarts, initCustomerChart);
        }
      }, 100);
    });
  }

  // 如果切换到作业地点作业量tab，确保图表正确显示
  if (tab === "location") {
    nextTick(() => {
      setTimeout(() => {
        if (locationChartRef.value) {
          locationChartRef.value.init(echarts, initLocationChart);
        }
      }, 100);
    });
  }
};

// 生命周期
onMounted(() => {
  // 检测设备类型
  try {
    const systemInfo = uni.getSystemInfoSync();
    isMobile.value =
      systemInfo.platform !== "devtools" &&
      (systemInfo.platform === "ios" || systemInfo.platform === "android");
  } catch (e) {
    isMobile.value = false;
  }

  // 初始化第一个图表 - 货物类型统计
  chartRef.value.init(echarts, (chart) => {
    const option = {
      title: {
        text: "货物类型统计",
        subtext: "各类型作业量分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "horizontal",
        bottom: "bottom",
        itemGap: 10,
        itemWidth: 14,
        itemHeight: 14,
        textStyle: {
          fontSize: 12,
        },
      },
      series: [
        {
          name: "作业类型",
          type: "pie",
          radius: "50%",
          center: ["50%", "50%"],
          data: [
            { value: 67187.753, name: "门机件杂货" },
            { value: 26582.55, name: "门机散货" },
            { value: 15576.03, name: "抓机散货" },
            { value: 82319.55, name: "倒台散货" },
            { value: 45963.8, name: "挖机散货" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    chart.setOption(option);
  });

  // 初始化第二个图表 - 货物品类统计
  cargoChartRef.value.init(echarts, (chart) => {
    const option = {
      title: {
        text: "货物品类统计",
        subtext: "各类货物占比分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        right: "right",
        itemGap: 5,
        itemWidth: 14,
        itemHeight: 14,
        textStyle: {
          fontSize: 12,
        },
      },
      series: [
        {
          name: "货物品类",
          type: "pie",
          radius: "50%",
          center: ["50%", "55%"],
          data: [
            { value: 64641.52, name: "铁精粉" },
            { value: 44734.8, name: "PTA" },
            { value: 44569.54, name: "粉质粘土" },
            { value: 33427.37, name: "盐" },
            { value: 15557.77, name: "石粉砂" },
            { value: 13952.03, name: "低卡煤" },
            { value: 4804.04, name: "氯化钾" },
            { value: 4140.0, name: "元明粉" },
            { value: 3664.0, name: "轻碱" },
            { value: 23152.583, name: "其他" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    chart.setOption(option);
  });

  // 初始化客户排名图表 - 延迟初始化
  setTimeout(() => {
    if (customerChartRef.value) {
      customerChartRef.value.init(echarts, initCustomerChart);
    }
  }, 500);

  // 初始化作业地点作业量图表 - 延迟初始化
  setTimeout(() => {
    if (locationChartRef.value) {
      locationChartRef.value.init(echarts, initLocationChart);
    }
  }, 500);
});
</script>

<style scoped>
.data-detail-page {
  min-height: 100vh;
  background: var(--background);
  padding-top: 88rpx;
}

/* 移动设备需要额外的状态栏高度 */
.data-detail-page.mobile {
  padding-top: calc(var(--status-bar-height) + 88rpx);
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .data-detail-page.mobile {
    padding-top: calc(
      var(--status-bar-height) + 88rpx + env(safe-area-inset-top)
    );
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 24rpx;
  padding: 0 30rpx;
}

/* 卡片样式 */
.cards-section {
  padding: 30rpx 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 0 30rpx;
}

.data-card {
  background: var(--surface);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 20rpx;
  border: 1rpx solid var(--border-light);
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon i {
  font-size: 32rpx;
  color: var(--white);
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-value {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 8rpx;
}

.card-label {
  display: block;
  font-size: 24rpx;
  color: var(--text-color);
}

/* 图表样式 */
.charts-section {
  padding: 30rpx 0;
}

.chart-tabs {
  display: flex;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  white-space: nowrap;
}

.chart-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.chart-tab {
  flex-shrink: 0;
  padding: 16rpx 32rpx;
  margin-right: 16rpx;
  background: var(--gray-light);
  border-radius: 32rpx;
  font-size: 28rpx;
  color: var(--text-color);
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.chart-tab:last-child {
  margin-right: 0;
}

.chart-tab.active {
  background: var(--primary-color);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.chart-content {
  padding: 0 30rpx;
}

/* vchart样式 */
.chartsMain {
  width: 100%;
  min-height: 400rpx;
  padding: 15rpx;
  background: var(--surface);
  margin-bottom: 24rpx;
  border-radius: 12rpx;
  box-shadow: var(--shadow-md);
  border: 1rpx solid var(--border-light);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* 移动端优化 */
@media screen and (max-width: 768px) {
  .chartsMain {
    min-height: 300rpx;
  }
}

/* 柱状图特殊样式 - 支持横向滚动 */
.chartsMain.bar-chart {
  overflow-x: auto;
  overflow-y: hidden;
}

/* l-echart组件样式 */
.chartsMain :deep(.l-echart) {
  width: 100% !important;
  height: auto !important;
  min-height: 300px !important;
  background-color: transparent !important;
}

/* 柱状图横向滚动时的样式 */
.chartsMain.bar-chart :deep(.l-echart) {
  min-width: 800rpx;
  width: auto !important;
}

/* 表格样式 */
.table-section {
  padding: 30rpx 0;
}

.table-container {
  padding: 0 30rpx;
}

.data-table {
  background: var(--surface);
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1rpx solid var(--border-light);
}

.table-header {
  background: var(--gray-lighter);
  display: flex;
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid var(--border-light);
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: var(--text-color);
  text-align: center;
  border-right: 1rpx solid var(--border-light);
  word-break: break-all;
}

.table-cell:last-child {
  border-right: none;
}

.header-cell {
  font-weight: 600;
  color: var(--title-color);
}
</style>
