<template>
  <div class="font-700 text-blue-5 mb-20px text-30px">远程控制</div>
  <div class="flex flex-wrap gap-10">
    <el-card title="灯杆实时监控" :bordered="true" style="width: 30%">
      <template #extra>
        <a href="#">查看更多</a>
      </template>
      <div v-for="(pole, index) in poles" :key="index" class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
        <div>{{ pole.name }}</div>
        <el-tag :type="pole.type" effect="dark">
          <component :is="pole.iconComponent" class="icon-size-15" />
          {{ pole.status }}
        </el-tag>
        <div>
          <span>空开状态</span>
          <el-switch v-model="pole.switchState"></el-switch>
        </div>
      </div>
    </el-card>
    <el-card title="垃圾桶实时监控" :bordered="true" style="width: 30%">
      <template #extra>
        <a href="#">查看更多</a>
      </template>
      <div v-for="(bin, index) in bins" :key="index" class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
        <div>{{ bin.name }}</div>
        <el-tag :type="bin.type" effect="dark">
          <component :is="bin.iconComponent" class="icon-size-15" />
          {{ bin.status }}
        </el-tag>
        <div>
          <span>空开状态</span>
          <el-switch v-model="bin.switchState"></el-switch>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElCard, ElTag, ElSwitch } from 'element-plus'
import { Checked, Close, Warning } from '@element-plus/icons-vue'

const poles = ref([
  { name: '一号灯杆', status: '在线', type: 'success', iconComponent: Checked, switchState: true },
  { name: '二号灯杆', status: '在线', type: 'success', iconComponent: Checked, switchState: true },
  { name: '三号灯杆', status: '在线', type: 'success', iconComponent: Checked, switchState: true },
  { name: '四号灯杆', status: '在线', type: 'success', iconComponent: Checked, switchState: true }
])

const bins = ref([
  { name: '一号垃圾桶', status: '空间充足', type: 'success', iconComponent: Checked, switchState: true },
  { name: '二号垃圾桶', status: '快满', type: 'warning', iconComponent: Warning, switchState: true },
  { name: '三号垃圾桶', status: '满', type: 'danger', iconComponent: Close, switchState: true },
  { name: '四号垃圾桶', status: '满', type: 'danger', iconComponent: Close, switchState: true }
])
</script>

<style scoped>
.font-700 {
  @apply font-bold;
}
.text-blue-5 {
  @apply text-blue-500;
}
.mb-20px {
  @apply mb-5;
}
.text-30px {
  @apply text-3xl;
}
.flex {
  @apply flex;
}
.flex-wrap {
  @apply flex-wrap;
}
.gap-10 {
  @apply gap-2.5;
}
.border-b-1 {
  @apply border-b;
}
.border-b-solid {
  @apply border-solid;
}
.border-b-blue-50 {
  @apply border-blue-50;
}
.pb-10px {
  @apply pb-2.5;
}

/* 新增的图标尺寸样式 */
.icon-size-15 {
  width: 15px;
  height: 15px;
}
</style>
