<template>
  <div class="page-container">
    <div class="grid mb-5 2xl:grid-cols-10 2xl:grid-rows-1 gap-4 xl:grid-cols-5 xl:grid-rows-2">
      <SummaryCard
        :value="device.total || 0"
        icon="fa-solid:project-diagram"
        icon-bg-color="text-blue-500"
        icon-color="bg-blue-100"
        :title="t('stat.deviceCount')"
      />
      <SummaryCard
        :value="maintain.total || 0"
        icon="fa-solid:list"
        icon-bg-color="text-pink-500"
        icon-color="bg-blue-100"
        :title="t('stat.repairOrder')"
      />
      <SummaryCard
        :value="fill.unfilledCount || 0"
        icon="fa-solid:times-circle"
        icon-bg-color="text-purple-500"
        icon-color="bg-purple-100"
        :title="t('stat.operationNotFilled')"
      />
      <SummaryCard
        :value="fill.filledCount || 0"
        icon="fa-solid:award"
        icon-bg-color="text-purple-500"
        icon-color="bg-purple-100"
        :title="t('stat.operationFilled')"
      />
      <SummaryCard
        :value="by.todo || 0"
        icon="fa-solid:times-circle"
        icon-bg-color="text-green-500"
        icon-color="bg-green-100"
        :title="t('stat.notMaintained')"
      />
      <SummaryCard
        :value="by.finished || 0"
        icon="fa-solid:award"
        icon-bg-color="text-green-500"
        icon-color="bg-green-100"
        :title="t('stat.maintained')"
      />
      <SummaryCard
        :value="inspectt.todo || 0"
        icon="fa-solid:times-circle"
        icon-bg-color="text-yellow-500"
        icon-color="bg-yellow-100"
        :title="t('stat.notInspected')"
      />
      <SummaryCard
        :value="inspectt.finished || 0"
        icon="fa-solid:award"
        icon-bg-color="text-yellow-500"
        icon-color="bg-yellow-100"
        :title="t('stat.inspected')"
      />
      <SummaryCard
        :value="inspectZjxjCount.zj || 0"
        icon="solar:ruler-bold"
        icon-bg-color="text-yellow-500"
        icon-color="bg-yellow-100"
        :title="t('stat.zj')"
      />
      <SummaryCard
        :value="inspectZjxjCount.xj || 0"
        icon="mdi:wrench-check-outline"
        icon-bg-color="text-yellow-500"
        icon-color="bg-yellow-100"
        :title="t('stat.xj')"
      />
    </div>
    <!-- <el-row :gutter="16" class="mb-5">
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="device.total || 0"
          icon="fa-solid:project-diagram"
          icon-bg-color="text-blue-500"
          icon-color="bg-blue-100"
          :title="t('stat.deviceCount')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="maintain.total || 0"
          icon="fa-solid:list"
          icon-bg-color="text-pink-500"
          icon-color="bg-blue-100"
          :title="t('stat.repairOrder')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="fill.unfilledCount || 0"
          icon="fa-solid:times-circle"
          icon-bg-color="text-purple-500"
          icon-color="bg-purple-100"
          :title="t('stat.operationNotFilled')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="fill.filledCount || 0"
          icon="fa-solid:award"
          icon-bg-color="text-purple-500"
          icon-color="bg-purple-100"
          :title="t('stat.operationFilled')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="by.todo || 0"
          icon="fa-solid:times-circle"
          icon-bg-color="text-green-500"
          icon-color="bg-green-100"
          :title="t('stat.notMaintained')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="by.finished || 0"
          icon="fa-solid:award"
          icon-bg-color="text-green-500"
          icon-color="bg-green-100"
          :title="t('stat.maintained')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="inspectt.todo || 0"
          icon="fa-solid:times-circle"
          icon-bg-color="text-yellow-500"
          icon-color="bg-yellow-100"
          :title="t('stat.notInspected')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="inspectt.finished || 0"
          icon="fa-solid:award"
          icon-bg-color="text-yellow-500"
          icon-color="bg-yellow-100"
          :title="t('stat.inspected')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="inspectZjxjCount.zj || 0"
          icon="solar:ruler-bold"
          icon-bg-color="text-yellow-500"
          icon-color="bg-yellow-100"
          :title="t('stat.zj')"
        />
      </el-col>
      <el-col :sm="3" :xs="12">
        <SummaryCard
          :value="inspectZjxjCount.xj || 0"
          icon="mdi:wrench-check-outline"
          icon-bg-color="text-yellow-500"
          icon-color="bg-yellow-100"
          :title="t('stat.xj')"
        />
      </el-col>
    </el-row> -->
    <!-- 第二行：图表行 -->
    <el-row :gutter="16" class="mb-4 mt-3">
      <el-col :span="6">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="flex items-center">
              <span class="text-base font-medium" style="color: #b6c8da">{{
                t('stat.deviceStatus')
              }}</span>
            </div>
          </template>
          <div ref="statusChartRef" class="h-[320px]"></div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <span class="text-base font-medium" style="color: #b6c8da">{{
                t('stat.deviceRate')
              }}</span>
              <div>
                <el-date-picker
                  v-model="rateQueryParams.createTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                  class="!w-220px"
                  @change="handleDateChange"
                />
              </div>
            </div>
          </template>
          <!--          <div ref="topContainer" class="h-[320px]"></div>-->
          <div class="table-container">
            <el-table
              class="custom-table"
              :data="materialTableData"
              border
              @row-click="handleRowClick"
              style="width: 100%; color: #4c4c4c"
              :header-cell-style="{
                'background-color': '#2196df',
                color: 'white',
                'border-color': '#457794'
              }"
              :cell-style="{
                'border-color': '#457794',
                'background-color': '#284D72',
                color: '#F1D209'
              }"
            >
              <el-table-column prop="projectDeptName" label="项目部" align="center" />
              <el-table-column prop="teamCount" label="队伍数量" align="center" />
              <el-table-column prop="cumulativeDays" label="累计天数" align="center" />
              <el-table-column prop="constructionDays" label="施工天数" align="center" />
              <el-table-column
                prop="utilizationRate"
                label="设备利用率"
                align="center"
                :formatter="formatRate"
              />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!--      <el-col :span="7">-->
      <!--        <el-card class="chart-card" shadow="never">-->
      <!--          <template #header>-->
      <!--            <div class="flex items-center">-->
      <!--              <span class="text-base font-medium" style="color: #b6c8da">设备类别TOP5数量</span>-->
      <!--            </div>-->
      <!--          </template>-->
      <!--          <div ref="topContainer" class="h-[320px]"></div>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
      <el-col :span="8">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-base font-medium" style="color: #b6c8da">{{
                t('stat.orderCount')
              }}</span>
            </div>
          </template>
          <div ref="qxRef" class="h-[320px]"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增：修井完成情况图表 -->
    <el-row :gutter="16" class="mb-4">
      <el-col :span="8">
        <div class="flex flex-col justify-between">
          <el-card class="safety-days-card chart-card h-[230px]" shadow="never">
            <template #header>
              <div class="flex items-center">
                <span class="text-base font-medium" style="color: #b6c8da">{{
                  t('stat.safeProduction')
                }}</span>
              </div>
            </template>
            <div class="safety-days-content">
              <div class="days-number">{{ 165 }}</div>
              <div class="days-label">天</div>
              <div class="safety-desc">{{ t('stat.daysToDate') }}</div>
            </div>
          </el-card>
          <el-card class="chart-card mt-1" shadow="never">
            <template #header>
              <div class="flex items-center">
                <span class="text-base font-medium" style="color: #b6c8da">{{
                  t('stat.drillingCompletion')
                }}</span>
              </div>
            </template>
            <div ref="drillingWellChartRef" class="h-[170px]"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="flex items-center">
              <span class="text-base font-medium" style="color: #b6c8da">{{
                t('stat.drillingWork')
              }}</span>
            </div>
          </template>
          <div ref="drillingWorkloadChartRef" class="h-[405px]"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="flex items-center">
              <span class="text-base font-medium" style="color: #b6c8da">{{
                t('stat.wellWorkoverWorkload')
              }}</span>
            </div>
          </template>
          <div ref="repairWorkloadChartRef" class="h-[405px]"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <el-dialog
    v-model="teamDialogVisible"
    :title="t('stat.teamDetail')"
    width="80vh"
    :before-close="handleDialogClose"
    class="custom-scroll-dialog"
  >
    <div class="dialog-scroll-content">
      <el-table
        :data="teamTableData"
        border
        style="width: 100%"
        :header-cell-style="{
          'background-color': 'rgba(0, 0, 0, 0.2)',
          color: 'black',
          'border-color': '#457794'
        }"
        :cell-style="{
          'border-color': '#457794',
          'background-color': 'transparent'
        }"
      >
        <el-table-column prop="teamName" label="队伍名称" align="center" />
        <el-table-column prop="cumulativeDays" label="累计天数" align="center" />
        <el-table-column prop="constructionDays" label="施工天数" align="center" />
        <el-table-column
          prop="utilizationRate"
          label="设备利用率"
          align="center"
          :formatter="formatRate"
        />
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="Index">
import * as echarts from 'echarts/core'
import { BarChart, GaugeChart, LineChart, PieChart } from 'echarts/charts' // 显式导入柱状图模块
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { useElementSize } from '@vueuse/core'
import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
import { IotStatApi } from '@/api/pms/stat'
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'

// TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件

/** IoT 首页 */
defineOptions({ name: 'IotRyStat' })

// TODO @super：使用下 Echart 组件，参考 yudao-ui-admin-vue3/src/views/mall/home/components/TradeTrendCard.vue 等
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  UniversalTransition,
  GaugeChart,
  BarChart
])
const { t } = useI18n() // 国际化
const teamDialogVisible = ref(false)
const teamTableData = ref([])
const currentDeptId = ref('')
const currentDateRange = ref([])
const materialTableData = ref([])
const handleDateChange = () => {
  IotStatApi.getRyRate(rateQueryParams).then((res) => {
    materialTableData.value = res
  })
}
const rateQueryParams = reactive({
  createTime: []
})
const handleDialogClose = () => {
  teamDialogVisible.value = false
  teamTableData.value = [] // 清空表格数据
}
// 格式化利用率为百分比
const formatRate = (row) => {
  return (row.utilizationRate * 100).toFixed(2) + '%'
}
const handleRowClick = (row, column, event) => {
  console.log('点击的行数据：', row)
  currentDeptId.value = row.deptId // 假设行数据中包含deptId字段
  currentDateRange.value = rateQueryParams.createTime

  // 打开弹窗并加载队伍详情数据
  teamDialogVisible.value = true
  // fetchTeamDetailData(row.deptId, rateQueryParams.createTime)
  debugger
  const teamParams = {
    deptId: row.projectDeptId,
    createTime: rateQueryParams.createTime
  }
  IotStatApi.getRyTeamRate(teamParams).then((res) => {
    teamTableData.value = res
  })
}
const dateRange = ref<[Date, Date] | null>(null)
const by = ref({
  todo: undefined,
  finished: undefined
})
const fill = ref({
  filledCount: undefined,
  unfilledCount: undefined
})
const inspectt = ref({
  finished: 0,
  todo: 0
})
const queryParams = reactive({
  startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
  endTime: Date.now() // 设置默认结束时间为当前时间
})
const backendData = ref([])
const statusChartRef = ref() // 设备数量统计的图表
// const materialChartRef = ref() // 设备数量统计的图表
const drillingWorkloadChartRef = ref()
const repairWorkloadChartRef = ref()
// 基础统计数据
// TODO @super：初始为 -1，然后界面展示先是加载中？试试用 cursor 改哈
const statsData = ref<IotStatisticsSummaryRespVO>({
  productCategoryCount: 0,
  productCount: 0,
  deviceCount: 0,
  deviceMessageCount: 0,
  productCategoryTodayCount: 0,
  productTodayCount: 0,
  deviceTodayCount: 0,
  deviceMessageTodayCount: 0,
  deviceOnlineCount: 0,
  deviceOfflineCount: 0,
  deviceInactiveCount: 0,
  productCategoryDeviceCounts: {}
})

