<!--
 * @Author: 曹捷
 * @Date: 2021-04-29 11:32:51
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-10-28 09:42:00
 * @Description: 列表代码生成
-->
<template>
  <a-layout class="h100 form-panel table-panel body">
    <a-layout-sider class="body b-r" width="260">
      <div class="components-list">
        <div v-for="(item, listIndex) in searchPlug" :key="listIndex">
          <div class="components-title">
            {{ item.title }}
          </div>
          <draggable class="components-draggable" :list="item.list" item-key="key" :group="{ name: item.group, pull: 'clone', put: false }" :clone="cloneComponent" draggable=".components-item"
            :sort="false">
            <template #item="{ element }">
              <div class="components-item" @click="addComponent(element)">
                <div class="components-body">
                  <i class="iconfont " :class="'icon-'+element.icon"></i>
                  {{ element.name }}
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="body b-b   p-l-0 p-r-0" :style="{ height: '45px' }">
        <slot></slot>
        <!-- <a-page-header class="form-panel-head h100" title="" @back="$router.go(-1)">
          <template #extra>
            <div class="menu-right flex-c">
              <a-button type="link" block class="m-r-10" @click="importVisable = true">
                <i class="iconfont icon-upload2 p-r-5"></i>
                导入脚本
              </a-button>
              <a-button type="link" block class="m-r-10" @click="refreshRander">
                <i class="iconfont icon-refresh p-r-5"></i>
                刷新列表
              </a-button>
              <a-button type="link" block class="m-r-10" @click="downloadVue">
                <i class="iconfont icon-download p-r-5"></i>
                导出Vue文件
              </a-button>
            </div>
          </template>
        </a-page-header> -->

      </a-layout-header>
      <a-layout-content class="body">
        <tableIndexVue v-if="tableLoad" :tableConfig="tableConfig" :tableColumns="tableColumns" :paramList="paramList">
        </tableIndexVue>
      </a-layout-content>
    </a-layout>
    <a-layout-sider class="body b-l" width="350">
      <a-tabs class="right-panel" v-model:value:activeKey="activeKey">
        <a-tab-pane class="pana-content" key="1" tab="搜索属性">
          <obit-scrollbar class="h100">
            <div class="setting-main">
              <a-divider><b>拖拽查询条件到此区域</b></a-divider>
              <draggable class="list-group" :animation="340" item-key="key" tag="transition-group" :component-data="{ tag: 'ul', name: 'flip-list', type: 'transition-group' }" v-model="paramList"
                @start="isDragging = true" group="searchGroup">
                <template #item="{ element ,index }" :key="element.id">
                  <li class="list-group-item" @click="activeFormItem(element)" :class="{'list-check':activeId === element.id,'list-title':element.type ==='layout_title'}">
                    <i class="iconfont icon-setting  obit-link"></i>
                    <span class="">{{element.index}}</span> {{ element.name }}
                    <span class="tip">({{typeName(element.type)}})</span>
                    <i class="f-r iconfont icon-ashbin obit-link" @click.stop="removeInfo(index)" v-if="paramList.length>1"></i>
                  </li>
                </template>
              </draggable>
            </div>
            <div class="setting-main">
              <a-divider><b>切换组件</b></a-divider>
              <a-select v-model:value="activeData.type" @change="changeSearchType" v-if="activeData.type" style="width:100%;">
                <a-select-option :key="index" :value="item.type" v-for="(item,index) in searchPlug[0].list">
                  {{item.name}}
                </a-select-option>
              </a-select>
              <a-divider><b>对应搜索条件修改</b></a-divider>
              <a-form size="small" :labelCol="{span: 7}" :wrapper-col="{span:16}">
                <a-form-item label="key值" v-if="activeData.type !=='dateBetween'">
                  <a-input v-model:value="activeData.key" placeholder="key值" />
                </a-form-item>
                <a-form-item label="日期开始Key" v-if="activeData.type ==='dateBetween'">
                  <a-input v-model:value="activeData.startKey" placeholder="日期开始Key" />
                </a-form-item>
                <a-form-item label="日期结束Key" v-if="activeData.type ==='dateBetween'">
                  <a-input v-model:value="activeData.endKey" placeholder="日期结束Key" />
                </a-form-item>
                <a-form-item label="名称">
                  <a-input v-model:value="activeData.name" placeholder="名称" />
                </a-form-item>
                <a-form-item label="下拉数据Key" v-if="activeData.valuename !== undefined">
                  <a-input v-model:value="activeData.valuename" placeholder="下拉Key值" />
                </a-form-item>
                <a-form-item label="下拉展示名" v-if="activeData.labelname !== undefined">
                  <a-input v-model:value="activeData.labelname" placeholder="下拉展示名" />
                </a-form-item>
                <a-form-item label="请求地址" v-if="activeData.ajaxurl !== undefined">
                  <a-textarea placeholder="请求地址" v-model:value="activeData.ajaxurl" :autoSize="{ minRows: 2, maxRows: 8 }">
                  </a-textarea>
                </a-form-item>

                <a-form-item label="下拉数据Key" v-if="activeData.valueName !== undefined">
                  <a-input v-model:value="activeData.valueName" placeholder="下拉数据Key" />
                </a-form-item>
                <a-form-item label="下拉展示名" v-if="activeData.label !== undefined">
                  <a-input v-model:value="activeData.label" placeholder="下拉展示名" />
                </a-form-item>
                <a-form-item label="父节点Key" v-if="activeData.parentId !== undefined">
                  <a-input v-model:value="activeData.parentId" placeholder="父节点Key" />
                </a-form-item>
                <a-form-item label="子集合Key" v-if="activeData.children !== undefined">
                  <a-input v-model:value="activeData.children" placeholder="子集合Key" />
                </a-form-item>
                <a-form-item label="请求地址" v-if="activeData.url !== undefined">
                  <a-textarea placeholder="级联下拉请求地址" v-model:value="activeData.url" :autoSize="{ minRows: 2, maxRows: 8 }">
                  </a-textarea>
                </a-form-item>
              </a-form>
            </div>
          </obit-scrollbar>
        </a-tab-pane>
        <a-tab-pane class="pana-content" key="2" tab="整体属性">
          <obit-scrollbar class="h100">

            <a-divider>基础设置</a-divider>
            <a-form size="small" :labelCol="{span: 7}" :wrapper-col="{span:16}">
              <a-form-item label="key值">
                <a-input v-model:value="tableConfig.key" placeholder="key值" />
              </a-form-item>
              <a-form-item label="分页地址">
                <a-input v-model:value="tableConfig.url" placeholder="分页地址" />
              </a-form-item>
              <a-form-item label="名称">
                <a-input v-model:value="tableConfig.name" placeholder="名称" />
              </a-form-item>
              <a-form-item label="导出名称">
                <a-input v-model:value="tableConfig.fileName" placeholder="导出名称" suffix=".vue" />
              </a-form-item>
              <a-form-item label="新增按钮">
                <a-switch v-model:checked="tableConfig.add" />
              </a-form-item>
              <a-form-item label="修改按钮">
                <a-switch v-model:checked="tableConfig.edit" />
              </a-form-item>
              <a-form-item label="删除按钮">
                <a-switch v-model:checked="tableConfig.remove" />
              </a-form-item>
              <a-form-item label="删除URL" v-if="tableConfig.remove">
                <a-input v-model:value="tableConfig.removeUrl" placeholder="删除地址" />
              </a-form-item>
              <div class="reg-content">
                <a-divider>表格属性</a-divider>
                <draggable class="list-group" :animation="200" item-key="key" :component-data="{
                  tag: 'ul',
                  type: 'transition-group',
                  name: !isDragging ? 'flip-list' : null
                }" v-model="tableColumns" @start="isDragging = true" @end="isDragging = false">
                  <template #item="{ element,index }" :key="index ">
                    <div class="reg-item">
                      <span class="close-btn" @click="tableColumns.splice(index, 1)">
                        <i class="iconfont icon-close" />
                      </span>
                      <a-form-item label="字段key" style="margin-bottom:0" v-if="element.dataIndex!== undefined">
                        <a-input v-model:value="element.dataIndex" placeholder="字段key(实体类对象key)" />
                      </a-form-item>
                      <a-form-item label="插槽" style="margin-bottom:0" v-if="element.slots!== undefined">
                        <a-input v-model:value="element.slots.customRender" :disabled="element.slots.customRender ==='operation'" placeholder="插槽Slot" />
                      </a-form-item>
                      <a-form-item label="字段名" style="margin-bottom:0">
                        <a-input v-model:value="element.title" placeholder="字段名" />
                      </a-form-item>
                    </div>
                  </template>
                </draggable>

                <div style="margin-left: 20px">
                  <a-button type="link" class="m-r-15" @click="addColumn('col')">
                    <i class="iconfont icon-add-circle p-r-5"></i> 新增列
                  </a-button>
                  <a-button type="link" class="m-r-15" @click="addColumn('slot')">
                    <i class="iconfont icon-add-circle p-r-5"></i> 新增插槽
                  </a-button>
                  <a-switch checked-children="操作栏" @click="operationChange" un-checked-children="无操作" v-model:checked="tableConfig.operation" />
                </div>
              </div>
            </a-form>
          </obit-scrollbar>
        </a-tab-pane>
      </a-tabs>
    </a-layout-sider>
  </a-layout>
  <importScriptVue @import="saveImportInfo" v-model:visible="importVisable"></importScriptVue>
