<template>
    <div style="width:100%;height:99.9999%;">
    <div class="_fc-main-location" @contextmenu.prevent="openMenu">
        <div ref="divPreviewMain" id="divPreviewMain" :style="divHeightStyle()">
            <div class="_fc-m-drag" id="printMainDiv" ref="printMainDiv" >
                <div v-for="(data, index) in currentPageContentList" :id="data.id" :ref="data.id" :key="index">
                    <div :style="draggableContentStyle()">
                        <div class="_fc-paper-header" v-show="activeTemplateSet && activeTemplateSet.paperHeaderFooter && activeTemplateSet.paperHeaderFooter.usePaperHeader">
                            <div class="drag-tool-p" v-for="(data, index) in headerContentList" :key="index" >
                                <div class="_fc-m-container" :style="setTableColsStyle(data)" v-if="data.name === 'table' || data.name === 'scanTable' || data.name === 'reportHeader' || data.name === 'doctorInfo' || data.name === 'patientInfo'" >
                                    <div v-for="(dataCellItem, index) in data.result.tasks" :key="index" :style="mergeCell(data, dataCellItem)" :id="'cell'+dataCellItem.id" class="_fc-m-container-cell">
                                        <div class="dragArea-preview" :style="setDragAreaFlex(dataCellItem)">
                                            <div v-for="(dataItem, indexItem) in dataCellItem.result.tasks" :key="indexItem" :style="getActiveStyle(dataItem)">
                                                <sc-designer-show-form :ref="'scDesignerHeaderShowForm'+dataItem.id" :item="dataItem" />
                                            </div>
                                        </div>
                                    </div>	
                                </div>
                                <div class="dragArea-preview" v-else-if="data.category === 2" :style="setDragAreaFlex(data)" >
                                    <div v-for="(dataItem, indexItem) in data.result.tasks" :key="indexItem" :style="getActiveStyle(dataItem)">
                                        <sc-designer-show-form :ref="'scDesignerHeaderShowForm'+dataItem.id" :item="dataItem"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ref="previewContent" id="previewContent">
                            <div class="drag-tool-p" v-for="(data, index) in data.contentDataList" :key="index" >
                                <div class="_fc-m-container" :style="setTableColsStyle(data)" v-if="data.name === 'table' || data.name === 'scanTable' || data.name === 'reportHeader' || data.name === 'doctorInfo' || data.name === 'patientInfo'" >
                                    <div v-for="(dataCellItem, index) in data.result.tasks" :key="index" :style="mergeCell(data, dataCellItem)" :id="'cell'+dataCellItem.id" class="_fc-m-container-cell">
                                        <div class="dragArea-preview" :style="setDragAreaFlex(dataCellItem)">
                                            <div v-for="(dataItem, indexItem) in dataCellItem.result.tasks" :key="indexItem" :style="getActiveStyle(dataItem)">
                                                <sc-designer-show-form :ref="'scDesignerShowForm'+dataItem.id" :item="dataItem" />
                                            </div>
                                        </div>
                                    </div>	
                                </div>
                                <div class="dragArea-preview" v-else-if="data.category === 2" :style="setDragAreaFlex(data)" >
                                    <div v-for="(dataItem, indexItem) in data.result.tasks" :key="indexItem" :style="getActiveStyle(dataItem)">
                                        <sc-designer-show-form :ref="'scDesignerShowForm'+dataItem.id" :item="dataItem"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="_fc-paper-footer" :style="setFooterStyle()" v-show="activeTemplateSet && activeTemplateSet.paperHeaderFooter && activeTemplateSet.paperHeaderFooter.usePaperFooter">
                            <div class="drag-tool-p" v-for="(data, index) in footerContentList" :key="index" >
                                <div class="_fc-m-container" :style="setTableColsStyle(data)" v-if="data.name === 'table' || data.name === 'scanTable' || data.name === 'reportHeader' || data.name === 'doctorInfo' || data.name === 'patientInfo'" >
                                    <div v-for="(dataCellItem, index) in data.result.tasks" :key="index" :style="mergeCell(data, dataCellItem)" :id="'cell'+dataCellItem.id" class="_fc-m-container-cell">
                                        <div class="dragArea-preview" :style="setDragAreaFlex(dataCellItem)">
                                            <div v-for="(dataItem, indexItem) in dataCellItem.result.tasks" :key="indexItem" :style="getActiveStyle(dataItem)">
                                                <sc-designer-show-form :ref="'scDesignerFooterShowForm'+dataItem.id" :item="dataItem" />
                                            </div>
                                        </div>
                                    </div>	
                                </div>
                                <div class="dragArea-preview" v-else-if="data.category === 2" :style="setDragAreaFlex(data)" >
                                    <div v-for="(dataItem, indexItem) in data.result.tasks" :key="indexItem" :style="getActiveStyle(dataItem)">
                                        <sc-designer-show-form :ref="'scDesignerFooterShowForm'+dataItem.id" :item="dataItem"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div :style="setPageDividerStyle()" class="no-print"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="operateBtn">
        <div class="_fc-l-item2">
            <div class="_fc-l-icon2">
                <el-icon :size="25" :title='$t("reportDesigner.Print")' @click="print()"><sc-icon-print /></el-icon>
            </div>
        </div>
        <div class="_fc-l-item2">
            <div class="_fc-l-icon2">
                <el-icon :size="25" :title='$t("reportDesigner.Previous")' @click="setCurPageNum(1)"><sc-icon-first /></el-icon>
            </div>
        </div>
        <div class="_fc-l-item2" style="height:32px;width:100%;" :title='$t("reportDesigner.PageNumber")' >
            <div style="font-size:13px;margin-top:7px;display:flex;justify-content: center;">
                <div style="color:#85CE61;"><strong>{{ showCurPageNum }}&nbsp;</strong></div>
                <div><strong>/&nbsp;{{ currentPageContentList.length }}</strong></div>
            </div>
        </div>
        <div class="_fc-l-item2">
            <div class="_fc-l-icon2">
                <el-icon :size="25" :title='$t("reportDesigner.Next")' @click="setCurPageNum(0)"><sc-icon-last /></el-icon>
            </div>
        </div>
        <div class="_fc-l-item2">
            <div class="_fc-l-icon2">
                <el-icon :size="25" :title='$t("reportDesigner.Lessen")' @click="changePageSize(0)"><sc-icon-lessen /></el-icon>
            </div>
        </div>
        <div class="_fc-l-item2">
            <div class="_fc-l-icon2">
                <el-icon :size="25" :title='$t("reportDesigner.Amplifier")' @click="changePageSize(2)"><sc-icon-amplifier /></el-icon>
            </div>
        </div>
    </div>
    <sc-contextmenu ref="contextmenu" @command="handleCommand">
		<sc-contextmenu-item command="save" :title="&nbsp;&nbsp;$t('reportDesigner.SaveToImage')" icon="sc-icon-save"></sc-contextmenu-item>
		<sc-contextmenu-item command="print" :title="&nbsp;&nbsp;$t('reportDesigner.Print')" icon="sc-icon-print"></sc-contextmenu-item>
		<sc-contextmenu-item :title="&nbsp;&nbsp;$t('reportDesigner.Pager')" divided>
			<sc-contextmenu-item command="first" :title="&nbsp;&nbsp;$t('reportDesigner.First')" icon="sc-icon-first"></sc-contextmenu-item>
			<sc-contextmenu-item command="previous" :title="&nbsp;&nbsp;$t('reportDesigner.Previous')" icon="sc-icon-previous"></sc-contextmenu-item>
			<sc-contextmenu-item command="next" :title="&nbsp;&nbsp;$t('reportDesigner.Next')" icon="sc-icon-next"></sc-contextmenu-item>
			<sc-contextmenu-item command="last" :title="&nbsp;&nbsp;$t('reportDesigner.Last')" icon="sc-icon-last"></sc-contextmenu-item>
		</sc-contextmenu-item>
		<sc-contextmenu-item :title="&nbsp;&nbsp;$t('reportDesigner.DisplayScale')" divided>
			<sc-contextmenu-item command="lessen" :title="&nbsp;&nbsp;$t('reportDesigner.Lessen')" icon="sc-icon-lessen"></sc-contextmenu-item>
			<sc-contextmenu-item :title="&nbsp;&nbsp;$t('reportDesigner.Zoom')">
				<sc-contextmenu-item command="0.5" title="&nbsp;&nbsp;50%" icon="sc-icon-proportion"></sc-contextmenu-item>
				<sc-contextmenu-item command="0.75" title="&nbsp;&nbsp;75%" icon="sc-icon-proportion"></sc-contextmenu-item>
				<sc-contextmenu-item command="1" title="&nbsp;&nbsp;100%" icon="sc-icon-proportion"></sc-contextmenu-item>
                <sc-contextmenu-item command="1.25" title="&nbsp;&nbsp;125%" icon="sc-icon-proportion"></sc-contextmenu-item>
				<sc-contextmenu-item command="1.5" title="&nbsp;&nbsp;150%" icon="sc-icon-proportion"></sc-contextmenu-item>
                <sc-contextmenu-item command="1.75" title="&nbsp;&nbsp;175%" icon="sc-icon-proportion"></sc-contextmenu-item>
				<sc-contextmenu-item command="2" title="&nbsp;&nbsp;200%" icon="sc-icon-proportion"></sc-contextmenu-item>
                <sc-contextmenu-item command="4" title="&nbsp;&nbsp;400%" icon="sc-icon-proportion"></sc-contextmenu-item>
			</sc-contextmenu-item>
			<sc-contextmenu-item command="amplifier" :title="&nbsp;&nbsp;$t('reportDesigner.Amplifier')" icon="sc-icon-amplifier"></sc-contextmenu-item>
		</sc-contextmenu-item>
	</sc-contextmenu>
    </div>
