<template>
  <collapse-item name="配置" :expanded="true">
    <template v-for="(item, index) in optionData.valueConfig" :key="index">
      <setting-item-box name="变量值" :alone="true">
        <setting-item>
          <n-input v-model:value="item.value"></n-input>
        </setting-item>
      </setting-item-box>
      <div style="height: 10px"></div>
      <setting-item-box name="变量图片" :alone="true">
        <setting-item>
          <TKUpload
            :uploadIndex="index"
            :uploadImageUrl="item.imageUrl"
            @sendFile="handleSendFile"
            @removeFile="handleRemoveFile"
          />
        </setting-item>
      </setting-item-box>
      <n-button size="small" @click="optionData.valueConfig.splice(index, 1)"> - </n-button>
    </template>
    <n-button
      style="margin-left: 10px"
      v-if="optionData.valueConfig"
      size="small"
      @click="
        optionData.valueConfig.push({
          value: '',
          imageUrl: '',
        })
      "
    >
      +
    </n-button>
  </collapse-item>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { option } from './config'
import { TKUpload } from '@/components/external/Common/TKUpload'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'

const props = defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})

const handleSendFile = (file: string, index: number) => {
  if (!file) return
  props.optionData.valueConfig[index].imageUrl = file
}

const handleRemoveFile = (status: boolean, index: number) =>
  status ? (props.optionData.valueConfig[index].imageUrl = '') : null
</script>