<template>
  <div class="go-chart-configurations-data" v-if="targetData">
    <n-space vertical>
      <n-tag type="success"> 分组返回的数据源 </n-tag>
      <n-card size="small">
        <n-code word-wrap :code="toString(targetData.option.dataset)" language="json"></n-code>
      </n-card>
      <n-tag type="info"> 使用res点语法或者res中括号语法 </n-tag>
      <n-tag type="warning">示例：res.xxxx</n-tag>
      <span>测试一下</span>
      <n-input type="textarea" @input="handleTestInput($event, option)" size="small" placeholder="请输入"></n-input>
      <n-code word-wrap :code="toString(testInputValue)" language="json"></n-code>
      <n-divider />
      <div v-for="(item, index) in groupList" :key="item.key + index">
        <n-space justify="space-between">
          <n-ellipsis> 组件id </n-ellipsis>
          <n-input size="small" v-model:value="item.id" :disabled="true"></n-input>
        </n-space>
        <n-space justify="space-between">
          <n-ellipsis> 组件名称 </n-ellipsis>
          <n-input size="small" v-model:value="item.chartConfig.title" :disabled="true"></n-input>
        </n-space>
        <n-space vertical justify="space-between">
          <n-ellipsis> 设置数据 </n-ellipsis>
          <n-input
            type="textarea"
            @update:value="handleInput(groupList!, item.id, $event)"
            size="small"
            :placeholder="String(item.option.dataset)"
          ></n-input>
        </n-space>
        <n-divider />
      </div>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { toRefs, ref, watch } from 'vue'
import { useTargetData } from '../../hooks/useTargetData.hook'
import { toString } from '@/utils'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { uniqBy } from 'lodash'

const { targetData } = useTargetData()

const { groupList, option } = toRefs(targetData.value)

const testInputValue = ref('')

const saveHistoryInputValueList = ref<saveHistoryInputValueListType>([])

const handleInput = (groupList: CreateComponentType[], id: string, inputValue: string) => {
  saveHistoryInputValueList.value.unshift({
    id,
    inputValue
  })
  handleGroupListById(groupList, id, inputValue, option.value.dataset)
}

const executeFn = (inputValue: string, dataset: datasetType) => {
  try {
    return Function('res', `return ${inputValue}`)(dataset)
  } catch (e) {
    return inputValue
  }
}

const setTargetDataset = (inputValue: string, dataset: datasetType) => {
  //不能用!,会排除0，0也是需要显示的
  return executeFn(inputValue, dataset) === undefined ? '' : executeFn(inputValue, dataset)
}

const handleGroupListById = (
  groupList: CreateComponentType[],
  id: string,
  inputValue: string,
  dataset: datasetType
) => {
  //原生for循环优化性能
  for (let index = 0, total = groupList.length; index < total; index++) {
    const targetItem = groupList[index]
    if (id === targetItem.id) targetItem.option.dataset = setTargetDataset(inputValue, dataset)
  }
}

//测试返回
const handleTestInput = (inputValue: string, { dataset }: GlobalThemeJsonType) => {
  testInputValue.value = setTargetDataset(inputValue, dataset)
}

watch(
  () => targetData.value,
  (newValue: CreateComponentType | CreateComponentGroupType) => {
    try {
      const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id')
      if (uniqHistoryInputValueList) {
        newValue.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList)
        window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList))
      }
      newValue?.groupList?.forEach((item: CreateComponentType) => {
        uniqHistoryInputValueList.forEach((uniqueItem: historyInputValue) => {
          if (uniqueItem.id === item.id) {
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            handleGroupListById(newValue.groupList!, uniqueItem.id, uniqueItem.inputValue, newValue.option.dataset)
          }
        })
      })
    } catch (e) {
      console.log(e)
    }
  },
  {
    deep: true
  }
)
</script>