<style scoped lang="scss">
/deep/ .ant-drawer-header {
    border-bottom: 0px;
}
</style>
<template>
    <div class="toutiaoBatch">
        <div class="toolbox-automate-rules-create-content_title">
            <h3>账户配置列表</h3>
            <a-button type="primary" @click="goNewConfigInfo(null)" class="goNewConfigInfo">创建投放策略</a-button>
        </div>
        <div class="directional-content">
            <div class="table-page-search-wrapper">
                <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="search">
                    <a-row :gutter="24">
                        <!-- v-decorator="[
                                        'dateValue',
                                        { initialValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')] }
                                    ]" -->
                        <a-col :md="10" :sm="10" :xxl="10">
                            <a-form-item label="账户名称">
                                <Treeselect
                                    :appId.sync="accountId"
                                    :multiple="false"
                                    request="2,4"
                                    ref="treeSelect"
                                    style="width:100%"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="6">
                            <a-form-item label="投放状态">
                                <a-select v-model="status" placeholder="请选择投放状态" allowClear>
                                    <a-select-option :value="1">开启</a-select-option>
                                    <a-select-option :value="0">关闭</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="8" style="display: flex;justify-content: flex-end;">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="search">查询</a-button>
                                <a-button @click="handleResetForm" icon="reload" style="margin-left:10px"
                                    >重置</a-button
                                >
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </div>
        <!-- <div class="topOptions">
            <div></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"
                >
                    <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="cpaType" slot-scope="text, record">
                        {{
                            ('' + record.cpaBid).includes('/')
                                ? '阶梯出价'
                                : ('' + record.cpaBid).includes('-')
                                ? '随机出价'
                                : '统一出价'
                        }}
                    </span>
                    <span slot="customCreatedUnitCnt" slot-scope="text, record">
                        {{ text + '/' + record.programCreatedUnitCnt }}
                    </span>
                    <div slot="cpaBid" slot-scope="text, record">
                        <!-- {{
                          text==0?record.roiRatio:
                          text.includes('/')? text.split 
                        }} -->
                        <span v-if="text === 0">{{ record.roiRatio }}</span>
                        <span v-else-if="('' + text).includes('/')">
                            <!-- {{text.split('/')}} -->
                            <span v-for="(item, index) in ('' + text).split('/')">
                                {{ item / 1000 + (index === ('' + text).split('/').length - 1 ? '' : '/') }}
                            </span>
                        </span>
                        <span v-else-if="('' + text).includes('-')">
                            <!-- {{text.split('/')}} -->
                            <span v-for="(item, index) in ('' + text).split('-')">
                                {{ item / 1000 + (index === ('' + text).split('-').length - 1 ? '' : '-') }}
                            </span>
                        </span>
                        <span v-else>{{ text / 1000 }}</span>
                    </div>
                    <span slot="ocpxActionType" slot-scope="text">
                        {{ text | ocpxActionType }}
                    </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="goNewConfigInfo(record.id)">编辑</a>
                        <a-divider type="vertical" />
                        <!-- <a href="javascript:;"  @click="deleteRecord(record)">删除</a>
                        <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>

                        <!-- <a-divider type="vertical" />
                        -->
                        <a-divider type="vertical" />

                        <a-dropdown>
                            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                更多
                            </a>
                            <a-menu slot="overlay">
                                <a-menu-item>
                                    <a @click="goExplore(record)">加速探索</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <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-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" @click="deleteRecord(record)">删除</a>
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </span>
                    <!-- <span slot="action" slot-scope="text,record">
                        <a  @click="goExplore(record)">加速探索</a>
                    </span> -->
                </a-table>
            </div>
        </div>
        <configLaunchExploreDrawer
            :exploreVisible.sync="exploreVisible"
            :exploreKey.sync="exploreKey"
            ref="exploreDrawer"
        />
    </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 configLaunchExploreDrawer from './components/configLaunchExploreDrawer.vue'
import qs from 'qs'
import { mapActions, mapGetters } from 'vuex'
let typeValue = '预算'

