<template>
    <div class="toutiaoBatch">
        
        
        <div class="toolbox-automate-rules-create-content_title">
            <h3>加速探索列表</h3>
            <!-- <a-button type='primary' @click="goNewConfigInfo" class="goNewConfigInfo">新建配置信息</a-button> -->
        </div>
        
        <div class="topOptions">
            <div >
                <Treeselect :appId.sync="accountId" :multiple="false"  request="2,4"   ref="treeSelect" style="margin-bottom:8px;width:600px " />               
            </div>
            <span class="optionBtn">
                <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
            </span>
        </div>
        <div class="tableArea">
            <!-- <div class="tableOption" v-if="selectedRowKeys.length">
                
                
               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            </div> -->
            <div class="table">
                <a-table
                    :columns="columns"
                    :data-source="data"
                    bordered
                    :pagination="ipagination"
                    :loading="loading"
                    @change="sort"
                    :scroll="{'x':scrollX}"
                    
                >
                    <span slot="status" slot-scope="text,record">
                        <a-spin :spinning="record.spin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked='text==1'  @change="switchChange(text,record)"/>
                            </div>
                        </a-spin>    
                        
                    </span>
                    <span slot="openProgramCreate" slot-scope="text,record">
                        <a-spin :spinning="record.openProgramCreateSpin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked='text==1'  @change="openProgramCreateSwitchChange(text,record)"/>
                            </div>
                        </a-spin>    
                        
                    </span>
                    <span slot="cpaBid" slot-scope="text">
                        {{text/1000}}
                    </span>
                    <span slot="authName" slot-scope="text">
                        <!-- <a href="javascript:;" >{{text}}</a> -->
                        {{text || '-'}}
                    </span>
                    <span slot="time" slot-scope="text,record">
                        {{record.startTime}}至{{record.endTime}}
                    </span>
                    <span slot="operator" slot-scope="text,record">
                        <a href="javascript:;"  @click="goPlanList(record)">编辑</a>
                        <a-divider type="vertical" />
                        <a href="javascript:;"  @click="deleteRecord(record)">删除</a>
                        <a-divider type="vertical" />
                        <a-popover v-model="record.show" trigger="click" placement="topRight" @visibleChange='visibleChange'>
                            <div slot="content">
                                    <span style='font-weight:700;margin-right:15px;font-size:15px'>修改后重提</span>
                                    <a-radio-group v-model="examineAgainType" >
                                        <a-radio :value="1">修改广告语</a-radio>
                                        <a-radio :value="0">修改封面</a-radio>
                                    </a-radio-group>
                                    <a-button type='default' @click="examineAgainCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
                                    <a-button type='primary' @click="examineAgainOk(record)" size='small'  class="ok">重提</a-button>
                            </div>
                            <a href="javascript:;"  type='primary' @click="()=>{record.show=true}">一键重提</a>
                            
                        </a-popover>
                        <a-divider type="vertical" />
                        <a-popover v-model="record.visible" trigger="click" placement="topLeft" @visibleChange='visibleChange'>
                            <span slot="title">出价</span>
                            <template  slot="content" style="width:300px;">
                                <div style="margin:5px 0 0">
                                    <span ><a-input-number :min="0" v-model="newBid" :step="0.1" placeholder="请输入出价" size="small" style='margin-right:20px;width:120px' /></span>
                                    <p style="color:red;font-size:12px;height:16px;padding:5px 0">{{bidErrorMessage}}</p>
                                </div>
                                
                                <div>
                                    <a-button type='default' @click="bidChangeCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
                                    <a-button type='primary' @click="bidChangeOk(record)" size='small' class="ok">修改</a-button>
                                </div>
                                
                            </template>
                            <a href="javascript:;"  type='primary' @click="()=>{record.visible=true}">修改出价</a>
                        </a-popover>
                    </span>

                </a-table>
            </div>
        </div>
        
       
              
    <!-- </a-spin> -->
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost,deleteAction } from '@/api/manage';
// import { JeecgListMixin } from '@/mixins/ipagination'
// import editableCell from './editableCell'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import qs from 'qs'
let typeValue='预算'


