<template>
    <div class="content">
        <div class="table-wrapper" v-show='!isshowDetial'>
            <div class="title">
                <h6>Configurations</h6>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="Subscription" label="Subscription"></el-table-column>
                <el-table-column prop="Comments" label="Comments"></el-table-column>
                <el-table-column prop="adsVersion" label="adsVersion"></el-table-column>
                <el-table-column prop="detail" label="detail">
                    <template slot-scope="scope">
                       <div class="detail">{{scope.row.detail}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="operate" label="operate">
                    <template slot-scope="scope">
                        <span class="table-row-btn" @click="showDetail(scope.row)">view</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-if="totalPage>1" :page-size="limit" :total="total" @current-change="handleCurrentChange" background layout="prev, pager, next"></el-pagination>
           
        </div>
        <div v-show='isshowDetial'>
            <detial-item ref="detailItem" @back='back'/>
        </div>
    </div>
</template>

<script>
import detialItem from './comp/detialItem.vue';
export default {
  components: { detialItem },
    data(){
        return {
            tableData: [
                {id: '0001', Subscription: 'Events 1-5', Comments: 'All the events may',adsVersion:'1.0.0',detail:'{"status":1,"code":"10001","data":[{"id":1,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"1","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-05-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":2,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"2","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-06-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":3,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"3","unfinishedInterest":"1.0","unfinishedPrincipal":"100.00","repaymentDate":"2018-07-27 12:24:01","actualRepaymentDate":null,"status":"0"}],"msg":"获取信息成功"}'},
                {id: '0002', Subscription: 'Events 1-5', Comments: 'All the events may',adsVersion:'1.0.0',detail:'{"status":1,"code":"10001","data":[{"id":1,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"1","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-05-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":2,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"2","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-06-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":3,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"3","unfinishedInterest":"1.0","unfinishedPrincipal":"100.00","repaymentDate":"2018-07-27 12:24:01","actualRepaymentDate":null,"status":"0"}],"msg":"获取信息成功"}'},
                {id: '0003', Subscription: 'Events 1-5', Comments: 'All the events may',adsVersion:'1.0.0',detail:'{"status":1,"code":"10001","data":[{"id":1,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"1","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-05-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":2,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"2","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-06-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":3,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"3","unfinishedInterest":"1.0","unfinishedPrincipal":"100.00","repaymentDate":"2018-07-27 12:24:01","actualRepaymentDate":null,"status":"0"}],"msg":"获取信息成功"}'
                },
                {id: '0004', Subscription: 'Events 1-5', Comments: 'All the events may',adsVersion:'1.0.0',detail:'{"status":1,"code":"10001","data":[{"id":1,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"1","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-05-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":2,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"2","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-06-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":3,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"3","unfinishedInterest":"1.0","unfinishedPrincipal":"100.00","repaymentDate":"2018-07-27 12:24:01","actualRepaymentDate":null,"status":"0"}],"msg":"获取信息成功"}'},
                {id: '0005', Subscription: 'Events 1-5', Comments: 'All the events may',adsVersion:'1.0.0',detail:'{"status":1,"code":"10001","data":[{"id":1,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"1","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-05-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":2,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"2","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-06-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":3,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"3","unfinishedInterest":"1.0","unfinishedPrincipal":"100.00","repaymentDate":"2018-07-27 12:24:01","actualRepaymentDate":null,"status":"0"}],"msg":"获取信息成功"}'},
                {id: '0006', Subscription: 'Events 1-5', Comments: 'All the events may',adsVersion:'1.0.0',detail:'{"status":1,"code":"10001","data":[{"id":1,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"1","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-05-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":2,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"2","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-06-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":3,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"3","unfinishedInterest":"1.0","unfinishedPrincipal":"100.00","repaymentDate":"2018-07-27 12:24:01","actualRepaymentDate":null,"status":"0"}],"msg":"获取信息成功"}'},
                {id: '0007', Subscription: 'Events 1-5', Comments: 'All the events may',adsVersion:'1.0.0',detail:'{"status":1,"code":"10001","data":[{"id":1,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"1","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-05-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":2,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"2","unfinishedInterest":"1.0","unfinishedPrincipal":"0","repaymentDate":"2018-06-27 12:24:01","actualRepaymentDate":null,"status":"0"},{"id":3,"investId":"1","createTime":"2018-04-27 12:24:01","terms":"3","unfinishedInterest":"1.0","unfinishedPrincipal":"100.00","repaymentDate":"2018-07-27 12:24:01","actualRepaymentDate":null,"status":"0"}],"msg":"获取信息成功"}'},
            ],
            maxHeight: 0,
            page: 1,
            limit: 10,
            total: 300,
            totalPage: 10,
            isshowDetial:false,
        }
    },
    created() {
        this.getTableData();
        // this.getMaxHeight();
        // window.addEventListener('resize', () => {
        //     this.getMaxHeight();
        // })
    },
    methods: {
        getTableData(){

        },
        handleCurrentChange(val){
            this.page = val;
            this.getTableData();
        },
        getMaxHeight(){
            let bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
            this.maxHeight = bodyHeight - 194;
        },
        showDetail(item){
            this.$refs.detailItem.showItem(item)
            this.isshowDetial = true;
        },
        back(){
              this.isshowDetial = false
        }
    }
}
</script>
<style >
    .detail{
        width: 170px;
        overflow: hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
    }
</style>
