<template>
  <div class="project-card">
    <div class="select-device title flex-row">
      <div class="flex">
        <img src="/@/assets/project/project-icon2.svg" class="icon" />
        基本信息
      </div>
      <el-select style="width: 15vw" v-model="deviceKey" @change="deviceChnage" placeholder="请选择">
        <el-option v-for="row in deviceList" :key="row.key" :label="row.name" :value="row.key"></el-option>
      </el-select>
    </div>
    <div class="baseinfo-wrapper" v-loading="loading">
      <section class="baseinfo">
        <div class="flex-item" v-for="row in propertiyList" :key="row.devicePropertiyKey">
          <div class="label">{{ row.devicePropertiyName }}</div>
          <div class="val">
            {{ row.devicePropertiyValue }}
            <span class="unit" v-if="row.devicePropertiyUnit">{{ row.devicePropertiyUnit }}</span>
          </div>
        </div>
        <template v-if="propertiyList.length % 3">
          <div class="flex-item space" v-for="i in 3 - (propertiyList.length % 3)" :key="i"></div>
        </template>
      </section>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, watch, Ref } from "vue";
import api from "/@/api/projects";

const emit = defineEmits(["change"]);

const projectCode = inject<Ref<string>>("projectCode", ref(""));

const loading = ref(false);
const deviceKey = ref("");
const deviceList = ref<any[]>([]);
const propertiyList = ref<any[]>([]);

watch(() => projectCode.value, getData);

function getData(code: string) {
  if (!code) return;

  loading.value = true;

  deviceKey.value = "";
  deviceList.value = [];
  propertiyList.value = [];

  api.screen.projectDevices(code).then((res: any) => {
    if (!res?.length) return (loading.value = false);

    const keys = (res || []).filter((row: any) => row.resourcesTypes === 1).map((item: any) => item.resourcesKey);

    loading.value = true;
    api.screen.projectDevicesList(keys).then((res: any) => {
      const list = res.device || [];

      deviceList.value = list;

      if (list.length) {
        deviceKey.value = list[0].key;
        deviceChnage();
      } else {
        emit("change", "");
        loading.value = false;
      }
    });
  });
}

function deviceChnage() {
  emit("change", deviceKey.value);

  loading.value = true;
  api.screen
    .propertyListValue(projectCode.value, deviceKey.value)
    .then((res: any) => {
      propertiyList.value = res || [];
    })
    .finally(() => (loading.value = false));
}
</script>

<style lang="scss" scoped>
.project-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.select-device {
  display: flex;
  align-items: center;
}
.baseinfo-wrapper {
  flex: 1;
  overflow-y: auto;
}
.baseinfo {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 10px;

  .flex-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    height: 40px;
    max-width: 33%;
    min-width: 30%;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #e0e7ff;
    font-weight: 500;
    padding: 0 3%;

    &.space {
      background: none;
    }

    .label {
      color: #2e384d;
    }

    .val {
      font-size: 15px;
      font-weight: bold;
      color: #8798ad;

      .unit {
        font-weight: normal;
        font-size: 12px;
      }
    }
  }
}
[data-theme="dark"] {
  .flex-item {
    border: 1px solid #717171;
  }
  .label {
    color: #a4a6ad !important;
  }

  .val {
    color: #4285f5 !important;
  }
}
</style>
