import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { ModalCarouselConfig } from './index'

export const option = {
    // 图片资源列表
    dataset: [
      'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
      'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
      'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
    ],
    buttonStyle:{
      dotBottom: 10,
      dotLeft: 120,
      dotColor1: '#00611a', 
      dotColor2: '#00cc13', 

      buttonWidth: 20,
      buttonHeight: 60,
      
      buttonBottom: 80,
      buttonLeftAndRight: 0,
      buttonColor: '#A4A4A4FF',

      iconFontSize: 20,
      iconColor: '#1EC233',

      borderWidth: 2,
      borderColor: '#008000', 
    },
    buttonStyleClone:{
      dotColor1: '#00611a', 
      dotColor2: '#00cc13', 
      buttonColor: '#A4A4A4FF',
      iconColor: '#1EC233',
      borderColor: '#008000', 
    },
    dataStyle: {
      // 自动播放
      autoplay: true,
      // 自动播放的间隔（豪秒）
      interval: 5000,
      // 每页显示的图片数量
      slidesPerview: 1,
      // 轮播方向
      direction: "horizontal",
      // 拖曳切换
      draggable: true,
      // 居中显示
      centeredSlides: false,
      // 过渡效果
      effect: "slide",
      // 是否显示指示点
      showDots: true,
      // 指示器样式
      dotType: "line",
      // 显示箭头
      showArrow: true,
      // 图片样式
      fit: "contain",
    }
}

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = ModalCarouselConfig.key
  public attr = { ...chartInitConfig, w: 320, h: 250, zIndex: -1 }
  public chartConfig = cloneDeep(ModalCarouselConfig)
  public option = cloneDeep(option)
}