</template>


<script>
import tool from '@/utils/tool';
import print from '@/utils/print'
import scContextmenu from '@/components/scContextmenu';
import scContextmenuItem from '@/components/scContextmenu/item';

export default {
    name: 'contextmenu',
    components: {
        scContextmenu,
        scContextmenuItem
    },
    data() {
        return {
            activeTemplateSet: {},
            activeModuleList: [],
            activeHeaderModuleList: [],
            activeFooterModuleList: [],
            contentList: [],
            currentPageContentList: [],
            headerContentList: [],
            footerContentList: [],
            currentSize: "1",
            currentSizeList: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2", "4"],
            form:{},
            setColumnWidth: "",
            setRowHeight: "",
            factPageHeight: 0,
            showCurPageNum: 1,
            pageHeight:0,
        };
    },
    created() {
        window.addEventListener('scroll', this.scrollClick, false);
    },
    unmounted() {
        window.removeEventListener('scroll', this.scrollClick, false);
    },
    mounted() {
        this.open();
    },
    methods: {
        scrollClick() {
            var scrollTop = document.documentElement.scrollTop;
            if (scrollTop > this.pageHeight) {
                var pageIndex = Math.ceil(scrollTop / this.pageHeight);
                this.showCurPageNum = pageIndex;
            }
            else {
                this.showCurPageNum = 1; 
            }
        },
        openMenu(e){
            this.row = null
            this.$refs.contextmenu.openMenu(e)
        },
        handleCommand(command){
            console.log('click on item ' + command);
            switch(command) {
                case "save":
                    this.save();
                    break;
                case "print":
                    this.print();
                    break;
                case "first":
                    this.setCurPageNum(2);
                    break;
                case "previous":
                    this.setCurPageNum(1);
                    break;
                case "next":
                    this.setCurPageNum(0);
                    break;
                case "last":
                    this.setCurPageNum(3);
                    break;
                case "lessen":
                    this.changePageSize(0);
                    break;
                case "0.5":
                    this.currentSize = command;
                    this.changePageSize(1);
                    break;
                case "0.75":
                    this.currentSize = command;
                    this.changePageSize(1);
                    break;
                case "1":
                    this.currentSize = command;
                    this.changePageSize(1);
                    break;
                case "1.25":
                    this.currentSize = command;
                    this.changePageSize(1);
                    break;
                case "1.75":
                    this.currentSize = command;
                    this.changePageSize(1);
                    break;
                case "2":
                    this.currentSize = command;
                    this.changePageSize(1);
                    break;
                case "4":
                    this.currentSize = command;
                    this.changePageSize(1);
                    break;
                case "amplifier":
                    this.changePageSize(2);
                    break;
                default:
                    break;
            }
        },
        //设置分页层样式
        setPageDividerStyle() {
            var styleInfo = {
                "height": "10px",
                "background": "#F6F8F9",
                "width": "783.7px",
                "margin-left": "-2px",
                "margin-right": "-2px"
            };
            if (this.activeTemplateSet && this.activeTemplateSet.defaultPageType) {
                styleInfo["width"] = (tool.mmToPx(this.activeTemplateSet.defaultPageType.width) - 3) + "px";
            }
            return styleInfo;
        },
		//赋值--初始化
		open(){
            var templateContent = tool.data.get("CurrentTemplateContent");
			if (templateContent) {
                var tableControls = ["table", "scanTable","doctorInfo","reportHeader","patientInfo"]; //"ultrasoundImageList",
                var footerHeight = 0;
                var headerHeight = 0;
                this.activeHeaderModuleList = templateContent.currentHeaderModuelList;
                this.activeFooterModuleList = templateContent.currentFooterModuelList;
                if (this.activeHeaderModuleList && this.activeHeaderModuleList.length > 0) {
                    this.headerContentList = this.activeHeaderModuleList.filter(c => c.category === 2);
                    this.headerContentList.some(w => {
                        if (w.displayContentList && w.displayContentList.length > 0)
                        {
                            w.displayContentList.some(q => {
                                headerHeight += q.offsetHeight;
                            })
                        }
                    })
                }
                if (this.activeFooterModuleList && this.activeFooterModuleList.length > 0) {
                    this.footerContentList = this.activeFooterModuleList.filter(c => c.category === 2);
                    this.footerContentList.some(w => {
                        if (w.displayContentList && w.displayContentList.length > 0)
                        {
                            w.displayContentList.some(q => {
                                footerHeight += q.offsetHeight;
                            })
                        }
                    })
                }
                //显示
                //var gridControls = ["grid", "diagnosis","replenish"];
                this.activeTemplateSet = templateContent.currentPageInfo;
                var tempValue = tool.mmToPx(this.activeTemplateSet.defaultPageType.height) - tool.mmToPx(this.activeTemplateSet.defaultPagePadding.top) - tool.mmToPx(this.activeTemplateSet.defaultPagePadding.bottom) - headerHeight - footerHeight;
                this.factPageHeight = tempValue;
                this.activeModuleList = templateContent.currentModuelList;
                if (this.activeModuleList && this.activeModuleList.length > 0) {
                    this.contentList = this.activeModuleList.filter(c => c.category === 2);
                    var addHeight = 0;
                    var tempList = [];
                    var index = 1;
                    this.contentList.forEach(m => {
                        if (m.displayContentList && m.displayContentList.length > 0 && m.result && m.result.tasks && m.result.tasks.length > 0)
                        {
                            //第一步先找到组件中的所有值，累加
                            var moduleTempAddHeight = 0;
                            var partPages = [];
                            var pageIndex = 1;
                            var childIdContent = [];
                            var isCurPageBegin = true;
                            m.displayContentList.some((n, displayIndex) => {
                                //查询要拆成几页展示
                                moduleTempAddHeight += n.offsetHeight;
                                if (pageIndex === 1) 
                                {
                                    if ((moduleTempAddHeight + addHeight) > this.factPageHeight) {
                                        if (displayIndex === 0) 
                                        {
                                            isCurPageBegin = false;
                                        }
                                        partPages.push({
                                            "pageIndex": pageIndex, 
                                            "childIdContent": childIdContent, 
                                            "height": (moduleTempAddHeight - n.offsetHeight)
                                        });
                                        pageIndex++;
                                        childIdContent = [];
                                        moduleTempAddHeight = n.offsetHeight;
                                    }
                                }
                                else
                                {
                                    if (moduleTempAddHeight > this.factPageHeight) {
                                        partPages.push({
                                            "pageIndex": pageIndex, 
                                            "childIdContent": childIdContent, 
                                            "height": (moduleTempAddHeight - n.offsetHeight)
                                        });
                                        pageIndex++;
                                        childIdContent = [];
                                        moduleTempAddHeight = n.offsetHeight;
                                    }
                                }
                                childIdContent.push.apply(childIdContent, n.moduleIdList)
                            });
                          
                            if (partPages.length <= 0)
                            {
                                //表示整个组件都可以加入到当前页
                                addHeight += moduleTempAddHeight;
                                tempList.push(m);
                            }
                            else 
                            {
                                if (childIdContent && childIdContent.length > 0)
                                {
                                    partPages.push({
                                        "pageIndex": pageIndex, 
                                        "childIdContent": childIdContent, 
                                        "height": moduleTempAddHeight
                                    });
                                }
                                
                                //表示要拆开，分成两页显示
                                var splitList = [];
                                if (tableControls.some(o => o === m.name))
                                {
                                    //table拆分
                                    splitList = this.splitModule(m, 1, partPages);
                                }
                                else
                                {
                                    //grid拆分
                                    splitList = this.splitModule(m, 0, partPages);
                                }
                                if (isCurPageBegin)
                                {
                                    //从本页开始拆分
                                }
                                else
                                {
                                    //从下一页开始拆分
                                    this.currentPageContentList.push({id: "previcePage" + index, contentDataList: tempList});
                                    addHeight = 0;
                                    tempList = [];
                                    index++;
                                }
                                if (splitList && splitList.length > 0)
                                {
                                    splitList.some((nextItem, nextIndex) => {
                                        tempList.push(nextItem.content);
                                        if (nextIndex === (splitList.length - 1))
                                        {
                                            //最后一项
                                            addHeight = nextItem.height;
                                        }
                                        else
                                        {
                                            this.currentPageContentList.push({id: "previcePage" + index, contentDataList: tempList});
                                            tempList = [];
                                            index++;
                                        }
                                    });                                    
                                }
                            }
                        }
                    });
                    this.currentPageContentList.push({id: "previcePage" + index, contentDataList: tempList});
                }
               
            }
		},
        //设置每页内容
        splitModule(moduleInfo, type, partPages)
        {
            var splitList = [];
            if (type === 0)
            {
                //grid
                partPages.some(c => {
                    var tempGridModuelInfo = tool.objCopy(moduleInfo);
                    tempGridModuelInfo.id = tempGridModuelInfo.id + '_' + c.pageIndex.toString();
                    if (c.childIdContent && c.childIdContent.length > 0)
                    {
                        var gridList = [];
                        c.childIdContent.some(d => {
                            var grids = tempGridModuelInfo.result.tasks.filter(p => p.id === d);
                            if (grids && grids.length > 0) 
                            {
                                var tempGridItem = tool.objCopy(grids[0]);
                                tempGridItem.id = tempGridItem.id + "_0";
                                tempGridItem.result.parentId = tempGridModuelInfo.id;
                                gridList.push(tempGridItem);
                            }
                        });
                        tempGridModuelInfo.result.tasks = gridList;
                        splitList.push({
                            content: tempGridModuelInfo,
                            height: c.height
                        });
                    }
                    else
                    {
                        if (tempGridModuelInfo.name === "ultrasoundImageList")
                        {
                            if (tempGridModuelInfo && tempGridModuelInfo.result && tempGridModuelInfo.result.tasks && tempGridModuelInfo.result.tasks.length > 0)
                            {
                                tempGridModuelInfo.result.tasks.forEach(s => {
                                    s.id = s.id + '_0';
                                    s.result.parentId = tempGridModuelInfo.id;
                                });
                                splitList.push({
                                    content: tempGridModuelInfo,
                                    height: tempGridModuelInfo.displayContentList[0].offsetHeight
                                });
                            }
                        }
                    }
                });
            }
            else
            {
                //table
                partPages.some(d => {
                    var tempTableModuelInfo = tool.objCopy(moduleInfo);
                    tempTableModuelInfo.id = tempTableModuelInfo.id + '_' + d.pageIndex.toString();
                    if (d.childIdContent && d.childIdContent.length > 0)
                    {
                        var rowCount = parseInt(d.childIdContent.length) / parseInt(tempTableModuelInfo.result.base.columnCount);
                        //设置新的rowCount
                        tempTableModuelInfo.result.base.rowCount = rowCount;
                        var rowIndexList = [];
                        d.childIdContent.some(f => {
                            var cells =  moduleInfo.result.tasks.filter(g => g.id === f);
                            if (cells && cells.length > 0)
                            {
                                //遍历所有的rowindex信息，用例计算table的rowHeight信息
                                cells.some(h => {
                                    if (rowIndexList.length <= 0)
                                    {
                                        rowIndexList.push(h.result.base.rowStartIndex);
                                    }
                                    else
                                    {
                                        //不存在
                                        if (!rowIndexList.some(j => j === h.result.base.rowStartIndex)){
                                            rowIndexList.push(h.result.base.rowStartIndex);
                                        }
                                    }
                                });
                            }
                        });
                        //设置新的rowHeight
                        if (rowIndexList && rowIndexList.length > 0)
                        {
                            var tempRowHeight = [];
                            rowIndexList.some(k => {
                                tempRowHeight.push(moduleInfo.result.base.rowHeight[(k - 1)]);
                            });
                            tempTableModuelInfo.result.base.rowHeight = tempRowHeight;
                        }
                        //重新绑定cell
                        var cellList = [];
                        d.childIdContent.some((e, eIndex) => {
                            var rowIndexDiff = 0;
                            if (eIndex === 0) 
                            {
                                var oriRowIndex = rowIndexList[0];
                                rowIndexDiff = oriRowIndex - 1;
                            }
                            var cellTempList =  moduleInfo.result.tasks.filter(g => g.id === e);
                            if (cellTempList && cellTempList.length > 0)
                            {
                                var tempTableCellItem = tool.objCopy(cellTempList[0]);
                                tempTableCellItem.id = tempTableCellItem.id + "_0";
                                tempTableCellItem.result.parentId = tempTableModuelInfo.id;
                                //base重置
                                tempTableCellItem.result.base.rowStartIndex = tempTableCellItem.result.base.rowStartIndex - rowIndexDiff;
                                tempTableCellItem.result.base.colEndIndex = tempTableCellItem.result.base.colEndIndex - rowIndexDiff;
                                //tasks重置
                                if (tempTableCellItem.result.tasks && tempTableCellItem.result.tasks.length > 0)
                                {
                                    tempTableCellItem.result.tasks.forEach(x => {
                                        x.id = x.id + "_0";
                                        x.result.parentId = tempTableCellItem.id;
                                    });
                                }
                                cellList.push(tempTableCellItem);
                            }
                        });
                        tempTableModuelInfo.result.tasks = cellList;
                        splitList.push({
                            content: tempTableModuelInfo,
                            height: d.height
                        });
                    }
                });
            }
            return splitList;
        },
        divHeightStyle() {
            if (this.activeTemplateSet && this.activeTemplateSet.defaultPageType && this.activeTemplateSet.defaultPageType.height > 0) {
                //页面大小，宽度和高度
                var styleInfo = "height:"+ tool.mmToPx(this.activeTemplateSet.defaultPageType.height) +"px;";
                return styleInfo;
            }
            else {
                return "";
            }
		},
        setFooterStyle() {
            if (this.activeTemplateSet && this.activeTemplateSet.defaultPageType && this.activeTemplateSet.defaultPageType.height > 0) {
                //页面大小，宽度和高度
                var styleInfo = "position: absolute;bottom:"+ tool.mmToPx(this.activeTemplateSet.defaultPagePadding.bottom) +"px;padding-right:40px;";//padding-right:"+ tool.mmToPx(this.activeTemplateSet.defaultPagePadding.right) +"px;";
                return styleInfo;
            }
            else {
                return "";
            }
        },
		//页面模板设置样式
		draggableContentStyle() {
            if (this.activeTemplateSet && this.activeTemplateSet.defaultPageType) {
                //页面大小，宽度和高度
                var styleInfo = "width:"+ (tool.mmToPx(this.activeTemplateSet.defaultPageType.width) - 3) +"px;";
                styleInfo += "min-height:"+ (tool.mmToPx(this.activeTemplateSet.defaultPageType.height) - 7) +"px;";
                //页边距
                styleInfo += "padding-top:"+ tool.mmToPx(this.activeTemplateSet.defaultPagePadding.top) +"px;";
                styleInfo += "padding-bottom:"+ tool.mmToPx(this.activeTemplateSet.defaultPagePadding.bottom) +"px;";
                styleInfo += "padding-left:"+ tool.mmToPx(this.activeTemplateSet.defaultPagePadding.left) +"px;";
                styleInfo += "padding-right:"+ tool.mmToPx(this.activeTemplateSet.defaultPagePadding.right) +"px;";
                styleInfo += "position: relative;"
                this.pageHeight = tool.mmToPx(this.activeTemplateSet.defaultPageType.height);
                return styleInfo;
            }
            else {
                return "";
            }
		},
		//设置当前组件宽度和水平位置
		getActiveStyle(item) {
			var styleInfo = "margin-top:1px;";
            if (item.name === "label")
            {
                styleInfo += "display:flex;align-items: flex-end;";
            }
            if (item.name === "ultrasoundImage")
            {
                if (item.result && item.result.parentName && item.result.parentName === "ultrasoundImageList") 
                {
                    styleInfo += "padding:0.1px;";
                }
                else 
                {
                    if (item.result.pattern.width < 80) 
                    {
                        styleInfo += "padding:0px 15px;";
                    }
                }
            }
			if (item.result.pattern.width > 0) {
				if (item.result.property.bindField === "HospitalName") {
					// styleInfo += "width:100%;";
				}
				else if (item.name === "label" && item.result.property.placeholder === "超声检查报告单" || item.result.property.placeholder === "超声检查咨询单") {
					// styleInfo += "width:100%;";
				} 
				else {
					if (item.name === "select" || item.name === "space")
					{
						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 = 21;
                        }
                        else if (displayFormat === "yyyy年MM月dd日")
                        {
                            widthValue = 29;
                        }
                        else if (displayFormat === "yyyy-MM-dd hh:mm")
                        {
                            widthValue = 31;
                        }
                        else
                        {
                            widthValue = 39;
                        }
						styleInfo += "width:" + (tool.mmToPx(widthValue)) + "px;";
					}
					else if (item.name === "label")
					{
						if (parseInt(item.result.pattern.width) <= 0) {
							styleInfo += "min-width:10px;";
						}
						else {
							if (parseInt(item.result.pattern.width) === 0 && item.result.property.placeholder.length > 0) {
								var labelWidth = 0; 
								if (item.result.pattern.fontSize > 10.5) {
									labelWidth = parseFloat(tool.getCharCount(item.result.property.placeholder) * 4.4);
								}
								else {
									labelWidth = parseFloat(tool.getCharCount(item.result.property.placeholder) * 4);
								}
								styleInfo += "width:" + (tool.mmToPx(labelWidth) + 5) + "px;";
							}
							else {
								styleInfo += "width:" + tool.mmToPx(item.result.pattern.width - 1) + "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;"
			}
			if (item.name === "divider")
			{
				styleInfo += "margin-left:-2px;";
			}
			else if (item.name === "image") {
				styleInfo += "margin-left:1px;"
			}
			else if (item.name === "datetime") {
				styleInfo += "margin-left:1px;"
			}
			return styleInfo;
		},
		//整体布局样式
		setDragAreaFlex(item) {
        	var styleInfo = "";
        	if (item && item.result && item.result.pattern && item.result.pattern.horizontalAlignment && item.result.pattern.horizontalAlignment.length > 0)
        	{
          		switch(item.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 (item && (item.name === "replenish" || item.name === "diagnosis")) {
				styleInfo += ""
			}
            else if (item && (item.name === "grid")) {
				styleInfo += "display: flex;flex-wrap: wrap;"
			} 
			else if (item && (item.name === "ultrasoundImageList")) {
				styleInfo += "display: flex;justify-content: center;flex-wrap: wrap;"
			}
			else {
				styleInfo += "display: flex;"
			}
        	return styleInfo;
      	},
		//合并grid
        //表示从第几行开始和第几列开始横跨 2 行 3 列
        //2 / 1 / span 2 / span 3;
        mergeCell(parentData, data) {
            var styleInfo = {
    			"text-align": 'left'
			};
            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 (!parentData.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 (!parentData.result.pattern.showTableCellMargin) {
                styleInfo["margin"] = '0px';
            }
            else {
                styleInfo["margin"] = '1px';
            }
            if (data.result && data.result.pattern && data.result.pattern.verticalAlignment && data.result.pattern.verticalAlignment.length > 0)
            {
                if (data.result.pattern.verticalAlignment === "Middle")
                {
                    styleInfo["display"] = "flex";
                    styleInfo["justify-content"] = "center";
                    styleInfo["align-items"] = "center";
                }
                else if (data.result.pattern.verticalAlignment === "Bottom")
                {
                    styleInfo["display"] = "flex";
                    styleInfo["justify-content"] = "center";
                    styleInfo["align-items"] = "end";
                }
                else
                {
                    //不需要赋值
                    styleInfo["display"] = "flex";
                    styleInfo["justify-content"] = "center";
                    styleInfo["align-items"] = "start";
                }
            }
            return styleInfo;
        },
        //设置主表样式和宽度
        setTableColsStyle(data) {
			var cols = data.result.base.columnCount;
            var styleInfo = {
				"margin-top": '0px',
				"display": 'inline-grid',
				"grid-template-rows": 'repeat(auto-fit, minmax(20px, 1fr))',
				"width": '100%'
			};
            var patternInfo = data.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) {
                        styleInfo["grid-template-columns"] = this.setColumnWidth;
                    }
                    else {
                        if (data.result.base.columnWidth && data.result.base.columnWidth.length > 0) {
                            var strTemp = "";
                            for (var k = 0; k < (data.result.base.columnWidth.length - 1); k++) {
                                strTemp += tool.mmToPx(data.result.base.columnWidth[k]) + "px ";
                            }
                            strTemp += "auto";
                            styleInfo["grid-template-columns"] = strTemp;
                        }
                        else {
                            var width = tool.mmToPx(this.activeTemplateSet.defaultPageType.width) - tool.mmToPx(this.activeTemplateSet.defaultPagePadding.left) - tool.mmToPx(this.activeTemplateSet.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(20px, 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;
        },
		//打印
		print() {
            if (this.currentPageContentList && this.currentPageContentList.length === 1) {
                print(document.getElementById("previcePage1"));
            }
            else {
                print(this.$refs.printMainDiv);
            }
		},
        //调整页面大小
		changePageSize(type) {
			var index = this.currentSizeList.indexOf(this.currentSize);
			if (type === 0) {
				if (index > 0) {
					document.getElementById("divPreviewMain").style.zoom = this.currentSizeList[index - 1]; 
					this.currentSize = this.currentSizeList[index - 1]; 
				}
			}
			else if (type === 1) {
				document.getElementById("divPreviewMain").style.zoom = this.currentSize; 
			}
			else if (type === 2) {
				if (index < (this.currentSizeList.length - 1)) {
					document.getElementById("divPreviewMain").style.zoom = this.currentSizeList[index + 1]; 
					this.currentSize = this.currentSizeList[index + 1]; 
				}
			}
		},
        //跳转到指定位置
        turnToPageStyle() {
            var turnDiv = document.getElementById("previcePage1");
            document.documentElement.scrollTop = turnDiv.scrollHeight * (this.showCurPageNum - 1) +  (this.showCurPageNum - 1) * 10;
        },
        //分页按钮
        setCurPageNum(type) {
            if (type === 0) {
                //下一页
                if (this.showCurPageNum < this.currentPageContentList.length) {
                    this.currentPageContentList.some((c, index)=> {
                        if (index === this.showCurPageNum) {
                            this.showCurPageNum = index + 1;
                            return true;
                        }
                    });
                }
                this.turnToPageStyle();
            }
            else if (type === 1) {
                //上一页
                if (this.showCurPageNum > 1) {
                    this.currentPageContentList.some((c, index)=> {
                        if (index === (this.showCurPageNum - 2)) {
                            this.showCurPageNum = index + 1;
                            return true;
                        }
                    });
                }
                this.turnToPageStyle();
            }
            else if (type === 2) {
                //首页
                this.currentPageContentList.some((c, index)=> {
                    if (index === 0) {
                        this.showCurPageNum = index + 1;
                        return true;
                    }
                });
                this.turnToPageStyle();
            }
            else if (type === 3) {
                //末页
                this.currentPageContentList.some((c, index)=> {
                    if (index === (this.currentPageContentList.length - 1)) {
                        this.showCurPageNum = index + 1;
                        return true;
                    }
                });
                this.turnToPageStyle();
            }
        }
	}
}
</script>

<style scoped>
.operateBtn {
    position: fixed;
    background: #F6F8F9;
    border-left: 2px solid #409EFF;
    border-right: 2px solid #409EFF;
    border-bottom: 2px solid #409EFF;
    left: 75%;
    width:56px;
    top: 30%;
}

._fc-l-item2 {
    border-top: 2px solid #409EFF;
    color: #000;
    line-height: 1;
    text-align: center;
    transition: all .2s ease;
    cursor: pointer;
}

._fc-l-item2 ._fc-l-icon2 {
    padding: 2px 3px 2px;
}

._fc-l-item2:hover {
    background: #DEE0E2;
}
._fc-main-location {
    background: #F5F5F5;
    padding: 0px;
    display: flex;
    justify-content: center;
    width:700px;
    left: 31.5%;
    position: absolute;
}
.drag-tool-p {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
}

.drag-tool-p .drag-tool-p {
  margin: 1px;
}

.dragArea-preview {
  width: 100%;
  flex-wrap: wrap;
}

::v-deep ._fc-m-container ._fc-m-container-cell {
    min-height: 20px;
    text-align: left;
}
</style>

<style>
 .el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
	border-bottom: 2px solid rgba(0,0,0,.06);
 }
 .el-dialog__body {
    color: var(--el-text-color-regular);
    font-size: var(--el-dialog-content-font-size);
    word-break: break-all;
    padding: 0px;
    padding-bottom: 10px;
}
 .el-dialog__title{
	font-size: 17px;
    font-weight: bold;
    padding-bottom: 11px;
    border-bottom: solid 2px #409eff;
    z-index: 1;
    color:#409eff;
    position: relative;
}
</style>

<style media="print">
	@page {
		size: auto;  /* auto is the initial value */
		margin-top: 0mm; /* this affects the margin in the printer settings */
		margin-bottom: 0mm; /* this affects the margin in the printer settings */
	}
/* 
	@media all {
    .page-break { display: none; }
	}

	@media print {
		.page-break { display: block; page-break-before: always; }
	} */
</style>
