<template>
    <el-container class="flex-column">
        <div class="table-search">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabClick">
                <el-tab-pane label="打印价格" name="1" v-loading="isLoading"></el-tab-pane>
                <el-tab-pane label="复印价格" name="2" v-loading="isLoading"></el-tab-pane>
            </el-tabs>
            <optionBtn @success="handleSuccess" :dataSelect="dataSelect" :dataSelectFull="dataSelectFull" :type="activeName"></optionBtn>
        </div>
        <el-main class="nopadding">
            <div class="table-container">
                <tablePage ref="tablePage" @success="tableHandle" @successFull="tableHandleFull" :type="activeName"></tablePage>
            </div>
        </el-main>
    </el-container>  
</template>

<script>
import optionBtn from './components/option';
import tablePage from './components/table';
export default {
    components: {
        optionBtn,tablePage
    },
    data(){
        return {
            activeName:"1",
            isLoading:false,
            searchKey:{
                status:7
            },
            dataSelect:[],
            dataSelectFull:[],
        }
    },
    methods: {
        tabClick(event){
            console.log(event)
            this.activeName = event;
        },
        tableHandle(data){
            this.dataSelect = data;
        },
        tableHandleFull(data){
            this.dataSelectFull = data;
        },
        handleSuccess(data){
            this.$refs.tablePage.upData(data)
        },
        handleClick(name){
            this.searchKey.type = name;
            this.$refs.tablePage.upData(this.searchKey)
        }
    }
}
</script>