<template>
  <div  class="go-title-03">
    <div class="flex ai-c jc-sb max-w">
      <img class="img" src="@/assets/images/chart/equipment/titlesbg08.png" />
      <div class="titleText">预警信息</div>
      <img class="rotate img" src="@/assets/images/chart/equipment/titlesbg08.png" />
    </div>
    <div class="flex ai-c jc-sb max-w" style="margin-top: 14px;">
      <div v-for="(item,index) in yjDatas" class="flex">
        <img class="desImg" :src="getAssetsImg(imgArr[index])" />
        <div class="flex column">
          <div class="dataStyle"><span class="numStyle">{{item.value}}</span>条</div>
          <div class="desStyle">{{item.label}}</div>
        </div>
      </div>
    </div>
    <div class="flex ai-c jc-sb max-w" style="margin: 18px 0 26px;">
      <img class="img" src="@/assets/images/chart/equipment/titlesbg08.png" />
      <div class="titleText">上报信息</div>
      <img class="rotate img" src="@/assets/images/chart/equipment/titlesbg08.png" />
    </div>
    <div class="flex ai-c jc-sa max-w">
      <div v-for="(item,index) in sbDatas" class="flex">
        <img class="desImg" :src="getAssetsImg(imgArr[index+3])" />
        <div class="flex column">
          <div class="dataStyle"><span class="numStyle">{{item.value}}</span>条</div>
          <div class="desStyle">{{item.label}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { getAssetsImg } from '@/utils/index';

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)
const {
  titleSize,
  titleColor,
  yjDatas,
  sbDatas,
  imgArr,
  desColor,
  desSize,
  datasColor,
  datasSize
} = toRefs(props.chartConfig.option)

// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
  props.chartConfig.option.yjDatas = resData;
});
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: column;
  .max-w{
    width: 100%;
  }
  .column{
    flex-direction: column;
  }
  .flex{
    display: flex;
  }
  .jc-sb{
    justify-content: space-between;
  }
  .jc-sa{
    justify-content: space-around;
  }
  .ai-c{
    align-items: center;
  }
  .img{
    width: 148px;
    height: 16px;
  }
  .rotate{
    transform: rotateY(180deg);
  }
  .titleText{
    color: v-bind('titleColor');
    font-size: v-bind('titleSize+"px"');
  }
  .dataStyle{
    font-size: 14px;
    color: #CBE7CD;
  }
  .numStyle{
    color: v-bind('datasColor');
    font-size: v-bind('datasSize+"px"');
  }
  .desStyle{
    color: v-bind('desColor');
    font-size: v-bind('desSize+"px"');
  }
  .desImg{
    margin-right: 10px;
  }
}
</style>
