<template>
  <div>
    <div class="left-box">
      <div class="model" :style="`display:${isDrag?'inline-block':'none'}`">
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" stretch>
        <el-tab-pane label="组件列表" name="first">
          <el-divider content-position="left">表单组件</el-divider>
          <draggable :list="dragList" ghost-class="ghost" :force-fallback="true"
                     :group="{ name: 'list', pull: 'clone' }"
                     :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
            <template #item="{ element }">
              <element-mini :option="element" @dblclick.stop="addElement(element)" />
            </template>
          </draggable>
          <el-divider content-position="left">数据展示组件</el-divider>
          <draggable :list="dragViewList" ghost-class="ghost" :force-fallback="true"
                     :group="{ name: 'list', pull: 'clone' }"
                     :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
            <template #item="{ element }">
              <element-mini :option="element" @dblclick.stop="addElement(element)" />
            </template>
          </draggable>
        </el-tab-pane>
        <el-tab-pane label="模板列表" name="second">
          <div style="width:100%;height:30px;text-align:center;line-height: 30px;border: 1px solid #f8ac59"
               v-for="(i,index) in saveDatas"
               @click="setData(i)">
            {{ index }}
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据（）" name="three">
          <div class="dataBox">
            <div>{{ dragList }}</div>
            <div>-------</div>
            <div>{{ formData }}</div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
    <div class="right-box">
      <div class="toolbar">
        <el-button type="primary" :icon="View" @click="viewForm">预览</el-button>
        <el-button type="primary" :icon="View" @click="exportFile">导出</el-button>
        <el-button type="primary" :icon="View" @click="saveData">保存</el-button>

      </div>
      <nested-draggable :tasks="widgetList" style="height: 100%;" :formData="formData" />
    </div>
    <div class="option-box">
      <div>
        <option-from :formData="optionsData" />
        {{ optionsData }}
      </div>
      <div class="dataBox">
        <div>{{ widgetList }}</div>
      </div>
    </div>
    <el-dialog
      v-model="viewDialogVisible"
      fullscreen
    >
      <form-board :widgetList="widgetList" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { View } from '@element-plus/icons-vue';
import { reactive, ref, provide } from 'vue';
import draggable from 'vuedraggable';
import optionFrom from './option/optionForm.vue';
import { v4 as getUuid } from 'uuid';
import nestedDraggable from './nest.vue';
import elementMini from './element-mini.vue';
import formBoard from './formBoard.vue';
import { exportConfig } from '@/views/tool/draggable/exportConfig';

interface type {
  name: string,
  id: number
}


const optionsData = ref({});
const getOptions = (e) => {
  optionsData.value = e;
};
provide('getOptions', getOptions);
const selectUuid = ref('');
const getSelectUuid = (e) => {
  selectUuid.value = e;
};
provide('selectUuid', selectUuid);
provide('getSelectUuid', getSelectUuid);


const formData = ref({});
const activeName = ref('first');
const viewDialogVisible = ref(false);
const dragList = [
  {
    type: 'hw-form',
    isContainer: true,
    options: {
      name: '表单',
      key: '',
      labelWidth: '120px',
      formData: {},
      isInLine: false,
      isReset: false,
      isResetBottom: false,
      isSubmitBottom: true,
      submitBottomName: '提交',
      resetBottomName: '重置',
      isPagination: true,
      total: 'total',
      pageNum: 'pageNum',
      pageSize: 'pageSize',
      submitFunction: ''
    },
    tasks: [],
    name: '表单',
    id: 0
  },
  {
    type: 'hw-input',
    isContainer: false,
    options: { name: '单行文本', type: 'text', key: '', disabled: false, required: false },
    name: '单行文本',
    id: 1
  },
  {
    type: 'hw-input',
    isContainer: false,
    options: { name: '密码文本', type: 'password', key: '', disabled: false, required: false },
    name: '密码文本',
    id: 2
  },
  {
    type: 'hw-input',
    isContainer: false,
    options: { name: '多行文本', type: 'textarea', key: '', disabled: false, required: false },
    name: '多行文本',
    id: 3
  },
  {
    type: 'hw-input-number',
    isContainer: false,
    options: { name: '计数器', step: 1, disabled: false, min: -Infinity, max: Infinity, controlsPosition: false },
    name: '计数器',
    id: 4
  },
  {
    type: 'hw-radio-group', isContainer: false,
    options: { name: '单选框组', radioItems: [{ value: '1', label: '1' }, { value: '1', label: '1' }] },
    name: '单选框组',
    id: 5
  },
  { type: 'hw-slider', isContainer: false, options: { name: '滑块', step: 2, showStops: true }, name: '滑块', id: 6 }
];
const dragViewList = [
  {
    type: 'hw-table',
    isContainer: false,
    options: {
      name: '表格',
      key: '',
      thTdMap: [
        {
          name: '字段name',
          key: '字段key',
          type: 'input',
          isUpdate: true
        }
      ],
      dataKey: '',
      isOperate: true,
      updateFunction: '',
      addFunction: '',
      deleteFunction: '',
      delField: ''
    },
    name: '表格',
    id: 101
  },
  {
    type: 'hw-chart',
    isContainer: false,
    options: {
      name: '图表'
    },
    name: '图表',
    id: 101
  }
];

