<!-- 首页统计数据 -->
<script name="HomeCount" setup lang="ts">
import dayjs from 'dayjs'
import { getDashboardCar, getDashboardInspection, getDashboardTrend } from '@/api/page/page'
const show = ref(true)
const showList = ref([
  {
    name: '巡检测总量',
    value: 0,
    icon: 'icon-car',
  },
  {
    name: '在线率',
    value: '0%',
    icon: 'icon-roate',
  },
  {
    name: '巡检任务总数',
    value: 0,
    icon: 'icon-xunjian',
  },
  {
    name: '巡检公里总数',
    value: '0km',
    icon: 'icon-xingcheng',
  },
  {
    name: '今日巡检数',
    value: 0,
    icon: 'icon-xunjian',
  },
  {
    name: '今日公里总数',
    value: '0km',
    icon: 'icon-xingcheng',
  },
])
// 获取巡检车信息
const fetchCarInfo = () => {
  getDashboardCar({}).then((res) => {
    showList.value[0].value = res.data.length
    showList.value[1].value = (res.data.filter((item: any) => item.status !== '离线').length) / (res.data.length)
  })
}
// 巡检任务和公里
const fetchInspection = () => {
  getDashboardInspection({ timeType: 'year' }).then((res) => {
    showList.value[2].value = res.data.taskCount
    showList.value[3].value = `${res.data.km}km`
  })
  getDashboardInspection({ beginDate: `${dayjs().format('YYYY-MM-DD')} 00:00:00`, endDate: dayjs().format('YYYY-MM-DD HH:mm:ss') }).then((res) => {
    showList.value[4].value = res.data.taskCount
    showList.value[5].value = `${res.data.km}km`
  })
}
// 获取巡检任务趋势
const trendRadio = ref('week')
// xAxisData data
const trendXdata = ref<string[]>([])
const trendData = ref<any[]>([])
const fetchTrend = () => {
  getDashboardTrend({ timeType: trendRadio.value }).then((res) => {
    console.log(res.data, '巡检任务趋势')
    const name = [] as string[]
    const value = [] as any[]
    res.data.forEach((item: any, index: number) => {
      for (const i in item) {
        name.push(i.split(' ')[0])
        value.push(item[i])
      }
    })
    trendXdata.value = name
    trendData.value = [
      {
        name: '任务数量',
        data: value,
      },
    ]
  })
}
watch(() => trendRadio.value, (newVal) => {
  if (newVal) {
    fetchTrend()
  }
}, { deep: true })
// 隐藏面板
const close = () => {
  show.value = !show.value
}
const MianHeight = ref((document.documentElement.clientHeight - 50 - 225 - 60 - 30 * 3) / 3)
window.addEventListener('resize', () => {
  const height = document.documentElement.clientHeight - 50 - 225 - 60 - 30 * 3
  MianHeight.value = height / 3
  console.log(height, 'height')
})
const trendXdata1 = ref([])
const trendData1 = ref([])
const trendData2 = ref([])
const legend = {
  show: true,
  icon: 'circle',
  orient: 'horizontal', // 图例方向
  align: 'left', // 图例标记和文本的对齐，默认自动
  top: 5,
  right: 20,
  itemWidth: 12,
  itemHeight: 12,
  padding: [0, 0, 0, 120],
}
onMounted(() => {
  trendXdata1.value = ['2023-10-01', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05', '2023-10-06', '2023-10-07']
  trendData1.value = [{
    name: '低风险',
    data: [5, 9, 7, 3, 4, 5, 1],
  },
  {
    name: '一般风险',
    data: [1, 2, 7, 6, 1, 5, 4],
  },
  {
    name: '较高风险',
    data: [4, 4, 1, 7, 2, 8, 8],
  }]
  trendData2.value = [{
    name: '低风险',
    data: [0, 0, 1, 2, 1, 5, 0],
  },
  {
    name: '一般风险',
    data: [1, 1, 0, 6, 1, 5, 0],
  },
  {
    name: '较高风险',
    data: [0, 4, 1, 0, 2, 8, 0],
  }]
  fetchInspection()
  fetchCarInfo()
  fetchTrend()
})
</script>

<template>
  <div class="container-count" style="height: calc(100vh - 50px); width: 24%; padding: 0;margin: 0;" :class="`${show ? '' : 'hidden'}`">
    <div style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-around;">
      <div v-for="item in showList" :key="item.name" class="item-count">
        <div class="left">
          <svg-icon :name="item.icon" style="width: 50px;height: 50px;" />
        </div>
        <div class="right">
          <div class="name">
            {{ item.name }}
          </div>
          <div class="value">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
    <div class="count-echart" style="height: calc(100vh - 275px); width: 100%; padding: 0;margin: 0;">
      <!-- 巡检任务趋势 -->
      <div class="chart-container">
        <div class="chart-top">
          <div class="chart-name">
            巡检任务趋势
          </div>
          <div>
            <el-radio-group v-model="trendRadio" size="small">
              <el-radio-button label="week">
                周
              </el-radio-button>
              <el-radio-button label="month">
                月
              </el-radio-button>
              <el-radio-button label="year">
                年
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-body">
          <line-chart
            style="width: 100%;" :style="`height:${MianHeight}px`" :x-axis-data="trendXdata" :data="trendData" :smooth="false" font-color="#fff" axis-line-color="#ccc"
          />
        </div>
      </div>
      <!-- 第三方施工智能识别分析 -->
      <div class="chart-container">
        <div class="chart-top">
          <div class="chart-name">
            第三方施工智能识别分析
          </div>
          <div>
            <el-radio-group v-model="trendRadio" size="small">
              <el-radio-button label="week">
                周
              </el-radio-button>
              <el-radio-button label="month">
                月
              </el-radio-button>
              <el-radio-button label="year">
                年
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-body">
          <line-chart style="width: 100%;" :style="`height:${MianHeight}px`" :x-axis-data="trendXdata1" :legend="legend" :data="trendData1" :smooth="false" font-color="#fff" axis-line-color="#ccc" />
        </div>
      </div>
      <!-- 风险耦合分析 -->
      <div class="chart-container">
        <div class="chart-top">
          <div class="chart-name">
            风险耦合分析
          </div>
          <div>
            <el-radio-group v-model="trendRadio" size="small">
              <el-radio-button label="week">
                周
              </el-radio-button>
              <el-radio-button label="month">
                月
              </el-radio-button>
              <el-radio-button label="year">
                年
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-body">
          <line-chart style="width: 100%;" :style="`height:${MianHeight}px`" :x-axis-data="trendXdata1" :legend="legend" :data="trendData2" :smooth="false" font-color="#fff" axis-line-color="#ccc" />
        </div>
      </div>
    </div>
    <div
      class="close-dashboard"
      @click="close"
    >
      x
    </div>
  </div>
  <div class="menu-child-btn" :class="`${show ? 'hidden' : ''}`" style="background-color: #666;" @click="close">
    数据看板
  </div>
</template>

<style lang="scss" scope>
.chart-container {
  width: 100%;
  padding: 10px 20px;
  overflow: hidden;

  .chart-top {
    display: flex;
    justify-content: space-between;
    // flex-direction: column;
    // align-items: center;
    align-items: flex-end;

    .chart-name {
      color: #fff;
      font-size: 18px;
      font-weight: 700;
    }
  }
}

.menu-child-btn {
  width: 100px;
  margin: 10px;
  padding: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 8px;
  opacity: 1;
  position: absolute;
  top: 0;
  right: 20px;
  transition: all 0.5s;

  &:hover {
    cursor: pointer;
  }
}

.hidden {
  opacity: 0 !important;
  display: none !important;
}

.close-dashboard {
  display: none;
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;

  &:hover {
    cursor: pointer;
  }
}

.container-count {
  opacity: 1;
  background-color: rgba($color: #606e86, $alpha: 80%);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  border-radius: 10px;
  // transition: all 0.5s;
  overflow: hidden;

  &:hover {
    .close-dashboard {
      display: block;
    }
  }

  .item-count {
    display: flex;
    width: 45%;
    box-sizing: content-box;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;

    .left {
      width: 30%;
    }

    .right {
      width: 60%;
      text-align: center;
    }
  }
}
</style>