<script setup lang="ts">
defineOptions({
  name: "EquipmentIndex",
  inheritAttrs: false,
});
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";
import { ClassList } from "@/api/school/types";
import { CaretBottom } from "@element-plus/icons-vue";
const userStore = useUserStore();
watch(
  () => userStore.schoolId,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);
let equipmentInfo = ref("");
// 教师编号
let teacherNumber = ref(0);
const teacherData = ref<ClassList[]>([
  {
    id: 0,
    school_id: 0,
    name: "全部",
  },
]);
</script>

<template>
  <div class="equipment-container">
    <!-- 设备查找 -->
    <div class="equipment-search">
      <el-select
        v-model="teacherNumber"
        placeholder="请选择使用者名称"
        size="large"
        :suffix-icon="CaretBottom"
      >
        <el-option
          v-for="item in teacherData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-input
        v-model="equipmentInfo"
        size="large"
        placeholder="请输入设备编号"
      />
      <el-button size="large" type="primary">查找</el-button>
    </div>
    <div class="equipment-box">
      <div class="title"><span>水母星球脑机</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i nj"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i nj"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i nj"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i nj"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i nj"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i nj"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="equipment-box">
      <div class="title"><span>智脑水舞</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i sw"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="equipment-box">
      <div class="title"><span>智脑碰碰车</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i ppc"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="equipment-box">
      <div class="title"><span>智脑赛车</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i sc"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="equipment-box">
      <div class="title"><span>智脑恐龙</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i kl"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="equipment-box">
      <div class="title"><span>智脑SUV</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i suv"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="equipment-box">
      <div class="title"><span>智脑UFO</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i ufo"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="equipment-box">
      <div class="title"><span>智脑积木</span><b>5</b>台</div>
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
          <div class="box-card">
            <el-row>
              <el-col :span="9" class="img">
                <div class="i jm"></div>
                <div class="value">AI30200274</div>
              </el-col>
              <el-col :span="15" class="info">
                <div class="label mb-2">固件版本</div>
                <div class="value mb-4">1.06-5-85E3FEB</div>
                <div class="label mb-2">绑定时间</div>
                <div class="value mb-4">2023-07-12 13:22</div>
                <div class="label mb-2">使用者</div>
                <div class="value mb-2">松阪老师</div>
                <div class="value">13766278827</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.equipment-container {
  position: relative;
  padding: 20px 30px;
}
.equipment-search {
  margin-bottom: 20px;
  font-size: 16px;
  .el-select {
    width: 180px;
    margin: 0 20px 0 0;
  }
  .el-input {
    width: 180px;
    margin: 0;
  }
  :deep(.el-input__inner) {
    font-size: 16px;
  }
  .el-button {
    font-size: 16px;
    padding: 0 26px;
    margin: 0 20px;
    border-radius: 12px;
  }
}
/* 自定义 el-select 样式 */
:deep(.el-input__wrapper) {
  background: #ffffff;
  border-radius: 12px;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
}
:deep(.el-select) {
  --el-select-input-focus-border-color: none !important;
}
:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: none !important;
}
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: none !important;
}
.equipment-box {
  .title {
    font-size: 16px;
    color: #4284f2;
    text-indent: 0.5em;
    span {
      font-size: 24px;
      display: inline-block;
      min-width: 180px;
    }
    b {
      font-size: 28px;
    }
  }
  .box-card {
    background: #ffffff;
    border-radius: 30px;
    border: 1px solid #e6e8eb;
    position: relative;
    padding: 20px 0;
    font-size: 14px;
    margin-bottom: 10px;
    .info {
      border-left: 1px solid #e0e6f1;
      padding-left: 28px;
      line-height: 14px;
      .label {
        color: #999999;
      }
      .value {
        color: #23283c;
      }
    }
    .img {
      text-align: center;
      .i {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        &.nj {
          background: url("../../assets/equipment/NJ.png") center center
            no-repeat;
        }
        &.sw {
          background: url("../../assets/equipment/SW.png") center center
            no-repeat;
        }
        &.kl {
          background: url("../../assets/equipment/KL.png") center center
            no-repeat;
        }
        &.suv {
          background: url("../../assets/equipment/SUV.png") center center
            no-repeat;
        }
        &.ufo {
          background: url("../../assets/equipment/UFO.png") center center
            no-repeat;
        }
        &.ppc {
          background: url("../../assets/equipment/PPC.png") center center
            no-repeat;
        }
        &.sc {
          background: url("../../assets/equipment/SC.png") center center
            no-repeat;
        }
        &.jm {
          background: url("../../assets/equipment/JM.png") center center
            no-repeat;
        }
      }
    }
  }
}
</style>
