<template>
  <Module
    class="h-1/3"
    :loading="loading"
    :error="error"
    :info="bsMeta && bsMeta['utilities']"
  >
    <template #title>设备数量统计 - {{ activeSectionSystemName }}</template>
    <div
      class="baseNumber"
      style="width: 100%; overflow: auto;"
      v-if="dataList?.length > 0"
    >
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="jcsstj-outline flex justify-between items-center"
      >
        <div :class="index > 2 ? 'jcsstj-num' : 'jcsstj-num-top'">
          {{ index + 1 }}
        </div>
        <div class="jcsstj-text">
          {{ item.text }}
        </div>
        <div :class="index > 2 ? 'jcsstj-blout' : 'jcsstj-blout-top'">
          <div
            :class="index > 2 ? 'jcsstj-bl' : 'jcsstj-bl-top'"
            :style="{
              width: item.percent,
            }"
          ></div>
        </div>
        <div class="jcsstj-cont">
          {{ item.value }}
        </div>
      </div>
    </div>
  </Module>
</template>

<script lang="ts" setup>
import { computed, defineProps, reactive, ref, watch } from 'vue'
import vueSeamlessScroll from '@/components/vueSeamlessScroll/index.vue'
import { useStore } from 'vuex'
import { key } from '@/store'
import { eqNumByType } from '@/api/ele-control-cabin'
import { maxBy } from 'lodash'

const store = useStore(key)
const activeSectionSystemName = computed({
  get: () => store.state.activeSectionSystemName,
  set(val: string) {
    store.commit('activeSectionSystemName', val)
  },
})
const refresh = computed(() => store.state.ele?.refresh)
const orgCode = computed(() => store.state.ele?.orgCode)
interface Item2 {
  text: string
  value: any
}
const data = reactive({
  dataList: [],
})
const dataList = computed(() => data.dataList)
const maxNum = ref(0)
const getData = () => {
  eqNumByType({
    typeName: activeSectionSystemName.value,
    ...orgCode.value,
  }).then((res) => {
    if (res.data) {
      const maxItem: any = maxBy(res.data)
      res.data.forEach((el: any) => {
        el.percent = `${(el.value / maxItem.value) * 100}%`
      })
      data.dataList = res.data
      console.log(maxItem)
      maxNum.value = maxItem.value

      data.dataList = (data.dataList || []).filter(
        (i) =>
          ![
            '渝遂扩能',
            '南潼、南充过境高速',
            '阆营高速',
            '泸古高速',
            '丘砚高速',
            '陆寻高速',
            '昆宜高速',
          ].includes(i.text),
      )
    }
  })
}

watch([refresh, activeSectionSystemName], () => {
  getData()
})
</script>

<style lang="postcss" scoped>
.com-data-list {
  @apply absolute inset-0 overflow-x-hidden overscroll-y-auto flex flex-col p-0.5;
}
.baseNumber {
  height: vh;
}
.com-data-item {
  @apply p-0.5;
}

.item {
  background: linear-gradient(
    to left top,
    rgba(0, 59, 88, 0.3),
    rgba(0, 70, 105, 1)
  );
  border: 1px solid rgba(7, 133, 196, 0.4);

  @apply w-full rounded-sm flex items-center px-2 py-2;

  & .svg-icon {
    font-size: 25px;
    color: rgba(255, 255, 255, 0.5);
  }
}

.dataWarp {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-shadow: none;
  margin-left: auto;
  font-size: 14px;
}

.prop + .prop {
  margin-top: 5px;
}

.prop:nth-child(2) {
  color: rgb(0, 180, 224);
}
.jcsstj-outline {
  margin-top: 10px;
  margin-bottom: 8px;
}
.jcsstj-num-top {
  width: 20px;
  height: 24px;
  font-size: 13px;
  font-weight: bold;
  color: #ff9a00;
  background: url('@/assets/images/jcsstj-top-num.png');
  background-size: 100% 100%;
  text-align: center;
  line-height: 24px;
  font-style: oblique;
  margin-right: 10px;
  padding-right: 2px;
}
.jcsstj-num {
  width: 20px;
  height: 24px;
  font-size: 13px;
  font-weight: bold;
  color: #badeff;
  width: 20px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-style: oblique;
  margin-right: 10px;
  padding-right: 2px;
}
.jcsstj-text {
  font-size: 14px;
  color: #909fac;
  width: 90px;
}
.jcsstj-blout-top {
  width: calc(100% - 170px);
  height: 12px;
  padding: 3px;
  /* border: 1px solid red; */
  border: 1px solid rgba(255, 154, 0, 0.15);
  background: rgba(255, 154, 0, 0.1);
}
.jcsstj-blout {
  width: calc(100% - 180px);
  height: 12px;
  padding: 3px;
  border: 1px solid rgba(0, 132, 251, 0.25);
  background: rgba(0, 132, 251, 0.1);
}
.jcsstj-bl-top {
  height: 4px;
  background: #ff9a00;
}
.jcsstj-bl {
  height: 4px;
  background: #0084fb;
}
.jcsstj-cont {
  font-size: 16px;
  color: #ffdaa5;
  width: 50px;
  margin-left: 10px;
}
</style>
