<template>
  <CollapseItem name="路径" :expanded="true">
    <SettingItem v-for="(item, index) in optionData.dataset" :key="index">
      <n-input-group>
        <n-input
          v-model:value="optionData.dataset[index]"
          size="small"
          placeholder="请输入图片地址"
        ></n-input>
        <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
      </n-input-group>
    </SettingItem>
    <SettingItem>
      <n-button size="small" @click="optionData.dataset.push('')"> + 新增</n-button>
    </SettingItem>
  </CollapseItem>
  <CollapseItem name="轮播属性" :expanded="true">
    <SettingItem-box name="播放器">
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.autoplay" size="small" />
          <n-text>自动播放</n-text>
        </n-space>
      </SettingItem>
      <!-- 开启自动播放时，设置间隔时间 -->
      <SettingItem name="间隔时间">
        <n-input-number v-model:value="optionData.dataStyle.interval" size="small" placeholder="">
          <template #suffix> 毫秒 </template>
        </n-input-number>
      </SettingItem>
      <SettingItem name="轮播方向">
        <n-select
          v-model:value="optionData.dataStyle.direction"
          :options="directions"
          placeholder="选择方向"
        />
      </SettingItem>
      <SettingItem name="过渡效果">
        <n-select
          v-model:value="optionData.dataStyle.effect"
          :options="effects"
          placeholder="效果"
        />
      </SettingItem>
      <SettingItem name="每页数量">
        <n-input-number
          v-model:value="optionData.dataStyle.slidesPerview"
          size="small"
          placeholder=""
        ></n-input-number>
      </SettingItem>
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.centeredSlides" size="small" />
          <n-text>居中显示</n-text>
        </n-space>
      </SettingItem>
      <SettingItem name="图片样式">
        <n-select v-model:value="optionData.dataStyle.fit" :options="fitList" placeholder="样式" />
      </SettingItem>
    </SettingItem-box>
    <SettingItem-box name="指示器">
      <!-- <SettingItem name="样式">
        <n-select
          v-model:value="optionData.dataStyle.dotType"
          :options="dotTypes"
          placeholder="选择样式"
        />
      </SettingItem> -->
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.showDots" size="small" />
          <n-text>显示</n-text>
        </n-space>
      </SettingItem>
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.showArrow" size="small" />
          <n-text>箭头</n-text>
        </n-space>
      </SettingItem>
      <SettingItem>
        <n-space>
          <n-switch v-model:value="optionData.dataStyle.draggable" size="small" />
          <n-text>拖曳切换</n-text>
        </n-space>
      </SettingItem>
    </SettingItem-box>

    <SettingItem-box name="控制点样式">
      <SettingItem name="控制点位置（下）">
        <n-input-number
          v-model:value="optionData.buttonStyle.dotBottom"
          size="small"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="控制点位置（左）">
        <n-input-number
          v-model:value="optionData.buttonStyle.dotLeft"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="控制点颜色1">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.buttonStyle.dotColor1"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.buttonStyle.dotColor1 = optionData.buttonStyleClone.dotColor1"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="控制点颜色2">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.buttonStyle.dotColor2"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.buttonStyle.dotColor2 = optionData.buttonStyleClone.dotColor2"
        >
          恢复默认
        </n-button>
      </SettingItem>
    </SettingItem-box>
    <SettingItem-box name="箭头样式">
      <SettingItem name="箭头按钮长度">
        <n-input-number
          v-model:value="optionData.buttonStyle.buttonBottom"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="箭头按钮宽度">
        <n-input-number
          v-model:value="optionData.buttonStyle.buttonHeight"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="箭头位置（上下）">
        <n-input-number
          v-model:value="optionData.buttonStyle.buttonBottom"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="箭头位置（左右）">
        <n-input-number
          v-model:value="optionData.buttonStyle.buttonWidth"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="箭头按钮颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.buttonStyle.buttonColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.buttonStyle.buttonColor = optionData.buttonStyleClone.buttonColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="箭头图标颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.buttonStyle.iconColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.buttonStyle.iconColor = optionData.buttonStyleClone.iconColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="箭头图标大小">
        <n-input-number
          v-model:value="optionData.buttonStyle.iconFontSize"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
    </SettingItem-box>

    <SettingItem-box name="边框样式">
      <SettingItem name="边框颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="optionData.buttonStyle.borderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem>
        <n-button
          size="small"
          @click="optionData.buttonStyle.borderColor = optionData.buttonStyleClone.borderColor"
        >
          恢复默认
        </n-button>
      </SettingItem>
      <SettingItem name="边框宽度">
        <n-input-number
          v-model:value="optionData.buttonStyle.borderWidth"
          size="small"
          :min="0"
        ></n-input-number>
      </SettingItem>
    </SettingItem-box>
  </CollapseItem>
</template>

<script setup lang="ts">
  import { PropType, watch, ref } from 'vue';
  import { option } from './config';
  import { cloneDeep } from 'lodash-es';
  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';

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

  // 字典
  const dotTypes = [
    {
      label: '点',
      value: 'dot',
    },
    {
      label: '线',
      value: 'line',
    },
  ];
  const directions = [
    {
      label: '水平方向',
      value: 'horizontal',
    },
    {
      label: '垂直方向',
      value: 'vertical',
    },
  ];
  const effects = [
    {
      label: 'slide',
      value: 'slide',
    },
    {
      label: 'fade',
      value: 'fade',
    },
    {
      label: 'card',
      value: 'card',
    },
    {
      label: 'custom',
      value: 'custom',
    },
  ];

  // 适应类型
  const fitList = [
    {
      value: 'fill',
      label: 'fill',
    },
    {
      value: 'contain',
      label: 'contain',
    },
    {
      value: 'cover',
      label: 'cover',
    },
    {
      value: 'scale-down',
      label: 'scale-down',
    },
    {
      value: 'none',
      label: 'none',
    },
  ];
</script>