</template>

<script>
import { searchPlug } from './../gconfig'
import { util } from './../../../entery'
import tableIndexVue from './tableIndex.vue'
import { computed, getCurrentInstance, nextTick, provide, reactive, toRefs } from 'vue'
import draggable from 'vuedraggable'
import tableHtml from './../modules/tableHtml.js'
import importScriptVue from '../components/importScript.vue'
import { message } from 'ant-design-vue';

export default {
  components: { tableIndexVue, draggable, importScriptVue },
  setup (props, context) {
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      formData: {},
      activeKey: '1',
      searchPlug,
      idKey: 100,
      activeData: {},
      activeId: '',
      isDragging: false,
      importVisable: false,
      tableConfig: {
        url: 'manager/sysParameter/getList',
        removeUrl: '',
        add: true,
        edit: true,
        key: 'paramCode',
        remove: true,
        name: '查询结果',
        fileName: 'tableIndex',
        // 操作
        operation: true
      },
      tableColumns: [
        { slots: { customRender: 'operation' }, title: '操作' }
      ],
      paramList: [{ name: '姓名', type: 'input', key: 'name' }],
      tableLoad: true
    })
    let _methods = {
      /**
       * 下载Vue文件
       */
      downloadVue () {
        let html = new tableHtml({
          tableConfig: util.util.cloneObj(_data.tableConfig),
          tableColumns: _data.tableColumns,
          paramList: _data.paramList
        })
        html.download()
      },
      typeName (type = '') {
        let item = searchPlug[0].list.find(el => el.type === type)
        return item.name
      },
      /**
       * 根据导入的规则  自动生成代码
       */
      autoGenearte (item, infoList) {
        _data.tableConfig.name = item.functionName
        let name = item.className
        _data.tableConfig.fileName = name.replace(name[0], name[0].toLowerCase()) + 'Index'
        _data.tableConfig.key = infoList[0].javaField
        // table展示字段
        let tableList = util.util.cloneObj(infoList.filter(el => el.list))
        let paramSourceList = util.util.cloneObj(infoList.filter(el => el.query))
        let list = [], paramList = []
        tableList.forEach(element => {
          list.push({ dataIndex: element.javaField, title: element.columnComment })
        })
        list.push({ slots: { customRender: 'operation' }, title: '操作' })
        paramSourceList.forEach(element => {
          paramList.push(this.getSearchItem(element))
        })
        _data.tableColumns = list
        _data.paramList = paramList
      },
      /**
       * 自动导入 搜索区域内容
       */
      getSearchItem (item) {
        let info = { name: item.columnComment, type: 'input', key: item.javaField }
        let type = item.htmlType
        if (type.indexOf('date') !== -1) {
          info.type = 'date'
        } else if (type.indexOf('month') !== -1) {
          info.type = 'month'
        } else if (type.indexOf('select') !== -1 || type === 'radio') {
          info.type = 'ajax'
          info.valuename = 'dictValue'
          info.labelname = 'dictLabel'
          info.ajaxurl = '/system/dict/data/type/sys_normal_disable'
          if (item.dictType) {
            info.ajaxurl = `/system/dict/data/type/${item.dictType}`
          }
          if (type === 'radio') {
            info.selectType = 'radio'
          }
        }
        info.id = _data.idKey
        _data.idKey++
        return info
      },
      /**
       * 搜索组件切换
       */
      changeSearchType (type) {
        let item = util.util.cloneObj(searchPlug[0].list.find(el => el.type === type))
        item.name = _data.activeData.name
        item.key = _data.activeData.key
        item.id = _data.activeData.id
        _data.activeData = item
        let index = _data.paramList.findIndex(el => el.id === item.id)
        _data.paramList[index] = item
      },
      /**
       * 脚本导入
       */
      saveImportInfo (importValue) {
        let arr = importValue.split('\n')
        arr.forEach(element => {
          let itemArr = element.trim().split(' ')
          _methods.addColumn('col', { dataIndex: util.util.toHump(itemArr[0]), title: itemArr[2] })
        });
        message.success('批量导入成功 恭喜你');
      },
      refreshRander () {
        _data.tableLoad = false
        nextTick(() => {
          _data.tableLoad = true
        })
      },
      /**
       * 表格 新增一列
       * col 普通的一列
       * slot 卡槽一列
       */
      addColumn (type = 'col', obj) {
        if (!obj) {
          obj = type === 'col' ? { dataIndex: '', title: '列名' } : { slots: { customRender: 'slotName' }, title: '列名' }
        }
        if (_data.tableConfig.operation) {
          _data.tableColumns.splice(_data.tableColumns.length - 1, 0, obj)
        } else {
          _data.tableColumns.push(obj)
        }
      },
      operationChange (value) {
        if (value) {
          _data.tableColumns.push({ slots: { customRender: 'operation' }, title: '操作' })
        } else {
          let index = _data.tableColumns.findIndex(el => el.slots && el.slots.customRender === 'operation')
          _data.tableColumns.splice(index, 1)
        }
      },
      removeInfo (index) {
        _data.paramList.splice(index, 1)
      },
      addComponent (item) {
        const clone = this.cloneComponent(item)
        _data.paramList.push(clone)
        this.activeFormItem(clone)
      },
      activeFormItem (currentItem) {
        _data.activeData = currentItem
        _data.activeId = currentItem.id
      },
      cloneComponent (origin) {
        const clone = util.util.cloneObj(origin)
        clone.id = _data.idKey
        clone.key = _data.idKey
        _data.idKey++
        return clone
      }
    }

    return {
      ...toRefs(_data),
      ..._methods
    }
  }
}
</script>

