<style scoped lang="scss">
::v-deep .ant-drawer-header {
    border-bottom: 0px;
    padding: 0;
}
::v-deep.ant-drawer-body {
    padding-top: 0;
}
::v-deep.ant-tooltip-inner {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}
::v-deep.ant-tooltip-arrow::before {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}
</style>
<template>
    <a-drawer width="50%" :visible="exploreVisible" @close="closeDrawer" id="explore">
        <a-tabs v-model="exploreKey" slot="title">
            <a-tab-pane key="1" tab="加速探索"> </a-tab-pane>
            <a-tab-pane key="2" tab="辅助探索" disabled> </a-tab-pane>
        </a-tabs>
        <div v-if="exploreKey == '1'" style="padding-bottom:30px">
            <a-tabs v-model="exploreHistory" @change="checkTab">
                <a-tab-pane key="1" tab="批量加速探索"> </a-tab-pane>
                <a-tab-pane key="2" tab="加速探索历史"> </a-tab-pane>
            </a-tabs>
            <div v-if="exploreHistory == '1'">
                <a-form :form="form">
                    <p style="font-size:16px">
                        加速探索开启后预算会在6小时内消耗完成，给单元提供更多的曝光机会，使系统对当前单元的判断更加精准，加速探索不一定能使单元探索成功。
                    </p>
                    <p style="font-size:16px">
                        当前预算：<span v-if="nowBudget == 0" style="font-weight:700"> 不限 </span
                        ><span v-else style="font-weight:700">{{ nowBudget | decimalsHandle }}</span>
                    </p>
                    <p style="font-size:16px;">
                        探索预算
                        <a-tooltip>
                            <template slot="title">
                                注意：此处的预算为单组预算，总预算为:选择广告组数*单组预算 ，总预算不能超过当前账户预算
                            </template>
                            <a-icon type="question-circle" /> </a-tooltip
                        >：
                        <a-form-item style="display:inline-block;position:relative;top:-5px;margin-bottom:0">
                            <a-input-number
                                style="width:200px"
                                v-decorator="[
                                    'exploreDudget',
                                    { rules: [{ required: true, message: '您还未设置加速探索预算，请先设置预算。' }] }
                                ]"
                                :min="100"
                                :max="nowBudget == 0 ? 99999999999999 : nowBudget"
                                :step="0.01"
                            />
                            <span style="margin: 0 10px" v-if="getFormData('exploreDudget')">
                                可选：{{
                                    nowBudget == 0 ? '不限' : Math.floor(nowBudget / getFormData('exploreDudget'))
                                }}
                            </span>
                            <span style="margin: 0 10px"> 已选：{{ selectedRowKeys.length }} </span>
                        </a-form-item>
                    </p>
                    <p>
                        批量选择需要使用探索工具的广告组
                        <a style="margin-left:15px" @click="allOpen">一键全部开启</a>
                    </p>
                </a-form>
            </div>
            <div v-else>
                <a-form layout="inline" :form="formSearch" hide-required-mark :selfUpdate="true">
                    <a-row :gutter="24" style="margin-bottom:15px">
                        <a-col :md="8" :sm="8" :xxl="8">
                            <a-form-item label="广告组ID">
                                <a-input allow-clear v-decorator="['unitId']" type="text" placeholder="请输入需要搜索的广告组ID" />
                            </a-form-item>
                        </a-col>
                        <!--  -->
                        <a-col :md="8" :sm="8" :xxl="8">
                            <a-form-item label="广告组名称" style="    display: flex;">
                                <a-input
                                    allow-clear
                                    v-decorator="['unitName']"
                                    type="text"
                                    placeholder="请输入需要搜索的广告组名称"

                                />
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="8">
                            <a-form-item label="状态">
                                <a-select
                                    v-decorator="['exploreStatus', { initialValue: 'null' }]"
                                    placeholder="请选择"
                                    style="width:200px"
                                    allow-clear
                                >
                                    <a-select-option key="null">
                                        全选
                                    </a-select-option>
                                    <a-select-option :key="1">
                                        加速探索
                                    </a-select-option>
                                    <a-select-option :key="2">
                                        加速探索手动暂停
                                    </a-select-option>
                                    <a-select-option :key="3">
                                        探索金额完成
                                    </a-select-option>
                                    <a-select-option :key="4">
                                        时间到达截止时间
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :md="16" :sm="16" :xxl="16">
                            <a-form-item label="时间维度">
                                <a-radio-group v-decorator="['timeRange', { initialValue: 'lastWeek' }]">
                                    <a-radio-button value="today">
                                        今天
                                    </a-radio-button>
                                    <a-radio-button value="yesterday">
                                        昨天
                                    </a-radio-button>
                                    <a-radio-button value="lastWeek">
                                        最近七天
                                    </a-radio-button>
                                    <a-radio-button value="lastMonth">
                                        最近一月
                                    </a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="8">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
                                <a-button type="primary" @click="handleResetForm" icon="reload" style="margin-left:10px"
                                    >重置</a-button
                                >
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <!-- :scroll="{ x: scrollX }" -->
            <div class="table">
                <a-table
                    :columns="exploreColumns"
                    :data-source="exploreList"
                    bordered
                    :pagination="ipagination"
                    :loading="loading"
                    :scroll="{ x: changeNum }"
                    :rowSelection="
                        exploreHistory == '1' ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null
                    "
                    @change="sort"
                    rowKey="unit_id"
                >
                    <span slot="ocpxActionType" slot-scope="text, record">
                        {{ text | ocpxActionType }}
                    </span>
                </a-table>
            </div>
        </div>
        <div v-else></div>
        <div
            v-if="exploreHistory == '1'"
            :style="{
                position: 'absolute',
                right: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
                zIndex: 1
            }"
        >
            <a-button :style="{ marginRight: '8px' }" @click="closeDrawer">
                取消
            </a-button>
            <a-button type="primary" @click="batchOpen" :disabled="selectedRowKeys.length == 0">
                批量开启
            </a-button>
        </div>
    </a-drawer>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost, deleteAction } from '@/api/manage'