const device = ref({
  total: undefined,
  today: undefined
})
const maintain = ref({
  total: undefined,
  today: undefined
})
const work = ref({
  total: undefined,
  today: undefined
})
const inspect = ref({
  total: undefined,
  today: undefined
})

const status = ref({
  finished: 0,
  todo: 0
})
const todayStatus = ref({
  finished: 0,
  todo: 0
})
const typeData = ref({})
const materialData = ref({})
const orderSevenData = ref({})
const safe = ref()

// 新增：修井完成情况数据
const repairWellData = ref({
  xAxis: ['小修10队', '小修8队', '小修9队'],
  series: [
    { name: '日累完成井数', data: [10, 15, 20] },
    { name: '月累完成井数', data: [50, 60, 70] },
    { name: '年累完成井数', data: [200, 220, 250] }
  ]
})

// 新增：钻井完成情况数据
const drillingWellData = ref({})
const drillingWorkloadData = ref({})

// 新增：修井工作量情况数据
const repairWorkloadData = ref({})
const repairWellChartRef = ref()
const drillingWellChartRef = ref()

const inspectZjxjCount = ref<any>({})

/** 获取统计数据 */
const getStats = () => {
  // 获取基础统计数据
  IotStatApi.getDeviceCount('ry').then((res) => {
    device.value = res
  })
  IotStatApi.getMaintainCount('ry').then((res) => {
    maintain.value = res
  })
  IotStatApi.getMainWorkCount().then((res) => {
    work.value = res
  })
  IotStatApi.getInspectCount().then((res) => {
    inspect.value = res
  })
  IotStatApi.getMaintenanceStatus('ry').then((res) => {
    status.value = res
    // initCharts()
  })
  // IotStatApi.getMaintenanceTodayStatus().then((res) => {
  //   todayStatus.value = res
  // })

  IotStatApi.getDeviceStatusCount('ry').then((res) => {
    typeData.value = res
    initDeviceStatusCharts()
  })
  IotStatApi.getSafeCount().then((res) => {
    safe.value = res
  })
  // IotStatApi.getMaterial().then((res) => {
  //   materialData.value = res
  //   initMaterials()
  // })

  IotStatApi.getOrderSeven('ry').then((res) => {
    orderSevenData.value = res
    initQxChart()
  })

  IotStatApi.getMaintenanceStatus('ry').then((res) => {
    by.value = res
  })

  IotStatApi.getRepairRigWork('repair').then((res) => {
    repairWorkloadData.value = res
    initRepairWorkloadChart(res)
  })
  IotStatApi.getRepairRigWork('rig').then((res) => {
    drillingWorkloadData.value = res
    initDrillingWorkloadChart(res)
  })
  IotStatApi.getRigFinished().then((res) => {
    debugger
    drillingWellData.value = res
    initDrillingWellChart(res)
  })
  const fillQueryParams = reactive({
    startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
    endTime: Date.now(), // 设置默认结束时间为当前时间
    createTime: [],
    deptId: null, // 选中的部门ID
    status: null // 填写状态
  })
  IotStatApi.getInspectStatuss(fillQueryParams, 'ry').then((res) => {
    inspectt.value = res
  })

  IotStatApi.getInspectZjxjCount().then((res) => {
    inspectZjxjCount.value = res

    console.log('inspectZjxjCount.value :>> ', inspectZjxjCount.value)
  })
  fillQueryParams.deptId = '158'
  IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
    fill.value = res.totalList[0] || []
  })
  // IotStatApi.getProject('ry').then((res) => {
  //   typeData.value = res;
  //   initProjectCharts()
  // })

  // 计算近一周时间
  const end = new Date()
  const start = new Date()
  start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000)

  // 格式化日期为后端需要的格式
  const formatDate = (date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }

  rateQueryParams.createTime = [formatDate(start), formatDate(end)]
  IotStatApi.getRyRate(rateQueryParams).then((res) => {
    materialTableData.value = res
  })
}

