
<template>
    <div class="youtTable">
        <div class="yout-header">
            <p class="headTitle">{{headTitle}}</p>
            <div class="opt-btn">
                <a-button type='default' v-if="isNeedCustomColumn" @click="customColumns" style="margin-right:15px">自定义列</a-button>
                <a-button type='default' v-if='isNeedExport' @click="exportExcel" :loading="exportloading">导出报表</a-button>
            </div>
        </div>
        <div class="tableBody">
            <a-table
                :size="size"
                :columns="columns"
                :dataSource="data"
                bordered
                id="outTable"
                :pagination="pagination"
                :scroll="{ x: scrollX, y: scrollY }"
                :loading="loading"
                ref="accountTable"
                @change="change"                
              >

                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
                <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
                <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
                <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
                <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
                <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
                <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
                <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
                <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
                <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
                <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
                <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
                <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
                <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
                <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
                <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
                <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
                <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
                <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
                <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{ eventCreditGrantLandingPage | formatCurrency }}</span>
                <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
                <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{ eventCreditGrantLandingPageCost | decimalsHandle }}</span>
                <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
                <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{ eventCreditGrantLandingPageRate | toPercentage }}</span>
                <span
                  slot="play25FeedBreakRate"
                  slot-scope="play25FeedBreakRate"
                >{{ play25FeedBreakRate | toPercentage }}</span>
                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
                <!-- 新加数据 -->

                <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
                <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span
                  slot="installFinishRate"
                  slot-scope="installFinishRate"
                >{{ installFinishRate | toPercentage }}</span>
                <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
                <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span
                  slot="gameAddictionCost"
                  slot-scope="gameAddictionCost"
                >{{ gameAddictionCost | decimalsHandle }}</span>
                <span
                  slot="downloadFinishCost"
                  slot-scope="downloadFinishCost"
                >{{ downloadFinishCost | decimalsHandle }}</span>
                <span
                  slot="downloadStartCost"
                  slot-scope="downloadStartCost"
                >{{ downloadStartCost | decimalsHandle }}</span>
                <span
                  slot="installFinishCost"
                  slot-scope="installFinishCost"
                >{{ installFinishCost | decimalsHandle }}</span>
                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>

                <!--  -->
                <span
                  slot="downloadStartRate"
                  slot-scope="downloadStartRate"
                >{{ downloadStartRate | toPercentage }}</span>
                <span
                  slot="downloadFinishRate"
                  slot-scope="downloadFinishRate"
                >{{ downloadFinishRate | toPercentage }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span
                  slot="activeRegisterRate"
                  slot-scope="activeRegisterRate"
                >{{ activeRegisterRate | toPercentage }}</span>
                <span
                  slot="gameAddictionRate"
                  slot-scope="gameAddictionRate"
                >{{ gameAddictionRate | toPercentage }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->


                <slot name="customContext"></slot>
                
            </a-table>
            <customColumn :visible='visible'  :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='mediaType'  @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
        </div>
    </div>
</template>

<script>
import customColumn from './customColumn.vue'
    export default {
        components:{
            
            customColumn,
        },
        data() {
            return {
                exportloading:false,
                visible:false,
                listNum:[],
            }
        },
        props:{
            // 表格的标题
            headTitle:{
                type:String,
                default:'',
            },
            // 是否需要自定义列
            isNeedCustomColumn:{
                type:Boolean,
                default:false,
            },
            // 是否需要导出报表
            isNeedExport:{
                type:Boolean,
                default:false,
            },
            
            // 表格大小
            size:{
                type:String,
                default:'middle'
            },
            columns:{
                type:Array,
                require:true,
            },
            columnsFixd:{
                type:Array,
                require:true,
            },
            data:{
                type:Array,
                default(){
                    return []
                }
            },
            pagination:{
                default(){
                    return false
                }
            },
            loading:{
                default:false,
            },
            scrollX:{
                default:0
            },
            scrollY:{
                default:0
            },
            mediaType:{
                // 1-头条，2-快手
                type:Number,
                require:true,
            },
            

        },
        methods: {
            exportExcel(){
                this.$emit('exportExcel')
            },
            change(pagination, filters, sorter, { currentDataSource }){
                this.$emit('tableChange',{pagination, filters, sorter,  currentDataSource })
            },
            closeCustomColumn(){
                this.visible=false;
            },
            //自定义之后修改父元素表头
            changeColumn(val){
                this.columns=[...val];
                this.columns=[...val];
                if(this.columns.length> this.columnsFixd.length&&this.columns.length<8){
                this.columns.forEach((element,index) => {
                    if(index<this.columns.length-1){
                    element.width='auto'
                    element.fixed=false
                    }             
                });

                // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
                }else if(this.columns.length>=8){
                this.columns.forEach((element,index) => {
                    if(index<this.columnsFixd.length){
                    element.width=200
                    element.fixed='left'
                    }             
                });

                this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
                } else{
                this.scrollX=0;
                this.columns.forEach(element => {
                    element.width='auto'
                    element.fixed=false
                });
                }
            },
            //弹出框打开，自定义列
            customColumns() {
                this.visible = true
                this.listNum = [...this.columns]
            },
            
        },
    }
</script>

<style lang="scss" scoped>
.youtTable{
    background: white;
    margin-bottom: 20px;
    
    .yout-header{       
        padding: 20px ;
        display: flex;
        justify-content:space-between;
        .headTitle{
            margin-bottom: 0;
            font-size: 15px;
            font-weight: 600;
            height: 32px;
            line-height: 32px;
        }
    }
}
</style>