function removeItemByUuid(arr, uuid) {
  arr.forEach((item, index) => {
    if (item.options.uuid === uuid) {
      arr.splice(index, 1);
    } else if (item.tasks && item.tasks.length > 0) {
      removeItemByUuid(item.tasks, uuid);
    }
  });
}

const widgetList = ref([]);
const delFormListItem = (uuid) => {
  removeItemByUuid(widgetList.value, uuid);
};

provide('delFormListItem', delFormListItem);

const isDrag = ref(false);
const onClone = (e) => {
  let item = JSON.parse(JSON.stringify(e));
  item.id = Date.now();
  item.options.uuid = getUuid().replaceAll('-', '_');
  return item;
};
const onStartLeft = (e) => {
  // console.log(e);
};

const addElement = (e) => {
  let element = onClone(e);
  widgetList.value.push(element);
};
const viewForm = () => {
  viewDialogVisible.value = true;
};
const exportFile = () => {
  let data = exportConfig(widgetList.value);
  console.log(data);
};
const saveData = () => {
  let data = JSON.parse(localStorage.getItem('SAVE_DATA')) || [];
  data.push(widgetList.value);
  localStorage.setItem('SAVE_DATA', JSON.stringify(data));
};
const setData = (e) => {
  widgetList.value = e;
};
const saveDatas = ref([]);
onMounted(() => {
  saveDatas.value = JSON.parse(localStorage.getItem('SAVE_DATA')) || [{
    'type': 'static-text',
    'icon': 'static-text',
    'formItemFlag': false,
    'options': {
      'name': 'statictext111193',
      'columnWidth': '200px',
      'hidden': false,
      'textContent': '单列表单',
      'customClass': [],
      'onCreated': '',
      'onMounted': '',
      'label': 'static-text'
    },
    'id': 'statictext111193'
  }, {
    'type': 'divider',
    'icon': 'divider',
    'formItemFlag': false,
    'options': {
      'name': 'divider102346',
      'label': '',
      'columnWidth': '200px',
      'direction': 'horizontal',
      'contentPosition': 'center',
      'hidden': false,
      'customClass': [],
      'onCreated': '',
      'onMounted': ''
    },
    'id': 'divider102346'
  }, {
    'type': 'input',
    'icon': 'text-field',
    'formItemFlag': true,
    'options': {
      'name': 'input12931',
      'label': '发件人姓名',
      'labelAlign': '',
      'type': 'text',
      'defaultValue': '',
      'placeholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'clearable': true,
      'showPassword': false,
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': [],
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'minLength': null,
      'maxLength': null,
      'showWordLimit': false,
      'prefixIcon': '',
      'suffixIcon': '',
      'appendButton': false,
      'appendButtonDisabled': false,
      'buttonIcon': 'el-icon-search',
      'onCreated': '',
      'onMounted': '',
      'onInput': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'input12931'
  }, {
    'type': 'switch',
    'icon': 'switch-field',
    'formItemFlag': true,
    'options': {
      'name': 'switch96070',
      'label': '是否保密',
      'labelAlign': '',
      'defaultValue': true,
      'columnWidth': '200px',
      'labelWidth': null,
      'labelHidden': false,
      'disabled': false,
      'hidden': false,
      'customClass': '',
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'switchWidth': 40,
      'activeText': '',
      'inactiveText': '',
      'activeColor': null,
      'inactiveColor': null,
      'onCreated': '',
      'onMounted': '',
      'onChange': '',
      'onValidate': ''
    },
    'id': 'switch96070'
  }, {
    'type': 'input',
    'icon': 'text-field',
    'formItemFlag': true,
    'options': {
      'name': 'input23031',
      'label': '发件人号码',
      'labelAlign': '',
      'type': 'text',
      'defaultValue': '',
      'placeholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'clearable': true,
      'showPassword': false,
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': '',
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'minLength': null,
      'maxLength': null,
      'showWordLimit': false,
      'prefixIcon': '',
      'suffixIcon': '',
      'appendButton': false,
      'appendButtonDisabled': false,
      'buttonIcon': 'el-icon-search',
      'onCreated': '',
      'onMounted': '',
      'onInput': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'input23031'
  }, {
    'type': 'textarea',
    'icon': 'textarea-field',
    'formItemFlag': true,
    'options': {
      'name': 'textarea21654',
      'label': '发件人地址',
      'labelAlign': '',
      'rows': 3,
      'defaultValue': '',
      'placeholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': [],
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'minLength': null,
      'maxLength': null,
      'showWordLimit': false,
      'onCreated': '',
      'onMounted': '',
      'onInput': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'textarea21654'
  }, {
    'type': 'divider',
    'icon': 'divider',
    'formItemFlag': false,
    'options': {
      'name': 'divider69240',
      'label': '',
      'columnWidth': '200px',
      'direction': 'horizontal',
      'contentPosition': 'center',
      'hidden': false,
      'customClass': '',
      'onCreated': '',
      'onMounted': ''
    },
    'id': 'divider69240'
  }, {
    'type': 'input',
    'icon': 'text-field',
    'formItemFlag': true,
    'options': {
      'name': 'input113152',
      'label': '收件人姓名',
      'labelAlign': '',
      'type': 'text',
      'defaultValue': '',
      'placeholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'clearable': true,
      'showPassword': false,
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': [],
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'minLength': null,
      'maxLength': null,
      'showWordLimit': false,
      'prefixIcon': '',
      'suffixIcon': '',
      'appendButton': false,
      'appendButtonDisabled': false,
      'buttonIcon': 'el-icon-search',
      'onCreated': '',
      'onMounted': '',
      'onInput': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'input113152'
  }, {
    'type': 'checkbox',
    'icon': 'checkbox-field',
    'formItemFlag': true,
    'options': {
      'name': 'checkbox63174',
      'label': '接收时间段',
      'labelAlign': '',
      'defaultValue': [],
      'columnWidth': '200px',
      'size': '',
      'displayStyle': 'inline',
      'buttonStyle': false,
      'border': false,
      'labelWidth': null,
      'labelHidden': false,
      'disabled': false,
      'hidden': false,
      'optionItems': [{ 'label': '上午9:00 - 11:30', 'value': 1 }, {
        'label': '下午12:30 - 18:00',
        'value': 2
      }, { 'label': '晚上18:00 - 21:00', 'value': 3 }],
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': '',
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'onCreated': '',
      'onMounted': '',
      'onChange': '',
      'onValidate': ''
    },
    'id': 'checkbox63174'
  }, {
    'type': 'input',
    'icon': 'text-field',
    'formItemFlag': true,
    'options': {
      'name': 'input40240',
      'label': '收件人号码',
      'labelAlign': '',
      'type': 'text',
      'defaultValue': '',
      'placeholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'clearable': true,
      'showPassword': false,
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': '',
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'minLength': null,
      'maxLength': null,
      'showWordLimit': false,
      'prefixIcon': '',
      'suffixIcon': '',
      'appendButton': false,
      'appendButtonDisabled': false,
      'buttonIcon': 'el-icon-search',
      'onCreated': '',
      'onMounted': '',
      'onInput': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'input40240'
  }, {
    'type': 'input',
    'icon': 'text-field',
    'formItemFlag': true,
    'options': {
      'name': 'input78584',
      'label': '收件人地址',
      'labelAlign': '',
      'type': 'text',
      'defaultValue': '',
      'placeholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'clearable': true,
      'showPassword': false,
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': '',
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'minLength': null,
      'maxLength': null,
      'showWordLimit': false,
      'prefixIcon': '',
      'suffixIcon': '',
      'appendButton': false,
      'appendButtonDisabled': false,
      'buttonIcon': 'el-icon-search',
      'onCreated': '',
      'onMounted': '',
      'onInput': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'input78584'
  }, {
    'type': 'divider',
    'icon': 'divider',
    'formItemFlag': false,
    'options': {
      'name': 'divider75887',
      'label': '',
      'columnWidth': '200px',
      'direction': 'horizontal',
      'contentPosition': 'center',
      'hidden': false,
      'customClass': [],
      'onCreated': '',
      'onMounted': ''
    },
    'id': 'divider75887'
  }, {
    'type': 'time-range',
    'icon': 'time-range-field',
    'formItemFlag': true,
    'options': {
      'name': 'timerange47503',
      'label': '送货时间',
      'labelAlign': '',
      'defaultValue': null,
      'startPlaceholder': '',
      'endPlaceholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'clearable': true,
      'editable': false,
      'format': 'HH:mm:ss',
      'required': true,
      'validation': '',
      'validationHint': '',
      'customClass': '',
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'onCreated': '',
      'onMounted': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'timerange47503'
  }, {
    'type': 'slider',
    'icon': 'slider-field',
    'formItemFlag': true,
    'options': {
      'name': 'slider54714',
      'label': '价格保护',
      'labelAlign': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'disabled': false,
      'hidden': false,
      'required': false,
      'validation': '',
      'validationHint': '',
      'customClass': [],
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'min': 0,
      'max': 100,
      'step': 10,
      'range': false,
      'height': null,
      'onCreated': '',
      'onMounted': '',
      'onChange': '',
      'onValidate': '',
      'showStops': true
    },
    'id': 'slider54714'
  }, {
    'type': 'textarea',
    'icon': 'textarea-field',
    'formItemFlag': true,
    'options': {
      'name': 'textarea64794',
      'label': '其他信息',
      'labelAlign': '',
      'rows': 3,
      'defaultValue': '',
      'placeholder': '',
      'columnWidth': '200px',
      'size': '',
      'labelWidth': null,
      'labelHidden': false,
      'readonly': false,
      'disabled': false,
      'hidden': false,
      'required': false,
      'validation': '',
      'validationHint': '',
      'customClass': '',
      'labelIconClass': null,
      'labelIconPosition': 'rear',
      'labelTooltip': null,
      'minLength': null,
      'maxLength': null,
      'showWordLimit': false,
      'onCreated': '',
      'onMounted': '',
      'onInput': '',
      'onChange': '',
      'onFocus': '',
      'onBlur': '',
      'onValidate': ''
    },
    'id': 'textarea64794'
  }];
});

</script>
<style scoped>
.model {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.left-box {
  width: 260px;
  display: inline-block;
  user-select: none;
  vertical-align: top;
  position: relative;
  margin: 8px;
  padding: 2px;
  border: 1px solid #ccc;
}

.right-box {
  width: calc(100% - 260px - 16px - 400px - 16px - 16px - 2px);
  display: inline-block;
  user-select: none;
  vertical-align: top;
  margin: 8px;
  border: 1px solid #ccc;
  height: 80vh;
  overflow: auto;
  padding-top: 12px;

  &::-webkit-scrollbar {
    display: none;
  }

  .toolbar {
    width: 100%;
    margin-bottom: 8px;
  }
}

.option-box {
  width: 400px;
  display: inline-block;
  vertical-align: top;
  margin: 8px;
  border: 1px solid #ccc;
  min-height: 100px;
}

//user-select: none;
.dataBox {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  border: 1px solid #ccc;
}
</style>