const initDrillingWorkloadChart = (res) => {
  if (!drillingWorkloadChartRef.value) return
  const chart = echarts.init(drillingWorkloadChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: res.series.map((item) => item.name),
      textStyle: {
        color: '#B6C8DA'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: res.xAxis,
      axisLabel: {
        color: '#B6C8DA'
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '进尺（米）',
      axisLabel: {
        color: '#B6C8DA'
      },
      splitLine: {
        show: true, // 显示水平网格线（默认显示）
        lineStyle: {
          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
          color: '#457794', // 浅灰色半透明
          // 可选：设置线条类型（实线/虚线/点线）
          type: 'dashed'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    series: res.series.map((item) => ({
      name: item.name,
      type: 'bar',
      data: item.data
    }))
  }
  chart.setOption(option)
}

// 新增：初始化修井工作量情况图表
const initRepairWorkloadChart = (res) => {
  if (!repairWorkloadChartRef.value) return
  const chart = echarts.init(repairWorkloadChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: res.series.map((item) => item.name),
      textStyle: {
        color: '#B6C8DA'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: res.xAxis,
      axisLabel: {
        color: '#B6C8DA'
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '完井数（个）',
      axisLabel: {
        color: '#B6C8DA'
      },
      splitLine: {
        show: true, // 显示水平网格线（默认显示）
        lineStyle: {
          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
          color: '#457794', // 浅灰色半透明
          // 可选：设置线条类型（实线/虚线/点线）
          type: 'dashed'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    series: res.series.map((item) => ({
      name: item.name,
      type: 'bar',
      data: item.data
    }))
  }
  chart.setOption(option)
}

/** 初始化图表 */
const initDeviceStatusCharts = () => {
  // 设备数量统计
  echarts.init(statusChartRef.value).setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal', // 水平排列图例项
      bottom: '0%', // 放置在底部
      icon: 'circle',
      textStyle: {
        color: '#B6C8DA'
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        center: ['50%', '46%'],
        label: {
          show: false,
          position: 'outside',
          color: 'white'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: typeData.value
      }
    ]
  })
}

// 自适应调整
const handleResize = () => {
  topInstance?.resize()
}

const topContainer = ref(null)
let topInstance = null
// 响应式容器尺寸
const { width, height } = useElementSize(topContainer)

// 处理数据（排序+限制5条）
const processedData = () => {
  const data = IotStatApi.getDeviceTypeCount()
  backendData.value = data
  return [...backendData.value].sort((a, b) => a.value - b.value)
}

const fetchTop = () => {
  IotStatApi.getDeviceTypeCount().then((res) => {
    backendData.value = res
  })
}

watch(
  backendData,
  () => {
    updateTopChart()
  },
  { deep: true }
)

// 初始化图表配置
const getTopOption = () => {
  // backendData.value = data
  const data = backendData.value.sort((a, b) => a.value - b.value)
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: (params) => {
        const item = params[0]
        return `${item.name}<br/>${item.marker} ${item.value.toLocaleString()}`
      }
    },
    grid: {
      height: '200px',
      left: '6%',
      right: '6%',
      bottom: '18%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#B6C8DA',
        formatter: (value) => {
          if (value >= 10000) return `${(value / 10000).toFixed(1)}万`
          return value.toLocaleString()
        }
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA' // X轴线白色半透明
        }
      },
      splitLine: {
        show: true, // 显示水平网格线（默认显示）
        lineStyle: {
          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
          color: '#457794', // 浅灰色半透明
          // 可选：设置线条类型（实线/虚线/点线）
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: data.map((item) => item.category),
      axisTick: { show: false },
      axisLabel: { color: '#B6C8DA' },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA' // X轴线白色半透明
        }
      }
    },
    series: [
      {
        type: 'bar',
        data: data.map((item) => item.value),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.7, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ]),
          borderRadius: [0, 8, 8, 0]
        },
        label: {
          show: true,
          position: 'right',
          formatter: '{@value}',
          color: '#B6C8DA',
          fontWeight: 'bold'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

// // 初始化图表
// const initTopChart = async () => {
//   await IotStatApi.getDeviceTypeCount('ry').then((res) => {
//     backendData.value = res
//   })
//   if (!topContainer.value) return
//   topInstance = echarts.init(topContainer.value)
//   updateTopChart()
// }
//
// // 更新图表
// const updateTopChart = () => {
//   if (!topInstance) return
//   topInstance.setOption(getTopOption())
// }

const initProjectCharts = () => {
  const chart = echarts.init(topContainer.value)
  chart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      // top: '5%',
      // right: '10%',
      // align: 'center',
      orient: 'horizontal', // 水平排列图例项
      bottom: '0%', // 放置在底部
      icon: 'circle',
      textStyle: {
        color: '#B6C8DA'
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['0%', '70%'],
        avoidLabelOverlap: false,
        center: ['50%', '45%'],
        label: {
          show: false,
          position: 'outside',
          color: '#B6C8DA'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: typeData.value
      }
    ]
  })
}

// 自适应调整
watch([width, height], () => {
  topInstance?.resize()
})
const activeDom = ref(null)
let activeInstance = null

const activeData = ref([])
const initActiveChart = async () => {
  if (!activeDom.value) return
  activeData.value = await IotStatApi.getDeptCount()
  activeInstance = echarts.init(activeDom.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: (params) => `
        ${params[0].name}<br/>
        ${params[0].marker} 总人数: ${params[0].value}<br/>
        ${params[1].marker} 活跃人数: ${params[1].value}
      `
    },
    legend: {
      data: ['总人数', '活跃人数'],
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: activeData.value.map((item) => item.department),
      axisLabel: {
        interval: 0,
        rotate: 0
      }
    },
    yAxis: {
      type: 'value',
      name: '人数',
      splitLine: {
        show: true,
        lineStyle: { type: 'dashed' }
      }
    },
    series: [
      {
        name: '总人数',
        type: 'bar',
        data: activeData.value.map((item) => item.total),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#5470c6' },
            { offset: 1, color: '#83bff6' }
          ])
        },
        barWidth: 30
      },
      {
        name: '活跃人数',
        type: 'bar',
        data: activeData.value.map((item) => item.active),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#91cc75' },
            { offset: 1, color: '#e6f4d2' }
          ])
        },
        barWidth: 30
      }
    ]
  }

  activeInstance.setOption(option)
}