const strategyColumns = [
  
  {
    title: '广告组名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    scopedSlots: { customRender: 'name' },
    width:200,
    fixed: 'left'
  },
   {
    title: '广告组ID',
    dataIndex: 'authName',
    key: 'authName',
    align: 'center',
    scopedSlots: { customRender: 'authName' }, 
    width:150,
    fixed: 'left'  
  },
  {
    title: '所属广告账户',
    dataIndex: 'accountId',
    key: 'accountId',
    align: 'center',
    scopedSlots: { customRender: 'accountId' },   
    width:200,
    fixed: 'left' 
  },
  
  {
    title: '所属项目',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    scopedSlots: { customRender: 'createTime' },
    width:150,
    fixed: 'left' 
  },
  {
    title: '探索状态',
    dataIndex: 'createTsime',
    key: 'createTime',
    align: 'center',
    scopedSlots: { customRender: 'createTime' },

  },
  {
    title: '探索预算',
    dataIndex: 'createTimes',
    key: 'createTime',
    align: 'center',
    scopedSlots: { customRender: 'createTime' },
    
  },
  {
        title: '优化目标',
        dataIndex: 'cpaBid',
        align: 'center',    
        scopedSlots: { customRender: 'cpaBid' },
        // sorter:() => {}
    },
 
    {
          title: '消耗(元)',
          dataIndex: 'cost',
          width:150,
          tip: '广告在投放期间的花费总额',
          align: 'center',
          scopedSlots: { customRender: 'cost' },
        //   sorter: () => {}
        },
        {
          title: '封面曝光数',
          dataIndex: 'photoShow',
          tip: '广告在瀑布流被观看次数',
          align: 'center',       
          scopedSlots: { customRender: 'photoShow' },
        //   sorter:() => {}
        },
        {
          title: '封面点击数',
          dataIndex: 'photoClick',
          tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
          align: 'center',
        
          scopedSlots: { customRender: 'photoClick' },
        //   sorter: () => {}
        },
        {
          title: '封面点击率',
          dataIndex: 'clickRate',
          tip: '封面点击数占封面展示数百分比',
          align: 'center',    
          scopedSlots: { customRender: 'clickRate' },
        //   sorter:() => {}
        },
        {
          title: '封面点击单价',
          dataIndex: 'clickCost',
          tip: '封面点击数占封面展示数百分比',
          align: 'center',    
          scopedSlots: { customRender: 'clickCost' },
        //   sorter:() => {}
        },
        {
          title: '转化数',
          dataIndex: 'aclick',
          tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
          align: 'center',
       
          scopedSlots: { customRender: 'aClick' },
        //   sorter:() => {}
        },
        {
          title: '转化成本',
          dataIndex: 'bclick',
          tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
          align: 'center',
        
          scopedSlots: { customRender: 'bClick' },
        //   sorter:() => {}
        },
        
        {
          title: '转化率',
          dataIndex: 'bClickRate',
          tip: '行为数占素材曝光数百分比',
          align: 'center',    
          scopedSlots: { customRender: 'bClickRate' },
        //   sorter:() => {}
        },
 {
    title: '操作',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    scopedSlots: { customRender: 'status' },
    width:150,
    fixed:'right'
  },

];

const publicColumns = [    
    
]

