<template>
  <div class="dashboard">
    <!-- <div class="header">
      <h1 class="header__title">工厂设备管理系统</h1>
      <div class="header__user-info">
        <div class="header__user-avatar">管</div>
        <span class="header__user-name">设备管理员</span>
      </div>
    </div> -->
    <div style="margin-bottom: 15px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <ContentWrap>
        <el-form class="-mb-15px" :inline="true" label-width="68px">
          <el-form-item label="切换公司" class="w-360px">
            <el-select
              v-model="currentCompanyId"
              style="width: 100%"
              @change="changeCompanyOptions"
            >
              <el-option
                v-for="item in companyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </ContentWrap>
    </div>
    <!-- 任务看板 -->
    <div class="task-section">
      <task-card title="我发起的" :count="myTasksCount" :tasks="myTasksList" />
      <task-card title="待我处理" :count="pendingTasksCount" :tasks="pendingTasksList" />
      <task-card title="抄送我的" :count="ccTasksCount" :tasks="ccTasksList" />
    </div>

    <!-- 统计指标 -->
    <div class="stats-section">
      <stats-card
        title="设备概况"
        :total="deviceTotal"
        :items="[
          { label: '故障设备', value: deviceFault },
          { label: '保养设备', value: deviceMaintenance },
          { label: '巡检设备', value: deviceInspection }
        ]"
      />
      <stats-card
        title="维修工单"
        :total="repairTotal"
        :items="[
          { label: '进行中', value: repairProcessing },
          { label: '已完成', value: repairCompleted }
        ]"
      />
      <stats-card
        title="保养任务"
        :total="maintenanceTotal"
        :items="[
          { label: '保养中', value: maintenanceProcessing },
          { label: '已完成', value: maintenanceCompleted }
        ]"
      />
      <stats-card
        title="巡检任务"
        :total="inspectionTotal"
        :items="[
          { label: '巡检中', value: inspectionProcessing },
          { label: '已完成', value: inspectionCompleted }
        ]"
      />
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <chart-card
        title="设备统计趋势"
        chart-id="deviceChart"
        :options="deviceChartOptions"
        @period-change="handleDevicePeriodChange"
      />
      <chart-card
        title="维修工单趋势"
        chart-id="repairChart"
        :options="repairChartOptions"
        @period-change="handleRepairPeriodChange"
      />
      <chart-card
        title="保养任务趋势"
        chart-id="maintenanceChart"
        :options="maintenanceChartOptions"
        @period-change="handleMaintenancePeriodChange"
      />
      <chart-card
        title="巡检任务趋势"
        chart-id="inspectionChart"
        :options="inspectionChartOptions"
        @period-change="handleInspectionPeriodChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as deviceHomeApi from '@/api/device/home'
import * as hrHomeApi from '@/api/hr/home'
import TaskCard from './components/TaskCard.vue'
import StatsCard from './components/StatsCard.vue'
import ChartCard from './components/ChartCard.vue'

const currentCompanyId = ref()
const companyOptions = ref([])
const getCompanyData = async () => {
  const data = await hrHomeApi.getCompany()
  const arr = data.filter((item) => {
    return item.code != 'top'
  })
  companyOptions.value = arr
  if (arr && arr.length > 0) {
    currentCompanyId.value = arr[0].id
  }
  init()
}
getCompanyData()

const changeCompanyOptions = async (val) => {
  init()
}

const init = async () => {
  //我的发起
  getLaunchCount()
  //待我处理
  getMyTodoCount()
  //抄送我的
  getMyCarbonCount()
  //设备首页接口
  getDeviceInfoHome()
  //设备统计趋势数据
  getDeviceInfoHomeTrend({ query: 1 })
  //设备首页维修工单趋势数据
  getDeviceInfoHomeTicket({ query: 1 })
  //设备首页保养任务趋势数据
  getDeviceInfoHomeTask({ query: 1 })
  //设备首页巡检任务趋势
  getDeviceInfoHomeInspectionTask({ query: 1 })
}
// 任务数据
const myTasksCount = ref(3)
const myTasksList = ref([
  { name: '设备A维修申请', desc: '设备A出现异常噪音', status: 'pending' },
  { name: '设备B保养计划', desc: '季度保养计划', status: 'processing' },
  { name: '设备C巡检报告', desc: '月度巡检报告', status: 'completed' }
])

