<template>
  <div class="sort-info" ref="sortInfoRef">
    <el-row :gutter="8">
      <el-col :span="index == 0 ? 6 : 3" v-for="(item, index) in infoItems" :key="index">
        <div class="info-item" data-type="infoItem" :style="`background-color: ${colorList[item.type].color}`" @mouseover.self="handleHoverItem($event, item)" @mouseleave.self="winVisible = false">
          <Icon :icon="colorList[item.type].icon"  class="info-item__icon"/>
          <div class="info-msg">
            <p class="msg-title">{{ item.title }}</p>
            <span class="msg-num">{{ item.num }}</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%">
        <template v-for="key in Object.keys(deviceData)">
          <el-table-column :prop="key" label="deviceData[key]" />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup>
const  { proxy } = getCurrentInstance()

const colorList = readonly({
  device:{
    icon: 'carbon:devices',
    color: '#329874'
  },
  pest:{
    icon: 'carbon:pest',
    color: '#b47a3e'
  },
  environment:{
    icon: 'carbon:radar-weather',
    color: '#396a98' 
  },
  soil:{
    icon: 'carbon:soil-moisture',
    color: '#45969f'
  },
  online:{
    icon: 'carbon:link',
    color: '#3aa534'
  },
  offline:{
    icon: 'carbon:unlink',
    color: '#808890'
  },
  abnormal:{
    icon: 'carbon:warning',
    color: '#c04747' 
  }
})

const infoItems = reactive([
  {
    type: 'device',
    title: '设备总数',
    num: 12
  },
  {
    type: 'pest',
    title: '虫情监测设备',
    num: 6
  },
  {
    type: 'environment',
    title: '环境监测设备',
    num: 2
  },
  {
    type: 'soil',
    title: '土壤监测设备',
    num: 2
  },
  {
    type: 'online',
    title: '在线设备',
    num: 18
  },
  {
    type: 'offline',
    title: '离线设备',
    num: 2 
  },
  {
    type: 'abnormal',
    title: '异常设备',
    num: 2
  }
])

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

const winVisible = ref(false)
const searchValue = ref('')
const deviceType = ref(null)
const deviceWinWidth = ref(460)
const deviceData = reactive({})

const tableData = computed(() => {
  return proxy.$utils.objectToArray(deviceData)
})

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

function handleHoverItem (e, item) {
  const target = e.target;
  const { offsetLeft, offsetWidth } = target;
  const parentWidth = sortInfoRef.value.offsetWidth;
  console.log(e, item, sortInfoRef)
  
  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>
