<script setup lang="ts">
import { ref } from "vue";
import ClipBox from "@components/ClipBox/index.vue";

const tableData = ref([]);
const addCocoPiVisible = ref(false);
const CocoPiData = ref<any>({});


const onSubmit = () => {
  console.log("提交数据", CocoPiData.value);
  if (!CocoPiData.value.name || !CocoPiData.value.ip) {
    alert("请填写完整信息");
    return;
  }
}

</script>

<template>
  <ClipBox title="硬件信息">
    <div data-title="PV" class="realtime-content">
      <el-table :data="tableData">
        <el-table-column label="序号" width="80">
        </el-table-column>
        <el-table-column label="数据项" prop="item" width="200">
          <template #default="scope">
            <span>{{ scope.row.item }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数值" prop="value" width="200">
          <template #default="scope">
            <span>{{ scope.row.value }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="addCocoPiVisible" title="添加硬件" style="max-width: 600px;">
      <el-form :data="CocoPiData" label-width="auto">
        <el-form-item label="硬件名称：">
          <el-input v-model="CocoPiData.name" placeholder="请输入硬件名称"></el-input>
        </el-form-item>
        <el-form-item label="硬件ip：">
          <el-input v-model="CocoPiData.ip" placeholder="请输入硬件IP地址"></el-input>
        </el-form-item>
        <!-- <el-form-item label="地图位置：">
          <el-input v-model="CocoPiData.port" placeholder="请输入硬件端口" type="number"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </ClipBox>
</template>

<style scoped lang="less">
@import "@assets/styles/common.less";

:deep(.clip-content) {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

.realtime-content {
  flex: 1;
  background: #fff;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;

  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10 * @px2vw;
    list-style: none;
    box-shadow: 0 0 10 * @px2vw #00ecff7f inset;
    .borderInnerShadowBox();
  }

  li {
    margin: 0;
    filter: drop-shadow(0 0 0.8px #156dae) drop-shadow(0 0 0 #156dae) drop-shadow(0 0 0 #156dae) drop-shadow(0 0 0 #156dae) drop-shadow(0 0 0 #156dae);

    span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26 * @px2vw;
      height: 35 * @px2vw;
      mask: radial-gradient(circle at 0, transparent 6 * @px2vw, #fff 0),
        radial-gradient(circle at right, transparent 6 * @px2vw, #fff 0);
      mask-size: 50%;
      mask-position: 0, 100%;
      mask-repeat: no-repeat;
      background: #24489f;
      font-size: 28 * @px2vw;
      font-family: 方正兰亭粗黑, fantasy;
    }
  }

  &::before {
    content: attr(data-title);
    display: block;
    margin: 6 * @px2vw 0;
    font-size: 20 * @px2vw;
    color: #00ecff;
    text-align: center;
  }

  &+& {
    margin-left: 20 * @px2vw;
  }
}
</style>
