<template>
  <collapse-item name="按钮配置" :expanded="true">
    <setting-item-box name="默认值" :alone="true">
      <n-select size="small" v-model:value="optionData.buttonType" :options="buttonTypeOptions" />
    </setting-item-box>
    <setting-item-box name="虚线">
      <setting-item name="">
        <n-switch v-model:value="optionData.buttonDashed" />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="透明">
      <setting-item name="">
        <n-switch v-model:value="optionData.buttonGhost" />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="颜色">
      <setting-item name="">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="文字颜色">
      <setting-item name="">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonTextColor"></n-color-picker>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="文字大小">
      <setting-item name="">
        <n-input-number v-model:value="optionData.buttonTextSize" />
      </setting-item>
    </setting-item-box>
    <setting-item-box :alone="true">
      <setting-item name="按钮文字" :alone="true">
        <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
      </setting-item>
    </setting-item-box>
    <setting-item-box :alone="true">
      <template #name>
        <n-text>目标</n-text>
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-icon size="21" :depth="3">
              <help-outline-icon></help-outline-icon>
            </n-icon>
          </template>
          <span class="help-span">{{ targetHelpMessgae }}</span>
        </n-tooltip>
      </template>
      <n-select
        style="width: 13.5vw"
        placeholder="请选择目标项"
        multiple
        v-model:value="optionData.selectTargetItems"
        :options="selectTargetItemOptions"
      />
    </setting-item-box>
  </collapse-item>
</template>

<script lang="ts" setup>
import { PropType, ref, onMounted } from 'vue'
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
import { icon } from '@/plugins'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

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

const chartEditStore = useChartEditStore()

const { HelpOutlineIcon } = icon.ionicons5

const targetHelpMessgae = ref(`勾选目标项,支持多个`)

const buttonTypeOptions = [
  {
    label: 'default',
    value: 'default'
  },
  {
    label: 'primary',
    value: 'primary'
  },
  {
    label: 'tertiary',
    value: 'tertiary'
  },
  {
    label: 'info',
    value: 'info'
  },
  {
    label: 'success',
    value: 'success'
  },
  {
    label: 'warning',
    value: 'warning'
  },
  {
    label: 'error',
    value: 'error'
  }
]

const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])

onMounted(() => {
  const componentList = chartEditStore.componentList.map(item => ({
    label: item.chartConfig?.title,
    value: item.id
  }))
  selectTargetItemOptions.value = componentList
})
</script>
<style lang="scss" scoped>
.help-span {
  display: flex;
  flex-wrap: wrap;
  width: 8vw;
  color: white;
}
</style>