export default {
    name:'strategy-list',
    components: {
        // editableCell,
        Treeselect,
    },
    // mixins: [JeecgListMixin],
    data() {
        return {
            selectedRecord:{},
            bidErrorMessage:'',
            examineAgainType:1,
            newBid:undefined,
            examineAgain:false,
            accountId:[],
            accountList:[],
            strategyState:undefined,
            strategyName:'',
            strategyId:undefined,
            accountId:[],
            scrollX:2500,
            ipagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger:true,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current;
                    this.ipagination.pageSize= pageSize;
                }
            },
           
            spinning:false,
            moment,
           
            optionId:'',//input输入的id或关键词
          
           
            selectDisable:true,
            optValue:undefined,//操作设置的值 删除 暂停 开启
            visible: false,//出价里的弹出框

            //主页的表格
            data:[],
            columns:[...strategyColumns,...publicColumns],
            selectedRowKeys:[],
            
            loading:false,
            editID:0,

            url: {               
                list:'/ctop/aiKuaishouAdvertiserStrategy/list',
                delete:'/ctop/aiKuaishouAdvertiserStrategy/delete',
            },


            xiugaiData:[],//存分别修改时候的数组
        }
    },
    computed: {
        hasSelected() {
        return this.selectedRowKeys.length > 0;
        },
    },
    methods: {
        // 加速探索OK事件
        targethandleOk(e){
            this.targetVisible=true
        },
        //状态改变
        switchChange(text,record){
            // this.spinning=true;
            console.log(text,record)
            record.spin=true;
            
            
            let status=text==1?0:1;
            getAction(`/ctop/aiKuaishouAdvertiserStrategy/oprateStatus`,{
                id:record.id,
                status
            }).then((res)=>{
                
                    record.spin=false;
                if(res.success){
                    this.getStrategyList()
                    this.$message.success(res.message)
                }else{
                    this.$message.error(res.message)
                }
            })
           

        },
        //是否开启程序化创意状态改变
        openProgramCreateSwitchChange(text,record){
            // this.spinning=true;
            console.log(text,record)
            record.openProgramCreateSpin=true;
            
            
            let status=text==1?0:1;
            getAction(`/ctop/aiKuaishouAdvertiserStrategy/oprateCreativeStatus`,{
                id:record.id,
                status
            }).then((res)=>{
                
                    record.openProgramCreateSpin=false;
                if(res.success){
                    this.getStrategyList()
                    this.$message.success(res.message)
                }else{
                    this.$message.error(res.message)
                }
            })
           

        },
        examineAgainMethod(record){
            console.log(record)
            this.examineAgain=true;
            this.selectedRecord=record
        },
        visibleChange(){
            this.bidErrorMessage='';
            this.examineAgainType=1;
            this.newBid=undefined;
            
        },
        bidChangeCancel(record){
            record.visible=false;
            this.newBid=undefined;
            this.bidErrorMessage=''
        },
        bidChangeOk(record){
            if(this.newBid){
                record.visible=false;
                postAction('/ai/batchUpdate/updateGroupBid',{
                    accountId:record.accountId,
                    bid:this.newBid*1000
                }).then(res=>{
                    console.log(res)
                    if(res.code==0){
                        this.$message.success(res.message)
                        this.newBid=undefined;
                        this.getStrategyList()
                    }
                    
                })
            }else{
                this.bidErrorMessage='请正确填写出价'
                // this.$message.error('请正确填写出价')
            }
            
        },

        examineAgainCancel(record){
            record.show=false;
            this.examineAgainType=1
        },
        examineAgainOk(record){
            record.show=false;
            postAction('/kuaishou/creative/again',{
                accountId:record.accountId,
                updateType:this.examineAgainType
            }).then(res=>{
                console.log(res);
                if(res.code==0){
                    this.$message.success('正在重提中，您可稍后查看结果')
                }else{
                    this.$message.success(res.message)
                }
                this.examineAgainType=1
            })
            
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        goNewConfigInfo(){
            this.$router.push('/autoLaunch/configLaunchInfo')
        },
        goPlanList(record){
            console.log(record)
            this.$parent.currentStrategyId=record.id;
            this.$router.push(`/autoLaunch/configLaunchInfo?id=${record.id}`)
        },
        deleteRecord(record){
            this.loading=true
            deleteAction(this.url.delete,{
                id:record.id
            }).then(res=>{
                this.loading=false
                if(res.success){
                    this.$message.success(res.message);
                    this.getStrategyList()
                }else{
                    this.$message.success(res.message);
                }
            })
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        
        //查询按钮事件
        search(){
            this.ipagination.current=1;
            this.getStrategyList()            
        },
        //点击分页
        sort(pagination, filters, sorter, { currentDataSource }){
            console.log(pagination)
            this.ipagination.current=pagination.current;

            this.ipagination.pageSize=pagination.pageSize;
            this.getStrategyList()
        },

        getStrategyList(){
            this.loading = true
            console.log(this.accountId)
            getAction(this.url.list,{
                strategyId:this.strategyId==undefined?null:this.strategyId,
                accountId:this.accountId,
                pageNo:this.ipagination.current,
                pageSize:this.ipagination.pageSize
            }).then((res)=>{
                this.data=[]
                console.log(res)
                this.loading = false
                if(res.success){

                    this.ipagination.total = res.result.total
                    
                    res.result.records.forEach((item)=>{
                        item.key=item.id;
                        item.show=false;
                        item.visible=false;
                        item.spin=false;
                        item.openProgramCreateSpin=false;
                    })

                    this.data = res.result.records;
                    this.selectedRowKeys=[];
                }
            })
        },
      
    },
    mounted() {
       
        this.getStrategyList()
    },
    
    activated() {
        this.getStrategyList()
    },
    beforeDestroy() {

    },
    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'){
                if(val>=0){
                    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{
                    val=parseFloat(val).toFixed(2);
                    let numberStr = val.toString()
                    let str = numberStr.split('.')

                    let str0=str[0].substr(1).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">
    #closeIcon{
         color: #0E74D2;
    }
    .toutiaoBatch{
        .ant-tag .anticon-close {      
            color: #1890ff;        
        }
        .ant-tag .anticon-close:hover{      
            color: rgba(0, 0, 0, 0.85);    
        }

    }
    
    .ant-tooltip-inner,.ant-tooltip-arrow::before{
        background-color: #fff;
        color: #333;
    }
    #batchModal{
        .rules,.totalPrice{
            font-weight: 600;
        }

        .selectePlan{
            font-size: 14px;
            font-weight: 700;
            color: #333;
            padding: 20px 0;
        }
        .totalPrice{
            margin-left: 20px;
        }
        .modifyTable{
            margin-top: 20px;
            width: 100%;
            height: 400px;
            overflow: auto;
            font-weight: 600;
        }
    }
    #copyModal{
        .ant-modal-header{
            text-align: center;
        }
        .copyTip{
            font-size: 12px;
            color: #999;
        }
        .copyName{
            width: 118px;
            display: inline-block;
            text-align: right;
            .copyKeyStart{
                color: red;
            }
        }
        // font-weight: 600;
    }
</style>
<style lang="scss" scoped>
.toutiaoBatch{
    .breadcrumb{
            height: 22px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }
    background-color: #fff;
    padding: 10px 20px;
    position: relative;
    width: 100%;
    .OptinItem{
        display: inline-block;
        margin-right: 15px;
        margin-top: 15px;
        .ok{
            margin-right: 15px;
        }
    }
    .OptinItem:first-child{
        margin-right: 10px;
    }
    .topOptions{
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        .topOpt{
            width: 100%;
            margin-bottom: 10px;
        }
    }
    .optionBtn{
        // display: inline-block;
        float: right;
        // .searchBtn{
            // margin-right: 10px;
        // }
    }
    .tableArea{
        .tableOption{
            padding: 20px 0;
        }
    }
    .toolbox-automate-rules-create-content_title {
        background-color: #fff;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 28px;
        position: relative;
        h3 {
            font-size: 22px;
            margin: 0;
            font-weight: 400;
            height: 30px;
            line-height: 30px;
        }
        .goNewConfigInfo{
            position: absolute;
            right: 0;
            top: 4px;
        }
    }

}

</style>