const pendingTasksCount = ref(2)
const pendingTasksList = ref([
  { name: '设备D故障处理', desc: '设备D停机需紧急维修', status: 'pending' },
  { name: '设备E保养审核', desc: '年度保养计划审核', status: 'pending' }
])

const ccTasksCount = ref(2)
const ccTasksList = ref([
  { name: '设备F维修完成', desc: '维修工单已完成', status: 'completed' },
  { name: '设备G巡检通知', desc: '巡检计划已发布', status: 'processing' }
])

// 统计数据
const deviceTotal = ref(156)
const deviceFault = ref(12)
const deviceMaintenance = ref(45)
const deviceInspection = ref(89)

const repairTotal = ref(28)
const repairProcessing = ref(8)
const repairCompleted = ref(20)

const maintenanceTotal = ref(45)
const maintenanceProcessing = ref(15)
const maintenanceCompleted = ref(30)

const inspectionTotal = ref(89)
const inspectionProcessing = ref(22)
const inspectionCompleted = ref(67)

// 图表配置
const deviceChartOptions = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['正常设备', '故障设备', '保养设备', '巡检设备'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
  },
  yAxis: { type: 'value' },
  series: [
    { name: '正常设备', type: 'line', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '故障设备', type: 'line', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '保养设备', type: 'line', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '巡检设备', type: 'line', data: [0, 0, 0, 0, 0, 0, 0] }
  ]
})

const repairChartOptions = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['处理工单数', '进行中工单', '已完成工单'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
  yAxis: { type: 'value' },
  series: [
    { name: '处理工单数', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '进行中工单', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '已完成工单', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] }
  ]
})

const maintenanceChartOptions = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['保养任务数', '保养中任务', '已完成任务'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
  yAxis: { type: 'value' },
  series: [
    { name: '保养任务数', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '保养中任务', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '已完成任务', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] }
  ]
})

const inspectionChartOptions = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['巡检任务数', '巡检中任务', '已完成任务'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
  yAxis: { type: 'value' },
  series: [
    { name: '巡检任务数', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '巡检中任务', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] },
    { name: '已完成任务', type: 'bar', data: [0, 0, 0, 0, 0, 0, 0] }
  ]
})

//我发起的
const getLaunchCount = async () => {
  try {
    //设备巡检 deviceInspectionTotal  //设备保养 deviceMaintenanceTotal //维修工单  deviceRepairTotal
    const obj = {
      deptId: currentCompanyId.value
    }
    const data = await deviceHomeApi.getLaunchCount(obj)
    myTasksCount.value =
      (data.deviceInspectionTotal || 0) +
      (data.deviceMaintenanceTotal || 0) +
      (data.deviceRepairTotal || 0)
    myTasksList.value = [
      { name: '设备巡检', desc: '设备巡检', total: data.deviceInspectionTotal },
      { name: '设备保养', desc: '设备保养', total: data.deviceMaintenanceTotal },
      { name: '维修工单', desc: '维修工单', total: data.deviceRepairTotal }
    ]
  } finally {
  }
}
// getLaunchCount()

//待我处理
const getMyTodoCount = async () => {
  try {
    const obj = {
      deptId: currentCompanyId.value
    }
    const data = await deviceHomeApi.getMyTodoCount(obj)
    pendingTasksCount.value =
      (data.deviceInspectionTodo || 0) +
      (data.deviceMaintenanceTodo || 0) +
      (data.deviceRepairTodo || 0)
    pendingTasksList.value = [
      { name: '设备巡检', desc: '设备巡检', total: data.deviceInspectionTodo },
      { name: '设备保养', desc: '设备保养', total: data.deviceMaintenanceTodo },
      { name: '维修工单', desc: '维修工单', total: data.deviceRepairTodo }
    ]
  } finally {
  }
}
// getMyTodoCount()

