<template>
  <div style="height:100%">
      <el-container style="height:100%">
        <el-aside width="300px" style="height:100%">
            <el-input v-model="input" size="medium" :placeholder="`交易总数:${transList.length}，输入交易码快速筛选`"></el-input>
            <div class="transList">
                <el-table :data="transItemList" row-class-name="transRow" @row-dblclick="onTransOpen"	 stripe  
                
                :show-header="false"
                style="width: 100%;">
                    <el-table-column prop="title" label="交易列表">
                        <template slot-scope="scope">
                            <span>
                                <b>{{scope.row.title}}</b>
                                <span>{{`(${scope.row.name})`}}</span>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-aside>
        <el-main style="padding:0;padding-left:5px;">
            <el-tabs v-model="curTrans" type="card" size="medium"  closable @edit="handleTabsEdit">
                <el-tab-pane
                    :key="item.name"
                    v-for="(item) in transOpened"
                    :label="item.title"
                    :name="item.name"
                >
                    <trans-viewer :trans="item.name" :innerHeight="innerHeight"></trans-viewer>
                </el-tab-pane>
            </el-tabs>
        </el-main>
      </el-container>
  </div>
</template>

<script>
import Service from "./Service"
import TransViewer from "./TransViewer"
export default {
    components:{TransViewer},
    data(){
        return {
            transList:[],
            curTrans:"",
            input:"",
            transOpened:[],
            innerHeight:300
        }
    },
    methods:{
        handleTabsEdit(targetName, action){
            if (action === 'remove') {
                let tabs = this.transOpened;
                let activeName = this.curTrans;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                        activeName = nextTab.name;
                        }
                    }
                    });
                }
                
                this.curTrans = activeName;
                this.transOpened = tabs.filter(tab => tab.name !== targetName);
            }
        },
        splitItem(trans){
            let dotIdx = trans.lastIndexOf(".");
            let title = trans.substring(dotIdx+1);
            return {title,name:trans}
        },
        onTransOpen(row){
        // alert(row.title)
            if(this.transOpened.filter(item=>item.name == row.name).length==0){
                this.transOpened.push({...row})
            }
            this.curTrans = row.name
        },
        calcInnerHeight(){
            this.innerHeight = this.$el.clientHeight - 60
        }
    },
    async mounted(){
        window.addEventListener("resize",this.calcInnerHeight)
        this.calcInnerHeight()
        let rtndata = await Service.viewAllTrans()
        if(rtndata.respCode == SUCCESS){
            this.transList = rtndata.data.sort()
            if(this.transList.length>0){
                let first = this.transList[0];
                this.curTrans = first
                this.transOpened.push(this.splitItem(first))
            }
        }
    },
    beforeDestroy(){
        window.removeEventListener("resize",this.calcInnerHeight)
    },
    computed:{
        transItemList(){
            return this.transList.map(item=>{
                return this.splitItem(item)
            }).filter(item=>{
                return !this.input || (this.input && item.title.toLowerCase().indexOf(this.input.toLowerCase())>-1)
            })
        }
    }
}
</script>

<style>
    .transList {
        height: calc(100% - 40px);
        overflow: auto;
    }
    .transRow{
        cursor: pointer;
        color: deepskyblue;
        text-indent: 1em;
    }
</style>