const qxRef = ref(null)
let qxInstance = null

// 生成近12个月份 (包含当年和去年)
const generateMonths = () => {
  const months = []
  const date = new Date()
  date.setMonth(date.getMonth() + 1, 1) // 从下个月开始倒推

  for (let i = 0; i < 12; i++) {
    date.setMonth(date.getMonth() - 1)
    months.push(`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`)
  }
  return months.reverse()
}

const initQxChart = () => {
  if (!qxRef.value) return
  qxInstance = echarts.init(qxRef.value)
  debugger
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: orderSevenData.value.series.map((item) => item.name),
      top: 30,
      textStyle: {
        color: '#B6C8DA'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: orderSevenData.value.xAxis,
      axisLabel: {
        color: '#B6C8DA',
        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#B6C8DA',
          formatter: '{value}'
        },
        splitLine: {
          show: true, // 显示水平网格线（默认显示）
          lineStyle: {
            // 水平网格线颜色（可设置为纯色或带透明度的颜色）
            color: '#457794', // 浅灰色半透明
            // 可选：设置线条类型（实线/虚线/点线）
            type: 'dashed'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#B6C8DA'
          }
        },
        position: 'left' // 左侧 Y 轴
      },
      {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        },
        axisLine: {
          lineStyle: {
            color: '#B6C8DA'
          }
        },
        position: 'right', // 右侧 Y 轴
        splitLine: {
          show: false // 隐藏右侧 Y 轴的分割线
        }
      }
    ],
    series: orderSevenData.value.series.map((item, index) => {
      // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
      const yAxisIndex = index < 2 ? 0 : 1
      return {
        name: item.name,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: ['#5470c6', '#f1d209', '#e14f0f', '#91cc75'][index]
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84,112,198,0.4)' },
            { offset: 1, color: 'rgba(84,112,198,0.1)' }
          ])
        },
        data: item.data,
        yAxisIndex: yAxisIndex // 指定使用的 Y 轴
      }
    })
  }

  qxInstance.setOption(option)
}

