<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"> 目前支持实时多属性 </n-tag>
      <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-select size="small" :placeholder="String(!item.option.selectKey?'':item.option.selectKey)" 
           :options="dataCacheKeys" @update:value="(key:string,options:SelectOption[]) => handleSelectDataKey(key,options,item.id,groupList!)">
          </n-select>
        </n-space>
        <n-space vertical justify="space-between">
          <n-ellipsis>数据内容 </n-ellipsis>
          <n-input
            type="textarea"
            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,computed } 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 { uniqBy } from 'lodash'
import { SelectOption } from 'naive-ui'

const { targetData } = useTargetData()

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

const saveHistoryInputValueList = ref<saveHistoryInputValueListType>([])

const handleSelectDataKey = (key:string, _:SelectOption[], currentComponentId:string, groupList:CreateComponentType[]) => {
  saveHistoryInputValueList.value.unshift({
    id:currentComponentId,
    inputValue:key
  })
  handleGroupListById(groupList, currentComponentId, key, option.value.dataset)
}

const executeFn = (inputValue: string, dataset: any) => {
  try {
    return Function('res', `return ${dataset[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.selectKey = inputValue // 回显选择的下拉框
      targetItem.option.dataset = setTargetDataset(inputValue, dataset)
    }
  }
}


//键值
const dataCacheKeys = computed(()=>{
  const datasetCache = targetData.value.option.dataset
  if(!datasetCache) return []
  if(datasetCache.constructor === Object){
    //暂且不兼容嵌套对象
    if(Reflect.ownKeys(datasetCache).length !== 0){
      return Object.keys(datasetCache).map((dataItem:string)=>({label:dataItem,value:dataItem})) as SelectOption[]
    }
  }
  return []
})

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>