<template>
  <div>
    <el-form-item label="栅格间隔" label-position="left">
      <avue-input-number
        v-model="option.params.gutter"
        controlsPosition="top"
        :step="10"
        :min="0"
      ></avue-input-number>
    </el-form-item>
    <el-row :gutter="10">
      <el-col :md="12" :xs="24">
        <el-form-item label="垂直排列">
          <avue-select
            v-model="option.params.align"
            placeholder="垂直排列"
            :dic="alignList"
          ></avue-select>
        </el-form-item>
      </el-col>
      <el-col :md="12" :xs="24">
        <el-form-item label="水平排列">
          <avue-select
            v-model="option.params.justify"
            placeholder="水平排列"
            :dic="justifyList"
          ></avue-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <template #label>
        <div class="flex">
          <div>栅格项配置：</div>
          <div class="mt--2px">
            <el-button v-if="isSimplify" type="primary" text link @click="isSimplify = false">
              展开配置
            </el-button>
            <el-button v-else type="primary" text link @click="isSimplify = true">
              收起配置
            </el-button>
          </div>
        </div>
      </template>
      <draggable
        tag="div"
        :list="option.column"
        :group="{ name: 'tabsdic' }"
        ghost-class="tabs-ghost"
        :animation="300"
        handle=".drag-item"
        item-key="id"
        @end="handleAddGroupColumn"
      >
        <template #item="{ element, index }">
          <div class="mb-10px flex items-center text-12px">
            <Icon class="drag-item cursor-move" :size="18" icon="fluent:drag-20-regular" />
            <div>
              <div class="mb-2px flex">
                <div class="ml-10px mr-10px w-60px">栅格</div>
                <avue-input-number
                  v-model="element.span"
                  controlsPosition="top"
                  :min="0"
                  :max="24"
                ></avue-input-number>
              </div>
              <el-collapse-transition>
                <div v-show="!isSimplify">
                  <div class="flex">
                    <div class="ml-10px mr-10px w-60px">绑定key</div>
                    <el-input v-model="element.prop" placeholder="绑定key"></el-input>
                  </div>
                  <el-checkbox class="ml-62px" size="small" v-model="element.display">
                    可见
                  </el-checkbox>
                </div>
              </el-collapse-transition>
            </div>

            <el-popconfirm title="是否确认删除?" @confirm="handleRemoveTab(index)">
              <template #reference>
                <el-button
                  v-if="option.column.length > 1"
                  class="ml-10px h-22px! w-22px!"
                  circle
                  plain
                  type="danger"
                  icon="el-icon-minus"
                ></el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </draggable>
      <div class="ml-28px">
        <el-button type="primary" text link @click="handleAddTab">添加栅格</el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'

defineOptions({ name: 'ConfigLayoutGrid' })

const props = defineProps({
  modelValue: Object
})
const emit = defineEmits(['update:modelValue', 'open-med', 'copy-text'])
const option = ref<any>(props.modelValue)
const justifyList = [
  { label: '左对齐', value: 'start' },
  { label: '居中对齐', value: 'center' },
  { label: '右对齐', value: 'end' },
  { label: '间距：左右间距一致', value: 'space-around' },
  { label: '间距：项与项间隔一致', value: 'space-between' },
  { label: '间距一致', value: 'space-evenly' }
]
const isSimplify = ref(false)
const alignList = [
  { label: '顶部对齐', value: 'top' },
  { label: '居中对齐', value: 'middle' },
  { label: '底部对齐', value: 'bottom' }
]
watch(
  () => props.modelValue,
  (val: object) => {
    option.value = val
  }
)
watch(
  () => option.value,
  (val: object) => {
    emit('update:modelValue', val)
  }
)

const handleAddTab = () => {
  const code = Math.ceil(Math.random() * 9999)
  option.value.column.push({
    type: 'col',
    id: new Date().getTime() + Math.ceil(Math.random() * 999999),
    i18nCode: `col_${Math.ceil(Math.random() * 9999999)}`,
    label: '栅格_' + code,
    prop: 'col_' + code,
    display: true,
    span: 12,
    column: []
  })
}
const handleRemoveTab = (index) => {
  option.value.column.splice(index, 1)
}
const handleAddGroupColumn = () => {
  //处理拖拽排序后界面tabs不更新问题
  option.value.column.push({ label: '更新', value: '更新' })
  setTimeout(() => {
    option.value.column.splice(option.value.column.length - 1, 1)
  }, 0)
  return true
}
</script>

<style lang="scss" scoped></style>
