<!-- 首页统计数据 -->
<script name="HomeCount" setup lang="ts">
import dayjs from 'dayjs'
import { getDashboardAnalyse, getDashboardCar, getDashboardInspection, getDashboardRecognition, 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 = Number(res.data.taskCount).toFixed(2)
    showList.value[3].value = `${Number(res.data.km).toFixed(2)}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 = Number(res.data.taskCount).toFixed(2)
    showList.value[5].value = `${Number(res.data.km).toFixed(2)}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 identifyRadio = ref('week')
const identifyXdata = ref<string[]>([])
const identifyData = ref<any[]>([])
const fetchIdentify = () => {
  getDashboardRecognition({ timeType: identifyRadio.value }).then((res) => {
    console.log(res.data, '第三方')
    const name = [] as string[]
    const value = [
      {
        name: '低风险',
        data: [],
        color: '#2763BC',
      },
      {
        name: '一般风险',
        data: [],
        color: '#FFD800',
      },
      {
        name: '较高风险',
        data: [],
        color: '#D98200',
      },
      {
        name: '严重风险',
        data: [],
        color: '#9F1919',
      },
    ]
    res.data.forEach((item: any, index: number) => {
      for (const i in item) {
        name.push(i.split(' ')[0])
        item[i].forEach((child: string, cindex: number) => {
          value[cindex].data.push(item[i][cindex])
        })
      }
    })
    identifyXdata.value = name
    identifyData.value = value
  })
}
watch(() => identifyRadio.value, (newVal) => {
  if (newVal) {
    fetchIdentify()
  }
}, { deep: true })
// 风险耦合分析
const analyseRadio = ref('week')
const analyseXdata = ref<string[]>([])
const analyseData = ref<any[]>([])
const fetchAnalyse = () => {
  getDashboardAnalyse({ timeType: analyseRadio.value }).then((res) => {
    console.log(res.data, '风险耦合分析')
    const name = [] as string[]
    const value = [
      {
        name: '低风险',
        data: [],
        color: '#2763BC',
      },
      {
        name: '一般风险',
        data: [],
        color: '#FFD800',
      },
      {
        name: '较高风险',
        data: [],
        color: '#D98200',
      },
      {
        name: '严重风险',
        data: [],
        color: '#9F1919',
      },
    ]
    res.data.forEach((item: any, index: number) => {
      for (const i in item) {
        name.push(i.split(' ')[0])
        item[i].forEach((child: string, cindex: number) => {
          value[cindex].data.push(item[i][cindex])
        })
      }
    })
    analyseXdata.value = name
    analyseData.value = value
  })
}
watch(() => analyseRadio.value, (newVal) => {
  if (newVal) {
    fetchAnalyse()
  }
}, { 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 legend = {
  show: true,
  icon: 'circle',
  orient: 'horizontal', // 图例方向
  align: 'left', // 图例标记和文本的对齐，默认自动
  top: 10,
  right: 20,
  itemWidth: 12,
  itemHeight: 12,
  // padding: [0, 0, 0, 120],
  textStyle: {
    color: '#fff',
  },
}
onMounted(() => {
  fetchInspection()
  fetchCarInfo()
  fetchTrend()
  fetchIdentify()
  fetchAnalyse()
})
</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="identifyRadio" 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`" :gradient="false" :x-axis-data="identifyXdata" :legend="legend" :data="identifyData" :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="analyseRadio" 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`" :gradient="false" :x-axis-data="analyseXdata" :legend="legend" :data="analyseData" :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>