<style lang="scss" scoped>
.search-bar {
    display: flex;
    align-items: center;
}
.search-box p {
    display: inline-block;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}
.card-person-drawer {
    width: 100%;
    height: 90%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    justify-content: space-between;
    /deep/ .ant-card-body {
        padding: 0;
    }
    /deep/ .ant-card-head {
        padding: 0 5px;
    }
    .card-item {
        width: calc(25% - 10px);
        margin-bottom: 10px;
        float: left;
    }
    .card-item-else {
        width: calc(20% - 10px);
        margin-bottom: 10px;
        float: left;
    }
}
</style>
<style scoped>
.showNumBox {
    margin: 10px 0;
}
.showNumBox .ant-card-body {
    display: flex;
    justify-content: center;
}
.showNumBox p,
.showNumBox span {
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    font-weight: 600;
    color: red;
    margin: 0;
}
.search-box .ant-card-body {
    padding: 5px 15px;
}
.showNumBox .ant-card-body .styleElse {
    line-height: 60px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
    display: none !important;
}
.yincang .ant-col-6 p {
    text-align: left;
    color: red;
    font-size: 16px;
    font-weight: 500;
}
.ant-table-thead div {
    font-weight: 700;
}
.tool-tip {
    position: absolute;
    top: 65px;
    right: 10px;
}
</style>
<style lang="less" scoped>
.ant-card-head .ant-tabs-bar {
    padding: 0;
}
.search-box .ant-card-body {
    padding: 5px 15px;
}
.search-box {
    padding: 15px 10px;
}
.search-box p {
    display: inline-block;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}
.statistics .ant-col-6 .ant-card-body .styleElse {
    line-height: 60px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
    display: none !important;
}
.yincang .ant-col-6 p {
    text-align: left;
    color: red;
    font-size: 16px;
    font-weight: 500;
}
.ant-table-thead div {
    font-weight: 700;
}
.tool-tip {
    position: absolute;
    top: 65px;
    right: 10px;
}
.statistics {
    .ant-card-bordered {
        border: none;
    }
    .ant-card-head .ant-tabs {
        clear: both;
        margin-bottom: -13px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: normal;
        font-size: 14px;
    }
    .duibi {
        position: absolute;
        right: 24px;
        top: 15px;
    }
    p {
        margin-bottom: 0;
    }
}
</style>

