<!--
 * @Author: nxy
 * @Date: 2024-08-07 13:47:07
-->
<template>
  <div class="custom-chart-configurations-setting" v-if="targetData">
    <a-form :label-width="45" label-placement="left" :model="targetData.chartConfig">
      <a-form-item label="名称">
        <a-input v-model:value="targetData.chartConfig.title" allowClear></a-input>
      </a-form-item>
      <a-form-item label="尺寸">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-input-number v-model:value="targetData.attr.w">
              <template #addonBefore>宽度</template>
            </a-input-number>
          </a-col>
          <a-col :span="12">
            <a-input-number v-model:value="targetData.attr.h">
              <template #addonBefore>高度</template>
            </a-input-number>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="位置">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-input-number v-model:value="targetData.attr.y">
              <template #addonBefore>上</template>
            </a-input-number>
          </a-col>
          <a-col :span="12">
            <a-input-number v-model:value="targetData.attr.x">
              <template #addonBefore>左</template>
            </a-input-number>
          </a-col>
        </a-row>
      </a-form-item>
      <!-- 自定义配置项 -->
      <component :is="customConfigPath" :optionData="targetData.option" v-if="customConfigPath"></component>
    </a-form>
  </div>
</template>

<script setup name="ChartSetting">
import { computed, defineAsyncComponent, watch, shallowRef, onMounted } from 'vue';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';

const chartEditStore = useChartEditStore();

const customConfigPath = shallowRef('');

const targetData = computed(() => {
  const list = chartEditStore.getComponentList;
  const targetIndex = chartEditStore.fetchTargetIndex();
  return list[targetIndex];
});

onMounted(() => {
  buildFormConfigPath();
});

watch(
  () => targetData.value,
  val => {
    if (val) {
      customConfigPath.value = '';
      buildFormConfigPath();
    }
  },
  { deep: true }
);

// 构造表单项属性组件
const buildFormConfigPath = () => {
  let componentName = targetData.value?.chartConfig?.conKey;
  const { category, key } = targetData.value.chartConfig;
  let arr = ['VPieCommon', 'VTextCommon'];
  if (arr.includes(componentName)) {
    customConfigPath.value = defineAsyncComponent(
      () => import(`../../echart/${targetData.value.chartConfig.package}/${category}/${key}/configure.vue`)
    );
  }
};
</script>

<style scoped lang="less"></style>
