<template>
  <div>
    <el-container class="is-vertical fullheight">
      <el-container style="overflow-x: hidden; overflow-y: hidden">
        <div class="home-page">
          <div class="home-left">
            <div class="home-left-header cardBox">
              <div class="home-left-header-contain cardBox">
                <div class="otherTools flex">
                  <img
                    alt=""
                    class="icon-style"
                    src="@/assets/img/homePage/kuaijie.png"
                  />
                  <div class="home-title-style">快捷功能</div>
                </div>
                <div class="other-body-container">
                  <div class="otherBody cursor" @click="navigateToEventRegistrationa">
                    <img alt="" class="other-img" src="@/assets/img/homePage/car.png" />
                    <div class="other-text">巡查任务</div>
                  </div>
                  <div class="otherBody cursor" @click="navigateToEventRegistrationb">
                    <img alt="" class="other-img" src="@/assets/img/homePage/shijian.png" />
                    <div class="other-text">事件登记</div>
                  </div>
                  <div class="otherBody cursor" @click="navigateToEventRegistrationc">
                    <img alt="" class="other-img" src="@/assets/img/homePage/jiuyuan.png">
                    <div class="other-text">救援登记</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="home-left-footer cardBox">
              <div class="home-left-footer-header">
                <div class="flex">
                  <img
                    alt=""
                    class="icon-style"
                    src="@/assets/img/homePage/now.png"
                  />
                  <div class="home-title-style">当前任务</div>
                </div>
              </div>
              <div :style="{ backgroundImage: `url(${backgroundImageUrl})` }" class="home-god">
                <!-- 巡查任务 -->
                <div
                  :style="{ borderRight: '1px solid rgba(255, 255, 255, 0.2)', height: '30px' }"
                  class="task-container flex cursor"
                  @click="taskChange(0)"
                >
                  <div>
                    <div :class="currentType === 1?'task-value task-active':'task-value'" style="color: #ffffff">
                      {{ taskListother.xcNum || 0 }}
                    </div>
                    <div :class="currentType === 1?'task-title task-active':'task-title'">巡查任务(件)</div>
                  </div>
                </div>
                <!-- 事件处置任务 -->
                <div
                  :style="{ borderRight: '1px solid rgba(255, 255, 255, 0.2)', height: '30px' }"
                  class="task-container flex cursor"
                  @click="taskChange(1)"
                >
                  <div>
                    <div :class="currentType === 2?'task-value task-active':'task-value'" style="color: #ffffff">
                      {{ taskListother.sjNum || 0 }}
                    </div>
                    <div :class="currentType === 2?'task-title task-active':'task-title'">事件处置任务(件)</div>
                  </div>
                </div>

                <!-- 救援任务 -->
                <div
                  :style="{ borderRight: 'none', height: '30px' }"
                  class="task-container flex cursor"
                  @click="taskChange(2)"
                >
                  <div>
                    <div :class="currentType === 3?'task-value task-active':'task-value'" style="color: #ffffff">
                      {{ taskListother.jyNum || 0 }}
                    </div>
                    <div :class="currentType === 3?'task-title task-active':'task-title'">救援任务(件)</div>
                  </div>
                </div>
              </div>
              <div class="home-good-list">
                <div v-if="taskListotheraaa.length > 0">
                  <div v-for="(task, index) in taskListotheraaa" :key="index" class="task-list">
                    <div v-if="currentType === 1" class="xun-list-style">
                      <div class="xun-name">{{ task.roadName }} / {{ task.startPatrolName }} 至 {{ task.endPatrolName
                        }}
                      </div>
                      <div class="flex-between">
                        <div class="flex">
                          <div class="xun-type">{{ dictionaryEscape('xjlx-xjrw', task.planType) }}</div>
                          <div :style="{color: statusStyle(task.taskStatus),borderColor: statusStyle(task.taskStatus)}"
                               class="xun-status">
                            {{ dictionaryEscape('xc_zt', String(task.taskStatus)) }}
                          </div>
                        </div>
                        <div class="task-time">{{ getTaskTime(task) }}</div>
                      </div>
                    </div>
                    <div v-if="currentType === 2" class="xun-list-style">
                      <div class="xun-name">事件单号：{{ task.eventNo }}</div>
                      <div class="xun-name">{{ task.roadName }} / {{ task.eventName }}</div>
                      <div class="flex-between">
                        <div class="flex">
                          <div class="xun-type">{{ dictionaryEscape('sjdj', String(task.eventLevel)) }}</div>
                          <div class="xun-type" style="margin-left: 5px">
                            {{ dictionaryEscape('lx_sjlxxq', task.lwEventType) }}
                          </div>
                        </div>
                        <div class="task-time">{{ getTaskTime(task) }}</div>
                      </div>
                    </div>
                    <div v-if="currentType === 3" class="xun-list-style">
                      <div class="xun-name">事件单号：{{ task.rescueNo }}</div>
                      <div class="xun-name">{{ task.roadName }} / {{ dictionaryEscape('xsfx', String(task.direction)) }}
                        — {{ task.pegVal }}
                      </div>
                      <div class="flex-between">
                        <div class="flex">
                          <div class="xun-type">{{ dictionaryEscape('jylx', String(task.rescueType)) }}</div>
                        </div>
                        <div class="task-time">{{ getTaskTime(task) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="no-data">
                  暂无数据
                </div>
              </div>
              <pagination
                ref="paginationPanelAaa"
                layout="prev, pager, next,jumper"
                :pageResult="paginationAaa"
                class="el_pagination"
                style="margin: 5px 0;text-align: center;"
                @size-change="handleSizeChangeAaa"
                @current-change="handleCurrentChangeAaa"
              />
            </div>
          </div>
          <div class="home-right">
            <div class="home-right-left">
              <div class="home-right-left-center cardBox">
                <div class="task-header">
                  <div class="flex">
                    <img
                      alt=""
                      class="icon-style"
                      src="@/assets/img/homePage/sjcx.png"
                    />
                    <div class="home-title-style">事件查询</div>
                    <!--                    <div class="evenMoreing">更多</div>-->
                  </div>
                  <el-radio-group v-model="timeShow" size="small">
                    <el-radio-button label="day">日</el-radio-button>
                    <el-radio-button label="month">月</el-radio-button>
                    <el-radio-button label="year">年</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="task-manger">
                  <!-- 事件总数 -->
                  <div
                    :class="{ 'active': currentActiveIndex === 0 }"
                    :style="{ borderRight: '1px solid rgba(255, 255, 255, 0.2)', height: '30px' }"
                    class="task-container flex cursor"
                    @click="handleTaskClick(0)"
                  >
                    <div>
                      <div class="task-value">
                        {{ taskList.zsNum || 0 }}
                      </div>
                      <div class="task-title">事件总数(件)</div>
                    </div>
                  </div>
                  <!-- 待接单事件 -->
                  <div
                    :class="{ 'active': currentActiveIndex === 1 }"
                    :style="{ borderRight: 'none', height: '30px' }"
                    class="task-container flex cursor"
                    @click="handleTaskClick(1)"
                  >
                    <div>
                      <div class="task-value">
                        {{ taskList.djdNum || 0 }}
                      </div>
                      <div class="task-title">待接单事件(件)</div>
                    </div>
                  </div>

                  <!-- 处置中事件 -->
                  <div
                    :class="{ 'active': currentActiveIndex === 2 }"
                    :style="{ borderRight: 'none', height: '30px' }"
                    class="task-container flex cursor"
                    @click="handleTaskClick(2)"
                  >
                    <div>
                      <div class="task-value">
                        {{ taskList.czzNum || 0 }}
                      </div>
                      <div class="task-title">处置中事件(件)</div>
                    </div>
                  </div>
                  <!-- 处置结束事件-->
                  <div
                    :class="{ 'active': currentActiveIndex === 3 }"
                    :style="{ borderRight: 'none', height: '30px' }"
                    class="task-container flex cursor"
                    @click="handleTaskClick(3)"
                  >
                    <div>
                      <div class="task-value">
                        {{ taskList.czjsNum || 0 }}
                      </div>
                      <div class="task-title">处置结束事件(件)</div>
                    </div>
                  </div>
                  <!--   已办结事件 -->
                  <div
                    :class="{ 'active': currentActiveIndex === 4 }"
                    :style="{ borderRight: 'none', height: '30px' }"
                    class="task-container flex cursor"
                    @click="handleTaskClick(4)"
                  >
                    <div>
                      <div class="task-value">
                        {{ taskList.ybjNum || 0 }}
                      </div>
                      <div class="task-title">已办结事件(件)</div>
                    </div>
                  </div>
                </div>
                <div class="task-body">
                  <div v-if="taskListotherbbb.length > 0">
                    <div v-for="(task, index) in taskListotherbbb" :key="index" class="task-list">
                      <div class="flex">
                        <img alt="" class="task-icon" src="@/assets/img/homePage/abc.png" />
                        <div class="flex-right">
                          <div class="flex-between">
                            <div class="event-title">{{ task.eventNo }}</div>
                            <div class="event-time">{{ task.eventTime }}</div>
                          </div>
                          <div class="event-title">{{ task.roadName }} / {{ task.eventName }}</div>
                          <div :title="task.memo" class="event-memo">{{ task.memo }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-data">
                    暂无数据
                  </div>
                </div>
                <pagination
                  ref="paginationPanelBbb"
                  :pageResult="paginationBbb"
                  class="el_pagination"
                  style="margin-top: 10px"
                  @size-change="handleSizeChangeBbb"
                  @current-change="handleCurrentChangeBbb"
                />
              </div>

            </div>
            <div class="home-right-right">
              <div class="contain-center cardBox">
                <div class="home-footer-header">
                  <div class="flex">
                    <img
                      alt=""
                      class="icon-style"
                      src="@/assets/img/homePage/yichang.png"
                    />
                    <div class="home-title-style">异常信息</div>
                  </div>
                  <div class="flex andMore">
                    <div class="evenMore" @click="refreshAbnormalList"><i class="el-icon-refresh"></i></div>
                    <img
                      alt=""
                      class="arrow-style"
                      src=""
                    />
                  </div>
                </div>
                <div :style="{ backgroundImage: `url(${backgroundImageUrl})` }" class="contain-center-photo">
                  <!-- 总异常数(件) -->
                  <div
                    :style="{ borderRight: '1px solid rgba(255, 255, 255, 0.2)', height: '30px' }"
                    class="task-container flex cursor"
                    @click="change(0)"
                  >
                    <div>
                      <div :class="handleType === 0?'task-value activeError':'task-value'">
                        {{ taskListotherList.zsNum || 0 }}
                      </div>
                      <div :class="handleType === 0?'task-title activeError':'task-title'">总异常数(件)</div>
                    </div>
                  </div>

                  <!-- 已处置(件)-->
                  <div
                    :style="{ borderRight: '1px solid rgba(255, 255, 255, 0.2)', height: '30px' }"
                    class="task-container flex cursor"
                    @click="change(1)"
                  >
                    <div>
                      <div :class="handleType === 1?'task-value activeError':'task-value'">
                        {{ taskListotherList.wclNum || 0 }}
                      </div>
                      <div :class="handleType === 1?'task-title activeError':'task-title'">现场处理(件)</div>
                    </div>
                  </div>

                  <!-- 救援任务 -->
                  <div
                    :style="{ borderRight: 'none', height: '30px' }"
                    class="task-container flex cursor"
                    @click="change(2)"
                  >
                    <div>
                      <div :class="handleType === 2?'task-value activeError':'task-value'">
                        {{ taskListotherList.yclNum || 0 }}
                      </div>
                      <div :class="handleType === 2?'task-title activeError':'task-title'">上报中心(件)</div>
                    </div>
                  </div>
                </div>
                <div class="home-good-list">
                  <div v-if="taskListotherccc.length > 0">
                    <el-card v-for="(task, index) in taskListotherccc" :key="index" class="top-card" shadow="hover">
                      <div class="error-title">{{ task.roadName }} /
                        {{ dictionaryEscape('xsfx', String(task.direction)) }} - {{ task.pegVal }}
                      </div>
                      <div class="error-content">{{ task.inspectInfo }}</div>
                      <div class="error-flex">
                        <div class="error-left">
                          <div class="error-type">{{ dictionaryEscape('xcdwlb', String(task.category)) }}</div>
                          <div class="error-type">{{ dictionaryEscape('xcdwlx', task.type) }}</div>
                        </div>
                        <div class="error-right">{{ task.inspectTime }}</div>
                      </div>
                    </el-card>
                  </div>
                  <div v-else class="no-data">
                    暂无数据
                  </div>
                </div>
                <pagination
                  ref="paginationPanelCcc"
                  :pageResult="paginationCcc"
                  class="el_pagination"
                  style="margin-top: 5px;text-align: center"
                  @size-change="handleSizeChangeCcc"
                  @current-change="handleCurrentChangeCcc"
                />

              </div>
            </div>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>

</template>
<script>
import {dictionaryEscape} from '@/utils/dictionary'
import {
  getTree,
  tableDataa,
  tableDataaList,
  tableDatab,
  tableDatabList,
  tableDatac,
  tableDatacList
} from '@/api/patrolAndRescue/homePage'
import {TableMixin} from '@/mixins/tableMixin'
import pagination from '@/components/SuperPagination/index.vue'

export default {
  name: 'HomePage',
  components: {pagination},
  mixins: [TableMixin],
  computed: {
    statusStyle() {
      return (item) => {
        switch (item) {
          case 0:
            return '#909399'
          case 1:
            return '#409EFF'
          case 2:
            return '#E6A23C'
          case 3:
            return '#40e2ff'
          case 4:
            return '#67C23A'
          case 5:
            return '#F56C6C'
          default:
            return ''
        }
      }
    }
  },
  data() {
    return {
      pageResult: {
        typeof: Object,
        default: _ => ({
          page: 1,
          pageSize: 20,
          total: 0
        })
      },
      params: {
        pageBean: {pageSize: 10, page: 1, total: 0}
      },
      taskListotheraaa: [],//任务列表
      taskListotherbbb: [],//事件查询列表
      timeShow: 'day', // 默认选择“日”
      taskListotherccc: [],//异常信息列表
      paginationAaa: {pageSize: 10, page: 1, total: 0}, // taskListotheraaa 的分页参数
      paginationBbb: {pageSize: 10, page: 1, total: 0}, // taskListotherbbb 的分页参数
      paginationCcc: {pageSize: 10, page: 1, total: 0}, // taskListotherccc 的分页参数
      eventStatus: null, // 当前点击的事件状态-事件查询列表
      currentType: 1, // 默认类型为巡查任务
      backgroundImageUrl: require('@/assets/img/homePage/dang.png'),
      tableData: [],
      currentMenu: 'homePage',
      taskList: [],//事件查询
      taskListother: [],//当前任务
      taskListotherList: [],//异常信息
      currentActiveIndex: -1, // 新增变量，记录当前点击的索引
      orgList: [],
      currentStartTime: '', // 新增变量，存储当前开始时间
      currentEndTime: '', // 新增变量，存储当前结束时间
      handleType: 0
    }
  },
  created() {
    // 初始化默认选中“日”
    this.timeShow = 'day'
    // 获取当前日期
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从 0 开始，需要 +1
    const day = String(now.getDate()).padStart(2, '0')
    this.currentStartTime = `${year}-${month}-${day}`
    this.currentEndTime = this.currentStartTime

    // 默认点击“事件总数(件)”
    this.handleTaskClick(0) // 0 表示事件总数
    this.taskListotherData()
    this.taskListotherListData()
    this.taskListData(this.currentStartTime, this.currentEndTime)
    this.Listaaa()
    this.Listbbb(this.currentStartTime, this.currentEndTime)
    this.Listccc()
    this.getOrgTreeData()
  },
  watch: {
    // 监听 timeShow 的变化
    timeShow(newVal) {
      this.handleTimeChange(newVal) // 调用时间变化处理方法
    }
    // this.openPage()
  },
  mounted() {
    let currentUser = sessionStorage.getItem('currentUserDetail')
    this.name = JSON.parse(currentUser).user.fullname
    this.deptName = JSON.parse(currentUser).org[0].deptName
    this.orgName = JSON.parse(currentUser).org[0].orgName
    this.$bus.$on('refreshAbnormalListEvent', () => {
      this.Listccc()
      //刷新异常
    })
  },
  methods: {
    dictionaryEscape,

    // 跳转到事件登记页面
    navigateToEventRegistrationa() {
      this.$router.push({path: 'patrolAndRescue/roadWatch/inspectionResults'})
    },
    navigateToEventRegistrationb() {
      this.$router.push({path: 'patrolAndRescue/commandDispatch/eventRegistration'})
    },
    navigateToEventRegistrationc() {
      this.$router.push({path: 'patrolAndRescue/obstacleClearingRescue/rescueRegistration'})
    },
    // 处理时间变化
    handleTimeChange(timeType) {
      let startTime = ''
      let endTime = ''

      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从 0 开始，需要 +1
      const day = String(now.getDate()).padStart(2, '0')

      switch (timeType) {
        case 'day': // 日
          startTime = `${year}-${month}-${day}`
          endTime = startTime // 开始时间和结束时间相同
          break
        case 'month': // 月
          startTime = `${year}-${month}-01` // 当前月的第一天
          endTime = `${year}-${month}-${new Date(year, now.getMonth() + 1, 0).getDate()}` // 当前月的最后一天
          break
        case 'year': // 年
          startTime = `${year}-01-01` // 当前年的第一天
          endTime = `${year}-12-31` // 当前年的最后一天
          break
        default:
          startTime = ''
          endTime = ''
      }
      // 存储当前时间范围
      this.currentStartTime = startTime
      this.currentEndTime = endTime

      // 调用 Listbbb 方法，传入时间范围
      this.Listbbb(startTime, endTime)
      // 调用 taskListData 方法，传入时间范围
      this.taskListData(startTime, endTime)
    },

    //异常信息
    async taskListotherListData() {
      this.tableLoading = true
      try {
        // 确保 orgList 已赋值
        if (!this.orgList || this.orgList.length === 0) {
          await this.getOrgTreeData() // 等待 getOrgTreeData 完成
        }
        // 请求 tableData 接口
        const response = await tableDatab(this.orgList)
        if (response && response.value) {
          this.taskListotherList = response.value // 将接口返回的数据赋值给 taskListother
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },
    //事件统计
    async taskListData(startTime, endTime) {
      this.tableLoading = true
      try {
        // 确保 orgList 已赋值
        if (!this.orgList || this.orgList.length === 0) {
          await this.getOrgTreeData() // 等待 getOrgTreeData 完成
        }
        // 构造请求体
        const requestBody = {
          groupRelation: 'AND',
          groupTree: {},
          pageBean: {
            page: 1,
            pageSize: 10,
            showTotal: true
          },
          params: {
            // startTime: startTime, // 开始时间
            // endTime: endTime // 结束时间
          },
          querys: [],
          sorter: [
            {
              direction: 'ASC',
              property: ''
            }
          ]
        }
        // 打印请求体，检查是否正确
        const response = await tableDatac(requestBody, this.orgList, startTime, endTime)
        if (response && response.value) {
          this.taskList = response.value // 将接口返回的数据赋值给 taskListother
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },
    //事件查询点击-请求列表
    handleTaskClick(index) {
      this.currentActiveIndex = index // 更新当前点击的索引
      switch (index) {
        case 0: // 事件总数
          this.eventStatus = null // 不传 eventStatus
          break
        case 1: // 待接单事件
          this.eventStatus = [-1, 0, 1]
          break
        case 2: // 处置中事件
          this.eventStatus = [2]
          break
        case 3: // 处置结束事件
          this.eventStatus = [3]
          break
        case 4: // 已办结事件
          this.eventStatus = [4]
          break
        default:
          this.eventStatus = null
      }
      // 使用当前时间范围调用 Listbbb
      this.paginationBbb.page = 1
      this.Listbbb(this.currentStartTime, this.currentEndTime)
    },

    //事件列表查询
    async Listbbb(startTime, endTime) {
      this.tableLoading = true
      try {
        // 确保 orgList 已赋值
        if (!this.orgList || this.orgList.length === 0) {
          await this.getOrgTreeData() // 等待 getOrgTreeData 完成
        }
        // 构造请求体
        const requestBody = {
          groupRelation: 'AND',
          groupTree: {},
          pageBean: {
            page: this.paginationBbb.page, // 当前页码
            pageSize: this.paginationBbb.pageSize, // 每页条数
            showTotal: true
          },

          params: {
            startTime: startTime, // 开始时间
            endTime: endTime // 结束时间
          },
          querys: [
            {
              group: 'main',
              operation: 'IN',
              parentGroup: '',
              property: 'eventStatus',
              relation: 'AND',
              value: this.eventStatus
            },
            {
              group: 'main',
              operation: 'IN', // 使用 IN 操作符
              parentGroup: '',
              property: 'road_id_', // 属性名
              relation: 'AND',
              value: this.orgList // 传入 orgList 数组
            }
          ],
          sorter: [
            {
              direction: 'DESC',
              property: ''
            }
          ]
        }
        // 打印请求体，检查是否正确
        const response = await tableDatabList(requestBody)
        if (response && response.rows) {
          this.taskListotherbbb = response.rows // 将接口返回的数据赋值给 taskListother
          this.paginationBbb.total = response.total || 0 // 更新总条数
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },
    //当前任务
    async taskListotherData() {
      this.tableLoading = true
      try {
        // 确保 orgList 已赋值
        if (!this.orgList || this.orgList.length === 0) {
          await this.getOrgTreeData() // 等待 getOrgTreeData 完成
        }
        // 请求 tableData 接口
        const response = await tableDataa(this.orgList)
        if (response && response.value) {
          this.taskListother = response.value // 将接口返回的数据赋值给 taskListother
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },
    //任务点击-请求列表
    taskChange(index) {
      this.paginationAaa.page = 1
      if (index === 0) {
        this.currentType = 1 // 巡查任务
      } else if (index === 1) {
        this.currentType = 2 // 事件处置任务
      } else if (index === 2) {
        this.currentType = 3 // 救援任务
      }
      this.Listaaa() // 调用接口刷新数据
    },

    // 根据 currentType 返回对应的时间字段
    getTaskTime(task) {
      if (this.currentType === 1) {
        return task.createTime // 巡查任务
      } else if (this.currentType === 2) {
        return task.eventTime // 事件处置任务
      } else if (this.currentType === 3) {
        return task.rescueTime // 救援任务
      }
      return '' // 默认返回空字符串
    },
    //任务列表
    async Listaaa() {
      this.tableLoading = true
      try {
        // 确保 orgList 已赋值
        if (!this.orgList || this.orgList.length === 0) {
          await this.getOrgTreeData() // 等待 getOrgTreeData 完成
        }
        // 构造请求体
        const requestBody = {
          groupRelation: 'AND',
          groupTree: {},
          pageBean: {
            page: this.paginationAaa.page, // 当前页码
            pageSize: this.paginationAaa.pageSize, // 每页条数
            showTotal: true
          },
          params: {},
          querys: [
            {
              group: 'main',
              operation: 'IN', // 使用 IN 操作符
              parentGroup: '',
              property: 'road_id_', // 属性名
              relation: 'AND',
              value: this.orgList // 传入 orgList 数组
            }
          ],
          sorter: [
            {
              direction: 'DESC',
              property: this.currentType === 1 ? 'createTime' : this.currentType === 2 ? 'eventTime' : 'rescueTime'
            }
          ]
        }
        const response = await tableDataaList(requestBody, this.currentType)
        if (response && response.rows) {
          this.taskListotheraaa = response.rows // 将接口返回的数据赋值给 taskListother
          this.paginationAaa.total = response.total || 0 // 更新总条数
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },

    //异常点击
    change(index) {
      this.paginationCcc.page = 1
      let handleType = null
      if (index === 1) {
        handleType = 1 // 现场处理
        this.handleType = 1
      } else if (index === 2) {
        handleType = 2 // 上报中心
        this.handleType = 2
      } else {
        this.handleType = 0
      }
      this.Listccc(handleType) // 调用 Listccc 方法并传递 handleType
    },
    //异常列表
    async Listccc(handleType) {
      this.tableLoading = true
      try {
        // 确保 orgList 已赋值
        if (!this.orgList || this.orgList.length === 0) {
          await this.getOrgTreeData() // 等待 getOrgTreeData 完成
        }
        // 获取当前时间并格式化为 YYYY-MM-DD
        const now = new Date()
        const year = now.getFullYear()
        const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从 0 开始，需要 +1
        const day = String(now.getDate()).padStart(2, '0')
        const formattedDate = `${year}-${month}-${day}` // 格式化为 YYYY-MM-DD
        // 构造请求体
        const requestBody = {
          groupRelation: 'AND',
          groupTree: {},
          pageBean: {
            page: this.paginationCcc.page, // 当前页码
            pageSize: this.paginationCcc.pageSize, // 每页条数
            showTotal: true
          },
          params: {},
          querys: [
            {
              'group': 'main',
              'operation': 'EQUAL',
              'parentGroup': '',
              'property': 'TASK_DATE_',
              'relation': 'AND',
              'value': formattedDate
            },
            {
              group: 'main',
              operation: 'IN', // 使用 IN 操作符
              parentGroup: '',
              property: 'road_id_', // 属性名
              relation: 'AND',
              value: this.orgList // 传入 orgList 数组
            }
          ],
          sorter: [
            {
              direction: 'DESC',
              property: 'inspectTime'
            }
          ]
        }
        // 如果 handleType 不为空，添加到 querys 中
        if (handleType !== null) {
          requestBody.querys.push({
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'handleType',
            relation: 'AND',
            value: handleType
          })
        }
        const response = await tableDatacList(requestBody)
        if (response && response.rows) {
          this.taskListotherccc = response.rows // 将接口返回的数据赋值给 taskListother
          this.paginationCcc.total = response.total || 0 // 更新总条数
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },
    //刷新异常信息
    refreshAbnormalList() {
      this.$bus.$emit('refreshAbnormalListEvent')
    },
    // 获取公司树-将id集合起来传给后端
    async getOrgTreeData(callback) {
      try {
        this.treeLoading = true
        const valuedata = await getTree()
        // 提取所有 roadList 中的 id
        const allIds = []
        valuedata.value.forEach((item) => {
          if (item.roadList && item.roadList.length > 0) {
            item.roadList.forEach((road) => {
              if (road.id) {
                allIds.push(road.id) // 将 id 添加到数组中
              }
            })
          }
        })
        this.orgList = allIds
      } finally {
        this.treeLoading = false
        callback && callback(this.treeData)
        // this.tableLoading = false
      }
    },
    // 任务列表分页事件
    handleSizeChangeAaa(pageSize) {
      this.paginationAaa.pageSize = pageSize
      this.paginationAaa.page = 1 // 重置为第一页
      this.Listaaa() // 重新请求数据
    },
    handleCurrentChangeAaa(page) {
      this.paginationAaa.page = page
      this.Listaaa() // 重新请求数据
    },

    // 事件查询列表分页事件
    handleSizeChangeBbb(pageSize) {
      this.paginationBbb.pageSize = pageSize
      this.paginationBbb.page = 1 // 重置为第一页
      this.Listbbb(this.currentStartTime, this.currentEndTime) // 重新请求数据
    },
    handleCurrentChangeBbb(page) {
      this.paginationBbb.page = page
      this.Listbbb(this.currentStartTime, this.currentEndTime) // 重新请求数据
    },

    // 异常列表分页事件
    handleSizeChangeCcc(pageSize) {
      this.paginationCcc.pageSize = pageSize
      this.paginationCcc.page = 1 // 重置为第一页
      this.Listccc() // 重新请求数据
    },
    handleCurrentChangeCcc(page) {
      this.paginationCcc.page = page
      this.Listccc() // 重新请求数据
    }
  }
}
</script>
<style lang="scss" scoped>


.error-title {
  font-size: 14px;
  color: #CFDAE5;
  font-weight: bold;
}

.error-content {
  font-size: 14px;
  color: #CFDAE580;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 8px 0 8px 0;
}

.error-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .error-left {
    display: flex;

    .error-type {
      color: #00D4FF;
      font-size: 12px;
      border: 1px solid #00D4FF;
      padding: 0 5px;
      margin-right: 5px;
    }
  }

  .error-right {

  }
}

.flex-right {
  width: 100px;
  flex: 1;

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .event-title {
    color: #CFDAE5;
    font-size: 16px;
    font-weight: 700;
  }

  .event-time {
    font-size: 14px;
  }

  .event-memo {
    cursor: pointer;
    font-size: 14px;
    color: #CFDAE580;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}

.xun-list-style {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;

  .xun-name {
    font-size: 14px;
  }

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;

    .xun-type {
      color: #00D4FF;
      font-size: 12px;
      border: 1px solid #00D4FF;
      padding: 0 5px;
    }

    .xun-status {
      color: #00D4FF;
      font-size: 12px;
      border: 1px solid #00D4FF;
      padding: 0 5px;
      margin-left: 5px;
    }
  }
}

.task-active {
  color: #00FFFF !important;
}


::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 8px 0 0 8px;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 8px 8px 0;
}

::v-deep .el-radio-button__inner {
  background: #ffffff;
  border-color: #3399FF !important;
  color: #3399FF;
}

.home-page {
  width: 100%;
  //height: 100vh;
  background: #0f304f;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;

  .andMore {
    cursor: pointer;
  }

  .andMore:hover .evenMore {
    color: #0963c4 !important;
  }


  .arrow-style {
    width: 6px;
    height: 10px;
  }

  .cursor {
    cursor: pointer;
  }

  .home-title-style {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }

  .icon-style {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  .cardBox {
    background: #114066;
    box-shadow: 4px 4px 10px 0 rgba(53, 152, 220, 0.1);
    border-radius: 16px;
  }

  //左边容器
  .home-left {
    display: flex;
    flex-direction: column;
    width: 400px;
    margin-right: 16px;
  }

  .home-left-header {
    width: 400px;
    height: 200px;
    padding: 20px;
    margin-right: 16px;
    box-sizing: border-box;
    background-size: 110% 110%;
  }

  /* 新增的样式 */
  .other-body-container {
    display: flex;
    justify-content: space-around; /* 可选：均匀分布三个元素 */
    margin-top: 8px; /* 与上方的 otherTools 保持一定间距 */
  }

  .home-left-footer {
    margin-top: 16px;
    overflow: auto;
    flex: 1;

    .home-left-footer-header {
      height: 40px;
      line-height: 40px;
      flex-direction: column-reverse;
      text-align: center;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(79, 167, 255, 0.3);
      margin-left: 16px;
      margin-right: 16px;
      padding-top: 12px;
    }

    .home-god {
      width: 92%;
      height: 120px;
      margin: 16px 0px 16px 16px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      box-shadow: 0px 10px 20px 0px rgba(0, 38, 77, 0.5);

      .task-container {
        justify-content: center;
        width: 220px;
        height: 110px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);

        .task-img {
          width: 70px;
          height: 70px;
          margin: 20px 10px 20px 20px;
        }

        .task-title {
          text-align: center;
          font-size: 14px;
          color: #D9ECFF;
          font-weight: 700;
          margin-bottom: 10px;
        }

        .task-value {
          text-align: center;
          font-size: 30px;
          color: #3399ff;
          font-weight: 700;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        }

        .overtime {
          color: #ff4b87;
        }
      }
    }

    .home-good-list {
      width: 92%;
      height: calc(100% - 255px);
      margin-left: 16px;
      //border: 1px solid rgba(255, 255, 255, 0.2);
      overflow-y: auto; // 允许垂直滚动

      // 隐藏滚动条
      &::-webkit-scrollbar {
        width: 0; // 隐藏滚动条宽度
        height: 0; // 隐藏滚动条高度
        background: transparent; // 背景透明
      }

      // Firefox 隐藏滚动条
      scrollbar-width: none; // Firefox 隐藏滚动条
      -ms-overflow-style: none; // IE 和 Edge 隐藏滚动


      .task-list {
        background: linear-gradient(90deg, rgba(86, 106, 255, 0) 0%, rgba(86, 106, 255, 0.15) 100%);
        //height: 18px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        border: 1px solid rgba(79, 167, 255, 0.1);
        border-radius: 5px;
        padding: 10px 0;

        .task-icon {
          width: 18px;
          height: 18px;
          margin-right: 8px;
        }

        .task-name {
          font-size: 12px;
          font-weight: 700;
          color: #fff;
          margin-left: 11px;
          margin-top: -7px;
        }

        .task-time {
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }

  //右边容器
  .home-right {
    flex: 1;
    display: flex; /* 添加这一行，使其成为 flex 容器 */
    //gap: 16px; /* 添加这一行，设置子元素之间的间距 */
  }

  .home-right-left {
    //flex: 1;
    //height: calc(100% - 60px);
    display: flex;
    height: 100%;
  }

  .home-right-left-center {
    width: 100%;
    height: 100%;
    margin-right: 16px;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;

    .task-header {
      display: flex;
      justify-content: space-between;

      .evenMoreing {
        color: red;
        font-size: 14px;
        float: right;
      }
    }

    .task-manger {
      width: 900px;
      margin: 20px 36px 0px 25px;
      height: 140px;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      background: #114066;
      box-shadow: 0px 10px 20px 0px rgba(0, 38, 77, 0.5);

      ::v-deep .task-container {
        height: 140px !important;
      }

      .task-container {
        justify-content: center;
        width: 220px;

        .task-img {
          width: 70px;
          height: 70px;
          margin: 20px 10px 20px 20px;
        }

        .task-title {
          text-align: center;
          font-size: 14px;
          color: #D9ECFF;
          font-weight: 700;
          margin-bottom: 10px;
        }

        .task-value {
          text-align: center;
          font-size: 30px;
          color: #3399ff;
          font-weight: 700;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        }


        .overtime {
          color: #ff4b87;
        }
      }

      .task-container.active {
        box-shadow: 0px 10px 20px 0px rgba(0, 38, 77, 0.5); // 添加阴影效果
        border-bottom: 4px solid #33DDFF; // 边框高亮为蓝色
        .task-title,
        .task-value {
          color: #33DDFF; // 文字高亮为蓝色
        }
      }
    }

    .task-body {
      margin-top: 25px;
      //border: 1px solid red;
      height: calc(100% - 275px);
      overflow-y: auto; // 允许垂直滚动

      // 隐藏滚动条
      &::-webkit-scrollbar {
        width: 0; // 隐藏滚动条宽度
        height: 0; // 隐藏滚动条高度
        background: transparent; // 背景透明
      }

      // Firefox 隐藏滚动条
      scrollbar-width: none; // Firefox 隐藏滚动条
      -ms-overflow-style: none; // IE 和 Edge 隐藏滚动
    }

    div.flex {
      display: flex;
      //width: 140px;
    }

    .task-body-button {
      ::v-deep.el-button--warning {
        background-color: rgba(86, 106, 255, 0.1);
        border: 1px solid rgba(0, 212, 255, 0.3);
        color: #00D4FF; /* 保持文字颜色默认，可根据需要调整 */
      }

      ::v-deep.el-button--warning:hover {
        background-color: #044d65;
      }
    }

    .task-list {
      //height: 25px;
      //display: flex;
      width: 100%;
      justify-content: space-between;
      padding: 18px 30px 18px 30px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(79, 167, 255, 0.1);

      .task-icon {
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }

      .task-name {
        font-size: 16px;
        color: #fff;
        max-width: 400px; /* 设置最大宽度 */
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 显示省略号 */
        display: inline-block; /* 确保宽度生效 */
      }

      .task-name:hover {
        white-space: nowrap; /* 悬停时允许换行 */
        overflow: visible; /* 显示全部内容 */
        text-overflow: clip; /* 取消省略号 */
        position: relative; /* 确保内容不会被其他元素遮挡 */
        z-index: 1; /* 提高层级，确保内容显示在最上层 */
        background: #114066; /* 添加背景色，避免文字透明 */
        padding: 5px; /* 添加内边距，使文字更易读 */
        //border-radius: 4px; /* 可选：添加圆角 */
        //box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 可选：添加阴影 */
      }

      .task-time {
        font-size: 14px;
        color: #fff;
      }
    }

    .task-list:last-child {
      border: none;
    }
  }

  .home-left-header-contain {
    width: 360px;
    height: 100%;
    box-sizing: border-box;

    .otherTools {
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(79, 167, 255, 0.3);
    }

    .otherBody {
      width: auto;
      height: auto;
      border-radius: 8px;
      //border: 1px solid #0080FF;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 8px;
      padding: 6px;
      margin-bottom: 5px;
    }

    .other-img {
      width: 56px;
      height: 56px;
    }

    .other-text {
      margin-top: -5px;
      font-size: 14px;
      color: #fff;
    }
  }

  //右侧的右侧
  .home-right-right {
    display: flex;
    width: 23%;
    height: 100%;
    margin-bottom: 16px;
    box-sizing: border-box;


    .contain-center {
      width: 100%;
      height: 100%;
      padding: 16px 16px 0 16px;
      box-sizing: border-box;


      .home-footer-header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(79, 167, 255, 0.3);

        .evenMore {
          color: #fff;
          font-size: 14px;
          margin-right: 2px;
        }
      }

      ::v-deep .el-icon-refresh {
        font-size: 20px; /* 这里可以根据需要调整图标的大小，单位是px */
      }

      .contain-center-photo {
        width: 100%;
        height: 120px;
        margin: 16px 0px 30px 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        box-shadow: 0px 10px 20px 0px rgba(0, 38, 77, 0.5);

        .task-container {
          justify-content: center;
          width: 220px;
          height: 110px;
          border-right: 1px solid rgba(255, 255, 255, 0.2);

          .task-img {
            width: 70px;
            height: 70px;
            margin: 20px 10px 20px 20px;
          }

          .task-title {
            text-align: center;
            font-size: 14px;
            color: #ffffff;
            font-weight: 700;
            margin-bottom: 10px;
          }

          .task-value {
            text-align: center;
            font-size: 30px;
            color: #ffffff;
            font-weight: 700;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          }

          .activeError {
            color: #00FFFF;
          }

          .overtime {
            color: #ff4b87;
          }

          .pass {
            color: #62cc6b;
          }
        }
      }

      .home-good-list {
        width: 100%;
        height: calc(100% - 260px);
        position: relative;
        overflow-y: auto; // 允许垂直滚动

        // 隐藏滚动条
        &::-webkit-scrollbar {
          width: 0; // 隐藏滚动条宽度
          height: 0; // 隐藏滚动条高度
          background: transparent; // 背景透明
        }

        // Firefox 隐藏滚动条
        scrollbar-width: none; // Firefox 隐藏滚动条
        -ms-overflow-style: none; // IE 和 Edge 隐藏滚动

        .el-card {
          width: 100%;
          margin-bottom: 10px;
          //height: 70px;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background: linear-gradient(90deg, rgba(86, 106, 255, 0) 0%, rgba(86, 106, 255, 0.15) 100%);
          border-radius: 8px;

          .content {
            align-self: flex-start;
            position: absolute;
            top: 10px;
          }

          .card-contenta {
            align-self: flex-end;
            position: relative;
            margin-top: 20px;
            bottom: 5px;
          }

          .card-contentb {
            align-self: flex-end;
            position: absolute;
            bottom: 12px;
            font-weight: bold;
            right: 10px;
          }
        }

        .task-list {
          background: linear-gradient(90deg, rgba(86, 106, 255, 0) 0%, rgba(86, 106, 255, 0.15) 100%);
          height: 18px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          border: 1px solid rgba(79, 167, 255, 0.1);
          border-radius: 5px;
          padding: 18px 0;

          .task-icon {
            width: 18px;
            height: 18px;
            margin-right: 8px;
          }

          .task-name {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            margin-left: 11px;
            margin-top: -7px;
          }

          .task-time {
            font-size: 14px;
            color: #fff;
            margin-top: 9px;
          }
        }
      }
    }
  }
}

::v-deep .el-pagination__sizes {
  border: 1px solid red !important;
  display: none !important;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
  margin-top: 100px;
}
</style>