<style lang="less" scoped>
.middle-button {
    margin: 0 8px;
}
.newPlanStatic {
    .divider {
        height: 62px;
    }
    .showNumBox {
        background: white;
        overflow: hidden;
        margin: 15px 0;
        padding: 30px 0;
        text-align: center;
        .ant-card-body {
            padding-top: 0;
        }
        .title {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
            display: inline-block;
        }
    }
    .tabbody {
        background: white;
        padding: 0 24px;
        margin-bottom: 15px;
        .ant-tabs-bar {
            margin: 0;
        }
    }
    .chartBox {
        background: white;
        padding: 20px 0;
    }
    .tableBody {
        background: white;
        padding: 20px;
    }
}
</style>
<template>
    <div class="newPlanStatic config-project">
        <div class="tabbody">
            <a-tabs v-model="tabKey" @change="tabChange">
                <a-tab-pane :key="1" tab="素材测试配置信息"> </a-tab-pane>
                <!-- <a-tab-pane :key="2" tab="账户"> </a-tab-pane> -->
                <a-button slot="tabBarExtraContent" type="primary" @click="newCreat(null)">
                    创建投放策略
                </a-button>
            </a-tabs>
        </div>
        <a-card>
            <div class="table-page-search-wrapper">
                <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
                    <a-row :gutter="24" v-if="tabKey === 1">
                        <a-col :md="8" :sm="8" :xxl="6">
                            <a-form-item label="策略名称">
                                <a-input
                                    v-decorator="['strategyName']"
                                    type="text"
                                    placeholder="请输入需要搜索的策略名称"
                                />
                            </a-form-item>
                        </a-col>
                        <!--  -->
                        <a-col :md="8" :sm="8" :xxl="6">
                            <a-form-item label="数据周期">
                                <a-range-picker
                                    :disabled-date="disabledDate"
                                    format="YYYY-MM-DD"
                                    v-decorator="['timeRange', { initialValue: [moment(), moment()] }]"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="6">
                            <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" class="middle-button"
                                    >重置</a-button
                                >
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-card>

        <a-row style="margin-bottom:15px;margin-top:12px">
            <a-col :span="24">
                <div class="tableBody" style="min-height:200px;padding-bottom: 50px">
                    <a-table
                        :columns="columns"
                        :dataSource="dataSource"
                        :pagination="false"
                        :loading="dataLoading"
                        bordered
                        @change="tableChange"
                        :scroll="{ x: 2500 }"
                        size="middle"
                        style="word-break: break-all;font-size:16px;font-weight:600"
                        id="outTable"
                        ref="accountTable"
                    >
                        <span slot="strategyStatus" slot-scope="text, record">
                            <a-switch
                                :checked="text == 0"
                                @change="onChangeStatus(text, record, 'strategyStatus')"
                                :loading="spinning"
                            />
                        </span>
                        <span slot="projectStrategy" slot-scope="text, record">
                            <a-switch
                                :checked="text == 1"
                                @change="onChangeStatus(text, record, 'projectStrategy')"
                                :loading="spinning"
                                v-if="record.projectName !== '-'"
                            />
                        </span>

                        <span slot="statDate" slot-scope="text, record">
                            {{ record.projectName !== '-' ? text : '-' }}
                        </span>
                        <span slot="projectName" slot-scope="text, record">
                            <a @click="toAccountDetail(record)" v-if="tabKey === 1 && text !== '-'">{{ text }}</a>
                            <span v-else> {{ text }} </span>
                        </span>
                        <span slot="allAccountCount" slot-scope="text, record">
                            {{ record.successCount + '/' + text }}
                        </span>
                        <span slot="action" slot-scope="text, record">
                            <div v-if="record.projectName !== '-'">
                                <a @click="editPrice(record)">出价</a>
                                <a-divider type="vertical" />
                                <a @click="newCreat(record.id)">编辑</a>
                                <a-divider type="vertical" />
                                <a @click="matchingAccount(record)">变量条件</a>
                                <a-divider type="vertical" />
                                <a @click="selectMaterial(record)">选择素材</a>
                                <a-divider type="vertical" />
                                <a @click="lookPreview(record)">预览</a>
                            </div>
                            <div v-else>
                                -
                            </div>
                        </span>
                        <span slot="charge" slot-scope="text, record">{{
                            record.reportData.charge | decimalsHandle
                        }}</span>
                        <span slot="play3sRate" slot-scope="text, record">{{ record.reportData.play3sRate }}</span>
                        <span slot="impression1kCost" slot-scope="text, record">{{
                            record.reportData.impression1kCost
                        }}</span>
                        <span slot="photoClick" slot-scope="text, record">{{
                            record.reportData.photoClick | formatCurrency
                        }}</span>
                        <span slot="bclick" slot-scope="text, record">{{
                            record.reportData.bclick | formatCurrency
                        }}</span>
                        <span slot="eventRegister" slot-scope="text, record">{{
                            record.reportData.eventRegister | decimalsHandle
                        }}</span>
                        <span slot="bclickPrice" slot-scope="text, record">{{
                            record.reportData.bclickPrice | decimalsHandle
                        }}</span>
                        <span slot="photoShow" slot-scope="text, record">{{
                            record.reportData.photoShow | formatCurrency
                        }}</span>
                        <span slot="aclick" slot-scope="text, record">{{
                            record.reportData.aclick | formatCurrency
                        }}</span>
                        <span slot="activation" slot-scope="text, record">{{ record.reportData.activation }}</span>
                        <span slot="eventRegisterPrice" slot-scope="text, record">{{
                            record.reportData.eventRegisterPrice | decimalsHandle
                        }}</span>
                        <span slot="bclickRate" slot-scope="text, record">{{ record.reportData.bclickRate }}</span>
                    </a-table>
                    <a-pagination
                        size="small"
                        :showTotal="ipagination.showTotal"
                        style="float: right;margin-top:10px"
                        v-if="dataSource.length > 0"
                        showQuickJumper
                        :pageSize.sync="ipagination.pageSize"
                        :total="ipagination.total"
                        v-model="ipagination.current"
                        @change="getDataSource"
                    />
                </div>
            </a-col>
        </a-row>
        <!-- 修改出价 -->
        <a-modal
            title="修改出价"
            v-if="modifyPriceVisible"
            :visible="modifyPriceVisible"
            :confirm-loading="modifyPriceLoading"
            dialog-class="push-modal"
            @ok="handleOkPrice"
            @cancel="handleCancelPrice"
        >
            <a-form
                :form="priceForm"
                :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
                v-if="modifyPriceDetail"
            >
                <a-form-item label="策略名称"> {{ modifyPriceDetail.strategyName }} </a-form-item>
                <a-form-item label="优化目标">
                    <a-button type="primary">{{ modifyPriceDetail.bidType | bidType }}</a-button></a-form-item
                >
                <a-form-item label="转化目标"> {{ modifyPriceDetail.ocpxActionType | ocpxActionType }}</a-form-item>
                <a-form-item label="计费方式">
                    <a-button type="primary">{{
                        modifyPriceDetail.bidType === 2 ? '点击计费（CPC）' : '按展示付费（oCPM）'
                    }}</a-button>
                </a-form-item>
                <a-form-item label="转化目标出价">
                    <a-input
                        style="width:200px;ime-mode:disabled"
                        v-decorator="['cpaBid', { rules: [{ required: true, validator: cpaBidValid }] }]"
                    >
                    </a-input>
                    <br />
                    <span style="color:red"
                        >单出价请输入单数字，阶梯出价请用/隔开 例如10/12，区间出价请用-链接 例如20-25</span
                    >
                </a-form-item>
            </a-form>
        </a-modal>

        <a-modal
            title="变量条件"
            :width="800"
            v-if="accountVisible"
            :visible="accountVisible"
            @ok="handleOkVariable"
            @cancel="accountVisible = false"
            dialog-class="push-modal"
            :confirm-loading="variableLoading"
        >
            <div style="height:600px;overflow:auto">
                <a-form
                    :form="variableForm"
                    :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                    :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
                    v-if="accountProjectDetail"
                >
                    <a-form-item label="策略名称">{{ accountProjectDetail.strategyName }} </a-form-item>
                    <a-form-item label="地区">
                        <checkBoxGroup
                            :options="regionData"
                            v-decorator="['region', { initialValue: [] }]"
                            @change="setData($event, 'region')"
                        />
                    </a-form-item>
                    <a-form-item label="年龄">
                        <checkBoxGroup
                            :options="[
                                { label: '不限', value: 'unlimited' },
                                { label: '18-23岁', value: '18' },
                                { label: '24-30岁', value: '24' },
                                { label: '31-40岁', value: '31' },
                                { label: '41-49岁', value: '41' },
                                { label: '50-100岁', value: '50' }
                            ]"
                            v-decorator="['agesRange', { initialValue: [] }]"
                            @change="setData($event, 'agesRange')"
                        />
                    </a-form-item>
                    <a-form-item label="性别">
                        <checkBoxGroup
                            :options="[
                                { label: '不限', value: 'unlimited' },
                                { label: '女', value: '1' },
                                { label: '男', value: '0' }
                            ]"
                            v-decorator="['gender', { initialValue: [] }]"
                            @change="setData($event, 'gender')"
                        />
                    </a-form-item>
                    <a-form-item label="行为意向">
                        <checkBoxGroup
                            :options="[
                                { label: '不限', value: 'unlimited' },
                                { label: '系统优选', value: '1' }
                            ]"
                            v-decorator="['intentionTarget', { initialValue: [] }]"
                        />
                    </a-form-item>
                    <a-form-item label="APP行为">
                        <checkBoxGroup
                            :options="[
                                { label: '不限', value: 'unlimited' },
                                { label: '按App名称', value: '1', disabled: !accountProjectDetail.accountId }
                            ]"
                            v-decorator="['appIds', { initialValue: [] }]"
                            @change="setData($event, 'appIds')"
                        />
                        <el-select
                            v-if="getElseData('appIds') ? getElseData('appIds').includes('1') : false"
                            v-model="appIds"
                            multiple
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="remoteMethod"
                            style="margin-top:10px"
                        >
                            <el-option
                                v-for="item in appOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </a-form-item>
                    <a-form-item label="智能扩量">
                        <checkBoxGroup
                            :options="[
                                { label: '关闭', value: '0' },
                                { label: '开启', value: '1' },
                                {
                                    label: '不可突破年龄',
                                    value: '2',
                                    disabled: getElseData('agesRange')
                                        ? getElseData('agesRange').includes('18') ||
                                          getElseData('agesRange').includes('24') ||
                                          getElseData('agesRange').includes('31') ||
                                          getElseData('agesRange').includes('41') ||
                                          getElseData('agesRange').includes('50')
                                            ? false
                                            : true
                                        : true
                                },
                                {
                                    label: '不可突破性别',
                                    value: '3',
                                    disabled: getElseData('gender')
                                        ? getElseData('gender').includes('0') || getElseData('gender').includes('1')
                                            ? false
                                            : true
                                        : true
                                },
                                {
                                    label: '不可突破地域',
                                    value: '4',
                                    disabled: getElseData('region')
                                        ? getElseData('region').includes('1') || getElseData('region').includes('2')
                                            ? false
                                            : true
                                        : true
                                }
                            ]"
                            v-decorator="['intelliExtend', { initialValue: [] }]"
                        />
                    </a-form-item>
                    <a-form-item label="投放时段">
                        <a-button type="primary" @click="addSchedule">新增变量</a-button>
                    </a-form-item>
                    <div style="width:100%">
                        <div v-for="(item, index) in scheduleTimeData" style="margin-bottom:15px;display:flex">
                            <selectCheckAll
                                style="width:100%;margin-right:5px"
                                :scheduleTime.sync="item.scheduleTime"
                                ref="selectCheck"
                            />
                            <a-icon type="delete" v-if="scheduleTimeData.length > 1" @click="deleteSchedule(index)" />
                        </div>
                    </div>
                </a-form>
            </div>
        </a-modal>
        <!-- 选择素材 -->
        <a-modal
            title="选择素材"
            :width="1000"
            v-if="materialVisible"
            :visible="materialVisible"
            :confirm-loading="materialLoading"
            dialog-class="push-modal"
            @ok="handleOkMaterial"
            @cancel="
                materialVisible = false
                checkPersonElse = []
                checkVideo = []
                checkPersonOne = ''
                sumContent = 0
            "
        >
            <div style="width:100%;display:flex;">
                <span></span>
                <span>已选择：{{ sumContent }}</span>
            </div>
            <a-checkbox-group v-model="checkVideo" style="width: 100%;" @change="setVideoDataAll">
                <div class="card-person-drawer info-detail">
                    <a-card class="card-person card-item" v-for="(item, index) in dataVideoList" :key="index">
                        <div
                            slot="title"
                            style="    overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;"
                        >
                            {{ item.photoName }}
                        </div>
                        <div slot="extra">
                            <a-checkbox :value="item.photoId" @change="setVideoData(item.photoId)"></a-checkbox>
                        </div>
                        <div style="width:100%;border: 1px solid #f2f2f2;position:relative">
                            <img :src="item.coverUrl" style="width:100%" alt="" />
                            <a-tag color="blue" v-if="item.useStatus == 0" style="position:absolute;top:5px;right:0px">
                                已测试
                            </a-tag>
                        </div>
                    </a-card>
                </div>
            </a-checkbox-group>
            <div style="text-align:right">
                <a-pagination
                    size="small"
                    :showTotal="ipaginationVideo.showTotal"
                    style="float:right"
                    v-if="dataVideoList.length > 0"
                    showQuickJumper
                    :pageSize.sync="ipaginationVideo.pageSize"
                    :total="ipaginationVideo.total"
                    v-model="ipaginationVideo.current"
                    @change="getDataVideo"
                />
            </div>
        </a-modal>
    </div>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'
