<template>
  <div class="custom-text-box">
    <div class="content">
      <span style="cursor: pointer" v-if="link" @click="click">{{ option.dataset }}</span>
      <span v-if="!link">{{ option.dataset }}</span>
    </div>
  </div>
</template>

<script setup>
import { toRefs, shallowReactive, watch, ref, computed } from 'vue';
import { useChartDataFetch } from '../../../hooks/useChartDataFetch.hook';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useRouter } from 'vue-router';

const config = ref(null);

import('./config.js').then(module => {
  config.value = module;
});

// 计算属性
const configOption = computed(() => {
  return config.value ? config.value.option : {};
});

const router = useRouter();

const props = defineProps({
  chartConfig: {
    type: Object,
    required: true
  }
});

const {
  linkHead,
  link,
  fontColor,
  fontSize,
  letterSpacing,
  paddingY,
  paddingX,
  textAlign,
  borderWidth,
  borderColor,
  borderRadius,
  writingMode,
  backgroundColor,
  fontWeight
} = toRefs(props.chartConfig.option);

const option = shallowReactive({
  dataset: configOption.dataset
});

// 手动更新
watch(
  () => props.chartConfig.option.dataset,
  newData => {
    option.dataset = newData;
  },
  {
    immediate: true,
    deep: false
  }
);

// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
  option.dataset = newData;
});

//打开链接
const click = () => {
  const { href } = router.resolve({
    path: linkHead.value + link.value
  });
  window.open(href, '_blank');
};
</script>

<style lang="less" scoped>
.custom-text-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: v-bind('textAlign');
    color: v-bind('fontColor');
    padding: v-bind('paddingY + "px", paddingX + "px"');
    font-size: v-bind('fontSize + "px"');
    letter-spacing: v-bind('letterSpacing + "px"');
    writing-mode: v-bind('writingMode');
    font-weight: v-bind('fontWeight');
    border-style: solid;
    border-width: v-bind('borderWidth + "px"');
    border-radius: v-bind('borderRadius + "px"');
    border-color: v-bind('borderColor');

    background-color: v-bind('backgroundColor');
  }
}
</style>
