<template>
  <div
    class="flex flex-r flex-align-center flex-justcontent-spacebetween top-header"
  >
    <div
      class="flex flex-r flex-align-center siteInfoCount-detail"
      v-for="(value, key) in siteInfoCount"
      :key="key"
      :class="[
        monitorTargetType == key || (monitorTargetType == '' && key == 'total')
          ? 'activeClass'
          : '',
      ]"
      @click="changeMonitorTargetType(key)"
    >
      <img :src="getTongJiImageUrl(`${key}_icon`)" class="h_icons" />
      <div class="h_label">
        {{ key == "total" ? "全部" : selectDictLabel(monitorTargetTypes, key)
        }}<span class="h_value">{{ value }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getSiteInfoCount } from "@/api/dataAnalysis/rtuSiteInfo";
const emit = defineEmits(["change"]);
const { proxy } = getCurrentInstance();
const monitorTargetTypes = proxy.fixDict["monitorTargetTypes"]; //监测对象类型
const siteInfoCount = ref({});
const monitorTargetType = ref("");

const props = defineProps({
  monitorTargetType: {
    type: String,
    default: "",
  },
});

watch(
  () => props.monitorTargetType,
  (value) => {
    monitorTargetType.value = props.monitorTargetType;
  }
);

//获取每种监测类型对应的站点类型和建设方式对应的数量
function getSiteInfoCountData() {
  getSiteInfoCount().then((res) => {
    siteInfoCount.value = res.data;
  });
}

////切换类型
function changeMonitorTargetType(key) {
  monitorTargetType.value = key == "total" ? "" : key;
  emit("change", monitorTargetType.value);
}
getSiteInfoCountData();
</script>
<style lang="scss" scoped>
.app-container {
  background: #f1f1f1;
  .table-content {
    background: #ffffff !important;
    padding: 20px;
    margin-top: 10px;
  }
}
.top-header {
  height: 100px;
  background: #ffffff;
  border-radius: 2px;
  padding-left: 20px;
  padding-right: 20px;

  .activeClass {
    height: 40px;
    background: #e4eeff;
    border: 1px solid #3782ff;
    padding-left: 8px;
    padding-right: 8px;
  }
  .h_icons {
    margin-right: 8px;
    width: 35px;
    height: 35px;
  }
  .h_label {
    font-size: 16px;
    font-family: Source Han Sans CN;

    color: #333333;
    line-height: 30px;
  }
  .h_value {
    font-size: 14px;
    font-family: Source Han Sans CN;
    color: #3782ff;
    line-height: 30px;
  }
  .siteInfoCount-detail {
    cursor: pointer;
    &:hover {
      height: 40px;
      background: #e4eeff;
      border: 1px solid #3782ff;
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}
</style>