<template>
  <!-- 配色 -->
  <div class="color-box">
    <PlusCircleFilled class="add-custom" @click="addColor" />
    <a-form v-if="Array.isArray(data) && data.length > 0">
      <a-form-item
        :colon="false"
        labelAlign="left"
        :wrapperCol="{
          style: { paddingLeft: '10px', paddingRight: '10px' },
        }"
      >
        <div class="card-box">
          <div class="card-item" v-for="(_item, index) in data" :key="index">
            <SelectColor v-model:value="data[index]" @change="changeInfo" />

            <div class="close-icon" v-if="data.length > 0">
              <IconFontSymbol
                icon="chongzhishibai"
                style="fill: rgb(255 84 97 / 50%)"
                :size="14"
                @click="deleteColor(index)"
              />
            </div>
          </div>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  import SelectColor from '/@/views/generator/desktop/components/designer/properties/SelectColor.vue';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { PlusCircleFilled } from '@ant-design/icons-vue';
  const props = defineProps({
    colors: Array<string>,
  });

  const emit = defineEmits(['update:info']);
  const data = ref(props.colors || []);

  function changeInfo() {
    emit('update:info', data.value);
  }
  function addColor() {
    data.value.push('');
    changeInfo();
  }
  function deleteColor(idx) {
    data.value.splice(idx);
    changeInfo();
  }
</script>

<style scoped>
  .color-box {
    margin-bottom: 12px;
  }
</style>
