<template>
  <div class="lowerLeft">
    <div class="image">
      <Icon :dataStyle="option.dataStyle" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import Icon from './svg/icon.vue';

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

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    dataStyle: props.chartConfig.option.dataStyle,
  });

  watch(
    () => option.dataStyle.imageWidth,
    () => {
      option.dataStyle.imageHeight = (option.dataStyle.imageWidth * 26) / 28;
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>

<style lang="scss" scoped>
  .lowerLeft {
    background: v-bind('`${option.dataStyle.backgroud}`');
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }
  .image {
    position: absolute;
    right: v-bind('`${option.dataStyle.right}px`');
    bottom: v-bind('`${option.dataStyle.bottom}px`');
    bottom: 0px;
  }
</style>
