<template>
  <el-container class="form-design">
    <el-main class="form-main">
      <el-container class="ng-main-container">
        <el-aside width="260px" class="item-panel">
          <DragPanel
            :basic-item="basicItem"
            :decorate-item="decorateItem"
            :layout-item="layoutItem"
            :application-item="applicationItem"
          />
        </el-aside>
        <el-main class="center-panel form-main">
          <ContainerPanel
            :select-item="selectItem"
            :arrow="arrow"
            @handleSelectItem="handleSelectItem"
            @handleSave="handleSave"
          />
        </el-main>
        <el-aside width="370px" class="properties-panel">
          <PropertiesPanel :select-item="selectItem" />
        </el-aside>
      </el-container>
    </el-main>

    <el-dialog :visible.sync="showDialog" title="模板类型" width="500px">
      <el-form
        ref="formRef"
        :model="typeForm"
        :rules="rules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="模板类型" prop="modelType">
          <el-select v-model="typeForm.modelType" placeholder="请选择模板类型">
            <el-option
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
        <el-button @click="handleClose"> 取消 </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import DragPanel from './panel-drag/index.vue'
import ContainerPanel from './panel-container/index.vue'
import PropertiesPanel from './panel-properties/index.vue'
import { use } from '../locale/index'
import { getUUID } from '../utils/index'
import cloneDeep from 'lodash/cloneDeep'
import LocalMixin from '../locale/mixin.js'

function debounce(func, wait) {
  let timeout
  return function() {
    const context = this
    const args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait)
  }
}

export default {
  name: 'NgFormDesign',
  components: {
    DragPanel,
    ContainerPanel,
    PropertiesPanel
  },
  mixins: [LocalMixin],
  provide() {
    return {
      configC: () => this.templateConfig,
      ngConfig: this.config,
      getSelectItem: () => this.selectItem,
      getFormTemplate: () => this.formTemplate
    }
  },
  props: {
    template: {
      type: Object,
      default: () => {
        return {
          title: '自定义模板',
          list: []
        }
      }
    },
    customComponents: {
      type: Array,
      default: () => []
    },
    // 是否开启undo redo
    undo: {
      type: Boolean,
      default: false
    },
    // 按钮显示隐藏
    clear: {
      type: Boolean,
      default: true
    },
    preview: {
      type: Boolean,
      default: true
    },
    imp: {
      type: Boolean,
      default: true
    },
    exp: {
      type: Boolean,
      default: true
    },
    // 外部属性配置
    config: {
      type: Object,
      default: () => {}
    },
    // 基础组件是否要展示或待选组件列表集合
    basicItem: {
      type: [Array, Boolean],
      default: true
    },
    // 装饰组件是否要展示或待选组件列表集合
    decorateItem: {
      type: [Array, Boolean],
      default: false
    },
    // 布局组件是否要展示或待选组件列表集合
    layoutItem: {
      type: [Array, Boolean],
      default: false
    },
    // 应用组件是否要展示或待选组件列表集合
    applicationItem: {
      type: [Array, Boolean],
      default: false
    }
  },
  data() {
    return {
      selectItem: {},
      arrow: false,
      i18nkey: getUUID(),
      formTemplate: this.template || {
        title: '自定义模板',
        list: []
      },
      defaultConfig: {
        labelPosition: 'left',
        labelWidth: 100,
        size: 'mini',
        outputHidden: true, //  是否输出隐藏字段的值 默认打开,所有字段都输出
        hideRequiredMark: false,
        syncLabelRequired: false,
        labelSuffix: '', // 标签后缀sss
        customStyle: ''
      },
      undoStack: [],
      redoStack: [],
      ischange: false,
      maxUndoStackSize: 15,
      maxRedoStackSize: 5,
      showDialog: false,
      typeForm: { modelType: '' },
      rules: {
        modelType: [
          { required: true, message: '请输入模板类型', trigger: 'blur' }
        ]
      },
      typeOptions: [
        { label: '个人', value: '0' },
        { label: '商户', value: '1' },
        { label: '企业', value: '2' }
      ]
    }
  },
  computed: {
    templateConfig() {
      return this.defaultConfig || {}
    }
  },
  watch: {
    formTemplate: {
      handler: debounce(function(oldVal, newVal) {
        this.$emit('update:template', newVal)
      }, 300),
      deep: true,
      immediate: true
    }
  },

  created() {
    if (this.formTemplate == null) {
      this.formTemplate = {
        title: '自定义模板',
        list: []
      }
    }
  },
  mounted() {
    if (this.$route.query.type === 'edit') {
      const data = JSON.parse(this.$route.query.data)

      this.formTemplate = {
        ...data,
        title: data.modelName,
        list: JSON.parse(data.modelDetal || '[]')
      }

      this.typeForm.modelType = data.modelType
    } else if (this.$route.query.type === 'copy') {
      const data = JSON.parse(this.$route.query.data)

      this.formTemplate = {
        title: data.modelName,
        list: JSON.parse(data.modelDetal || '[]'),
        modelType: data.modelType,
        belongOutletId: data.belongOutletId,
        belongOutletName: data.belongOutletName
      }
    }
  },
  methods: {
    handleSelectItem(record) {
      this.selectItem = record
    },

    useLocale(val) {
      use(val)
      this.i18nkey = getUUID()

      this.$ngform_bus.$emit('i18nRefresh')
    },
    handleSave() {
      if (this.formTemplate.list?.length <= 0) {
        return this.$message.error('请选择组件')
      }
      for (const item of this.formTemplate.list) {
        if (item.options.label.trim() === '') { return this.$message.error('表单名称必填！') }
      }
      if (this.$route.query.type !== 'edit') {
        this.typeForm = {}
      }
      this.showDialog = true
    },
    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const model = cloneDeep(this.formTemplate)
          model.modelType = this.typeForm.modelType
          this.$emit('handleSave', model)
        }
      })
    },
    handleClose() {
      this.showDialog = false
    },
    // 返回编辑好的模板
    getModel() {
      const model = cloneDeep(this.formTemplate)

      return model
    },
    // 初始化模板
    initModel(formTemplate) {
      // 2024-08-13 lyf init的时候初始化恢复和重做
      const modelData = cloneDeep(formTemplate)

      this.importData(modelData)

      this.undoStack = []
      this.redoStack = []
    }
  }
}
</script>
<style>
.form-design {
  height: 100%;
  background: white;
  text-align: left;
}

