<template>
    <div class="_fc-m-container" :style="setTableColsStyle(setTableCols)" :id="this.dynamicConfig.id">
        <div v-for="(data, index) in contentList" :key="index" :id="'mainCell'+data.id" :style="mergeCell(data)" class="_fc-m-container-cell" @click="activeCell(data)" :class="{active: data.id === currentModule.id}">
            <div class="drag-l-container">
                <div class="drag-btn-container _fc-drag-btn" style="cursor: move;" >
                    <i class="fc-icon icon-move"></i>
                </div>
            </div>
            <draggable class="dragArea-t" item-key="id" :list="childContent[data.id]" :rules="rulesHandle(data)" :style="setDragAreaFlex(data, index)" :id="'Cell'+data.id" :sort="true" group="people" @change="chageDrag" v-bind="dragOptions" :move="onMove">
                <template #item="{ element }">
                    <div class="drag-tool" @click="active(element)" :id="element.id" :class="{active: element.id === currentModule.id}" :style="getActiveStyle(element, index)">
                        <div class="drag-mask" ></div>
                        <div class="drag-l">
                            <div class="drag-btn _fc-drag-btn" style="cursor: move;">
                                <i class="fc-icon icon-move"></i>
                            </div>
                        </div>
                        <div class="drag-r">
                            <!-- <div class="drag-btn" @click="$emit('add')">
                                <i class="fc-icon icon-add"></i>
                            </div> -->
                            <!-- <div class="drag-btn" @click="operate('copy', element, data.id)">
                                <i class="fc-icon icon-copy"></i>
                            </div> -->
                            <div class="drag-btn drag-btn-danger" @click="operate('delete', element, data.id)">
                                <i class="fc-icon icon-delete"></i>
                            </div>
                        </div>
                        <div v-if="element.category === 0">
                            <sc-designer-form ref="formRef" :item="element" />
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
        
    </div>    
</template>

<script>
import draggable from 'vuedraggable'
import tableCellInfo from '@/config/designer/tableCell';
import designerInfo from '@/config/designer';
import tool from '@/utils/tool';
import pageInfo from '@/config/designer/page';
import scanTable from '@/config/designer/group/scanTable';
import tableInfo from '@/config/designer/table';

