<template>
    <div class="crowedPackage">
        <div class="optHeader">
            <div class="top">
                <span class="optItem">  
                <a-tree-select
                    v-model="treeValue"
                    show-search
                    style="width: 600px;height:30px"
                    :dropdownMatchSelectWidth='true'
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"              
                    tree-checkable
                    searchPlaceholder='请输入账户关键字搜索'
                    :show-checked-strategy="SHOW_PARENT"
                    placeholder="请选择账户或搜索账户关键字"
                    treeNodeFilterProp="title"
                    :allowClear="true"
                    @change="treeChange"
                    @search="treeSearch"
                    @select="treeSelect"                        
                    :maxTagCount='1'    
                    :tree-data="treeData"
                    :filterOption='filterOption'
                >
                </a-tree-select>
                </span>
                <span class="optItem">
                    <a-date-picker @change="dateChange" />
                </span>

            </div>
            <div class="bottom">
                <div class="optItem">
                    <a-select :size="size" placeholder='覆盖数量' style="width: 200px" @change="handleChange">
                        <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                            {{ (i + 9).toString(36) + i }}
                        </a-select-option>
                    </a-select>
                </div>
                <div class="optItem">
                    <a-select :size="size" placeholder='类别' style="width: 200px" @change="handleChange">
                        <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                            {{ (i + 9).toString(36) + i }}
                        </a-select-option>
                    </a-select>
                </div>
                <div class="optItem">
                    <a-input-search placeholder="input search text" style="width: 200px" @search="onSearch" />
                </div>
                <div class="optionBtn">
                     <a-button class="search" type='primary' @click="search">查询</a-button>
                </div>
            </div>
        </div>
        <div class="tableBOX">
            <div class="tableOpt">
                <a-button class="search" type='primary' @click="search">查询</a-button>
                <a-button class="search" type='primary' @click="search">同步</a-button>
                <a-select :size="size" placeholder='批量操作' style="width: 200px" @change="handleChange">
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                        {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                </a-select>
                <a-button class="addCol" type='primary' @click="search">自定义列</a-button>
            </div>
            <div class="tableArea">
                <a-table 
                :columns="columns" 
                :data-source="data" 
                :row-selection="rowSelection" 
                bordered
                >
                    <template slot="campaignName" slot-scope="text,record">                                       
                        <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />                       
                    </template>
                    <span slot="groupBudget" slot-scope="text,record">
                       <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" /> 
                    </span>
                    <span slot="status" slot-scope="text,record">
                        <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
                    </span>
                    <span slot="options" slot-scope="record">
                        <a href="javascript:;" style="margin-right:10px">编辑</a>
                        <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
                        <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
                    </span>
                    <span slot="parentGroup" slot-scope="text">
                        <a href="javascript:;" >{{text}}</a>
                    </span>
                    <span slot="parentPlan" slot-scope="text">
                        <a href="javascript:;" >{{text}}</a>
                    </span>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
import editableCell from './editableCell'
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

let rowSelection={
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        console.log(selectedRowKeys);
        this.selectedRowKeys=selectedRowKeys;
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
        
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
        
    },
}

