<template>
  <div class="components-list">
    <div v-for="(list, index) in controlList" :key="index">
      <div class="title" style="font-size: 20px">{{ list.title }}</div>
      <draggable itemKey="key123" tag="ul" v-model="list.children" :group="{ name: 'form', pull: 'clone', put: false }"
        ghost-class="ghost" :sort="false" :clone="clone">
        <template #item="{ element }">
          <li :class="[element.control]" @click="handleClick(element)">
            <i :class="`icon-${element.control}`"></i>
            <span :title="element.label">{{ element.label }}</span>
          </li>
        </template>
      </draggable>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, getCurrentInstance } from 'vue'
import Draggable from 'vuedraggable-es'
import { useGlobalPinia } from '@/pinia/global'
import { replace } from '@/utils/index';
import { NUMBER_MAX } from '@/components/GdElement/common';
const $t: any = getCurrentInstance()?.appContext.config.globalProperties.$t
const { lang } = useGlobalPinia()

const props = defineProps<{
  columnConfig: any,
  columnData: any,
  disabled?: boolean
}>()

const handleClick = (item: any) => {
  if (props.disabled) {
    return
  }
  const data = JSON.parse(JSON.stringify(item))
  data.prop = data.control + new Date().getTime()
  data.propAlias = data.prop
  data[`label${lang}`] = data.label
  props.columnConfig.push(data)
  replace(props.columnData, data)
}

const controlList: any = computed(() => {
  const data: any = [
    {
      title: $t('basic_control'),
      children: [
        {
          control: 'input',
          label: $t('input'),
          maxlength: 20,
        },
        {
          control: 'input',
          type: 'textarea',
          label: $t('textarea'),
          maxlength: 100,
          rows: 2
        },
        {
          control: 'input-number',
          label: $t('number_input'),
          min: 0,
          max: NUMBER_MAX,
          precision: 0
        },
        {
          control: 'select',
          type: 'dict',
          label: $t('select'),
          dictkey: ''
        },
        {
          control: 'date-picker',
          type: 'date',
          label: $t('date_picker'),
          valueFormat: 'YYYY-MM-DD HH:mm:ss'
        },
        {
          control: 'switch',
          label: $t('switch'),
          defaultPropValue: false
        },
        {
          control: 'upload',
          label: $t('Upload'),
        },
      ]
    },
    {
      title: $t('business_control'),
      children: [
        {
          control: 'table-select',
          type: 'user',
          label: $t('employee_select')
        },
        {
          control: 'tree-select',
          type: 'organize',
          label: $t('organization_select')
        },
        {
          control: 'select',
          type: 'role',
          label: $t('role_select')
        },
      ]
    },
    // {
    //   title: $t('other_control'),
    //   children: [
    //     {
    //       control: 'divider',
    //       label: $t('divider'),
    //       notFormItem: true,
    //       col: 2,
    //       contentPosition: 'left'
    //     }
    //   ]
    // }
  ]
  data.forEach((item: any) => {
    item.children.forEach((data: any) => {
      data.col = data.col || 1
    })
  })
  return data
})

const clone = (origin: any) => {
  return JSON.parse(JSON.stringify(origin))
}
</script>