<style lang="less"  scoped>
@selectedColor: #f6f7ff;
@lighterBlue: #409eff;
.form-panel.table-panel {
  .drag-form {
    height: calc(100vh - 45px);
  }
  .drawing-board {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
  }
  .form-panel-head {
    padding: 0 24px;
  }
}
.components-list {
  padding: 8px;
  box-sizing: border-box;
  height: 100%;
  .components-item {
    display: inline-block;
    width: 48%;
    margin: 1%;
    transition: transform 0ms !important;
  }
}
.components-draggable {
  padding-bottom: 20px;
}
.components-title {
  font-size: 14px;
  color: #222;
  margin: 6px 2px;
  .svg-icon {
    color: #666;
    font-size: 18px;
  }
}

.components-body {
  padding: 2px 10px;
  background: @selectedColor;
  font-size: 12px;
  cursor: move;
  border: 1px dashed @selectedColor;
  border-radius: 3px;
  .svg-icon {
    color: #777;
    font-size: 15px;
  }
  &:hover {
    border: 1px dashed #787be8;
    color: #787be8;
    .svg-icon {
      color: #787be8;
    }
  }
}
.right-panel {
  .setting-main {
    padding: 10px;
    margin: 10px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    border-radius: 5px;
    transition: border-color 0.3s;
    .list-title {
      font-weight: bold;
    }
    .button {
      margin-top: 35px;
    }
    .flip-list-move {
      transition: transform 0.5s;
    }
    .no-move {
      transition: transform 0s;
    }
    .ghost {
      opacity: 0.5;
      background: #c8ebfb;
    }
    .list-group {
      min-height: 20px;
      padding-left: 0;
    }
    .list-group-item {
      cursor: move;
      list-style: none;
      position: relative;
      display: block;
      padding: 0.35rem 1.25rem;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.125);
    }
    .list-check {
      border: 1px solid #0960bd;
    }
    .list-group-item i {
      cursor: pointer;
    }
  }
  .setting-enter,
  .setting-main:hover {
    border-color: #40a9ff;
  }
  .reg-content {
    padding: 0 12px;
  }
  .reg-item {
    padding: 12px 6px;
    background: #f8f8f8;
    position: relative;
    border-radius: 8px;
    .close-btn {
      position: absolute;
      right: -6px;
      top: -6px;
      display: block;
      width: 19px;
      height: 19px;
      line-height: 16px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      color: #fff;
      text-align: center;
      z-index: 1;
      cursor: pointer;
      font-size: 12px;
      padding: 2px;
    }
    .close-btn:hover {
      background: rgba(210, 23, 23, 0.5);
    }
  }
  .reg-item + .reg-item {
    margin-top: 18px;
  }
  .ant-tabs-bar {
    margin-bottom: 0;
  }
  .pana-content {
    height: calc(100vh - 45px);
  }
  .pana-form {
    .ant-form-item {
      margin-bottom: 12px;
    }
  }
  .ant-tabs-nav {
    width: 100%;
    .ant-tabs-tab {
      margin: 0;
      width: 50%;
      text-align: center;
    }
  }
}
</style>