<template>
  <el-form ref="form" :label-position="viewerMode ? 'left' : 'top'" :disabled="disabled"
    :class="{ 'add-form': true, 'design-form': true, 'gd-form': true, 'viewer-mode': viewerMode }" :model="data"
    label-width="200px">
    <slot name="top"></slot>
    <draggable itemKey="id" :list="props.columnConfig" name="fade" class="drag" v-bind="{
        group: 'form',
        ghostClass: 'ghost',
        animation: 200,
        handle: '.drag-move',
      }" @add="draggableAdd">
      <template #item="{ element, index }">
        <div class="group pdf-item"
          v-if="draggable || (!element.stopped && (!element.visibleProp || compare(props.data[element.visibleProp], element.visibleValue)))"
          :class="{
              'drag-move': draggable && !disabled,
              'stopped': element.stopped,
              ['group-' + element.type]: true,
              active: draggable && props.columnData?.prop === element.prop
            }" :style="getFormItemStyle(element)" @click.stop="groupClick(element)">
          <FormItem :key="element.prop" :element="{ ...element, disabled: element.stopped, readonly, viewerMode }"
            :checkVisible="!draggable" :model="data" @preview="(name: string) => emit('preview', name)" />
          <div class="drag-control">
            <div class="item-control" v-if="!disabled && (!activated || !props.columnData.saved)">
              <i class="icon-del" @click.stop="click('del', index)"></i>
            </div>
          </div>
        </div>
      </template>
    </draggable>
  </el-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Draggable from 'vuedraggable-es'
import { FormInstance } from 'element-plus';
import FormItem from './formItem.vue';
import { useGlobalPinia } from '@/pinia/global'
import { replace } from '@/utils/index';
import { checkBoolean } from '@/components/GdElement/common'
const { lang } = useGlobalPinia()

const props = defineProps<{
  columnConfig: any,
  data: any,
  readonly?: boolean,
  viewerMode?: boolean,
  draggable?: boolean,
  disabled?: boolean,
  activated?: boolean,
  columnData?: any,
}>()
const emit = defineEmits<{
  (e: 'update:columnConfig', val: any): void
  (e: 'update:data', val: any): void
  (e: 'update:columnData', val: any): void
  (e: 'preview', name: string): void
  (e: 'columnClick', val: any): void
}>();
const form = ref<FormInstance>()
const validate = async () => {
  await form.value?.validate()
}
const resetFields = async () => {
  await form.value?.resetFields()
}
defineExpose({ validate, resetFields })

const click = (type: string, index: number, item?: any) => {
  const { columnConfig } = props
  if (type === 'del') {
    columnConfig.splice(index, 1)
    replace(props.columnData, {})
  }
}
const draggableAdd = (evt: any) => {
  if (!props.draggable || props.disabled) return
  const newIndex = evt.newIndex
  const data = props.columnConfig[newIndex]
  data.prop = data.control + new Date().getTime()
  data.propAlias = data.prop
  data[`label${lang}`] = data.label
  groupClick(data)
}
const groupClick = (data: any) => {
  replace(props.columnData, data)
  emit("columnClick", data)
  if (props.draggable) {
    form.value?.clearValidate()
  }
}
// 返回栅格宽度
const getFormItemStyle = (data: any) => {
  return { width: 100 + '%' }
}

const compare = (val: any, val2: any) => {
  if (typeof val === 'boolean' || typeof val2 === 'boolean') {
    return checkBoolean(val) === checkBoolean(val2)
  }
  return val === val2
}
</script>

<style lang="scss">
.design-form {
  &.viewer-mode {
    min-height: auto;

    .el-form-item {
      border-bottom: 1px solid rgb(222, 222, 222);
      margin-top: 18px;
    }

    .el-form-item__label:before {
      display: none;
    }

    .el-upload--text,
    .close-icon {
      display: none;
    }

    .el-upload-list {
      margin: 0;
    }
  }

  .el-form-item__label,
  .el-form-item__content {
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    line-height: 22px;
  }

  .el-range-editor.el-input__wrapper {
    padding: 0 5px;

    .el-range-input {
      text-align: left;
      text-indent: 8px;
    }
  }

  .el-form-item__content {
    font-weight: 500;
    color: #595959;
    line-height: 22px;

    .viewer-content {
      min-height: 32px;
      padding-bottom: 10px;
      word-wrap: break-word;
      overflow: hidden;
      white-space: pre-line;
      margin: 0;
    }
  }

  // .group>.el-divider--horizontal {
  //   border-top: 1px solid #6365E7;
  //   margin-top: 34px;
  // }

  // .group>.el-divider--horizontal>.el-divider__text {
  //   color: #6365E7;
  //   border-color: white;
  // }
}
</style>