export default {
    name: 'DragTool',
    components: {
      draggable,
    },
    props: {
        dynamicConfig: { type: Object, default: () => {} },
    },
    data() {
      return {
            //noBindFieldList: ['space','label','divider'],
            contentList:[],
            currentModule: {},
            setTableCols: 3,
            setTableRows: 3,
            childContent: {},
            activeFlag: false,
            setColumnWidth: "",
            setRowHeight: ""
        };
    },
    mounted() {
        if (Object.keys(this.dynamicConfig).length > 0){
            this.render()
        }
    },
    created() {
        window.addEventListener('keydown', this.keyOperateClick, false);
        this.$nextTick(() => {
          this.bindModuleHeight();
            //           console.log("mainBody",document.getElementById("mainBody").style.height)
            // console.log("mainBody",document.getElementById("mainBody").scrollHeight)
            // console.log("contentDragToolDiv",document.getElementById("contentDragToolDiv").style.height)
            // console.log("contentDragToolDiv",document.getElementById("contentDragToolDiv").scrollHeight)
        });
    },
    unmounted() {
        window.removeEventListener('keydown', this.keyOperateClick, false);
    },
    methods: {
        //设置单元格垂直居中，居上，居下
        setCellMarginTop(item, type)
        {
            var marginTop = "";
            if (item && item.id && item.id.length > 0)
            {
                document.getElementById(('Cell' + item.id)).style.marginTop = "0px";
                var mainCellHeight = document.getElementById(('mainCell' + item.id)).offsetHeight;
                var contentHeight = document.getElementById(('Cell' + item.id)).offsetHeight;
            }
            if (type === "top")
            {
                marginTop = '0px';
            }
            else if (type === "bottom")
            {
                var diffHeightB = mainCellHeight - contentHeight - 3;
                marginTop = diffHeightB + 'px';
            }
            else if (type === "middle")
            {
                var diffHeight = mainCellHeight - contentHeight;
                marginTop = (diffHeight / 2) + 'px';
            }
            if (item && item.id && item.id.length > 0 && marginTop && marginTop.length > 0)
            {
                document.getElementById(('Cell' + item.id)).style.marginTop = marginTop;
            }
        },
        //快捷键操作
        keyOperateClick(e) {
            if ((e.key === 'Delete')) { 
                if (this.currentModule.name != 'cell') {
                    this.contentList.forEach(c => {
                        if (this.currentModule && this.currentModule.result && this.currentModule.result.parentId && c.id === this.currentModule.result.parentId) {
                            c.result.tasks.splice(c.result.tasks.indexOf(this.currentModule), 1)
                        }
                    })
                }
                // 阻止默认事件
                e.preventDefault();
            }
        },
        rulesHandle(item) {
            if (item && item.result && item.result.tasks) {
                if (this.childContent[item.id])
                {
                    //有值不处理
                }
                else
                {
                    this.childContent[item.id] = item.result.tasks;
                }
            }
        },
        //移动
        onMove(ele){
            var targetElement = ele.draggedContext.element;
            if (ele.relatedContext.list.length <= 0)
            {
                //表示为字容器，只能接收基础组件和报告组件
                if (targetElement.name === "grid" || targetElement.name === "table") {
                    return false;
                }
                else {
                    return true;
                }
            }
            else
            {
                //表示主容器内容为空,为拖拽的第一个组件，此时主容器只能接收布局组件
                var targetElementItem = ele.relatedContext.list[0];
                if (targetElementItem.name === "grid" || targetElementItem.name === "table") {
                    //表明是主容器，只能接收布局组件
                    if (targetElementItem.name === targetElement.name)
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                }
                else {
                    //子容器，只能接收基础组件和报告组件
                    if (targetElement.name === "grid" || targetElement.name === "table") {
                        return false;
                    }
                    else {
                        return true;
                    }
                }
            }
        },
        //拖拽触发事件
        chageDrag(item) {
            if (item) {
                //表示移动
                if (item.moved)
                {
                    this.currentModule = item.moved.element;
                }
                //表示新增
                else if (item.added)
                {
                    this.currentModule = item.added.element;
                }
                this.bindActiveModuleClick(false);
                this.bindModuleAttribute();
                this.bindModuleHeight();
                this.resizeCellVerticalAlignment();
            }
        },
        bindModuleHeight() {
            var colWidthList = this.dynamicConfig.result.base.columnWidth;
            this.contentList.some(c => {
                var addHeight = this.caculateCellContentFactHeight(c, colWidthList);
                //console.log(addHeight);
                c.result.offsetHeight = addHeight;
            });
            this.$emit("setTableModuleHeightClick", this.dynamicConfig.id, this.contentList);
        },
        //计算单元格实际高度
        caculateCellContentFactHeight(c, colWidthList) {
            var curOffsetWidth = 0;
            var addHeight = 0;
            if (c.result.base.colStartIndex > 0)
            {
                curOffsetWidth = tool.mmToPx(colWidthList[(c.result.base.colStartIndex - 1)]);
            }
            if (c.result && c.result.tasks && c.result.tasks.length > 0)
            {
                var addWidth = 0;
                var maxOffsetHeight = 0;
                c.result.tasks.some(d => {
                    if (document.getElementById(d.id)) 
                    {
                        d.result.offsetWidth = document.getElementById(d.id).offsetWidth - 3;
                    }
                    else
                    {
                        d.result.offsetWidth = tool.mmToPx(36);
                    }
                    if (addWidth > 0 && (addWidth + d.result.offsetWidth) >= curOffsetWidth) 
                    {
                        addWidth = 0;
                        addHeight += maxOffsetHeight; 
                        maxOffsetHeight = 0;
                    }
                    //继续处理内容
                    addWidth += d.result.offsetWidth;
                    if (d.name === "label")
                    {
                        var rowCount1 = parseInt(d.result.offsetWidth / curOffsetWidth) + ((d.result.offsetWidth % curOffsetWidth) > 0 ? 1 : 0);
                        var rowPerHeight1 = parseFloat(d.result.pattern.fontSize) + 6;
                        if (rowPerHeight1 < 20)
                        {
                            rowPerHeight1 = 20;
                        } 
                        d.result.offsetHeight = rowPerHeight1 * rowCount1;

                        var lblHeight = document.getElementById(d.id).offsetHeight;
                        if (lblHeight > 60 && d.result.offsetHeight < lblHeight)
                        {
                            if (parseFloat(d.result.pattern.fontSize) <= 20)
                            {
                                rowCount1 = lblHeight / 36;
                                d.result.offsetHeight = rowPerHeight1 * rowCount1;
                            }
                        }
                    }
                    if (d.result.offsetHeight > maxOffsetHeight)
                    {
                        maxOffsetHeight = d.result.offsetHeight;
                    }
                });
                if (maxOffsetHeight > 0) 
                {
                    addHeight += maxOffsetHeight; 
                }
            }
            else
            {
                addHeight = 20;
            }
            return addHeight;
        },
        //操作
        operate(type, ele, parentId) {
            var index = -1;
            this.childContent[parentId].some((item, i) => {
                if (item.id === ele.id)
                {
                    index = i;
                    return true;
                }
            });
            //删除
            if (type === "delete")
            {
                if (index >= 0)
                {
                    this.currentModule = {}
                    this.childContent[parentId].splice(index, 1)
                }
                var curDom = document.getElementById(parentId);
                if (curDom) {
                    curDom.style.minHeight = "35px";
                }
                //var curOffsetHeight = document.getElementById('Cell' + parentId).offsetHeight - 3;
                this.contentList.some(c => {
                    if (c.id === parentId) {
                        var colWidthList = this.dynamicConfig.result.base.columnWidth;
                        var addHeight = this.caculateCellContentFactHeight(c, colWidthList);
                        c.result.offsetHeight = addHeight;
                        return true;
                    }                   
                });
                this.$emit("setTableModuleHeightClick", this.dynamicConfig.id, this.contentList);
                this.resizeCellVerticalAlignment();
            }
            //复制
            else if (type === "copy")
            {
                if (index >= 0)
                {
                    var newModule = designerInfo.initAppointModule(ele.name);
                    this.childContent[parentId].splice((index + 1), 0, newModule);
                }
            }
            this.bindModuleAttribute();
        },
        resizeCellVerticalAlignment()
        {
            this.$nextTick(() => {
                this.contentList.some(c => {
                    if (c.result && c.result.pattern && c.result.pattern.verticalAlignment && c.result.pattern.verticalAlignment.length > 0) 
                    {
                        this.setCellMarginTop(c, c.result.pattern.verticalAlignment.toLowerCase());
                    }
                });
            });
        },
        //子组件选中事件
        taksActiveModuleClick(ele) {
            this.currentModule = ele;
        },
        //回调父页面，绑定选中组件事件
        bindActiveModuleClick(flag){
            if (this.currentModule)
            {
                this.$emit("activeModuleClick", 0, this.currentModule, flag, this.dynamicConfig.id)
            }
        },
        //回调父页面，绑定值
        bindModuleAttribute() {
            if (this.currentModule)
            {
                this.contentList.forEach(c => {
                    c.result.tasks.forEach(d => {
                        d.result.parentId = c.id;
                        d.result.parentName = c.name;
                        if (this.currentModule.id === d.id) {
                            this.currentModule.result.parentId = c.id;
                            this.currentModule.result.parentName = c.name;
                        }
                    });
                    if (this.currentModule.id === c.id) {
                        this.currentModule = c;
                    }
                    this.childContent[c.id] = c.result.tasks;
                })
                this.$emit("activeModuleClick", 1, this.currentModule, null, this.dynamicConfig.id, this.contentList);
            }
        },
        //选中单元格
        activeCell(ele) {
            if (!this.activeFlag)
            {
                if (ele) {                 
                    this.currentModule = ele;
                    this.bindActiveModuleClick(true);
                    this.bindModuleAttribute();
                }
            }
            this.activeFlag = false;
        },
        //设定当前有效标签
        active(ele) {
            if (ele){
                if (this.currentModule && this.currentModule.result && this.currentModule.result.property)
                {
                    this.currentModule = ele;
                    this.bindActiveModuleClick(true);
                    this.bindModuleAttribute();
                }
            }  
            this.activeFlag = true;      
        },
        //设置当前组件宽度和水平位置
        getActiveStyle(item) {
            var styleInfo = "margin-top:1px;";
            if (item.name === "label")
            {
                styleInfo += "display:flex;align-items: flex-end;";
            }
            if (item.result.pattern.width > 0) {
            if (item.name === "select" || item.name === "space")
            {
                if (this.currentModule.id === item.id)
                {
                    var tempWidth = parseFloat(tool.mmToPx(item.result.pattern.width - 1)) + 50;
                    styleInfo += "width:" + tempWidth + "px;";
                }
                else {
                    styleInfo += "width:" + tool.mmToPx(item.result.pattern.width - 1) + "px;";
                }
            }
            else if (item.name === "datetime")
            {
                var widthValue = 0;
                var displayFormat = item.result.property.displayFormat;
                if (displayFormat === "yyyy-MM-dd" || displayFormat === "yyyy/MM/dd" || displayFormat === "yyyy.MM.dd")
                {
                    widthValue = 20;
                }
                else if (displayFormat === "yyyy年MM月dd日")
                {
                    widthValue = 27;
                }
                else if (displayFormat === "yyyy-MM-dd hh:mm")
                {
                    widthValue = 30;
                }
                else
                {
                    widthValue = 37;
                }
                styleInfo += "width:" + (tool.mmToPx(widthValue)) + "px;";
            }
            else if (item.name === "label")
            {
                if (parseInt(item.result.pattern.width) <= 0) {
                    styleInfo += "min-width:10px;";
                }
                else {
                    styleInfo += "width:" + tool.mmToPx(item.result.pattern.width) + "px;";
                }
            }
            else {
                styleInfo += "width:" + tool.mmToPx(item.result.pattern.width) + "px;";
            }
            }
            if (this.dynamicConfig && this.dynamicConfig.result && this.dynamicConfig.result.pattern && this.dynamicConfig.result.pattern.interval > 1)
            {
                var curIndex = this.contentList.findIndex((t) => t.id == item.id)
                if (curIndex > 0) {
                    styleInfo += "margin-left:" + tool.mmToPx(this.dynamicConfig.result.pattern.interval) + "px;"
                }
                else {
                    styleInfo += "margin-left:1px;"
                }
            }
            else {
                styleInfo += "margin-left:1px;"
            }
            var curDom = document.getElementById("Cell"+item.result.parentId);
            if (curDom) {
                curDom.style.minHeight = "35px";
            }
            if (item.name === "divider")
            {
                styleInfo += "min-height:16px;";
                if (curDom) {
                    curDom.style.minHeight = "0px";
                }
            }
            
            return styleInfo;
        },
        //设置样式
        setDragAreaFlex(data, index) {
            var styleInfo = "";
            if (data && data.result && data.result.pattern && data.result.pattern.horizontalAlignment && data.result.pattern.horizontalAlignment.length > 0)
            {
                switch(data.result.pattern.horizontalAlignment)
                {
                    case "Right":
                        styleInfo += "justify-content:right";
                        break;
                    case "Center":
                        styleInfo += "justify-content:center";
                        break;
                    case "Bothends":
                        styleInfo += "justify-content:space-between";
                        break;
                    default:
                        styleInfo += "justify-content:left";
                        break;
                }
            }
            if (index === (this.contentList.length - 1))
            {
                this.$nextTick(() => {
                    this.bindModuleHeight();
                    this.contentList.some(c => {
                        if (c.result && c.result.pattern && c.result.pattern.verticalAlignment && c.result.pattern.verticalAlignment.length > 0) 
                        {
                            this.setCellMarginTop(c, c.result.pattern.verticalAlignment.toLowerCase());
                        }
                    });
                });
            }
            return styleInfo
        },
         //页面数据导入
        render() {
            if (this.dynamicConfig && this.dynamicConfig.result && this.dynamicConfig.result.tasks && this.dynamicConfig.result.tasks.length > 0)
            {
                this.dynamicConfig.result.tasks.map(c => {
                    this.contentList.push(c);
                });
            }
            if (this.dynamicConfig && this.dynamicConfig.result && this.dynamicConfig.result.base)
            {
                this.setTableRows = this.dynamicConfig.result.base.rowCount;
                this.setTableCols = this.dynamicConfig.result.base.columnCount
            }
        },
        //排序或者重新加载数据
        sortRender(list, curModuleInfo) {
            if (list && list.length > 0)
            {
                this.contentList = [];
                list.map(item => {
                    if (this.childContent[item.id]) {
                        this.childContent[item.id] = item.result.tasks;
                    }
                    this.contentList.push(item);
                });
            }
            else {
                this.contentList = [];
            }
            if (curModuleInfo && curModuleInfo.id && curModuleInfo.id.length > 0) {
                this.currentModule = curModuleInfo;
            }
        },
        //合并grid
        //表示从第几行开始和第几列开始横跨 2 行 3 列
        //2 / 1 / span 2 / span 3;
        mergeCell(data) {
            var styleInfo = {
                "margin-right": '-0.1px'
            };
            var item = data.result.base;
            if (item.rowSpan === 1 && item.colSpan === 1) {
                //无需合并
            } 
            else {
                styleInfo["grid-area"] = item.rowStartIndex + " / " + item.colStartIndex + " / span " + item.rowSpan + " / span " + item.colSpan;                
            }
            if (data.result.pattern.cellBorderStyle && data.result.pattern.cellBorderStyle.length > 0) {
                styleInfo["border-style"] = data.result.pattern.cellBorderStyle;
            }
            else {
                styleInfo["border-style"] = "solid";
            }
            if (data.result.pattern.cellBorderColor && data.result.pattern.cellBorderColor.length > 0) {
                styleInfo["border-color"] = data.result.pattern.cellBorderColor;
            }
            else {
                styleInfo["border-color"] = "#747474";
            }
            if (data.result.pattern.cellBackgroundColor && data.result.pattern.cellBackgroundColor.length > 0) {
                styleInfo["background-color"] = data.result.pattern.cellBackgroundColor;
            }
            else {
                styleInfo["background-color"] = "white";
            }
            if (!this.dynamicConfig.result.pattern.showTableCellBorder) {
                styleInfo["border-width"] = "0px";
            }
            else {
                if (data.result.pattern.showCellBorder) {
                    if (data.result.pattern.cellBorderWeight > 0) {
                        styleInfo["border-width"] = data.result.pattern.cellBorderWeight + "px";
                    }
                    else {
                        styleInfo["border-width"] = "1px";
                    }
                }
                else {
                    styleInfo["border-width"] = '0px';
                }
            }
            if (!this.dynamicConfig.result.pattern.showTableCellMargin) {
                styleInfo["margin"] = '0px';
            }
            else {
                styleInfo["margin"] = '1px';
            }
            return styleInfo;
        },
        //设置主表样式和宽度
        setTableColsStyle(cols) {
            var styleInfo = {};
            var patternInfo = this.dynamicConfig.result.pattern;
            if (patternInfo.avgColumnWidth) {
                if (cols > 0) {
                    styleInfo["grid-template-columns"] = "repeat(" + cols + ", minmax(100px, 1fr))";
                }
            }
            else {
                if (cols > 0) {
                    if (this.setColumnWidth.length > 0) {
                        if (this.dynamicConfig.result.base.columnWidth.length > 0)
                        {
                            var t = "";
                            this.dynamicConfig.result.base.columnWidth.some((c, index) => {
                                if (index === (this.dynamicConfig.result.base.columnWidth.length - 1))
                                {
                                    t += "auto";
                                }
                                else 
                                {
                                    t += tool.mmToPx(c) + "px ";
                                }
                            });
                            this.setColumnWidth = t;
                        }
                        styleInfo["grid-template-columns"] = this.setColumnWidth;
                    }
                    else {
                        if (this.dynamicConfig.result.base.columnWidth && this.dynamicConfig.result.base.columnWidth.length > 0) {
                            var strTemp = "";
                            for (var k = 0; k < (this.dynamicConfig.result.base.columnWidth.length - 1); k++) {
                                strTemp += tool.mmToPx(this.dynamicConfig.result.base.columnWidth[k]) + "px ";
                            }
                            strTemp += "auto";
                            styleInfo["grid-template-columns"] = strTemp;
                        }
                        else {
                            var width = tool.mmToPx(pageInfo.defaultPageType.width) - tool.mmToPx(pageInfo.defaultPagePadding.left) - tool.mmToPx(pageInfo.defaultPagePadding.right)
                            var avgWidth = parseInt(width / cols);
                            var str = "";
                            for (var i = 1; i < cols; i++) {
                                str += avgWidth + "px ";
                            }
                            str += "auto";
                            styleInfo["grid-template-columns"] = str;
                        }
                    }                    
                }
            }
            if (this.setRowHeight.length > 0) {
                styleInfo["grid-template-rows"] = this.setRowHeight;
            }
            else {
                styleInfo["grid-template-rows"] = "repeat(auto-fit, minmax(40px, auto))";
            }
            if (patternInfo.borderStyle && patternInfo.borderStyle.length > 0) {
                styleInfo["border-style"] = patternInfo.borderStyle;
            }
            else {
                styleInfo["border-style"] = "solid";
            }
            if (patternInfo.borderColor && patternInfo.borderColor.length > 0) {
                styleInfo["border-color"] = patternInfo.borderColor;
            }
            else {
                styleInfo["border-color"] = "#747474";
            }
            if (patternInfo.showTableBorder) {
                if (patternInfo.borderWeight > 0) {
                    styleInfo["border-width"] = patternInfo.borderWeight + "px";
                }
                else {
                    styleInfo["border-width"] = "1px";
                }
            } 
            else {
                styleInfo["border-width"] = "0px";
            }
            if (patternInfo.backgroundColor && patternInfo.backgroundColor.length > 0) {
                styleInfo["background-color"] = patternInfo.backgroundColor;
            }
            else {
                styleInfo["background-color"] = "white";
            }
            return styleInfo;
        },
        //添加行
        addRow(type, tableData, rowStartIndex) {
            var addRowIndex = 0;
            if (rowStartIndex > tableData.result.base.rowCount) {
                return;
            }
            //定义要占位的栅格，标出列；
            var waitSpaceColIndexs = [];
            var rowLength = tableData.result.tasks.filter(c => c.result.base.rowStartIndex === rowStartIndex).length;
            var maxColIndex = 1;
            if (type === 0)
            {
                //表示在上方添加
                //处理跨区域的问题
                if (rowLength < tableData.result.base.columnCount) {
                    tableData.result.tasks.forEach(c => {
                        if (c.result.base.rowSpan > 1)
                        {
                            if (c.result.base.rowStartIndex === rowStartIndex) {
                                //不处理
                            }
                            else {
                                if (c.result.base.rowEndIndex >= (rowStartIndex + 1)) {
                                    c.result.base.rowSpan++;
                                    c.result.base.rowEndIndex++;
                                    waitSpaceColIndexs.push(c.result.base.colStartIndex);
                                }
                            }
                        }
                    });
                }
                //处理其他的问题
                tableData.result.tasks.forEach(c => {
                    if (c.result.base.rowStartIndex === rowStartIndex) {
                        if (c.result.base.colStartIndex > maxColIndex) {
                            maxColIndex = c.result.base.colStartIndex;
                        }
                    }
                    if (c.result.base.rowStartIndex >= rowStartIndex)
                    {
                        c.result.base.rowStartIndex++;
                        c.result.base.rowEndIndex++;
                    }
                });
                var appendTopIndex = tableData.result.tasks.indexOf(tableData.result.tasks.filter(c => c.result.base.rowStartIndex === (rowStartIndex - 1) && c.result.base.colStartIndex === maxColIndex)[0]);
                //添加行
                for (var i = 1; i <= tableData.result.base.columnCount; i++) {
                    if (waitSpaceColIndexs.some(c => c === i)) {
                        //不处理
                    }
                    else {
                        var tempTop = tableCellInfo.initData(tableData.id, rowStartIndex, i, tableData.name);
                        appendTopIndex++;
                        tableData.result.tasks.splice(appendTopIndex, 0, tempTop);
                    }
                }
                addRowIndex = rowStartIndex;
            }
            else {
                //表示在下方添加
                if (rowLength <= tableData.result.base.columnCount) {
                    tableData.result.tasks.forEach(c => {
                        if (c.result.base.rowSpan > 1)
                        {
                            if (c.result.base.rowStartIndex === rowStartIndex) {
                                c.result.base.rowSpan++;
                                c.result.base.rowEndIndex++;
                                waitSpaceColIndexs.push(c.result.base.colStartIndex);
                            }
                            else {
                                if (c.result.base.rowEndIndex > (rowStartIndex + 1)) {
                                    c.result.base.rowSpan++;
                                    c.result.base.rowEndIndex++;
                                    waitSpaceColIndexs.push(c.result.base.colStartIndex);
                                }
                            }
                        }
                    });
                }
                //处理其他的问题
                tableData.result.tasks.forEach(c => {
                    if (c.result.base.rowStartIndex > rowStartIndex)
                    {
                        c.result.base.rowStartIndex++;
                        c.result.base.rowEndIndex++;
                    }
                    if (c.result.base.rowStartIndex === rowStartIndex) {
                        if (c.result.base.colStartIndex > maxColIndex) {
                            maxColIndex = c.result.base.colStartIndex;
                        }
                    }
                });
                var appendBottomIndex = tableData.result.tasks.indexOf(tableData.result.tasks.filter(c => c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex === maxColIndex)[0]);
                //添加行
                for (var j = 1; j <= tableData.result.base.columnCount; j++) {
                    if (waitSpaceColIndexs.some(c => c === j)) {
                        //不处理
                    }
                    else {
                        var tempBottom = tableCellInfo.initData(tableData.id, (rowStartIndex + 1), j, tableData.name);
                        appendBottomIndex++;
                        tableData.result.tasks.splice(appendBottomIndex, 0, tempBottom);
                    }
                }
                addRowIndex = rowStartIndex + 1;
            }
            tableData.result.base.rowCount++;
            this.setTableRows = tableData.result.base.rowCount;
            //添加row的最小行高
            var tempMinH = { height: 0.0, type: "MinValue", minHeight: parseFloat(6)};
            tableData.result.base.rowHeight.splice(addRowIndex, 0, tempMinH);

            //this.bindModuleHeight();
        },
        //添加列
        addCol(type, tableData, colStartIndex) {
            if (tableData.result.base.columnCount >= 7) {
                return;
            }
            if (colStartIndex > tableData.result.base.columnCount) {
                return;
            }
            var addColIndex = 1;
            //定义要占位的栅格，标出列；
            var waitSpaceRowIndexs = [];
            var rowLength = tableData.result.tasks.filter(c => c.result.base.colStartIndex === colStartIndex).length;
            //var index = 0;
            if (type === 0)
            {
                //表示在上方添加
                //处理跨区域的问题
                if (rowLength < tableData.result.base.rowCount) {
                    tableData.result.tasks.forEach(c => {
                        if (c.result.base.colSpan > 1)
                        {
                            if (c.result.base.colStartIndex === colStartIndex) {
                                //不处理
                            }
                            else {
                                if (c.result.base.colEndIndex >= (colStartIndex + 1)) {
                                    c.result.base.colSpan++;
                                    c.result.base.colEndIndex++;
                                    waitSpaceRowIndexs.push(c.result.base.rowStartIndex);
                                }
                            }
                        }
                    });
                }
                //处理其他的问题
                tableData.result.tasks.forEach(c => {
                    if (c.result.base.colStartIndex >= colStartIndex)
                    {
                        c.result.base.colStartIndex++;
                        c.result.base.colEndIndex++;
                    }
                });
                //添加行
                for (var i = 1; i <= tableData.result.base.rowCount; i++) {
                    if (waitSpaceRowIndexs.some(c => c === i)) {
                        //不处理
                    }
                    else {
                        var tempTop = tableCellInfo.initData(tableData.id, i, colStartIndex, tableData.name);
                        var appendTopIndex = tableData.result.tasks.indexOf(tableData.result.tasks.filter(c => c.result.base.colStartIndex === (colStartIndex + 1) && c.result.base.rowStartIndex === i)[0]);
                        tableData.result.tasks.splice(appendTopIndex, 0, tempTop);
                    }
                }
                addColIndex = colStartIndex;
            }
            else {
                //表示在下方添加
                //处理跨区域的问题
                if (rowLength <= tableData.result.base.rowCount) {
                    tableData.result.tasks.forEach(c => {
                        if (c.result.base.colSpan > 1)
                        {
                            if (c.result.base.colStartIndex === colStartIndex) {
                                c.result.base.colSpan++;
                                c.result.base.colEndIndex++;
                                waitSpaceRowIndexs.push(c.result.base.rowStartIndex);
                            }
                            else {
                                if (c.result.base.colEndIndex > (colStartIndex + 1)) {
                                    c.result.base.colSpan++;
                                    c.result.base.colEndIndex++;
                                    waitSpaceRowIndexs.push(c.result.base.rowStartIndex);
                                }
                            }
                        }
                    });
                }
                //处理其他的问题
                tableData.result.tasks.forEach(c => {
                    if (c.result.base.colStartIndex > colStartIndex)
                    {
                        c.result.base.colStartIndex++;
                        c.result.base.colEndIndex++;
                    }
                });
                //添加行
                for (var j = 1; j <= tableData.result.base.rowCount; j++) {
                    if (waitSpaceRowIndexs.some(c => c === j)) {
                        //不处理
                    }
                    else {
                        var tempBottom = tableCellInfo.initData(tableData.id, j, colStartIndex + 1, tableData.name);
                        if (colStartIndex === tableData.result.base.columnCount) {
                            var lastColIndex = tableData.result.tasks.indexOf(tableData.result.tasks.filter(c => c.result.base.colStartIndex === colStartIndex && c.result.base.rowStartIndex === j)[0]) + 1;
                            tableData.result.tasks.splice(lastColIndex, 0, tempBottom);
                        }
                        else {
                            var appendBottomIndex = tableData.result.tasks.indexOf(tableData.result.tasks.filter(c => c.result.base.colStartIndex === (colStartIndex + 2) && c.result.base.rowStartIndex === j)[0]);
                            tableData.result.tasks.splice(appendBottomIndex, 0, tempBottom);
                        }
                    }
                }
                
                addColIndex = colStartIndex + 1;
            }
            tableData.result.base.columnCount++;
            this.setTableCols = tableData.result.base.columnCount;
            
            //添加col宽度
            var tempCols = tableData.result.base.columnWidth;
            var newColsWidth = [];
            //都是从头开始减，平均宽度
            var avgWidth = parseFloat(parseFloat((20.01 / (tableData.result.base.columnCount - 1)) + 0.1).toFixed(2));
            var diffWidth = 0;
            tempCols.some(c => {
                if (c < avgWidth) 
                {
                    newColsWidth.push(c);
                    diffWidth += avgWidth;
                }
                else
                {
                    var newTempWidth = c - avgWidth;
                    if (newTempWidth > diffWidth)
                    {
                        newTempWidth -= diffWidth;
                        diffWidth = 0;
                    }
                    newColsWidth.push(newTempWidth);
                }
            });
            newColsWidth.splice(addColIndex, 0, 20);
            tableData.result.base.columnWidth = newColsWidth;
            var str = "";
            newColsWidth.some((c, index1) => {
                if (index1 === (newColsWidth.length - 1))
                {
                    str += "auto";
                }
                else
                {
                    str += tool.mmToPx(c) + "px ";
                }
            });
            this.setColumnWidth = str;
        },
        //删除行
        delRow(tableData, rowStartIndex){
            if (tableData.result.base.rowCount <= 1) {
                return;
            }
            //找到要移除的栅格
            var waitDelColItems = [];
            waitDelColItems = tableData.result.tasks.filter(c => c.result.base.rowStartIndex === rowStartIndex && c.result.base.rowSpan === 1);
            //index要变
            tableData.result.tasks.forEach(c => {
                if (c.result.base.rowStartIndex > rowStartIndex)
                {
                    c.result.base.rowStartIndex--;
                    c.result.base.rowEndIndex--;
                }
            });
            //删掉 10，11
            waitDelColItems.forEach(c => {
                //这里还要做子元素的抓取
                tableData.result.tasks.splice(tableData.result.tasks.indexOf(c), 1);
            });
            //处理跨行
            var waitDelRowSpanColItems = tableData.result.tasks.filter(c => c.result.base.rowStartIndex <= rowStartIndex && rowStartIndex <= c.result.base.rowEndIndex && c.result.base.rowSpan > 1);
            //范围变小
            if (waitDelRowSpanColItems && waitDelRowSpanColItems.length > 0)
            {
                waitDelRowSpanColItems.forEach(c => {
                    c.result.base.rowEndIndex--;
                    c.result.base.rowSpan--;
                });
            }

            tableData.result.base.rowCount--;
            this.setTableRows = tableData.result.base.rowCount;

            //删除row的最小行高
            tableData.result.base.rowHeight.splice(rowStartIndex, 1);
            
            //this.bindModuleHeight();
        },
        //删除列
        delCol(tableData, colStartIndex) {
            if (tableData.result.base.columnCount <= 1) {
                return;
            }
            //找到要移除的栅格
            var waitDelColItems = [];
            waitDelColItems = tableData.result.tasks.filter(c => c.result.base.colStartIndex === colStartIndex && c.result.base.colSpan === 1);
            //index要变
            tableData.result.tasks.forEach(c => {
                if (c.result.base.colStartIndex > colStartIndex)
                {
                    c.result.base.colStartIndex--;
                    c.result.base.colEndIndex--;
                }
            });
            //删掉 10，11
            waitDelColItems.forEach(c => {
                //这里还要做子元素的抓取
                tableData.result.tasks.splice(tableData.result.tasks.indexOf(c), 1);
            })
            //删掉 跨列
            var waitDelSpanColsColItems = tableData.result.tasks.filter(c => c.result.base.colStartIndex <= colStartIndex && colStartIndex <= c.result.base.colEndIndex && c.result.base.colSpan > 1);
            if (waitDelSpanColsColItems && waitDelSpanColsColItems.length > 0)
            {
                waitDelSpanColsColItems.forEach(c => {
                    c.result.base.colEndIndex--;
                    c.result.base.colSpan--;
                });
            }
            tableData.result.base.columnCount--;
            this.setTableCols = tableData.result.base.columnCount;

            //添加col宽度
            var newColsWidth = [];
            var tempCols = tableData.result.base.columnWidth;
            var curWidth = tempCols[(colStartIndex - 1)];
            //都是从头开始加，平均宽度
            var avgWidth = parseFloat(parseFloat((curWidth / (tableData.result.base.columnCount)) + 0.1).toFixed(2));
            tempCols.some((c, index1) => {
                if (index1 === (colStartIndex - 1))
                {
                    //不处理
                }
                else 
                {
                    var tempWidth = avgWidth + c;
                    newColsWidth.push(tempWidth);
                }
            });
            tableData.result.base.columnWidth = newColsWidth;
            var str = "";
            newColsWidth.some((c, index1) => {
                if (index1 === (newColsWidth.length - 1))
                {
                    str += "auto";
                }
                else
                {
                    str += tool.mmToPx(c) + "px ";
                }
            });
            this.setColumnWidth = str;
        },
        //合并单元格
        merge(tableData, rowStartIndex, colStartIndex, rowSpan, colSpan, type) {
            var curCell = tableData.result.tasks.filter(c => c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex === colStartIndex)[0];
            if (rowSpan === 1 && colSpan > 1)
            {
                if (curCell.result.base.colEndIndex > tableData.result.base.columnCount) {
                    return;
                }
                //合并列,9-11
                //找到要移除的栅格
                var waitDelColItems = [];
                waitDelColItems = tableData.result.tasks.filter(c => c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex > colStartIndex && c.result.base.colStartIndex < (colStartIndex + colSpan))
                //删掉 10，11
                var colChildList = [];
                waitDelColItems.forEach(c => {
                    if (c.result && c.result.tasks && c.result.tasks.length > 0) {
                        colChildList.push(...c.result.tasks);
                    }
                    //这里还要做子元素的抓取
                    tableData.result.tasks.splice(tableData.result.tasks.indexOf(c), 1);
                })
                //跨区域
                tableData.result.tasks.some(c => {
                    if (c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex === colStartIndex) {
                        c.result.base.rowSpan = rowSpan;
                        c.result.base.colSpan = colSpan;
                        c.result.base.colEndIndex = c.result.base.colStartIndex + colSpan;
                        if (colChildList && colChildList.length > 0) {
                            //c.result.tasks.push(...colChildList);
                            colChildList.forEach(x => {
                                x.result.parentId = c.id;
                                c.result.tasks.push(x);
                            })
                        }
                        return true;
                    }
                });
            } 
            else if (colSpan === 1 && rowSpan > 1)
            {
                if (curCell.result.base.rowEndIndex > tableData.result.base.rowCount) {
                    return;
                }
                //合并行,14,20,26
                //找到要移除的栅格
                var waitDelRowItems = [];
                waitDelRowItems = tableData.result.tasks.filter(c => c.result.base.colStartIndex === colStartIndex && c.result.base.rowStartIndex > rowStartIndex && c.result.base.rowStartIndex < (rowStartIndex + rowSpan))
                //删掉 20,26
                var rowChildList = [];
                waitDelRowItems.forEach(c => {
                    if (c.result && c.result.tasks && c.result.tasks.length > 0) {
                        rowChildList.push(...c.result.tasks);
                    }
                    //这里还要做子元素的抓取
                    tableData.result.tasks.splice(tableData.result.tasks.indexOf(c), 1);
                })
                //跨区域
                tableData.result.tasks.some(c => {
                    if (c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex === colStartIndex) {
                        c.result.base.rowSpan = rowSpan;
                        c.result.base.colSpan = colSpan;
                        c.result.base.rowEndIndex = c.result.base.rowStartIndex + rowSpan;
                        if (rowChildList && rowChildList.length > 0) {
                            //c.result.tasks.push(...rowChildList);
                            rowChildList.forEach(x => {
                                x.result.parentId = c.id;
                                c.result.tasks.push(x);
                            })
                        }
                        return true;
                    }
                });
            } 
            else if (colSpan > 1 && rowSpan > 1) {
                if (curCell.result.base.rowEndIndex > tableData.result.base.rowCount && curCell.result.base.colEndIndex > tableData.result.base.columnCount) {
                    return;
                }
                if (type === 1) {
                    //向右
                    var rightCell = tableData.result.tasks.filter(c => c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex === (colStartIndex + 1))[0];
                    if (curCell.result.base.rowSpan != rightCell.result.base.rowSpan) {
                        return;
                    }
                }
                else if (type === 2) {
                    //向下
                    var bottomCell = tableData.result.tasks.filter(c => c.result.base.rowStartIndex === (rowStartIndex + 1) && c.result.base.colStartIndex === colStartIndex)[0];
                    if (bottomCell.result.base.colSpan != curCell.result.base.colSpan) {
                        return;
                    }
                }
                //合并行,22,23,24,28,29,30,34,35,36
                //找到要移除的栅格
                var waitDelAreaItems = [];
                //循环，一行一行取值
                tableData.result.tasks.forEach(c => {
                    if (c.result.base.rowStartIndex >= rowStartIndex && c.result.base.rowStartIndex < (rowStartIndex + rowSpan) 
                    && c.result.base.colStartIndex >= colStartIndex && c.result.base.colStartIndex < (colStartIndex + colSpan))
                    {
                        if (c.result.base.colStartIndex === colStartIndex && c.result.base.rowStartIndex === rowStartIndex){
                            //不处理
                        }
                        else {
                            waitDelAreaItems.push(c);
                        }
                    }
                });
                //删掉 23,24,28,29,30,34,35,36
                var childList = [];
                waitDelAreaItems.forEach(c => {
                    if (c.result && c.result.tasks && c.result.tasks.length > 0) {
                        childList.push(...c.result.tasks);
                    }
                    //这里还要做子元素的抓取
                    tableData.result.tasks.splice(tableData.result.tasks.indexOf(c), 1);
                });
                //跨区域
                tableData.result.tasks.some(c => {
                    if (c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex === colStartIndex) {
                        c.result.base.rowSpan = rowSpan;
                        c.result.base.colSpan = colSpan;
                        c.result.base.rowEndIndex = c.result.base.rowStartIndex + rowSpan;
                        c.result.base.colEndIndex = c.result.base.colStartIndex + colSpan;
                        childList.forEach(x => {
                            x.result.parentId = c.id;
                            c.result.tasks.push(x);
                        });
                        return true;
                    }
                });
            }
            else {
                //无需处理
            }
            
            //this.bindModuleHeight();
        },
        //拆分单元格
        splitCell(tableData, rowStartIndex, colStartIndex) {
            //定义要占位的栅格，标出列；
            var oldCell = tableData.result.tasks.filter(c => c.result.base.rowStartIndex === rowStartIndex && c.result.base.colStartIndex === colStartIndex)[0];
            var spanIndexItems = [];
            //表示只跨行
            if (oldCell.result.base.rowSpan > 1 && oldCell.result.base.colSpan === 1) {
                for (var i = 0; i < oldCell.result.base.rowSpan; i++) {
                    spanIndexItems.push({
                        rowStartIndex: rowStartIndex + i,
                        colStartIndex: colStartIndex
                    });
                }
            }
            //表示只跨列
            else if (oldCell.result.base.rowSpan === 1 && oldCell.result.base.colSpan > 1) {
                for (var j = 0; j < oldCell.result.base.colSpan; j++) {
                    spanIndexItems.push({
                        rowStartIndex: rowStartIndex,
                        colStartIndex: colStartIndex + j
                    });
                }
            }
            //表示跨行跨列
            else if (oldCell.result.base.rowSpan > 1 && oldCell.result.base.colSpan > 1) {
                for (var m = 0; m < oldCell.result.base.rowSpan; m++) {
                    for (var n = 0; n < oldCell.result.base.colSpan; n++) {
                        spanIndexItems.push({
                        rowStartIndex: rowStartIndex + m,
                        colStartIndex: colStartIndex + n
                    });
                    }
                }
            }
            else {
                //啥也不处理
            }
            var firstItem = spanIndexItems[0];
            // 先把跨区域的给解决掉
            tableData.result.tasks.forEach(c => {
                if (c.result.base.rowStartIndex === firstItem.rowStartIndex && c.result.base.colStartIndex === firstItem.colStartIndex) {
                    c.result.base.rowSpan = 1;
                    c.result.base.colSpan = 1;
                    c.result.base.rowEndIndex = c.result.base.rowStartIndex + 1;
                    c.result.base.colEndIndex = c.result.base.colStartIndex + 1;
                }
            });
            //添加元素
            for (var k = (spanIndexItems.length - 1); k >= 1; k--) {
                var tempTop = tableCellInfo.initData(tableData.id, spanIndexItems[k].rowStartIndex, spanIndexItems[k].colStartIndex, tableData.name);
                var appendIndex = 0;
                tableData.result.tasks.some((c, index) => {
                    if (c.result.base.rowStartIndex === spanIndexItems[k].rowStartIndex && c.result.base.colStartIndex === (spanIndexItems[k].colStartIndex + 1)) {
                        appendIndex = index;
                        return true;
                    }
                });
                tableData.result.tasks.splice(appendIndex, 0, tempTop);
            }
            //this.bindModuleHeight();
        },
        //设置列宽
        setColsWidth(tableData, columnIndex, colWidth) {
            if (tableData.result.pattern.avgColumnWidth) 
            {
                return;
            }
            var columnWidth = parseFloat(colWidth);
            //mm转px
            var width = tool.mmToPx(pageInfo.defaultPageType.width) - tool.mmToPx(pageInfo.defaultPagePadding.left) - tool.mmToPx(pageInfo.defaultPagePadding.right)
            var cellAvgWidth = tool.pxToMM(parseInt(width / tableData.result.base.columnCount));
            if (columnWidth > (cellAvgWidth * 2)) {
                columnWidth = cellAvgWidth;
            }
            //添加col宽度
            var tempCols = tableData.result.base.columnWidth;
            var newColsWidth = [];
            //都是从头开始减，平均宽度
            var stuffWidth = 0;
            var oldColumnWidth = parseFloat(tempCols[(columnIndex - 1)]);
            if (columnWidth > oldColumnWidth) 
            {
                //新值>旧值，那么其他的项都减
                stuffWidth = oldColumnWidth - columnWidth - 0.01;
            }
            else if (columnWidth < oldColumnWidth)  
            {
                //新值<旧值，那么其他的项都加
                stuffWidth = oldColumnWidth - columnWidth + 0.01;
            }
            else
            {
                //值没变化，不变
                return;
            }
            var avgWidth = parseFloat(parseFloat((stuffWidth / tableData.result.base.columnCount) + 0.1).toFixed(2));
            var diffWidth = 0;
            tempCols.some((c, colIndex) => {
                if (c < avgWidth) 
                {
                    newColsWidth.push(c);
                    diffWidth += avgWidth;
                }
                else if ((colIndex + 1) === columnIndex)
                {
                    newColsWidth.push(columnWidth);
                }
                else
                {
                    var newTempWidth = c + avgWidth;
                    if (newTempWidth > diffWidth)
                    {
                        newTempWidth += diffWidth;
                        diffWidth = 0;
                    }
                    newColsWidth.push(newTempWidth);
                }
            });
            var str = "";
            newColsWidth.some((c, index1) => {
                if (index1 === (newColsWidth.length - 1))
                {
                    str += "auto";
                }
                else
                {
                    str += tool.mmToPx(c) + "px ";
                }
            });
            tableData.result.base.columnWidth = newColsWidth;
            this.setColumnWidth = str;
        },
        //设置行高
        setRowsHeight(tableData, type, rowIndex, rowHeight) {
            //设置高度
            //styleInfo["grid-template-rows"] = "repeat(auto-fit, minmax(40px, 1fr))";
            var str = "";
            var rowHeightList = [];
            tableData.result.tasks.forEach(c => {
                if (c.result.base.rowStartIndex === rowIndex) {
                    c.result.property.cellRowHeight = rowHeight;
                    c.result.property.cellRowHeightType = type;
                }
                //这里也有bug，不能保证第一行都没有合并，todo
                if (c.result.base.colStartIndex === 1) { 
                    if (c.result.property.cellRowHeightType === "0" || c.result.property.cellRowHeightType === 0)
                    {
                        //最小值
                        str += "minmax(" + tool.mmToPx(c.result.property.cellRowHeight) + "px, auto) ";
                        var tempMinH = { height: 0.0, type: "MinValue", minHeight: parseFloat(c.result.property.cellRowHeight)};
                        rowHeightList.push(tempMinH);
                    }
                    else {
                        //固定值
                        str += tool.mmToPx(c.result.property.cellRowHeight) + "px ";
                        var tempH = { height: parseFloat(c.result.property.cellRowHeight), type: "FixedValue", minHeight: 0.0};
                        rowHeightList.push(tempH);
                    }
                }
                //这里有bug，需要计算跨行的高度 todo
            });            
            tableData.result.base.rowHeight = rowHeightList;
            this.setRowHeight = str;
            
            //this.bindModuleHeight();
        },
        //重置
        resetTable(tableData) {
            if (tableData.result.property.showImageAndDesc) {
                //切换
                if (tableData.result.base.colNumPerRow > 4) {
                    tableData.result.base.colNum = 4;
                }
                if (tableData.result.base.totalCount < 0) {
                    return;
                }
                var scanTableList = scanTable.generalCells(tableData.id, tableData.result.base.totalCount, tableData.result.base.colNumPerRow, tableData.name);
                                //,tableData.result.pattern.showImageBorder, tableData.result.pattern.backgroundShadow);
                tableData.result.tasks = scanTableList;
                var caculateCellInfo = scanTable.caculateCellInfo(tableData.result.base.rowCount, tableData.result.base.columnCount);
                tableData.result.base.columnWidth = caculateCellInfo.columnWidthList;
                tableData.result.base.rowHeight = caculateCellInfo.rowHeightList;
                tableData.data = scanTable.props(true);
                this.contentList = scanTableList;
                this.setTableCols = tableData.result.base.colNumPerRow;
            }
            else {
                if (tableData.result.base.colNum > 4) {
                    tableData.result.base.colNum = 4;
                }
                var scanList = scanTable.addPropContent(tableData.id, tableData.result.base.rowNum, tableData.result.base.colNum, 
                                tableData.result.pattern.showImageBorder, tableData.result.pattern.backgroundShadow, tableData.name);
                var sizeInfo = scanTable.getWidthHeight(tableData.result.base.colNum);
                tableData.result.base.gridWidth = sizeInfo.perWidth;
                tableData.result.base.gridHeight = sizeInfo.perHeight;
                tableData.result.tasks = scanList;
                tableData.data = scanTable.props(false);
                this.contentList = scanList;
                this.setTableCols = tableData.result.base.colNum;
            }
            //this.bindModuleHeight();
        },
        //重置刷新
        resetGeneralTable(tableData, type) {
            if (type === 1) {
                var cellInfoList = tableInfo.generalCells(tableData.id, tableData.result.base.rowCount, tableData.result.base.columnCount, tableData.name);
                tableData.result.tasks = cellInfoList;
                var caculateCellInfo = tableInfo.caculateCellInfo(tableData.result.base.rowCount, tableData.result.base.columnCount);
                tableData.result.base.columnWidth = caculateCellInfo.columnWidthList;
                tableData.result.base.rowHeight = caculateCellInfo.rowHeightList;
                this.contentList = cellInfoList;
                this.setTableCols = tableData.result.base.columnCount;
            }
            else {
                if (tableData && tableData.result && tableData.result.tasks && tableData.result.tasks.length > 0) { 
                    var tableInfoList = tableData.generalCells(tableData.id, tableData.result.base.rowCount, tableData.result.base.columnCount, 
                                        tableData.name, tableData.result.selectedItems, tableData.result.base.moduleBindWidth);
                    var sizeInfo = tableData.caculateCellInfo(tableData.result.base.rowCount, tableData.result.base.columnCount);
                    tableData.result.base.columnWidth = sizeInfo.columnWidthList;
                    tableData.result.base.rowHeight = sizeInfo.rowHeightList;
                    tableData.result.tasks = tableInfoList;
                    this.contentList = tableInfoList;
                    this.setTableCols = tableData.result.base.columnCount;
                }
            }
            //this.bindModuleHeight();
        }
    },
    computed: {
      dragOptions() {
        return {
            animation: 200,
            group: "people",
            disabled: false,
            ghostClass: "ghost"
        };
      },
    }
};
</script>

