<template>
<div class="autoLaunch">
    <div class="card-container">
        <a-tabs type="card" v-model="analaysisDirection" @change="analaysisDirectionChange" :animated='true'>
            <a-tab-pane key="1" tab="素材+出价"></a-tab-pane>
            <a-tab-pane key="2" tab="素材+定向"></a-tab-pane>
            <a-tab-pane key="3" tab="时间+出价"></a-tab-pane>
            <!-- <a-tab-pane key="3" tab="">
            </a-tab-pane> -->
        </a-tabs>
        <component v-bind:is="currentTabComponent">
        </component>
     </div>
</div>

    
        
    
    
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
export default {
    name:'index',
    data() {
        return {
            currentTabComponent:'materialAndOrient',
            analaysisDirection:'1',
            currentStrategy:{}
        }
    },
    components:{   
        materialAndOrient: () => import('./autoLaunchReport'), 
        materialAndBid: () => import('./materialAndBid'), 
        
    },
    methods: {
        analaysisDirectionChange(key){
            // console.log(key)
            // if(key=='1'){
            //     this.currentTabComponent='materialAndOrient' 
            // }else if(key=='2'){
            //     this.currentTabComponent='materialAndBid' 
            // }
        }
    },
    watch:{
        analaysisDirection(key,oldkey){
            console.log(key)
            if(key=='1'){
                this.currentTabComponent='materialAndOrient' 
            }else if(key=='2'){
                this.currentTabComponent='materialAndBid' 
            }
        }
    },
    mounted(){
       this.currentTabComponent='materialAndOrient' ;
       let currentStrategy=localStorage.getItem('currentStrategy');
        if(currentStrategy){
            this.currentStrategy=JSON.parse(currentStrategy);
            this.analaysisDirection=this.currentStrategy.scenes;
            // this.analaysisDirectionChange(this.currentStrategy.scenes)
        }
    },
    beforeDestroy() {
        this.currentTabComponent='materialAndOrient' ;
        localStorage.setItem('currentStrategy','');
    },
   
}

</script>

<style lang="less">
.autoLaunch{
    
    .card-container {
        background: #f5f5f5;
        // overflow: hidden;
        // padding: 24px;
        .ant-tabs-nav .ant-tabs-tab {
            position: relative;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            height: 100%;
            margin: 0 ;
            padding: 0px 16px 8px;
            text-decoration: none;
            cursor: pointer;
            -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            font-size: 16px;
        }
    }
    .card-container > .ant-tabs-card > .ant-tabs-content {
        // height: 120px;
        margin-top: -16px;
    }

    .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
        background: #fff;
        // padding: 16px;
    }

    .card-container > .ant-tabs-card > .ant-tabs-bar {
        border-color: #fff;
    }

    .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
        border-color: transparent;
        background: transparent !important;
    }

    .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
        border-color: #fff;
        background: #fff !important;
    }
}

</style>