//抄送我的
const getMyCarbonCount = async () => {
  try {
    const obj = {
      deptId: currentCompanyId.value
    }
    const data = await deviceHomeApi.getMyCarbonCount(obj)
    ccTasksCount.value =
      (data.deviceInspectionCarbon || 0) +
      (data.deviceMaintenanceCarbon || 0) +
      (data.deviceRepairCarbon || 0)
    ccTasksList.value = [
      { name: '设备巡检', desc: '设备巡检', total: data.deviceInspectionCarbon },
      { name: '设备保养', desc: '设备保养', total: data.deviceMaintenanceCarbon },
      { name: '维修工单', desc: '维修工单', total: data.deviceRepairCarbon }
    ]
  } finally {
  }
}
// getMyCarbonCount()

//设备首页接口
const getDeviceInfoHome = async () => {
  try {
    const obj = {
      deptId: currentCompanyId.value
    }
    const data = await deviceHomeApi.getDeviceInfoHome(obj)

    deviceTotal.value = data.deviceOverview.total
    deviceFault.value = data.deviceOverview.malfunction
    deviceMaintenance.value = data.deviceOverview.maintenance
    deviceInspection.value = data.deviceOverview.inspection

    repairTotal.value = data.repairOrder.inProgress + data.repairOrder.completed
    repairProcessing.value = data.repairOrder.inProgress
    repairCompleted.value = data.repairOrder.completed

    maintenanceTotal.value =
      data.maintenanceTask.maintenanceCompleted + data.maintenanceTask.underMaintenance
    maintenanceCompleted.value = data.maintenanceTask.maintenanceCompleted
    maintenanceProcessing.value = data.maintenanceTask.underMaintenance

    inspectionTotal.value = data.inspectionTask.inspectionCompleted + data.inspectionTask.onPatrol
    inspectionCompleted.value = data.inspectionTask.inspectionCompleted
    inspectionProcessing.value = data.inspectionTask.onPatrol
  } finally {
  }
}
getDeviceInfoHome()

//设备统计趋势数据
const getDeviceInfoHomeTrend = async (params) => {
  try {
    const obj = {
      deptId: currentCompanyId.value,
      ...params
    }
    let data = await deviceHomeApi.getDeviceInfoHomeTrend(obj)
    // let data = {
    //   xData: [
    //     '11-01',
    //     '11-02',
    //     '11-03',
    //     '11-04',
    //     '11-05',
    //     '11-06',
    //     '11-07',
    //     '11-08',
    //     '11-09',
    //     '11-10',
    //     '11-11',
    //     '11-12',
    //     '11-13',
    //     '11-14',
    //     '11-15',
    //     '11-16',
    //     '11-17',
    //     '11-18',
    //     '11-19',
    //     '11-20',
    //     '11-21',
    //     '11-22',
    //     '11-23',
    //     '11-24',
    //     '11-25',
    //     '11-26',
    //     '11-27',
    //     '11-28',
    //     '11-29',
    //     '11-30'
    //   ],
    //   yData: [
    //     {
    //       data: [
    //         17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17,
    //         17, 17, 17, 17, 17, 17, 17, 17
    //       ],
    //       name: '正常设备',
    //       type: 'line'
    //     },
    //     {
    //       data: [
    //         2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2
    //       ],
    //       name: '故障设备',
    //       type: 'line'
    //     },
    //     {
    //       data: [
    //         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    //       ],
    //       name: '保养设备',
    //       type: 'line'
    //     },
    //     {
    //       data: [
    //         2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2
    //       ],
    //       name: '巡检设备',
    //       type: 'line'
    //     }
    //   ]
    // }
    // console.log(data)
    deviceChartOptions.value.xAxis.data = data.xData
    deviceChartOptions.value.series = data.yData
    const arr = data.yData.map((item) => {
      return item.name
    })
    // deviceChartOptions.value.legend.data = arr
    // console.log('deviceChartOptions.value', deviceChartOptions.value)
  } finally {
  }
}
// getDeviceInfoHomeTrend({ query: 1 })

