<template>
  <div class="sort-info" ref="sortInfoRef">
    <el-row :gutter="8">
      <el-col :span="6">
        <div class="info-item" data-type="infoItem" :style="`background-color: #329874`" @mouseover.self="handleHoverItem($event, allDeviceList)" @mouseleave.self="winVisible = false">
          <Icon icon="carbon:devices"  class="info-item__icon"/>
          <div class="info-msg">
            <p class="msg-title">设备总数</p>
            <span class="msg-num">{{ allDeviceList.length }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="typeDict[key].span" v-for="(key, index) in Object.keys(props.deviceData?.dataOfType || {})" :key="index">
        <div class="info-item" data-type="infoItem" :style="`background-color: ${typeDict[key].color}`" @mouseover.self="handleHoverItem($event, props.deviceData?.dataOfType[key])" @mouseleave.self="winVisible = false">
          <Icon :icon="typeDict[key].icon"  class="info-item__icon"/>
          <div class="info-msg">
            <p class="msg-title">{{ typeDict[key].title }}</p>
            <span class="msg-num">{{ props.deviceData?.dataOfType[key].length }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="statusDict[key].span" v-for="(key, index) in Object.keys(props.deviceData?.dataOfStatus || {})" :key="index">
        <div class="info-item" data-type="infoItem" :style="`background-color: ${statusDict[key].color}`" @mouseover.self="handleHoverItem($event, props.deviceData?.dataOfStatus[key])" @mouseleave.self="winVisible = false">
          <Icon :icon="statusDict[key].icon"  class="info-item__icon"/>
          <div class="info-msg">
            <p class="msg-title">{{ statusDict[key].title }}</p>
            <span class="msg-num">{{ props.deviceData?.dataOfStatus[key].length }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="device-win" ref="deviceWinRef" :style="`width: ${deviceWinWidth}px;`" v-show="winVisible" @mouseover="winVisible = true" @mouseleave="winVisible = false">
      <!-- <div class="search-box">
        <el-input placeholder="请输入设备名称" class="search-input" v-model="searchValue" />
        <el-button type="primary" class="search-btn" @click="searchDevices">搜索</el-button>
      </div> -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="deviceAddr" label="设备地址" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { typeDict, statusDict } from './config.js'

const props = defineProps({
  deviceData: {
    type: Object,
    default: () => ({
      dataOfType: {
        1: [],
        2: [],
        3: [],
        4: []
      },
      dataOfStatus: {
        0: [],
        1: []
      }
    })
  }
})

const deviceWinRef = ref(null)
const sortInfoRef = ref(null)

const winVisible = ref(false)
const searchValue = ref('')
const deviceType = ref(null)
const deviceWinWidth = ref(460)
const tableData = ref([])

const allDeviceList = computed(() => {
  const list = []
  Object.values(props.deviceData?.dataOfType || {}).forEach(items => {
    list.push(...items)
  })
  return list;
})

function searchDevices () {
  console.log('searchValue:', searchValue.value)
}

function handleHoverItem (e, list) {
  const target = e.target;
  const { offsetLeft, offsetWidth } = target;
  const parentWidth = sortInfoRef.value.offsetWidth;
  tableData.value = list;
  winVisible.value = true;
  // nextTick(() => {
  //   const isLeft = (parentWidth- offsetLeft) > deviceWinWidth.value;
  //   const transWidth = isLeft ? offsetLeft : (offsetLeft + offsetWidth - deviceWinWidth.value)
  //   deviceWinRef.value.style.transform = `translate(${transWidth - 3}px)`
  // })
  setTimeout(() => {
    const isLeft = (parentWidth- offsetLeft) > deviceWinWidth.value;
    const transWidth = isLeft? offsetLeft : (offsetLeft + offsetWidth - deviceWinWidth.value)
    deviceWinRef.value.style.transform = `translate(${transWidth - 3}px)`
  }, 30)
}
</script>

<style lang="scss" scoped>
.sort-info {
  position: relative;
}

$infoIconSize: 38px;

.info-item {
  @apply flex justify-between items-center;
  padding: 12px 15px;
  color: #fff;
  background-color: #25598a;
  border-radius: 8px;
  cursor: pointer;

  &.device-num {
    background-color: red;
  }

  .info-msg {
    @apply text-right;
  }

  .msg-title {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .msg-num {
    font-size: 22px;
    font-weight: 600;
  }
}

.info-item__icon {
  width: $infoIconSize;
  height: $infoIconSize;
  color: #ddd;
}

.info-item__icon,
.info-msg {
  pointer-events: none;
}

.device-win {
  position: absolute;
  top: 76px;
  height: 400px;
  // width: 460px;
  z-index: 99;
  background-color: var(--el-bg-color);
  box-shadow: 0 0 8px #999;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s ease-in-out;

  .search-box {
    @apply flex justify-between items-center;
    margin-bottom: 10px;

    .search-btn {
      margin-left: 10px;
    }
  }
}
</style>