export default {
    components: {
        editableCell,
    },
    data() {
        return {
            //treeselect的参数
            treeValue: [],
            treeData: [],
            SHOW_PARENT,
            accountId:[],
            dateValue:null,//日期选择器
             //主页的表格
            data:[],
            columns,
            selectedRowKeys:[],
            rowSelection,
            editID:0,

        }
    },
    methods: {
        //项目改变后的事件
        treeChange(val) {
            // console.log(this.treeData)
            console.log(val)
            this.accountId = [];
            //选择一个后禁用其他
            if(val.length==1){
                if(val[0]*1){
                    let selectindex=0
                    this.treeData.forEach((ele,index)=>{                   
                        if(ele.children){
                            ele.children.map((item,ind)=>{
                                    if(item.value==val[0]){
                                        selectindex=index;
                                        
                                    }
                            })
                        }                   
                    });
                    console.log(selectindex)
                    if(selectindex ||selectindex==0){
                        this.treeData.forEach((ele,index)=>{
                            if(index!=selectindex){
                                ele.disableCheckbox = true;
                                if(ele.children){
                                    ele.children.map((item,ind)=>{
                                        item.disableCheckbox = true;
                                    })
                                }
                            }
                        })
                    }
                    
                }else{
                    //  console.log(1)
                    this.treeData.forEach((ele,index)=>{
                            if(ele.value!=val[0]){
                                ele.disableCheckbox = true;
                                
                                if(ele.children){
                                    ele.children.forEach((item,ind)=>{
                                        item.disableCheckbox = true;
                                    })
                                }
                            }
                            
                    })
                }
               
            }

            if(val.length==0){
                this.treeData.forEach((ele,index)=>{              
                        ele.disableCheckbox = false;
                        this.mediaId=ele.mediaId;
                        if(ele.children){
                            ele.children.forEach((item,ind)=>{
                                item.disableCheckbox = false;
                            })
                        }
                    
                });
               
            }
            if(val){
                val.forEach((ele,index)=>{
                if(ele*1){
                    this.accountId.push(ele.value)
                }else{              
                    let projectArr=this.treeData.filter((item)=>{
                        return item.value==ele
                    });
                    console.log(projectArr)
                    projectArr[0].children.forEach((element)=>{
                        this.accountId.push(element.value)
                    })
                }
                })       
            }
            
            console.log(this.accountId)
        },
        treeSearch(){
            console.log(arguments);
        },
        treeSelect(){
            // console.log(arguments);
            // this.treeValue=arguments[0].value
        },

        //日期改变
        dateChange(date, dateString) {
            console.log(date, dateString);
            this.dateValue=date;
        },
        //按名字搜索
        onSearch(value) {
            console.log(value);
        },

        //查询按钮
        search(){

        },
    },
    filters: {
        toPercentage(val) {
            if(val){
                if(typeof val != 'string'){
                    return (val * 100).toFixed(2) + '%'
                }else{
                    return val
                }
            }else if(typeof val =='string'){
                    return val
                }
            else{
                return 0
            }    
        },
        //保留两位小数并且变成货币格式
        decimalsHandle(val){
            
            if(val && typeof val !='string'){
            val=parseFloat(val).toFixed(2);
            let numberStr = val.toString()
            let str = numberStr.split('.')
            
            let str0=str[0].split('').reverse();
            for (let i = 0; i < str0.length; i++) {
            if ((i + 1) % 4 === 0) {
                str0.splice(i, 0, ',')
                }
            }
            str0.reverse()
            let handleResult = ''
            for (let j = 0; j < str0.length; j++) {
                handleResult += str0[j]
            }
            
            return handleResult+'.'+str[1]
            }else if(typeof val =='string'){
                return val
            }
            else{
            return 0
            }
            
            
        },
        //变成货币格式
        formatCurrency(val){
            if((val||val==0)&& typeof val !='string'){
                let numberStr = val.toString()
                let str = numberStr.split('').reverse()
                for (let i = 0; i < str.length; i++) {
                    if ((i + 1) % 4 === 0) {
                    str.splice(i, 0, ',')
                    }
                }
                str.reverse()
                let handleResult = ''
                for (let j = 0; j < str.length; j++) {
                    handleResult += str[j]
                }
                return handleResult
            }else if(typeof val =='string'){
                    return val
            }
            else{
                return '-'
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
.crowedPackage{
    .optHeader{
        margin: 15px 0;
        background: #fff;
        .optinItem{
            display: inline-block;
            margin-right: 15px;
            .ok{
                margin-right: 15px;
            }
        }
        .optionBtn{
        // display: inline-block;
            float: right;
            .searchBtn{
                margin-right: 10px;
            }
        }
    }
    .optHeader:hover{
        box-shadow: 0 0 15px rgba(0,0,0,.2);
        border-radius: 10px;
    }
    .tableBOX{
        .tableOpt{
            margin-bottom: 10px;
            .search{
                margin-right: 15px;
            }
            .addCol{
                float:right;

            }
        }
        
    }

}
</style>