<template>
  <div class="overview">
    <div class="g-bg"></div>
    <div class="main g-p20" v-loading="loading">
      <!-- <div style="color: #fff">全部设备</div> -->
      <div class="first g-fx-j">
        <div class="left g-br-10">
          <div class="head g-fx">
            <div class="head__item g-fx-j" v-for="el in titleList">
              <div class="head__item-first">
                <div class="text1">{{ el.label }}</div>
                <div class="text2 g-ellipsis">
                  {{ equipmentNum[el.value] ?? '0' }}
                  <span>{{ equipmentNum[el.value1] ?? '0' }}%</span>
                </div>
              </div>
              <el-progress
                class="progress"
                :width="65"
                :stroke-width="5"
                :show-text="false"
                type="circle"
                :color="el.color"
                :percentage="Math.ceil(equipmentNum[el.value1]) || 0"
              />
            </div>
          </div>
          <div class="g-fx-j g-mt20 second" style="position: relative">
            <div ref="mapRef" class="map g-br-10"></div>
            <div class="map__num">
              <div>设备数量</div>
              <div class="g-fx">
                <div v-for="el in mapNumList">
                  <div class="map__num-block" style="margin-right: 5px" :style="{ background: el.color }"></div>
                  <div>{{ el.value }}</div>
                </div>
              </div>
            </div>
            <div class="g-p20 g-br-10 table">
              <el-table
                style="width: 100%"
                height="100%"
                header-cell-class-name="table-head"
                row-class-name="table-row"
                :data="tableData.arr"
              >
                <el-table-column prop="date">
                  <template #default="{ row }">
                    <div class="g-fx">
                      <div class="text">{{ row.name }}</div>
                      <div style="width: 234px">
                        <div class="g-fx" style="width: 100%">
                          <div
                            class="table-line"
                            v-if="row.onlineW != 0"
                            :style="{ width: row.onlineW + 'px', marginRight: row.offlineW ? '0' : '2px' }"
                          ></div>
                          <div
                            class="table-line info"
                            v-if="row.offlineW != 0"
                            :style="{ width: row.offlineW + 'px' }"
                          ></div>
                        </div>
                        <div class="table-line danger" :style="{ width: row.alarmW + 'px' }"></div>
                        <div class="table-line waring" :style="{ width: row.repairW + 'px' }"></div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="onlineCount" label="在线" width="50">
                  <template #default="{ row }">
                    <span class="text-t">{{ row.onlineCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="alarmCount" label="报警" width="50">
                  <template #default="{ row }">
                    <span class="danger-t">{{ row.alarmCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="repairCount" label="维修" width="50">
                  <template ##default="{ row }">
                    <span class="waring-t">{{ row.repairCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="离线" width="50">
                  <template #default="{ row }">
                    <span class="info-t">{{ row.offlineCount }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="right g-br-10 g-p20">
          <div class="g-fx-j g-mb-20">
            <div>实时消息</div>
            <!-- <el-button type="info" link @click=""
              >全部消息 <el-icon class="icon"><ArrowRightBold /></el-icon
            ></el-button> -->
          </div>
          <div class="list">
            <div
              class="list-roll"
              :class="{ 'list-roll-stop': logs.arr.length <= 3 }"
              @mousewheel="onmouseoverList"
              ref="listRollRef"
            >
              <div
                class="list__item"
                :class="{ 'g-danger': el.type === 1, 'g-warning': el.type === 2 }"
                v-for="(el, i) in logs.arr"
                @click="onPitchMeg(el)"
              >
                <div class="g-fx-j">
                  <span style="font-weight: bold; margin-top: -2px">{{ el.type === 2 ? '工单' : '报警' }}</span>
                  <span style="font-size: 12px">{{ el.timeFormat }}</span>
                </div>
                <div>{{ el.content }}</div>
                <div style="font-size: 12px; margin-top: 10px">{{ el.deviceName }}</div>
                <div style="font-size: 12px">{{ el.companyName }} {{ el.workshop ? '〡' + el.workshop : '' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer g-br-10 g-p20" ref="lineRef">折线图</footer>
    </div>
  </div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import chain from '@/assets/json/100000.json'

  import { fetchOverviewData } from '@/api/deviceAuthorize'
  import { divide } from 'lodash'
  const mapNumList = [
    {
      value: '0',
      color: '#E3E9F9'
    },
    {
      value: '0~50',
      color: '#B4C2EA'
    },
    {
      value: '50~100',
      color: '#8A9EDD'
    },
    {
      value: '≥100',
      color: '#5D78CE'
    }
  ]
  const titleList = [
    {
      label: '在线设备',
      value: 'onlineCount',
      value1: 'onlineCountPer',
      color: '#00F2FC',
      bg: '#83A2E4',
      progress: 10
    },
    {
      label: '离线设备',
      value: 'offlineCount',
      value1: 'offlineCountPer',
      bg: '#B6B8BE',
      color: '#6D737B',
      progress: 30
    },
    {
      label: '报警设备',
      value: 'alarmCount',
      value1: 'alarmCountPer',

      color: '#D23E3C ',
      bg: '#FF8E8C',
      progress: 50
    },
    {
      label: '维修设备',
      value: 'repairCount',
      value1: 'repairCountPer',
      color: '#8C6349',
      bg: '#D7B49E',
      progress: 60
    }
  ]

  const lineRef = ref(null)
  const mapRef = ref(null)
  const line = reactive({})
  let option = {
    title: {
      text: '月度统计',
      left: 15,
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}日<br/>报警：{c0}个<br/>工单：{c1}个'
    },
    legend: {
      data: ['月度报警', '月度工单'],
      x: 'right'
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '5%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '月度报警',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
        color: '#ED6159',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(237, 97, 89, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(237, 97, 89, 0.1)'
            }
          ])
        }
      },
      {
        name: '月度工单',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
        color: '#DEB090',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(222, 176, 144, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(222, 176, 144, 0.1)'
            }
          ])
        }
      }
    ]
  }
  let mapOption: any = ref({
    title: {
      text: '设备地图',
      left: 10,
      top: 10,
      textStyle: {
        fontSize: 12
      }
    },
    tooltip: {
      // triggerOn: 'click',
      enterable: true,
      formatter: (params: any, _ticket: any, _cb: any) => {
        const { data } = params
        return `<div style='display:flex;flex-direction:column;'>
						<div style="display: flex;flex-direction: row;align-items: center;">
							<lable style='color: #000000;font-size: 14px;padding-right:4px;'>${params.name}</lable>
						</div>
						<hr style='margin-top:4px;margin-bottom:2px;width:130px;height:2px;border:none;border-top:2px solid #E8ECF8;' />
						<lable style='color:#000000;font-size: 9px;'>全部设备 ${params.value}</lable>
						<div style='margin-top:-2px;display:flex;'>
							<lable style='color:#577BD3;font-size: 9px;width:65px'>在线 ${params.data.onlineCount}</lable>
							<lable style='color:#FE5656;font-size: 9px;'>报警 ${params.data.alarmCount}</lable>
						</div>
						<div style='margin-top:-5px;display:flex;'>
							<lable style='color:#A5A9AF;font-size: 9px;width:65px'>离线 ${params.data.offlineCount}</lable>
							<lable style='color:#E5AE8E;font-size: 9px;'>维修 ${params.data.repairCount}</lable>
						</div>
						</div>`
      }
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '5%',
      containLabel: true
    },
    visualMap: {
      min: 0,
      max: 100,
      inRange: {
        color: ['#E2EAFB', '#5579d5']
      },
      show: false //图注
    },
    series: [
      {
        type: 'map',
        map: 'chain',
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: '#434343'
          },
          emphasis: {
            //动态展示的样式
            color: '#ffffff'
          }
        },
        layoutCenter: ['50%', '70%'],
        layoutSize: '100%',
        zoom: 1.3,
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.1)',
            borderWidth: 1
          },
          emphasis: {
            areaColor: '#41578E', //鼠标选择区域颜色
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        data: [
          {
            name: '河南省',
            value: '100'
          }
        ]
      }
    ]
  })
  let equipmentNum: any = ref({})

  const router = useRouter()
  const onPitchMeg = (v: any) => {
    if (v.type === 1) {
      useToDetail(v.id, v.type)
    } else {
      router.push(`/order-center/my-order/details?orderId=${v.id}&faultType=${v.type}`)
    }
  }
  let myChart: any = ref({})
  onMounted(() => {
    init()
    if (lineRef.value) {
      myChart.value = markRaw(echarts.init(lineRef.value))
    }
    window.addEventListener('resize', () => {
      mapChart.value.resize()
      myChart.value.resize()
    })
  })

  // 表格数据
  const tableData = reactive({
    arr: []
  })
  let logs: any = reactive({ arr: [] })
  const getColor = (v: number) => {
    if (v > 0 && v < 50) {
      return '#B4C2EA'
    }
    if (v > 100) {
      return '#5D78CE'
    }
    if (v > 50 && v < 100) {
      return '#8A9EDD'
    }
    return '#E3E9F9'
  }
  const mapChart = ref()
  const loading = ref(false)
  const init = async () => {
    try {
      loading.value = true

      const { alarmCount, offlineCount, onlineCount, repairCount, provicesData, logDatas, chartData }: any =
        await fetchOverviewData()
      const sum = alarmCount + offlineCount + onlineCount + repairCount
      equipmentNum.value = {
        alarmCount,
        offlineCount,
        onlineCount,
        repairCount,
        alarmCountPer: (divide(alarmCount, sum) * 100).toFixed(2),
        offlineCountPer: (divide(offlineCount, sum) * 100).toFixed(2),
        onlineCountPer: (divide(onlineCount, sum) * 100).toFixed(2),
        repairCountPer: (divide(repairCount, sum) * 100).toFixed(2)
      }

      mapOption.value.series[0].data = provicesData
      if (mapRef.value) {
        echarts.registerMap('chain', chain as any)
        mapChart.value = echarts.init(mapRef.value)
        mapChart.value.setOption(mapOption.value)
        mapChart.value.on('globalout', () => {
          //定时器  固定显示框
          setTimeout(() => {
            mapChart.value.dispatchAction({
              type: 'showTip',
              seriesIndex: 1,
              dataIndex: 2
            })
          }, 100)
        })
      }
      tableData.arr = provicesData
        .map((el: any) => {
          return {
            ...el,
            alarmW: el.totalCount ? ((el.alarmCount / el.totalCount) * 234).toFixed(0) : 0,
            offlineW: el.totalCount ? ((el.offlineCount / el.totalCount) * 234).toFixed(0) : 0,
            onlineW: el.totalCount ? ((el.onlineCount / el.totalCount) * 234).toFixed(0) : 0,
            repairW: el.totalCount ? ((el.repairCount / el.totalCount) * 234).toFixed(0) : 0
          }
        })
        .sort((a: { value: number }, b: { value: number }) => b.value - a.value)
      logs.arr = [...logDatas, ...logDatas]
      rollTime.value = logDatas.length * 2 + 's'

      option.xAxis.data = chartData.days
      option.series[0].data = chartData.alarms
      option.series[1].data = chartData.repairs
      myChart.value.setOption(option)

      //
    } finally {
      loading.value = false
    }
  }
  const rollTime = ref('')
  let listRollRef: any = ref(null)
  const onmouseoverList = (e: any) => {
    // listRollRef.value.style.translate = '0 500px'
  }
