<template>
    <div class="directionalPackage">
        <div class="tableBOX">
            <div class="tableOpt">
                <a-button class="search" type='primary' @click="openDirectionalPackage">新建定向包</a-button>

             
                <a-button class="addCol" type='primary' @click="addcolumns">自定义列</a-button>
            </div>
            <div class="tableArea">
                <a-table 
                :columns="columns" 
                :data-source="dataSource" 
                :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="operation" slot-scope="text,record">
                        <a href="javascript:;" style="margin-right:10px">推送</a>
                        <a-popconfirm
                            v-if="dataSource.length"
                            title="确定要删除吗？"
                            @confirm="() => onDelete(record.key)"
                        >
                            <a href="javascript:;">删除</a>
                        </a-popconfirm>        
                    </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>
                    <span slot="cost" slot-scope="cost">       
                        {{cost | formatCurrency }}
                    </span>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
const columns = [
  {
    title: '定向包名称',
    dataIndex: 'userName',
    align: 'center',
    key:'userName',
    scopedSlots: { customRender: 'userName' }
  },
  {
    title: '定向描述',
    dataIndex: 'department',
    align: 'center', 
    key: 'department',
    scopedSlots: { customRender: 'department' }
  },
  {
    title: '定向包类型',
    dataIndex: 'roleName',
    align: 'center',
    
    key: 'roleName',
    scopedSlots: { customRender: 'roleName' }
  },
  
  {
    title: '投放范围',
    dataIndex: 'cost',
    align: 'center',
    scopedSlots: { customRender: 'cost' },
    sorter:()=>{}
  },
  {
    title: '关联计划',
    dataIndex: 'accountName',
    align: 'center',
    scopedSlots: { customRender: 'accountName' },
    
  },   
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
    
  }
]


export default {
    data() {
        return {
             //主页的表格
            dataSource:[
                {
                    userName:'人群纠错包1',
                    department:'运算',
                    roleName:'2020-6-10',
                    cost:16897546322,
                    accountName:'伊对-01',
                    status:true,
                    key:0
                },
                {
                    userName:'人群纠错包2',
                    department:'运算',
                    roleName:'2020-6-10',
                    cost:16897322,
                    accountName:'伊对-02',
                    status:false,
                    key:1
                },
                {
                    userName:'人群纠错包3',
                    department:'运算',
                    roleName:'2020-6-10',
                    cost:16322,
                    accountName:'伊对-03',
                    status:true,
                    key:2
                },
            ],
            columns,
            selectedRowKeys:[],
            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);
                    
                },
            },
        }
    }, 
    methods: {
        openDirectionalPackage(){
            this.$router.push({path:'/modules/BatchCreate/newDirectedPackage'})
            console.log()
        },
        //自定义列
        addcolumns(){

        }
    },
    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>
.directionalPackage{
    .tableBOX{
        background: #fff;
        padding: 15px 15px;
        .tableOpt{
            margin-bottom: 10px;
            .search{
                margin-right: 15px;
            }
            .addCol{
                float:right;

            }
        }
        
    }

}
</style>