// 响应式调整
const resizeQxChart = () => qxInstance?.resize()

// 新增：初始化修井完成情况图表
const initRepairWellChart = () => {
  if (!repairWellChartRef.value) return
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: repairWellData.value.series.map((item) => item.name),
      top: 10,
      textStyle: {
        color: '#B6C8DA'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: repairWellData.value.xAxis,
      axisLabel: {
        color: '#B6C8DA'
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '完成井数(口)',
      axisLabel: {
        color: '#B6C8DA',
        formatter: '{value}'
      },
      splitLine: {
        show: true, // 显示水平网格线（默认显示）
        lineStyle: {
          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
          color: '#457794', // 浅灰色半透明
          // 可选：设置线条类型（实线/虚线/点线）
          type: 'dashed'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    series: repairWellData.value.series.map((item) => ({
      name: item.name,
      type: 'bar',
      data: item.data
    }))
  }
  const chart = echarts.init(repairWellChartRef.value)
  chart.setOption(option)
  window.addEventListener('resize', () => chart.resize())
}

// 新增：初始化钻井完成情况图表
const initDrillingWellChart = (res) => {
  if (!drillingWellChartRef.value) return
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: res.series.map((item) => item.name),
      top: 10,
      textStyle: {
        color: '#B6C8DA'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: res.xAxis,
      axisLabel: {
        color: '#B6C8DA',
        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '完成井数(口)',
      axisLabel: {
        color: '#B6C8DA',
        formatter: '{value}'
      },
      splitLine: {
        show: true, // 显示水平网格线（默认显示）
        lineStyle: {
          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
          color: '#457794', // 浅灰色半透明
          // 可选：设置线条类型（实线/虚线/点线）
          type: 'dashed'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#B6C8DA'
        }
      }
    },
    series: res.series.map((item) => ({
      name: item.name,
      type: 'bar',
      data: item.data
    }))
  }
  const chart = echarts.init(drillingWellChartRef.value)
  chart.setOption(option)
  window.addEventListener('resize', () => chart.resize())
}

/** 初始化 */
onMounted(() => {
  getStats()
  // initChart()
  // initTopChart()
  // initActiveChart()
  // initQxChart()
  window.addEventListener('resize', resizeQxChart)
  // fetchTop()
  window.addEventListener('resize', () => topInstance?.resize())
  initRepairWellChart()
  // initDrillingWellChart()
  //initDrillingWorkloadChart()
  //initRepairWorkloadChart()
})

onBeforeUnmount(() => {
  // chartInstance?.dispose()
  // window.removeEventListener('resize', () => chartInstance?.resize())
  // topInstance?.dispose()
  // window.removeEventListener('resize', handleResize)
  // qxInstance?.dispose()
  // window.removeEventListener('resize', resizeQxChart)
  // repairWellChartRef.dispose()
  // window.removeEventListener('resize', () =>
  //   echarts.getInstanceByDom(repairWellChartRef.value)?.resize()
  // )
  // echarts.getInstanceByDom(drillingWellChartRef.value)?.dispose()
  // window.removeEventListener('resize', () =>
  //   echarts.getInstanceByDom(drillingWellChartRef.value)?.resize()
  // )
})
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #3a6fa3;
  min-height: 100vh;
  padding: 20px;
}

.summary {
  margin-bottom: 20px;
}

::v-deep .chart-card {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  border: none;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}

.safety-days-card {
  .safety-days-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    position: relative;

    .days-number {
      font-size: 58px;
      font-weight: bold;
      color: darkorange;
      line-height: 1;
      transition: all 0.3s ease;
    }

    .days-number:hover {
      transform: scale(1.05);
    }

    .days-label {
      font-size: 20px;
      color: white;
      margin-top: 8px;
    }

    .safety-desc {
      font-size: 14px;
      color: #999;
      position: absolute;
      bottom: 10px;
      text-align: center;
      width: 90%;
    }
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 10px;
  }
}
::v-deep .el-card__header {
  border-bottom: none !important;
  padding-bottom: 0;
}

.table-container {
  padding: 16px;
  height: 320px;
  box-sizing: border-box;
  overflow: auto;

  // 滚动条样式优化
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

// 修复表格hover样式
::v-deep .el-table__row:hover > td {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.custom-scroll-dialog {
  /* 可选：限制对话框整体最大高度（避免超出屏幕） */
  max-height: 90vh;
  overflow: hidden; /* 隐藏整体溢出，避免出现双重滚动条 */
}
/* 滚动内容容器：核心样式 */
.dialog-scroll-content {
  max-height: 60vh; /* 固定最大高度（可根据需求调整，如500px） */
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
  padding-right: 8px; /* 避免滚动条遮挡内容（可选） */
}

/* 优化滚动条样式（可选，提升UI体验） */
.dialog-scroll-content::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}
.dialog-scroll-content::-webkit-scrollbar-thumb {
  background-color: #e5e7eb; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滚动条圆角 */
}
.dialog-scroll-content::-webkit-scrollbar-thumb:hover {
  background-color: #d1d5db; /*  hover时滑块颜色 */
}
.custom-table :deep .el-table__row {
  height: 45px !important; /* 高度根据需求调整 */
}
</style>