<style>
.drag-tool {
  position: relative;
  min-height: 20px;
  box-sizing: border-box;
  padding: 2px;
  outline: 1px dashed #2E73FF;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
}

.drag-tool .drag-tool {
  margin: 5px;
}

.drag-tool + .drag-tool {
  margin-top: 5px;
}

.drag-tool.active {
  outline: 2px solid #2E73FF;
}

.drag-tool.active > div > .drag-btn {
  display: flex;
}

.drag-tool .drag-btn {
  display: none;
}

.drag-r {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 1904;
}

.drag-l {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1904

}

.drag-btn {
  height: 18px;
  width: 18px;
  color: #fff;
  background-color: #2E73FF;
  text-align: center;
  line-height: 20px;
  padding-bottom: 1px;
  float: left;
  cursor: pointer;
  justify-content: center;
}

.drag-btn + .drag-btn {
  margin-left: 2px;
}

.drag-btn-danger {
  background-color: #FF2E2E;
}

.drag-btn i {
  font-size: 13px;
}

.drag-mask{
    z-index: 1900;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
;}

.dragArea-t {
  min-height: 35px;
  width: 100%;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  padding-bottom: 1px;
}

._fc-m-container {
    margin-top: 1px;
    display: grid;
    /*自适应，最少多少，自适应*/
    grid-template-rows: repeat(auto-fit, minmax(40px, 1fr));
    width: 100%;
}

._fc-m-container ._fc-m-container-cell {
    min-height: 35px;
    text-align: left;
}

._fc-m-container-cell.active {
    outline: 2px solid #2E73FF;
    z-index: 1;
}

.drag-l-container {
  position: absolute;
  z-index: 1904;
}

._fc-m-container-cell.active > div > .drag-btn-container {
  display: flex;
}

._fc-m-container-cell .drag-btn-container {
  display: none;
}

.drag-btn-container {
  height: 18px;
  width: 18px;
  color: #fff;
  background-color: #2E73FF;
  text-align: center;
  line-height: 20px;
  padding-bottom: 1px;
  float: left;
  cursor: pointer;
  justify-content: center;
}
</style>
