<template>
  <div class="project-card">
    <div class="title flex-row">
      <div class="flex">
        <img src="/@/assets/project/project-icon1.svg" class="icon" />
        项目信息
      </div>
      <el-select style="width: 15vw" v-model="project" @change="projectChange" placeholder="请选择">
        <el-option v-for="row in projectList" :key="row.id" :label="row.name" :value="row.code"></el-option>
      </el-select>
    </div>
    <div class="flex-row">
      <div class="flex">
        <div class="label">项目名称：</div>
        <div class="val">{{ projectData?.name }}</div>
      </div>
      <div class="flex">
        <div class="label">项目地址：</div>
        <div class="val">{{ projectData?.addressDetail }}</div>
      </div>
    </div>
    <section class="info">
      <div class="info-content">
        <div class="count-card">
          <img src="/@/assets/project/project-icon7.svg" class="icon" />
          <div class="count">{{ projectData?.heatingArea }} <span class="unit">m²</span></div>
          <div class="text">覆盖面积</div>
        </div>
        <div class="count-card">
          <img src="/@/assets/project/project-icon8.svg" class="icon" />
          <div class="count">{{ projectData?.deviceCount }} <span class="unit">台</span></div>
          <div class="text">设备台数</div>
        </div>
        <div class="count-card">
          <img src="/@/assets/project/project-icon9.svg" class="icon" />
          <div class="count">{{ projectData?.repairMobile || "-" }}</div>
          <div class="text">维保电话</div>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, inject, watch, Ref } from "vue";

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

const props = defineProps(["projectList"]);
const projectCode = inject<Ref<string>>("projectCode", ref(""));

const project = ref(projectCode);
const projectData = ref<any>({});

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

function projectChange(code: string) {
  project.value = code;
  emit("change", code);
  projectData.value = props.projectList.find((row: any) => row.code === code) || {};
}
</script>

<style lang="scss" scoped>
.label {
  color: var(--primary-color);
}

.val {
  color: #8798ad;
}

.info {
  margin-top: 10px;
  .info-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    .count-card {
      padding: 2vh;
      flex: 1;
      .icon {
        height: 5vh;
      }

      .label {
        color: var(--primary-color);
      }

      .count {
        color: #2e384d;
        font-size: 22px;
        margin: 4px 0;
      }
      .text {
        color: #8798ad;
        font-size: 12px;
      }
      .unit {
        font-size: 12px;
      }
    }
  }
}
.count-card {
  background: #ffffff;
  border-radius: 1px;
  border: 1px solid rgba(46, 91, 255, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(46, 91, 255, 0.07);
}
[data-theme="dark"] {
  .count-card {
    background: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.02);
  }
  .count {
    color: #3d7ade !important;
  }
  .label {
    color: #8b8d92;
  }

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