<template>
  <div  class="go-title-03">
    <img :width="w*0.71" :height="h*0.69" src="@/assets/images/chart/zhilan/zlicons08.png" />
    <div class="box">{{ text }}</div>
    <div class="mousebox">
      <div class="title">{{ text }}</div>
      <div v-for="item in dataset" class="span">
        <div>{{item.label}}：</div><div>{{item.value}}</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';

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

const { w, h } = toRefs(props.chartConfig.attr)
const {
  text,
  textColor,
  textSize,
  dataset
} = toRefs(props.chartConfig.option)
 // 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
  props.chartConfig.option.dataset = resData;
});
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; 
  &:hover .mousebox{
    display: block;
  }
  .box{
    width: v-bind('w+"px"');
    height: v-bind('h*0.26+"px"');;
    background: linear-gradient( 270deg, rgba(31,107,85,0) 0%, #045239 50%, rgba(10,57,42,0) 100%);
    color: v-bind('textColor');
    font-size: v-bind('textSize+"px"');
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  .mousebox{
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -95px;
    width: 190px;
    height: 156px;
    background: url('@/assets/images/chart/zhilan/zliconsdetail.png');
    background-size: 100% 100%;
    display: none;
    .title{
      color: #fff;
      font-size: 16px;
      margin-left: 25px;
      margin-top: 15px;
      margin-bottom: 13px;
    }
    .span{
      color: #CBE6CD;
      font-size: 12px;
      margin-left: 25px;
      display: flex;
      margin-top: 1px;
    }
  }
}
</style>