const strategyColumns = [
    {
        title: '开关',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        scopedSlots: { customRender: 'status' },
        width: 110
    },
    {
        title: '所属账户名称',
        dataIndex: 'authName',
        key: 'authName',
        align: 'center',
        scopedSlots: { customRender: 'authName' },
        width: 200
    },
    {
        title: '所属账户ID',
        dataIndex: 'accountId',
        key: 'accountId',
        align: 'center',
        scopedSlots: { customRender: 'accountId' }
    },

    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        scopedSlots: { customRender: 'createTime' }
    },
    {
        title: '转化目标',
        dataIndex: 'ocpxActionType',
        align: 'center',
        scopedSlots: { customRender: 'ocpxActionType' }
        // sorter:() => {}
    },
    {
        title: '出价类型',
        dataIndex: 'cpaType',
        align: 'center',
        scopedSlots: { customRender: 'cpaType' }
        // sorter:() => {}
    },
    {
        title: '出价',
        dataIndex: 'cpaBid',
        align: 'center',
        scopedSlots: { customRender: 'cpaBid' }
        // sorter:() => {}
    },

    {
        title: '自定义/程序化创建数量',
        dataIndex: 'customCreatedUnitCnt',
        align: 'center',
        scopedSlots: { customRender: 'customCreatedUnitCnt' }
        // sorter:() => {}
    },
    //   {
    //         title: '是否开启程序化创建',
    //         dataIndex: 'openProgramCreate',
    //         align: 'center',
    //         scopedSlots: { customRender: 'openProgramCreate' },
    //         sorter:() => {},
    //         width:180,
    //     },
    {
        title: '操作',
        dataIndex: 'operator',
        key: 'operator',
        align: 'center',
        scopedSlots: { customRender: 'operator' }
    }
    //   {
    //     title: '探索工具',
    //     dataIndex: 'action',
    //     key: 'action',
    //     align: 'center',
    //     scopedSlots: { customRender: 'action' },
    //     fixed:'right',
    //     width:150,

    //   },
]

const publicColumns = []

export default {
    name: 'strategy-list',
    components: {
        // editableCell,
        Treeselect,
        configLaunchExploreDrawer
    },
    // mixins: [JeecgListMixin],
    data() {
        return {
            form: this.$form.createForm(this),
            exploreAccountId: '',
            exploreVisible: false,
            exploreKey: '',
            targetVisible: false,
            selectedRecord: {},
            bidErrorMessage: '',
            examineAgainType: 1,
            newBid: undefined,
            examineAgain: false,
            accountId: [],
            status: undefined,
            accountList: [],
            strategyState: undefined,
            strategyName: '',
            strategyId: undefined,
            scrollX: 1400,
            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: '/auto/aiKuaishouAccountAutoStrategy/list',
                delete: '/auto/aiKuaishouAccountAutoStrategy/delete'
            },

            xiugaiData: [] //存分别修改时候的数组
        }
    },
    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0
        }
    },
    methods: {
        ...mapGetters(['userInfo']),
        goExplore(item) {
            this.exploreVisible = true
            this.exploreKey = '1'
            this.exploreAccountId = item.accountId
            this.$refs.exploreDrawer.getData(item.accountId)
        },
        //状态改变
        switchChange(text, record) {
            // this.spinning=true;
            console.log(text, record)
            record.spin = true

            let status = text == 1 ? 0 : 1
            this.postDataAction(`/auto/aiKuaishouAccountAutoStrategy/updateState`, {
                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(id) {
            // this.$router.push('/autoLaunch/configLaunchInfo')

            if (id) {
                window.open('/create-launch?id=' + id, '_blank')
            } else {
                window.open('/create-launch', '_blank')
            }
        },
        goPlanList(record) {
            console.log(record)
            this.$parent.currentStrategyId = record.id
            this.$router.push(`/autoLaunch/configLaunchInfo?id=${record.id}`)
        },
        deleteRecord(record) {
            let that = this
            this.$confirm({
                title: '删除提示',
                content: '是否删除该账户配置信息？',
                onOk() {
                    that.loading = true
                    getAction(that.url.delete, {
                        id: record.id
                    }).then(res => {
                        that.loading = false
                        if (res.success) {
                            that.$message.success(res.message)
                            that.getStrategyList()
                        } else {
                            that.$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()
        },
        handleResetForm() {
            this.accountId = ''
            this.status = null
            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
            getAction(this.url.list, {
                strategyId: this.strategyId == undefined ? null : this.strategyId,

                accountId: this.accountId,
                pageNo: this.ipagination.current,
                pageSize: this.ipagination.pageSize,
                userId: this.userInfo().id,
                status: this.status
            }).then(res => {
                this.data = []
                console.log(res)
                this.loading = false
                if (res.success) {
                    this.ipagination.total = res.result.total

                    res.result.list.forEach(item => {
                        item.key = item.id
                        item.show = false
                        item.visible = false
                        item.spin = false
                        item.openProgramCreateSpin = false
                    })

                    this.data = res.result.list
                    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);
    }
}

#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>
