<template>
  <CollapseItem name="内容" :expanded="true">
    <SettingItemBox name="默认选中" :alone="true">
      <n-select v-model:value="optionData.selectButton" :options="selectButtonOptions" size="small" />
    </SettingItemBox> 
    <SettingItemBox name="按钮" :alone="true">
      <div class="button-setting-div" v-for="index in optionData.list.length">
        <n-input
          class="button-setting-input"
          size="small"
          v-model:value="optionData.list[index-1]"
          :minlength="1"
          type="text"
          placeholder="请输入按钮名称"
        />
        <div class="button-setting-del" @click="deleteButton(index-1)">
          <Icon icon="ic:baseline-delete" size="18px"/>
        </div>
      </div>
      <div class="button-insert-div" @click="insertButton"><Icon icon="material-symbols-light:new-window-sharp" size="18px" style="margin-right: 5px;"/>添加按钮</div>
    </SettingItemBox>
  </CollapseItem>
</template>

<script setup lang="ts">
import {
  CollapseItem,
  SettingItemBox,
  SettingItem
} from '@/components/Pages/ChartItemSetting'
import Icon from '@/components/Icon/Icon.vue';
import { computed } from 'vue';
const props = defineProps({
  optionData: {
    type: Object,
    required: true
  }
})
console.log('config',props)
const selectButtonOptions = computed(() => {
  let options = props.optionData.list.map(item => {
    return {
      value: item,
      label: item,
    }
  })
  options.unshift({
    value: '',
    label: '不默认选中'
  })
  return options
})
const insertButton = () => {
  props.optionData.list.push("")
}
const deleteButton = (index) => {
  props.optionData.list.splice(index,1)
}
</script>
<style lang="scss" scoped>
.button-setting-div{
  display: flex;
  margin-bottom: 10px;
  .button-setting-input{
    width: 80%;
    margin-right: 20px;
  }
  .button-setting-del{
    width: 28px;
    height: 28px; 
    background-color: #e2e2e2;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
  }
  .button-setting-del:hover{
    background-color: #ff4d4f;
    color: #fff;
  }
}
.button-insert-div{
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #0960bd;
  cursor: pointer;
  user-select: none;
  transition: 0.2s;
}
.button-insert-div:hover{
  color: #4f99d6
}
</style>
