<template>
  <!-- <el-collapse v-model="actives" class="drag-panel" accordion> -->
  <div class="drag-panel">
    <div v-for="(colItem, colIndex) in dataList" :key="colIndex">
      <p class="drag-title">{{ getLabel(colItem.name) }}</p>
      <DragItem
        :list="itemInitArray(colItem.list)"
        :title="getLabel(colItem.name)"
        @generateKey="generateKey"
        @dragend="handleEnd"
      />
    </div>
  </div>

  <!-- <el-collapse-item
        v-if="colItem && colItem.list && colItem.list.length > 0"
        :key="colIndex + formKey"
        :title="getLabel(colItem.name)"
        :name="colIndex + 1"
      >
        <template slot="title">
          <span class="title">{{ getLabel(colItem.name) }}</span>
        </template>

      </el-collapse-item> -->
  <!-- </el-collapse> -->
</template>
<script>
import itemIndex from '../items/index.js'
import DragItem from './drag-item.vue'
import cloneDeep from 'lodash/cloneDeep'
import LocalMixin from '../../locale/mixin.js'
export default {
  components: {
    DragItem
  },
  mixins: [LocalMixin],
  inject: {
    // 自定义组件
    customComponents: {
      from: 'customC',
      default: () => []
    }
  },
  props: {
    // 基础组件是否要展示或待选组件列表集合
    basicItem: {
      type: [Array, Boolean],
      default: true
    },
    // 装饰组件是否要展示或待选组件列表集合
    decorateItem: {
      type: [Array, Boolean],
      default: true
    },
    // 布局组件是否要展示或待选组件列表集合
    layoutItem: {
      type: [Array, Boolean],
      default: true
    },
    // 应用组件是否要展示或待选组件列表集合
    applicationItem: {
      type: [Array, Boolean],
      default: true
    }
  },
  data() {
    return {
      formKey: '111',
      actives: [1],
      startType: '',
      // dataList: itemIndex ,
      data: {
        list: [],
        config: {
          layout: 'horizontal',
          labelCol: { span: 4 },
          wrapperCol: { span: 18 },
          hideRequiredMark: false,
          customStyle: ''
        }
      },
      previewOptions: {
        width: 850
      },
      selectItem: {
        key: ''
      }
    }
  },
  computed: {
    // 修改dataList获取增加props数据的过滤
    dataList() {
      // 第一层过滤
      const this_ = this
      const list = cloneDeep(itemIndex)
      const items = list.filter((t) => {
        if (t.type == 'basic' && this_.basicItem) {
          return true
        } else if (t.type == 'layout' && this_.layoutItem) {
          return true
        } else if (t.type == 'application' && this_.applicationItem) {
          return true
        } else if (t.type == 'decorate' && this_.decorateItem) {
          return true
        }
        return false
      })

      // 子集遍历
      // items.map((t) => {
      //   if (t.type == 'basic' && this_.basicItem instanceof Array) {
      //     const listChildren = t.list.filter((n) =>
      //       this_.basicItem.includes(n.type)
      //     )
      //     t.list = listChildren
      //   } else if (t.type == 'layout' && this_.layoutItem instanceof Array) {
      //     const listChildren = t.list.filter((n) =>
      //       this_.layoutItem.includes(n.type)
      //     )

      //     t.list = listChildren
      //   } else if (
      //     t.type == 'application' &&
      //     this_.applicationItem instanceof Array
      //   ) {
      //     const listChildren = t.list.filter((n) =>
      //       this_.applicationItem.includes(n.type)
      //     )

      //     t.list = listChildren
      //   } else if (
      //     t.type == 'decorate' &&
      //     this_.decorateItem instanceof Array
      //   ) {
      //     const listChildren = t.list.filter((n) =>
      //       this_.decorateItem.includes(n.type)
      //     )

      //     t.list = listChildren
      //   }
      // })

      // 判断有没有自定义组件 如果有则加上
      // if (this.customComponents && this.customComponents.length > 0) {
      //   items.push({
      //     type: 'custom',
      //     name: this.$t('ngform.item.custom_components'), // '自定义组件',
      //     list: this.customComponents
      //   })
      // }
      return items
    }
  },
  mounted() {},
  methods: {
    // 组件初始化
    itemInitArray(list = []) {
      const nlist = cloneDeep(list)
      if (nlist && nlist.length > 0) {
        nlist.forEach((t, idx) => {
          if (!t.key) {
            const key = t.type + '_' + new Date().getTime() + '' + idx
            t['key'] = key
            t['model'] = key

            delete t.component
            delete t.properties
            delete t.seq
          }
        })
      }

      return nlist
    },

    generateKey(list, index) {
      // 生成key值
      const key = list[index].type + '_' + new Date().getTime()

      const nData = cloneDeep(list[index])
      nData.key = key
      nData.model = key

      this.$set(list, index, nData)

      /* this.$set(list, index, {
	        ...list[index],
	        key,
	        model: key
	      })*/
    },
    handleStart(list, index) {
      this.generateKey(list, index)
    },
    handleEnd(list, index) {
      this.generateKey(list, index)
    }
  }
}
</script>
<style scoped lang="scss">
.drag-panel {
  height: 100%;
  overflow-y: hidden;

  .drag-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #000000;
    font-weight: bold;
  }
}
</style>