.form-design .header {
  box-shadow: 1px 0px 6px 3px rgba(48, 65, 86, 0.35);
  background: white;
  padding-left: 0px;
  z-index: 100;
}

.form-design .form-main {
  padding: 0px;
  height: 100%;
  min-height: 560px;
}

.form-design .form-main .ng-main-container {
  height: 100%;
  min-height: 560px;
}

.form-design .item-panel {
  height: 100%;
  overflow-y: hidden;
  background: white;
  min-height: 560px;
  padding: 0;
}

.form-design .center-panel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.form-design .properties-panel {
  height: 100%;
  background: white;
  min-height: 560px;
  padding: 0;
}
</style>
<style>
.togglelefts {
  width: 14px;
  height: 54px;
  border: solid 1px #dadada;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background: #fff;
  position: absolute;
  top: 45%;
  margin-top: -27px;
  z-index: 1000;
  border-right: solid 1px #fff;
  cursor: pointer;
}

.togglelefts:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 3px;
  width: 0;
  height: 0;
  border-right: 5px solid #0662ac;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

.togglelefts:after {
  content: "";
  position: absolute;
  top: 21px;
  left: 4px;
  width: 0;
  height: 0;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #fff;
  border-top: 4px solid transparent;
}

.togglelefts:hover {
  background: #d9f1ff;
}

.togglelefts:hover:before {
  border-right: 5px solid #fff;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

.togglelefts:hover:after {
  border-bottom: 4px solid transparent;
  border-right: 4px solid #d9f1ff;
  border-top: 4px solid transparent;
}

.arrowR:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 4px;
  width: 0;
  height: 0;
  border-left: 5px solid #0662ac;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-right: none;
  cursor: pointer;
}

.arrowR:after {
  content: "";
  position: absolute;
  top: 21px;
  left: 4px;
  width: 0;
  height: 0;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #fff;
  border-top: 4px solid transparent;
  border-right: none;
  cursor: pointer;
}

.arrowR:hover:before {
  border-left: 5px solid #fff;
  border-bottom: 5px solid transparent;
  border-right: none;
  border-top: 5px solid transparent;
  cursor: pointer;
}

.arrowR:hover:after {
  border-right: none;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #005eaa;
  border-top: 4px solid transparent;
  cursor: pointer;
}
</style>
<!--
<style lang="scss">
.form-design {
  height: 100%;
  background: white;
  .header {
    box-shadow: 1px 0px 6px 3px rgba(48, 65, 86, 0.35);
  }

  .form-main {
    padding: 0px;
    height: 100%;
    min-height: 500px;

    .ng-main-container {
      height: 100%;
      min-height: 500px;
    }
  }

  .item-panel {
    /* background: #f1f4f5; */
    height: 100%;
    overflow-y: hidden;
    box-shadow: 1px 0px 6px 3px rgb(48 65 86 / 35%);
  }

  .center-panel {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .properties-panel {
    height: 100%;
    /* background: #f1f4f5; */
    box-shadow: -3px 0 6px rgb(48 65 86 / 35%);
  }
}
</style>
 -->
