<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>