import pick from 'lodash.pick'
import { getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
import qs from 'qs'
function tqFun(qcArr1) {
    var tempArr = []
    function bbFun(qcArr) {
        for (var i = 0; i < qcArr.length; i++) {
            if (qcArr[i] instanceof Array) {
                bbFun(qcArr[i])
            } else {
                tempArr.push(qcArr[i])
            }
        }
        return tempArr
    }
    return bbFun(qcArr1)
}
let TTcolumns = [
    {
        title: '开关',
        dataIndex: 'strategyStatus',
        scopedSlots: { customRender: 'strategyStatus' },
        align: 'center',
        key: 'strategyStatus'
    },
    {
        title: '策略名称',
        dataIndex: 'strategyName',
        scopedSlots: { customRender: 'strategyName' },
        align: 'center',
        key: 'strategyName'
    },
    {
        title: '策略日期',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' },
        align: 'center',
        key: 'createTime'
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        key: 'action',
        width: '300px'
    },
    {
        title: '消耗',
        dataIndex: 'charge',
        scopedSlots: { customRender: 'charge' },
        align: 'center',
        key: 'charge',
        sorter: () => {}
    },
    {
        title: '封面曝光数',
        dataIndex: 'photoShow',
        scopedSlots: { customRender: 'photoShow' },
        align: 'center',
        key: 'photoShow',
        sorter: () => {}
    },
    {
        title: '封面点击数',
        dataIndex: 'photoClick',
        scopedSlots: { customRender: 'photoClick' },
        align: 'center',
        key: 'photoClick',
        sorter: () => {}
    },
    {
        title: '素材曝光数',
        dataIndex: 'aclick',
        scopedSlots: { customRender: 'aclick' },
        align: 'center',
        key: 'aclick',
        sorter: () => {}
    },
    {
        title: '行为数',
        dataIndex: 'bclick',
        scopedSlots: { customRender: 'bclick' },
        align: 'center',
        key: 'bclick',
        sorter: () => {}
    },
    {
        title: '行为率',
        dataIndex: 'bclickRate',
        scopedSlots: { customRender: 'bclickRate' },
        align: 'center',
        key: 'bclickRate',
        sorter: () => {}
    },
    {
        title: '平均千次封面曝光花费（元）',
        dataIndex: 'impression1kCost',
        scopedSlots: { customRender: 'impression1kCost' },
        align: 'center',
        key: 'impression1kCost',
        sorter: () => {}
    },
    {
        title: '平均行为单价（元）',
        dataIndex: 'bclickPrice',
        scopedSlots: { customRender: 'bclickPrice' },
        align: 'center',
        key: 'bclickPrice',
        sorter: () => {}
    },
    {
        title: '注册数',
        dataIndex: 'eventRegister',
        scopedSlots: { customRender: 'eventRegister' },
        align: 'center',
        key: 'eventRegister',
        sorter: () => {}
    },
    {
        title: '注册单价',
        dataIndex: 'eventRegisterPrice',
        scopedSlots: { customRender: 'eventRegisterPrice' },
        align: 'center',
        key: 'eventRegisterPrice',
        sorter: () => {}
    }
]

let KScolumns = []

export default {
    components: {
        ACol,
        ARow,
        checkBoxGroup,
        selectCheckAll
    },

    data() {
        return {
            appIds: [],
            appOptions: [],
            materialVisible: false,
            materialLoading: false,
            scheduleTimeData: [{ scheduleTime: '' }],
            indexAll: 0,
            spinning: false,
            form: this.$form.createForm(this),
            priceForm: this.$form.createForm(this),
            variableForm: this.$form.createForm(this),
            variableLoading: false,
            exportloading: false,
            dateRange: [moment().subtract(1, 'weeks'), moment()],
            noImg: require('@/assets/noImg.png'),
            validationRules: {
                bid: [
                    {
                        required: true,
                        message: '出价信息必须填写'
                        // validator: this.validateBid,
                    }
                ]
            },
            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
                }
            },
            ipaginationVideo: {
                current: 1,
                pageSize: 8,
                id: '',
                accountId: '',
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                //   showSizeChanger: true,
                total: 0,
                onChange: current => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipaginationVideo.current = current
                }
            },
            value: 'valid',
            KSaccountList: [],
            TTaccountList: [],

            KSdesignList: [],
            TTdesignList: [],

            operateDisabled: false,
            duration: 1000,
            //treeselect的参数
            treeValue: [],
            treeData: [],
            SHOW_PARENT,

            type: 3,
            dateValue: [moment().subtract(7, 'days'), moment()],

            operate: '',
            designList: [],

            tabKey: 1,

            loading: false,
            TTcolumns,
            KScolumns,
            columns: [...TTcolumns],
            dataSource: [],

            dataVideoList: [],
            checkVideo: [],
            checkPersonOne: '',
            checkPersonElse: [],
            sumContent: 0,
            tableTab: 1,

            newPlan: 0,
            effectPlan: 0,

            openOptions: false,

            target: 'createTime',
            order: 'descend',
            projectId: undefined,
            projectIdAll: undefined,
            dataLoading: false,
            url: '/kuaishouProjectStrategy/queryProjectList',
            modifyPriceVisible: false,
            modifyPriceLoading: false,
            modifyPriceDetail: null,
            accountVisible: false,
            againLoading: false,
            accountProjectDetail: null,
            regionData: [{ label: '不限', value: 'unlimited' }]
        }
    },
    methods: {
        moment,
        setData(e, type) {
            if (type == 'region') {
                if (e.includes('1') || e.includes('2')) {
                } else {
                    let region = this.getElseData('intelliExtend')
                    let regionIndex = region.findIndex(item => item === '4')
                    if (regionIndex > -1) {
                        region.splice(regionIndex, 1)
                        this.variableForm.setFieldsValue({ intelliExtend: region })
                    }
                }
            } else if (type == 'agesRange') {
                if (e.includes('18') || e.includes('24') || e.includes('31') || e.includes('41') || e.includes('50')) {
                } else {
                    let agesRange = this.getElseData('intelliExtend')
                    let agesRangeIndex = agesRange.findIndex(item => item === '2')
                    if (agesRangeIndex > -1) {
                        agesRange.splice(agesRangeIndex, 1)
                        this.variableForm.setFieldsValue({ intelliExtend: agesRange })
                    }
                }
            } else if (type == 'gender') {
                if (e.includes('1') || e.includes('0')) {
                } else {
                    let gender = this.getElseData('intelliExtend')
                    let genderIndex = gender.findIndex(item => item === '3')
                    if (genderIndex > -1) {
                        gender.splice(genderIndex, 1)
                        this.variableForm.setFieldsValue({ intelliExtend: gender })
                    }
                }
            } else if (type == 'appIds') {
                if (e.includes('1')) {
                } else {
                    this.appIds = []
                }
            }
        },
        newCreat(id) {
            if (id) {
                this.$router.push({
                    path: '/autoLaunch/creatMaterialTest?id=' + id
                })
            } else {
                // window.open('/creat-material-test', '_blank')
                this.$router.push({
                    path: '/autoLaunch/creatMaterialTest'
                })
            }
        },
        remoteMethod(query) {
            if (query !== '') {
                getAction('/kuaishou/batch/getAppSearch', {
                    accountId: this.accountProjectDetail.accountId,
                    appName: query
                }).then(res => {
                    if (res.result) {
                        this.appOptions = res.result.map(item => {
                            return {
                                value: item.appId,
                                label: item.appName
                            }
                        })
                    } else {
                    }
                })
            } else {
                this.appOptions = []
            }
        },
        addSchedule() {
            this.scheduleTimeData.push({ scheduleTime: '' })
        },
        deleteSchedule(index) {
            this.scheduleTimeData.splice(index, 1)
        },
        handleOkVariable() {
            this.variableForm.validateFields((err, values) => {
                if (!err) {
                    this.variableLoading = true
                    let params = { ...values }
                    params.agesRange = JSON.stringify(values.agesRange)
                    values.appIds = values.appIds.includes('1') ? ['unlimited'] : ['unlimited']
                    params.appIds =
                        this.appIds.length > 0
                            ? JSON.stringify([values.appIds, this.appIds])
                            : JSON.stringify([values.appIds])
                    params.gender = JSON.stringify(values.gender)
                    params.intelliExtend = JSON.stringify(values.intelliExtend)
                    params.intentionTarget = JSON.stringify(values.intentionTarget)
                    params.region = JSON.stringify(values.region)
                    params.scheduleTime = JSON.stringify(
                        this.scheduleTimeData.map(item => {
                            return item.scheduleTime
                        })
                    )
                    if (this.accountProjectDetail.editId) {
                        params.id = this.accountProjectDetail.editId
                        this.postDataAction('/dimension/kuaiShouDimensionVariable/edit', params).then(res => {
                            console.log(res)
                            if (res.success) {
                                this.accountVisible = false
                                this.variableLoading = false
                                this.variableForm.resetFields()
                                this.scheduleTimeData = [{ scheduleTime: '' }]
                            } else {
                                this.variableLoading = false
                                this.$message.error('修改失败')
                            }
                        })
                    } else {
                        params.strategyId = this.accountProjectDetail.id
                        this.postDataAction('/dimension/kuaiShouDimensionVariable/add', params).then(res => {
                            console.log(res)
                            if (res.success) {
                                this.accountVisible = false
                                this.variableLoading = false
                                this.variableForm.resetFields()
                                this.scheduleTimeData = [{ scheduleTime: '' }]
                            } else {
                                this.variableLoading = false
                                this.$message.error('添加失败')
                            }
                        })
                    }
                }
            })
        },
        editPrice(item) {
            this.modifyPriceVisible = true
            this.modifyPriceDetail = { ...item }

            this.$nextTick(() => {
                let cpaBid = ''
                let changeBid =
                    this.modifyPriceDetail.bidType === 2 ? this.modifyPriceDetail.bid : this.modifyPriceDetail.cpaBid
                if ((changeBid + '').includes('/')) {
                    let bidArr = changeBid.split('/')
                    for (let index = 0; index < bidArr.length; index++) {
                        bidArr[index] = bidArr[index] / 1000
                    }
                    cpaBid = bidArr.join('/')
                } else if ((changeBid + '').includes('-')) {
                    let bidArr = changeBid.split('-')
                    for (let index = 0; index < bidArr.length; index++) {
                        bidArr[index] = bidArr[index] / 1000
                    }
                    cpaBid = bidArr.join('-')
                } else {
                    cpaBid = changeBid / 1000
                }

                let deepConversionBid = undefined
                if (this.modifyPriceDetail.deepConversionBid && this.modifyPriceDetail.deepConversionBid != '') {
                    if ((this.modifyPriceDetail.deepConversionBid + '').includes('/')) {
                        let bidArr = this.modifyPriceDetail.deepConversionBid.split('/')
                        for (let index = 0; index < bidArr.length; index++) {
                            bidArr[index] = bidArr[index] / 1000
                        }
                        deepConversionBid = bidArr.join('/')
                    } else if ((this.modifyPriceDetail.deepConversionBid + '').includes('-')) {
                        let bidArr = this.modifyPriceDetail.deepConversionBid.split('-')
                        for (let index = 0; index < bidArr.length; index++) {
                            bidArr[index] = bidArr[index] / 1000
                        }
                        deepConversionBid = bidArr.join('-')
                    } else {
                        deepConversionBid = this.modifyPriceDetail.deepConversionBid / 1000
                    }
                }

                this.priceForm.setFieldsValue({
                    cpaBid: cpaBid,
                    deepConversionBid: deepConversionBid
                })
            })
        },
        handleOkPrice() {
            this.priceForm.validateFields((err, values) => {
                //console.log(values)
                if (!err) {
                    this.modifyPriceLoading = true
                    if (values.cpaBid) {
                        if ((values.cpaBid + '').includes('/')) {
                            let bidArr = values.cpaBid.split('/')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index] * 1000
                            }
                            values.cpaBid = bidArr.join('/')
                        } else if ((values.cpaBid + '').includes('-')) {
                            let bidArr = values.cpaBid.split('-')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index] * 1000
                            }
                            values.cpaBid = bidArr.join('-')
                        } else {
                            values.cpaBid = values.cpaBid * 1000
                        }
                    } else {
                        values.cpaBid = 0
                    }
                    if (values.deepConversionBid) {
                        if ((values.deepConversionBid + '').includes('/')) {
                            let bidArr = values.deepConversionBid.split('/')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index] * 1000
                            }
                            values.deepConversionBid = bidArr.join('/')
                        } else if ((values.deepConversionBid + '').includes('-')) {
                            let bidArr = values.deepConversionBid.split('-')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index] * 1000
                            }
                            values.deepConversionBid = bidArr.join('-')
                        } else {
                            values.deepConversionBid = values.deepConversionBid * 1000
                        }
                    } else {
                        values.deepConversionBid = 0
                    }
                    // this.modifyPriceDetail
                    let params = {}
                    if (this.modifyPriceDetail.bidType === 2) {
                        params.bid = values.cpaBid
                        if (values.deepConversionBid) {
                            params.deepConversionBid = values.deepConversionBid
                        }
                    } else {
                        params = { ...values }
                    }
                    postAction('/dimension/kuaiShouDimensionStrategy/edit', {
                        ...params,
                        id: this.modifyPriceDetail.id
                    }).then(res => {
                        this.modifyPriceLoading = false
                        if (res.success) {
                            this.handleCancelPrice()
                            const paramsData = this.form.getFieldsValue()
                            this.handleGetTableList(paramsData)
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    this.$message.error('请正确填写必填项目')
                }
            })
        },
        handleCancelPrice() {
            this.priceForm.resetFields()
            this.modifyPriceVisible = false
        },
        cpaBidValid(rule, value, callback) {
            let z = /-/g
            let a = /\//g
            let d = /\./g
            if (value === '' || value === undefined) {
                callback('出价必须填写')
            } else if (value.startsWith('.') || value.endsWith('.')) {
                callback('请填写正确出价')
            } else if (value.startsWith('-') || value.endsWith('-')) {
                callback('请填写正确出价')
            } else if (value.match(a) && value.match(z)) {
                callback('不允许出现除"-"和"/"之外的所有字符，并且二者不可同时出现')
            } else if (value.match(/[^0-9+-\/]/g)) {
                callback('请填写正确出价')
            } else {
                callback()
            }
        },
        btKeyUp(e) {
            //没有显示‘破折号’和 '.' 需要的可以手动加上
            // this.priceForm.setFieldsValue({
            //     cpaBid: e.target.value.replace(/[^0-9+-\/]/g, '')
            // })
            // (
            //         /[\u4e00-\u9fa5/\s+/]|[`~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g,
            //         ''
            //     )
        },
        getData(className) {
            return this.priceForm.getFieldValue(className)
        },
        getElseData(className) {
            return this.variableForm.getFieldValue(className)
        },
        againAccount() {
            this.againLoading = true
            this.getAction('/ai/projectCreate/projectAutomaticCreates', {
                id: this.accountProjectDetail.id,
                operationType: 1
            }).then(res => {
                this.againLoading = false
                if (res.success) {
                    this.$message.success('重新匹配成功')
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        matchingAccount(item) {
            this.accountVisible = true
            this.accountProjectDetail = { ...item }

            getAction('/dimension/kuaiShouDimensionAccount/getStrategyBindAccount', {
                strategyId: item.id
            }).then(res => {
                console.log(res)
                if (res.success) {
                    this.accountProjectDetail.accountId = res.result
                } else {
                    this.accountProjectDetail.accountId = null
                }
            })
            getAction('/dimension/kuaiShouDimensionVariable/selectVariableByStrategyId', { strategyId: item.id }).then(
                res => {
                    if (res.success) {
                        getAction('/dimension/kuaiShouDimensionVariable/queryByStrategyId', {
                            strategyId: item.id
                        }).then(res => {
                            if (res.success) {
                                if (res.result) {
                                    this.accountProjectDetail.editId = res.result.id
                                    let data = {}
                                    data.region = JSON.parse(res.result.region)
                                    data.agesRange = JSON.parse(res.result.agesRange)
                                    data.gender = JSON.parse(res.result.gender)
                                    data.intentionTarget = JSON.parse(res.result.intentionTarget)
                                    data.appIds = tqFun(JSON.parse(res.result.appIds))

                                    if (data.appIds.length >= 2) {
                                        console.log(this.appIds)
                                        this.appIds = tqFun(JSON.parse(res.result.appIds))
                                        console.log(this.appIds)
                                        let index = this.appIds.findIndex(item => item == 'unlimited')
                                        this.appIds.splice(index, 1)
                                        data.appIds = ['unlimited', '1']
                                    }
                                    data.intelliExtend = JSON.parse(res.result.intelliExtend)
                                    this.$nextTick(() => {
                                        this.scheduleTimeData = JSON.parse(res.result.scheduleTime).map(item => {
                                            return { scheduleTime: item }
                                        })
                                        this.variableForm.setFieldsValue(
                                            pick(
                                                data,
                                                'region',
                                                'agesRange',
                                                'gender',
                                                'intentionTarget',
                                                'appIds',
                                                'intelliExtend'
                                            )
                                        )
                                    })
                                }
                            } else {
                                this.accountProjectDetail.editId = null
                            }
                        })
                    }
                }
            )
        },
        selectMaterial(item) {
            getAction('/dimension/kuaiShouDimensionAccount/getStrategyBindAccount', {
                strategyId: item.id
            }).then(res => {
                if (res.success) {
                    this.ipaginationVideo.id = item.id
                    this.ipaginationVideo.accountId = res.result
                    this.ipaginationVideo.current = 1
                    postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
                        id: this.ipaginationVideo.id,
                        accountId: this.ipaginationVideo.accountId,
                        pageSize: this.ipaginationVideo.pageSize,
                        pageNo: this.ipaginationVideo.current
                    }).then(resNei => {
                        if (resNei.success) {
                            this.materialVisible = true
                            this.dataVideoList = resNei.result.list
                            this.ipaginationVideo.total = resNei.result.total
                        }
                    })
                } else {
                }
            })
        },
        lookPreview(item) {
            this.$router.push({
                path: '/autoLaunch/lookPreview?id=' + item.id
            })
            // getAction('/dimension/kuaiShouDimensionUnit/previewByStrategyId', { strategyId: item.id }).then(res => {})
        },
        getDataVideo(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipaginationVideo.current = current
            this.ipaginationVideo.pageSize = pageSize
            this.checkVideo = this.checkPersonElse
            postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
                id: this.ipaginationVideo.id,
                accountId: this.ipaginationVideo.accountId,
                pageSize: this.ipaginationVideo.pageSize,
                pageNo: this.ipaginationVideo.current
            }).then(resNei => {
                if (resNei.success) {
                    this.materialVisible = true
                    this.dataVideoList = resNei.result.list
                    this.ipaginationVideo.total = resNei.result.total
                }
            })
        },
        getDataSource(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current
            this.ipagination.pageSize = pageSize
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleOkMaterial() {
            let dataAll = this.checkPersonElse
            this.checkVideo = dataAll
            this.materialLoading = true
            this.postDataAction('/dimension/kuaiShouDimensionStrategy/create', {
                id: this.ipaginationVideo.id,
                materialArray: this.checkVideo
            }).then(res => {
                this.materialLoading = false
                if (res.success) {
                    this.materialVisible = false
                    this.checkPersonElse = []
                    this.checkVideo = []
                    this.checkPersonOne = ''
                    this.sumContent = 0
                }
            })
        },
        setVideoData(data) {
            this.checkPersonOne = data
        },
        setVideoDataAll(data) {
            //  checkPerson: [],
            // checkPersonAll: [],
            if (data.findIndex(item => item === this.checkPersonOne) > -1) {
                this.checkPersonElse.push(...data)
                this.checkPersonElse = [...new Set(this.checkPersonElse)]
            } else {
                data.findIndex(item => item === this.checkPersonOne) > -1
                this.checkPersonElse.splice(
                    this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
                    1
                )
            }

            this.sumContent = this.checkPersonElse.length
            // var dataCount = 20
            // if (this.sumContent > dataCount) {
            //     this.$message.error('最多选择' + dataCount + '个定向')
            //     this.checkPerson.pop()
            //     this.checkPersonElse.splice(
            //         this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
            //         1
            //     )
            //     this.sumContent--

            //     // this.checkPersonAll[this.ipagination.current - 1] = this.checkPerson
            // }
        },

        onChangeStatus(text, rescord, type) {
            let status = text === 0 ? 1 : 0
            let url = ''
            let params = {}
            params.id = rescord.id
            params.strategyStatus = status
            url = '/dimension/kuaiShouDimensionStrategy/edit'
            this.postDataAction(url, params).then(res => {
                if (res.success) {
                    const paramsData = this.form.getFieldsValue()
                    this.handleGetTableList(paramsData)
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handleQueryList(event) {
            this.ipagination.current = 1
            event.preventDefault()
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleResetForm() {
            this.ipagination.current = 1
            this.form.resetFields()
            if (this.tabKey == 1) {
                this.projectId = undefined
                this.projectIdAll = undefined
            }
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleGetTableList(data) {
            let paramsData = {
                strategyName: data.strategyName,
                // startTime:
                //     data.timeRange && data.timeRange.length === 2
                //         ? moment(data.timeRange[0]).format('YYYY-MM-DD')
                //         : null,
                // endTime:
                //     data.timeRange && data.timeRange.length === 2
                //         ? moment(data.timeRange[1]).format('YYYY-MM-DD')
                //         : null,
                pageNo: this.ipagination.current,
                pageSize: this.ipagination.pageSize
            }
            this.dataSource = []
            this.dataLoading = true
            this.getAction('/dimension/kuaiShouDimensionStrategy/list', paramsData)
                .then(result => {
                    this.dataLoading = false
                    if (result.success) {
                        this.dataSource = result.result.records || []
                        // if (result.result.total) {
                        //     this.dataSource.unshift(result.result.total)
                        // }

                        this.ipagination.total = result.result.total || 0
                        // result.result.total
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch(error => {
                    this.dataLoading = false
                    console.log(error, 'eeee')
                })
        },
        getAccountNoProject() {
            this.projectId = undefined
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        toAccountDetail(item) {
            this.tabKey = 2
            this.projectId = { id: item.projectId, name: item.projectName }
            this.url =
                this.tabKey == 1
                    ? '/kuaishouProjectStrategy/queryProjectList'
                    : '/kuaishouProjectStrategy/queryAccountList'
            this.$nextTick(() => {
                this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
                this.target = this.tabKey == 1 ? 'createTime' : 'statDate'
                const paramsData = this.form.getFieldsValue()
                this.handleGetTableList(paramsData)
            })
        },
        disabledDate(current) {
            // Can not select days before today and today
            return current && current > moment().endOf('day')
        },
        dateChange(date, dateString) {
            // console.log(date,dateString)
        },

        filterOption(input, option) {
            // console.log(input, option)
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },

        // 快手头条的切换
        tabChange(key) {
            this.ipagination.current = 1
            this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
            this.url =
                this.tabKey == 1
                    ? '/kuaishouProjectStrategy/queryProjectList'
                    : '/kuaishouProjectStrategy/queryAccountList'
            this.target = this.tabKey == 1 ? 'createTime' : 'statDate'
            this.projectId = undefined
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        operateChange(value) {
            console.log(value)
            if (value) {
                this.accountDisabled = true
                this.accountId = ''
            } else {
                this.accountDisabled = false
            }
        },

        tableChange(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
                const paramsData = this.form.getFieldsValue()
                this.handleGetTableList({
                    ...paramsData,
                    target: sorter.columnKey,
                    order: sorter.order ? sorter.order : 'descend'
                })
            }
        },

        // table区域的tab切换
        tableTabChange(key) {
            if (key == 1) {
                this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
                this.target = 'new'
            } else {
                this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
                this.target = 'valid'
            }
        },

        // 获取所有运营
        getAllOperator(key) {
            let url = '/sys/user/getAllUserListV1'
            this.designList = []

            getAction(url, {}).then(res => {
                if (res.success) {
                    this.designList = res.result
                }
            })
        }
    },
    watch: {
        dateValue(newName, oldName) {
            this.search()
        }
    },
    computed: {
        newDate() {
            var myDate = new Date()
            myDate.getYear() //获取当前年份(2位)
            var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
            var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
            var d = myDate.getDate() //获取当前日(1-31)
            var day = myDate.getHours()
            return day
        }
    },
    mounted() {
        const paramsData = this.form.getFieldsValue()
        this.handleGetTableList(paramsData)
        this.getAllOperator()
        this.getAction('/dimension/kuaiShouDimensionRegionConfig/list').then(res => {
            if (res.success) {
                let data = res.result.map(item => {
                    return {
                        label: item.regionGroupName,
                        value: item.regionGroupId
                    }
                })
                this.regionData.push(...data)
            }
        })
    },
    activated: function() {},

    filters: {
        toPercentage(val) {
            if (typeof val != 'string') {
                return (val * 100).toFixed(2) + '%'
            } else {
                return val
            }
        },
        //保留两位小数并且变成货币格式
        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) {
                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 {
                return '-'
            }
        }
    }
}
</script>