// 周期切换处理
const handleDevicePeriodChange = (period) => {
  console.log('设备统计周期切换:', period)
  let query = 1
  if (period == '日') query = 1
  if (period == '月') query = 2
  if (period == '年') query = 3
  getDeviceInfoHomeTrend({ query })
  // 这里可以添加更新图表的逻辑
}

//设备首页维修工单趋势数据
const getDeviceInfoHomeTicket = async (params) => {
  try {
    const obj = {
      deptId: currentCompanyId.value,
      ...params
    }
    const data = await deviceHomeApi.getDeviceInfoHomeTicket(obj)
    console.log(data)
    repairChartOptions.value.xAxis.data = data.xData
    repairChartOptions.value.series = data.yData
    const arr = data.yData.map((item) => {
      return item.name
    })
    // repairChartOptions.value.legend.data = arr
  } finally {
  }
}
// getDeviceInfoHomeTicket({ query: 1 })

const handleRepairPeriodChange = (period) => {
  console.log('维修工单周期切换:', period)
  // 这里可以添加更新图表的逻辑
  let query = 1
  if (period == '日') query = 1
  if (period == '月') query = 2
  if (period == '年') query = 3
  getDeviceInfoHomeTicket({ query })
}

//设备首页保养任务趋势数据
const getDeviceInfoHomeTask = async (params) => {
  try {
    const obj = {
      deptId: currentCompanyId.value,
      ...params
    }
    const data = await deviceHomeApi.getDeviceInfoHomeTask(obj)
    console.log(data)
    maintenanceChartOptions.value.xAxis.data = data.xData
    maintenanceChartOptions.value.series = data.yData
    const arr = data.yData.map((item) => {
      return item.name
    })
    // maintenanceChartOptions.value.legend.data = arr
  } finally {
  }
}
// getDeviceInfoHomeTask({ query: 1 })

const handleMaintenancePeriodChange = (period) => {
  console.log('保养任务周期切换:', period)
  // 这里可以添加更新图表的逻辑
  let query = 1
  if (period == '日') query = 1
  if (period == '月') query = 2
  if (period == '年') query = 3
  getDeviceInfoHomeTask({ query })
}

//设备首页巡检任务趋势
const getDeviceInfoHomeInspectionTask = async (params) => {
  try {
    const obj = {
      deptId: currentCompanyId.value,
      ...params
    }
    const data = await deviceHomeApi.getDeviceInfoHomeInspectionTask(obj)
    console.log(data)
    inspectionChartOptions.value.xAxis.data = data.xData
    inspectionChartOptions.value.series = data.yData
    const arr = data.yData.map((item) => {
      return item.name
    })
    // inspectionChartOptions.value.legend.data = arr
  } finally {
  }
}
// getDeviceInfoHomeInspectionTask({ query: 1 })

const handleInspectionPeriodChange = (period) => {
  console.log('巡检任务周期切换:', period)
  // 这里可以添加更新图表的逻辑
  let query = 1
  if (period == '日') query = 1
  if (period == '月') query = 2
  if (period == '年') query = 3
  getDeviceInfoHomeInspectionTask({ query })
}
</script>

<style lang="less" scoped>
// * {
//   margin: 0;
//   padding: 0;
//   box-sizing: border-box;
//   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
// }

// body {
//   background-color: #f5f7fa;
//   color: #303133;
//   padding: 20px;
// }

.dashboard {
  // max-width: 1400px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;

  &__title {
    font-size: 24px;
    font-weight: 500;
    color: #303133;
  }

  &__user-info {
    display: flex;
    align-items: center;
  }

  &__user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 10px;
  }

  &__user-name {
    font-size: 14px;
  }
}

.task-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

.charts-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
</style>
