<template>
  <div class="col-content">
    <div class="i-left">
      <img
        @click="gotoScene(item)"
        :src="getDeviceImage(item.cameraType)"
        alt=""
      />
    </div>
    <div class="i-right">
      <template v-if="item.goodsId !== 1 && item.goodsId !== 8">
        <p
          class="d-id"
          :title="item.snCode || '--'"
        >
          <span class="vip-icon" v-if="isMember"></span>
          <span class="vip-icon vip-expired-icon" v-else-if="isExpiredMember"></span>
          <span class="sncode">
            设备编号: {{ item.snCode || "--" }}
          </span>
        </p>
        <p
          class="p-sub"
          style="padding-left: 26px"
          :title="`${item.usedSpaceStr} / ${
            isMember ? '无限容量' : item.totalSpaceStr
          }`"
        >
          <!-- <img src="/images/icon-cloud.png" alt="" /> -->
          <span v-if="item.usedSpaceStr && item.totalSpaceStr && item.totalSpaceStr != '0B'">
            {{ item.usedSpaceStr }}
            {{ (isMember || item.cameraType == 10 || item.cameraType == 11 || item.cameraType == 12) ? '' : `/${item.totalSpaceStr}` }}
          </span>
          <span v-else>--</span>
        </p>
        <div class="capacity">
          <div class="c-line">
            <div
              class="active"
              v-show="!isMember"
              :style="{
                width: (item.cameraType == 10 || item.cameraType == 11 || item.cameraType == 12) ? '1%' : getBar(item.usedSpace, item.totalSpace),
                background: (item.cameraType == 10 || item.cameraType == 11 || item.cameraType == 12) ? '#15BEC8' : getColor(item.usedSpace, item.totalSpace),
              }"
            ></div>
          </div>
        </div>
        <p class="p-sub p-expired">
          到期时间：{{ item.spaceEndStr || "--" }}
          <span class="expired-icon-w">
            <span
              v-if="validExpired(item.spaceEndStr).isExpired"
              class="expired-icon"
              @mouseenter="setTimeoutShowCtrls(true)"
              @mouseleave="setTimeoutShowCtrls(false)"
            >
              ⚠️
            </span>
            <div 
              v-show="showCtrls" 
              class="expired-ctrls-w" 
              @mouseenter="setTimeoutShowCtrls(true)"
              @mouseleave="setTimeoutShowCtrls(false)"
            >
              <p v-if="!validExpired(item.spaceEndStr).expiredTime">会员即将到期</p>
              <p v-else-if="validExpired(item.spaceEndStr).trueExpired">会员已过期</p>
              <p v-else>
                会员将在 <span class="expired">{{ validExpired(item.spaceEndStr).expiredTime }}</span> 天后过期
              </p>
              <div class="ctrls-w">
                <div class="btn cancel-btn" @click="showCtrls = false">取消</div>
                <div class="btn submit-btn" @click="handleRepay">续费</div>
              </div>
            </div>
          </span>
        </p>
        <p class="p-sub" :title="item.cooperationUserName">
          协作用户：{{ item.cooperationUserName || '-' }}
        </p>
        <div class="oper-con">
          <div class="oper">
            <div>
              <span class="spot"></span>
            </div>
            <ul>
              <li @click="unbind(item)">
                解绑
              </li>
              <li v-if="item.status !== 0" @click="handleCooperation(item)">
                {{ item.cooperationUserName ? '取消分配' : '分配' }}
              </li>
            </ul>
          </div>
        </div>
      </template>
      <template v-else>
        <p class="d-id">ID: <span class="sncode">{{ item.childName }}</span></p>
        <p class="p-sub">余额：{{ item.balance }}</p>
        <div class="d-edit" :class="{ 'dtow-edit': item.cameraType != 4 }">
          <div class="primary">
            <span>充值</span>
          </div>
          <div>
            <span @click="unbind(item)">解绑</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  item: any
}

const props = defineProps<Props>()

const emit = defineEmits(['handleCooperation', 'unbind', 'renew'])

const showCtrls = ref(false)
const timer = ref<NodeJS.Timeout>()

// 计算属性
const isMember = computed(() => {
  return props.item.userIncrementId && !expired.value.trueExpired
})

const isExpiredMember = computed(() => {
  return props.item.userIncrementId && expired.value.trueExpired
})

const expired = computed(() => {
  if (!props.item.spaceEndTime) {
    return {}
  }
  const expiredDays = Math.floor((new Date(props.item.spaceEndTime).getTime() - new Date().getTime()) / 86400000) + 1
  return {
    expiredTime: expiredDays,
    expiredText: `<span class="expired">${expiredDays}</span>`,
    isExpired: expiredDays <= 30,
    trueExpired: expiredDays < 0
  }
})

// 方法
const getDeviceImage = (cameraType: number) => {
  switch (cameraType) {
    case 4:
      return '/images/banner_pro.png'
    case 9:
      return '/src/assets/images/pic_lite.png'
    case 10:
      return '/src/assets/images/pci_Laser.png'
    case 11:
      return '/src/assets/images/pic_shenguan.png'
    case 12:
      return '/src/assets/images/pic_Mova.png'
    default:
      return '/images/t_product.png'
  }
}

const gotoScene = (item: any) => {
  // 这里可以添加路由跳转逻辑
  console.log('跳转到场景页面', item)
}

const getBar = (a: number, b: number) => {
  if (a === 0) {
    return 0
  }
  const temp = (a / b) * 100
  if (temp < 1) {
    return "1%"
  }
  return (temp > 100 ? 100 : Math.round(temp)) + "%"
}

const getColor = (a: number, b: number) => {
  const temp = (a / b) * 100
  const point = 80
  return temp < point ? "#15BEC8" : "#ff0000"
}

const validExpired = (time: string) => {
  if (!time) {
    return {}
  }
  const expired = Math.floor((new Date(time).getTime() - new Date().getTime()) / 86400000) + 1

  return {
    expiredText: `<span class="expired">${expired}</span>`,
    expiredTime: expired,
    isExpired: expired <= 30,
    trueExpired: expired < 0
  }
}

const handleCooperation = () => {
  emit("handleCooperation", props.item)
}

const unbind = () => {
  emit("unbind", props.item)
}

const setTimeoutShowCtrls = (bool: boolean) => {
  if (timer.value) {
    clearTimeout(timer.value)
  }
  timer.value = setTimeout(() => {
    showCtrls.value = bool
  }, 200)
}

const handleRepay = () => {
  emit('renew', props.item)
}
</script>

<style lang="less" scoped>
.col-content {
  display: flex;
  gap: 15px;
  height: 100%;
  
  .i-left {
    flex-shrink: 0;
    
    img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
    }
  }
  
  .i-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .d-id {
      display: flex;
      align-items: center;
      font-weight: 600;
      color: #323233;
      margin-bottom: 8px;
      
      .vip-icon {
        width: 16px;
        height: 16px;
        background: url('@/assets/images/vip_true.svg') no-repeat center center;
        background-size: cover;
        margin-right: 5px;
        
        &.vip-expired-icon {
          opacity: 0.5;
        }
      }
      
      .sncode {
        flex: 1;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    
    .p-sub {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 14px;
      margin-bottom: 5px;
      
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      
      &.p-expired {
        overflow: visible !important;
      }
    }
    
    .capacity {
      margin: 8px 0;
      
      .c-line {
        width: 100%;
        height: 6px;
        background: #e5e5e5;
        border-radius: 3px;
        overflow: hidden;
        
        .active {
          height: 100%;
          border-radius: 3px;
          transition: all 0.3s;
        }
      }
    }
    
    .oper-con {
      margin-top: 10px;
      
      .oper {
        position: relative;
        
        .spot {
          display: inline-block;
          width: 4px;
          height: 4px;
          background: #666;
          border-radius: 50%;
          cursor: pointer;
          
          &::before,
          &::after {
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            background: #666;
            border-radius: 50%;
          }
          
          &::before {
            top: -6px;
          }
          
          &::after {
            top: 6px;
          }
        }
        
        ul {
          display: none;
          position: absolute;
          top: 100%;
          right: 0;
          background: #fff;
          border: 1px solid #e5e5e5;
          border-radius: 4px;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          z-index: 10;
          min-width: 109px;
          
          li {
            padding: 8px 16px;
            cursor: pointer;
            font-size: 14px;
            color: #323233;
            
            &:hover {
              background: #f5f5f5;
            }
            
            &:not(:last-child) {
              border-bottom: 1px solid #f0f0f0;
            }
          }
        }
        
        &:hover ul {
          display: block;
        }
      }
    }
    
    .d-edit {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      
      .primary {
        background: #15BEC8;
        color: #fff;
        padding: 4px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        
        &:hover {
          background: #13a8b1;
        }
      }
      
      div:not(.primary) {
        color: #666;
        cursor: pointer;
        
        &:hover {
          color: #15BEC8;
        }
      }
    }
  }
}

.expired-icon {
  cursor: pointer;
}

.expired-icon-w {
  position: relative;
  
  .expired-ctrls-w {
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 1;
    min-width: 172px;
    height: 85px;
    padding: 12px 16px;
    box-shadow: 0px 2px 12px 0px rgba(50, 50, 51, 0.12);
    bottom: -10px;
    transform: translateY(100%);
    border-radius: 4px;
    font-size: 14px;
    color: #323233;
    line-height: 22px;
    
    &::before {
      content: "";
      display: block;
      border: 8px solid transparent;
      border-bottom-color: #fff;
      position: absolute;
      top: -15px;
      left: 14px;
      z-index: 1;
    }
    
    .ctrls-w {
      display: flex;
      justify-content: flex-end;
      margin-top: 13px;
    }
    
    .btn {
      padding: 0 8px;
      line-height: 24px;
      border-radius: 2px;
      background: #ebebeb;
      display: inline-block;
      cursor: pointer;
    }
    
    .submit-btn {
      background: #15BEC8;
      margin-left: 8px;
      color: #fff;
    }
    
    .expired {
      color: #ff4757;
      font-weight: 600;
    }
  }
}
</style>