</script>

<style lang="less" scoped>
  .g-ft-14 {
    font-size: 12px;
  }

  .overview {
    position: relative;
    padding-bottom: 20px;
  }

  .main {
    position: relative;

    .first {
      height: 470px;
      height: calc(100vh - 400px);
    }

    .second {
      min-height: 348px;
      height: calc(100vh - 520px);
    }

    .left {
      width: 78%;
      overflow: hidden;
      height: 100%;
      margin-right: 20px;

      .head__item {
        flex: 1;
        margin-right: 20px;
        text-align: center;
        height: 100px;
        color: #fff;
        background: linear-gradient(-45deg, #69b4f9, #5d78cf);
        border-radius: 10px;
        width: calc((100% - 60px) / 4);

        &-first {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
          padding-left: 20px;
          width: 50%;
        }

        &:last-child {
          margin-right: 0;

          background: linear-gradient(-45deg, #e5bfa4, #b0876b);
        }

        &:nth-child(2) {
          background: linear-gradient(-45deg, #bdc2ca, #94979c);
        }

        &:nth-child(3) {
          background: linear-gradient(-45deg, #fe928b, #ed6159);
        }

        .progress {
          margin: auto 20px;
        }

        .text1 {
          font-size: 12px;
          text-align: left;
          margin-bottom: 10px;
        }

        .text2 {
          font-size: 36px;
          height: 30px;
          line-height: 30px;
          font-weight: bold;
          display: flex;
          align-items: flex-end;

          span {
            font-size: 16px;
            line-height: 21px;
            transform: translateY(-2px);
            padding-left: 10px;
            height: 16px;
            text-align: bottom;
            display: inline-block;
            border-left: 2px solid #fff;
            margin-left: 10px;
          }
        }
      }

      .map {
        height: calc(100% - 10px);
        min-width: 400px;
        width: 49%;
        background-color: #fff;
        margin-right: 20px;
        color: #000;

        &__num {
          position: absolute;
          bottom: 20px;
          left: 20px;
          z-index: 999;
          font-size: 12px;
          color: #7d7d86;
        }

        &__num-block {
          width: 50px;
          height: 5px;
          background: #b4c2ea;
          border-radius: 2px;
          margin-top: 10px;
          margin-bottom: 5px;
        }
      }

      .table {
        width: 49%;
        height: calc(100% - 10px);
        background-color: #fff;
        overflow: hidden;

        .text {
          transform: rotate(-30deg);
          margin-left: 10px;
          margin-right: 8px;
          width: 50px;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }

        &-line {
          width: 157px;
          height: 5px;
          background: #5f7cd6;
          margin-bottom: 5px;
        }

        .text-t {
          color: #5f7cd6;
        }

        .danger {
          background: #ed6159;
        }

        .danger-t {
          color: #ed6159;
        }

        .waring {
          background: #deb090;
        }

        .waring-t {
          color: #deb090;
        }

        .info {
          background: #a6a9af;
        }

        .info-t {
          color: #a6a9af;
        }
      }

      :deep(.el-table) {
        .table-head {
          background: #f6f6f6;

          .cell {
            color: #333;
          }
        }

        .table-head {
          height: 40px;
          font-size: 12px;
        }

        .table-row {
          color: #333;

          .el-table__cell {
            padding: 16px 0;
          }
        }

        .el-icon {
          width: 20px;
          height: 20px;
          font-size: 16px;
          font-weight: bold;
        }

        .fs-16 {
          font-size: 18px;
        }
      }
    }

    .right {
      width: 20%;
      min-width: 370px;
      background-color: #fff;
      height: calc(100% - 10px);

      .icon {
        margin-left: 5px;
        margin-top: -1px;
      }

      @keyframes listRoll {
        from {
          transform: translateY(0);
        }

        to {
          transform: translateY(-50%);
        }
      }

      .list {
        overflow-y: hidden;
        height: calc(100% - 40px);

        .list-roll {
          animation: listRoll v-bind('rollTime') linear infinite;

          &:hover {
            animation-play-state: paused;
          }

          &-stop {
            animation: none;
          }
        }

        &__item {
          cursor: pointer;
          height: 120px;
          background: #fef0ef;
          border-radius: 5px;
          margin-top: 11px;
          padding: 16px 20px;
          padding-left: 30px;
          position: relative;
          font-size: 14px;

          // animation: listRoll v-bind('rollTime') linear infinite;
          // animation-play-state: running;
          div {
            margin-bottom: 5px;
          }

          &::after {
            content: '';
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 88px;
            background: #ed6159;
            border-radius: 2px;
            position: absolute;
          }
        }

        &::-webkit-scrollbar {
          width: 0;
        }
      }

      .g-mb-20 {
        margin-bottom: 20px;
      }
    }
  }

  .footer {
    margin-top: 10px;
    height: auto;
    min-height: 220px;
    margin-bottom: 20px;
    background-color: #fff;
  }
</style>
