<template>
    <div class="pl-design-portal">
        <div class="pl-design-portal-head">
            {{index+1 | theRowLang($lang)}}
            <div class="pl-design-portal-tool"><i class="btn iconfont icon-delete" @click="handleDelPortal"></i></div>
        </div>
        <div class="pl-design-portal-body">
            <PRow class="pl-design-row" :index="index">
                <PCol v-for="(item,colIndex) in cols" :key="colIndex" :span="item" class="pl-design-col">
                    <div class="pl-design-col-inner" :index="colIndex">
                        <div v-if="panelsList[colIndex].length==0" class="nullData">{{$t("hivuiMain_des_dragInArea")}}</div>
                        <div class="pl-portal-panel" v-for="(item1,index1) in panelsList[colIndex]" :key="index1">
                            <div class="pl-portal-panel-head">
                                <div class="tool">
                                    <i class="iconfont icon-edit" @click="handleEidtColumns(item1,index,colIndex)"></i>
                                    <i class="iconfont icon-delete" @click="handleDelColumns(item1,index,colIndex)"></i>
                                </div>
                                <div class="tabs">
                                    <ul>
                                        <li v-for="(item2,index2) in item1.columns" @click="handleTabClick">{{item2.name}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>                    
                    <div class="pl-design-portal-add">
                        <div class="oper" @click="handleAddPortal(index,colIndex)">
                            <i class="iconfont icon-add"></i>
                            <span> {{$t("hivuiMain_des_addColunms")}}{{item}}</span>
                        </div>
                    </div>
                </PCol> 
            </PRow>
        </div>        
        <ColumnsSelectDialog ref="cmp-columnsDD" 
        :portalPanel="curPortalPanel"
        @onOk="onAddColumns" @onUpdate="onUpdateColumns"></ColumnsSelectDialog>
    </div>
</template>
<script>
import Dialog from "@main/components/dialog";
import {PRow,PCol} from "@main/components/grid";
import ColumnsSelectDialog from "./columnsSelect";
import Sortable from 'sortablejs';
import {strFormat} from '@main/utils/index';
export default {
    components:{
        Dialog,PRow,PCol,ColumnsSelectDialog
    },
    inject: ['addPanel','editPanel','delPanel','getPanels','updatePanelPosition'],
    props:{
        cols:{
            type:Array,
            default:[24]
        },
        index:{
            type:Number
        }
    },
    filters:{
        theRowLang(value,$lang){
            let formatStr = this.$t("hivuiMain_des_serialRowLayout");
            let rex = new RegExp("\\{0\\}", "g");            
            return strFormat(formatStr,value);
        }
    },
    data(){ 
        let panelsList = this.getPanels(this.index);
        return { 
            curPosition:[],//当前行、列 位置 
            SortableList:[],//拖拽对象列表
            curPortalPanel:null,//当前门户面板块
            panelsList:panelsList,//面板列表
            panelsItemEdit:false
        }
    },
    mounted(){
        this.createSortable();
    },
    beforeDestroy(){
        this.removeAllSortable();
    },
    methods:{
        removeAllSortable(){
            let me=this;
            me.SortableList.map(item=>{
                item.destroy();
            });
            me.$set(me,'SortableList',[]);
        },
        /**
         * 创建门户面板块的拖拽
         */
        createSortable(){
            let me=this;
            let list = me.$el.getElementsByClassName('pl-design-col-inner');
            let items = [...list];
            items.map(item => {
                let obj= new Sortable(item, {
                    group: "portal-Sortable",
                    handle: '.pl-portal-panel-head', // handle's class
                    animation: 150,
                    onUpdate(evt) { 
                        console.log(' portal createSortable onUpdate');
                    },
                    onEnd(evt){
                        let oldRowIndex = me.index;
                        let newRowIndex = evt.to.parentNode.parentNode.getAttribute('index');
                        let oldIndex = evt.from.getAttribute('index');
                        let newIndex = evt.to.getAttribute('index') ;
                        
                        console.log(`原是第${oldRowIndex}个布局中,第${oldIndex}列第${evt.oldIndex}个，移动到第${newRowIndex}个布局中,第${newIndex}列第${evt.newIndex}个`);
                        //数据要更新
                        me.updatePanelPosition({ 
                            oldRowIndex:oldRowIndex,
                            oldColIndex:oldIndex,
                            oldPanelIndex:evt.oldIndex,
                            newRowIndex:newRowIndex,
                            newColIndex:newIndex,
                            newPanelIndex:evt.newIndex,
                        });
                    }
                }); 
                me.SortableList.push(obj);
            });
            // console.info('createSortable:',this.cols,me.SortableList)
        },
        /**
         * 删除整行布局
         */
        handleDelPortal(){
            this.$emit('onDel',this.index);
        },
        /**
         * 弹出栏目选择对话框
         */
        handleAddPortal(row,col){
            this.curPosition= [row,col];
            this.curPortalPanel = null;
            this.$refs["cmp-columnsDD"].show();
        },
        handleEidtColumns(data,row,col){
            this.curPosition= [row,col];
            this.curPortalPanel = data;
            this.$refs["cmp-columnsDD"].setForm(data);
            this.$refs["cmp-columnsDD"].show();
        },
        handleDelColumns(data){
            this.delPanel(data);
        },
        /**
         * 添加指定列下的栏目门户面板
         */
        onAddColumns(data=[],panelHeight=300){
            if(data.length==0)return;
            this.addPanel(this.curPosition,{
                height:panelHeight,
                columns:data
            });
            // console.info('onColumnsSelected',data);
        },
        onUpdateColumns(data={}){
            this.editPanel(data);
        },
        handleTabClick(evt){
            let el = evt.target;
            let lis = el.parentNode.querySelectorAll('li');
            lis.forEach(item=>{
                item.className='';
            });
            el.className = 'seld'
        }
    }
}
</script>