import qs from 'qs'
let typeValue = '预算'
const exploreColumns = [
    {
        title: '组名称',
        dataIndex: 'unit_name',
        key: 'unit_name',
        align: 'center',
        scopedSlots: { customRender: 'unit_name' },
        width: 200,
        fixed: 'left'
    },
    {
        title: '消耗',
        dataIndex: 'charge',
        key: 'charge',
        align: 'center',
        scopedSlots: { customRender: 'charge' },
        sorter: () => {}
    },
    {
        title: '激活数',
        dataIndex: 'activation',
        key: 'activation',
        align: 'center',
        scopedSlots: { customRender: 'activation' },
        sorter: () => {}
    },
    {
        title: '激活成本',
        dataIndex: 'activationCost',
        key: 'activationCost',
        align: 'center',
        scopedSlots: { customRender: 'activationCost' },
        sorter: () => {}
    },
    {
        title: '新增付费人数',
        dataIndex: 'eventPay',
        key: 'eventPay',
        align: 'center',
        scopedSlots: { customRender: 'eventPay' },
        sorter: () => {}
    },
    {
        title: '新增付费人数成本',
        dataIndex: 'eventPayCost',
        key: 'eventPayCost',
        align: 'center',
        scopedSlots: { customRender: 'eventPayCost' },
        sorter: () => {}
    },
    {
        title: '注册数',
        dataIndex: 'eventRegister',
        key: 'eventRegister',
        align: 'center',
        scopedSlots: { customRender: 'eventRegister' },
        sorter: () => {}
    },
    {
        title: '注册成本',
        dataIndex: 'eventRegisterCost',
        key: 'eventRegisterCost',
        align: 'center',
        scopedSlots: { customRender: 'eventRegisterCost' },
        sorter: () => {}
    },
    {
        title: '曝光数',
        dataIndex: 'aclick',
        key: 'aclick',
        align: 'center',
        scopedSlots: { customRender: 'aclick' },
        sorter: () => {}
    }
]
const exploreHistoryColumns = [
    {
        title: '广告组ID',
        dataIndex: 'unitId',
        key: 'unitId',
        align: 'center',
        scopedSlots: { customRender: 'unitId' },
        fixed: 'left',
        width: 120
    },
    {
        title: '组名称',
        dataIndex: 'unitName',
        key: 'unitName',
        align: 'center',
        scopedSlots: { customRender: 'unitName' },
        fixed: 'left',
        width: 200
    },
    {
        title: '总消耗',
        dataIndex: 'totalCharge',
        key: 'totalCharge',
        align: 'center',
        scopedSlots: { customRender: 'totalCharge' },
        fixed: 'left',
        width: 100
    },
    {
        title: '探索预算',
        dataIndex: 'exploreBudget',
        key: 'exploreBudget',
        align: 'center',
        scopedSlots: { customRender: 'exploreBudget' }
    },
    {
        title: '优化目标',
        dataIndex: 'ocpxActionType',
        key: 'ocpxActionType',
        align: 'center',
        scopedSlots: { customRender: 'ocpxActionType' }
    },
    {
        title: '封面曝光数',
        dataIndex: 'impression',
        key: 'impression',
        align: 'center',
        scopedSlots: { customRender: 'impression' }
    },
    {
        title: '素材曝光数',
        dataIndex: 'click',
        key: 'click',
        align: 'center',
        scopedSlots: { customRender: 'click' }
    },
    {
        title: '封面点击数',
        dataIndex: 'photoClick',
        key: 'photoClick',
        align: 'center',
        scopedSlots: { customRender: 'photoClick' }
    },
    {
        title: '转化数',
        dataIndex: 'unifiedConversion',
        key: 'unifiedConversion',
        align: 'center',
        scopedSlots: { customRender: 'unifiedConversion' }
    },
    {
        title: '转化成本',
        dataIndex: 'unitfiedConversionCost',
        key: 'unitfiedConversionCost',
        align: 'center',
        scopedSlots: { customRender: 'unitfiedConversionCost' }
    },
    {
        title: '状态',
        dataIndex: 'exploreStatus',
        key: 'exploreStatus',
        align: 'center',
        customRender: function(text) {
            if (text == 0) {
                return '默认'
            } else if (text == 1) {
                return '加速探索'
            } else if (text == 2) {
                return '加速探索手动暂停'
            } else if (text == 3) {
                return '探索金额完成'
            } else if (text == 4) {
                return '时间到达截止时间'
            }
        }
    }
]
export default {
    name: 'strategy-list',
    components: {},
    props: {
        exploreVisible: {
            type: Boolean,
            default() {
                return false
            }
        },
        exploreKey: {
            type: String,
            default() {
                return '1'
            }
        }
    },
    // mixins: [JeecgListMixin],
    data() {
        return {
            accountId: '',
            exploreHistory: '1',
            nowBudget: 0,
            changeNum: 1500,
            target: 'charge',
            order: 'descend',
            exploreList: [],
            exploreDudget: null,
            loading: false,
            exploreColumns: [...exploreColumns],
            selectedRowKeys: [],
            selectedRows: [],
            form: this.$form.createForm(this),
            formSearch: this.$form.createForm(this),
            exploreUrl: '/explore/todaylist',
            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
                }
            }
        }
    },

    methods: {
        closeDrawer() {
            this.exploreList = []
            this.selectedRowKeys = []
            this.exploreKey = '1'
            this.exploreHistory = '1'
            this.exploreUrl = '/explore/todaylist'
            this.exploreColumns = [...exploreColumns]
            this.form.resetFields()
            this.$emit('update:exploreVisible', false)
            this.$emit('update:exploreKey', '1')
            this.$emit('update:accountId', '')
        },
        allOpen() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    if (this.nowBudget == 0) {
                    } else {
                        if (this.ipagination.total > Math.floor(this.nowBudget / values.exploreDudget)) {
                            this.$message.error('预算不足，请重新选择广告组！')
                            return
                        }
                    }
                    let params = {}
                    params.accountId = this.accountId
                    params.exploreBudget = values.exploreDudget
                    let that = this
                    this.$confirm({
                        title: '该操作有数倍超预算风险，你还要继续吗？',
                        onOk() {
                            that.postDataAction('/explore/openBudgets', params).then(res => {
                                if (res.success) {
                                    that.closeDrawer()
                                    that.$message.success(res.result)
                                } else {
                                }
                            })
                        },
                        onCancel() {}
                    })
                }
            })
        },
        batchOpen() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    if (this.selectedRowKeys.length == 0) {
                        this.$message.error('请选择广告组')
                        return
                    }
                    if (this.nowBudget == 0) {
                    } else {
                        if (this.selectedRowKeys.length > Math.floor(this.nowBudget / values.exploreDudget)) {
                            this.$message.error('预算不足，请重新选择广告组！')
                            return
                        }
                    }
                    let params = {}
                    params.accountId = this.accountId
                    params.unitIds = this.selectedRowKeys
                    params.exploreBudget = values.exploreDudget
                    let that = this
                    this.$confirm({
                        title: '该操作有数倍超预算风险，你还要继续吗？',
                        onOk() {
                            that.postDataAction('/explore/openBudgets', params).then(res => {
                                if (res.success) {
                                    that.closeDrawer()
                                    that.$message.success(res.result)
                                } else {
                                }
                            })
                        },
                        onCancel() {}
                    })
                }
            })
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectionRows = selectionRows
        },
        sort(pagination, filters, sorter, { currentDataSource }) {
            this.ipagination.current = pagination.current
            this.ipagination.pageSize = pagination.pageSize

            if (sorter.order) {
                this.order = sorter.order ? sorter.order : 'descend'
                this.target = sorter.columnKey
                this.getData(this.accountId, {
                    target: sorter.columnKey,
                    order: sorter.order ? sorter.order : 'descend'
                })
            } else {
                if (this.exploreHistory == '2') {
                    const paramsData = this.formSearch.getFieldsValue()
                    this.getData(this.accountId, paramsData)
                } else {
                    this.getData(this.accountId, null)
                }
            }
        },
        checkTab(key) {
            if (key == '1') {
                this.exploreUrl = '/explore/todaylist'
                this.changeNum = 1500
                this.exploreColumns = [...exploreColumns]
                this.getData(this.accountId, null)
            } else if (key == '2') {
                this.exploreUrl = '/explore/historyList'
                this.cancel()
                this.ipagination.current = 1
                this.exploreColumns = [...exploreHistoryColumns]
                const paramsData = this.formSearch.getFieldsValue()
                this.getData(this.accountId, paramsData)
            }
        },
        handleQueryList() {
            this.ipagination.current = 1
            const paramsData = this.formSearch.getFieldsValue()
            this.getData(this.accountId, paramsData)
        },
        handleResetForm() {
            this.ipagination.current = 1
            this.formSearch.resetFields()
            const paramsData = this.formSearch.getFieldsValue()
            this.getData(this.accountId, paramsData)
        },
        getData(accountId, data) {
            this.exploreList = []
            this.loading = true
            this.accountId = accountId
            let params = {}
            params.accountId = accountId
            params.pageSize = this.ipagination.pageSize
            params.pageNo = this.ipagination.current
            if (data && data.target) {
                params.sortCode = data.target
                if (data.order == 'descend') {
                    params.sortType = 'DESC'
                } else {
                    params.sortType = 'ASC'
                }
            } else {
                if (this.exploreHistory == '2') {
                    params.unitId = data.unitId ? data.unitId : null
                    params.unitName = data.unitName ? data.unitName : null
                    params.exploreStatus = data.exploreStatus == 'null' ? null : data.exploreStatus
                    switch (data.timeRange) {
                        case 'today':
                            params.startTime = moment().format('YYYY-MM-DD')
                            params.endTime = moment().format('YYYY-MM-DD')
                            break
                        case 'yesterday':
                            params.startTime = moment()
                                .subtract(1, 'days')
                                .format('YYYY-MM-DD')
                            params.endTime = moment()
                                .subtract(1, 'days')
                                .format('YYYY-MM-DD')
                            break
                        case 'lastWeek':
                            params.startTime = moment()
                                .subtract(6, 'days')
                                .format('YYYY-MM-DD')
                            params.endTime = moment().format('YYYY-MM-DD')
                            break
                        case 'lastMonth':
                            params.startTime = moment()
                                .subtract(1, 'months')
                                .format('YYYY-MM-DD')
                            params.endTime = moment().format('YYYY-MM-DD')
                            break
                        default:
                            params.startTime = moment()
                                .subtract(6, 'days')
                                .format('YYYY-MM-DD')
                            params.endTime = moment().format('YYYY-MM-DD')
                            break
                    }
                } else {
                    params.sortCode = this.target
                    params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
                }
            }
            this.postDataAction(this.exploreUrl, params)
                .then(res => {
                    this.loading = false
                    if (res.success) {
                        this.nowBudget = res.result.dayBudget ? res.result.dayBudget : 0
                        this.exploreList = res.result.pageInfo.list
                        this.ipagination.total = res.result.pageInfo.total
                    }
                })
                .catch(err => {
                    // 3、调用取消 注意：要写在catch回调函数里
                })
        },
        getFormData(className) {
            return this.form.getFieldValue(className)
        }
    },
    mounted() {},

    filters: {}
}
</script>
