<style scoped lang="scss">
::v-deep.import-padding-top .ant-modal-body {
    padding-top: 10px;
}
::v-deep.vue-treeselect__control {
    line-height: 20px !important;
}
::v-deep .table-page-search-wrapper .ant-form-item .ant-form-item-control {
    height: auto !important;
    line-height: 20px !important;
}
::v-deep .white-space-other .ant-descriptions-item-content {
    font-weight: bold;
    max-width: 290px;
    white-space: nowrap;
    text-overflow: ellipsis !important;
    overflow: hidden;
    position: relative;
    top: 5px;
}
::v-deep .white-space-collapse .ant-descriptions-item-content {
    font-weight: bold;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis !important;
    overflow: hidden;
    position: relative;
    top: 5px;
}
/deep/.display-none-selset {
    display: none !important;
}
.step-jump {
    /deep/ table tr td {
        border-bottom: 0px;
    }
}
.bottom-to-one {
    /deep/ .ant-form-item {
        margin-bottom: 0;
    }
}
.target-person-add-button {
    margin-left: 15px;
}
.card-person {
    width: 300px;
    margin-right: 10px;
    /deep/.ant-card-body {
        padding: 0px;
    }
    /deep/.ant-card-head {
        padding: 0px 10px;
    }
    .card-main-case {
        height: 250px;
        overflow: auto;
        padding: 0 5px;
    }
}
.card-person-drawer {
    width: 100%;
    height: 90%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    justify-content: flex-start;
    .card-item {
        width: calc(33% - 10px);
        margin-bottom: 10px;
        float: left;
    }
    .card-item-else {
        width: calc(20% - 10px);
        margin-bottom: 10px;
        float: left;
    }
}
.showShare {
    position: relative;
}
.share {
    display: none;
}
.showShare:hover .share {
    display: flex;
    justify-content: center;
    align-items: center;
}
.chouzhen {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(20% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
    float: left;
}

li.chouzhen.first:before {
    font-size: 12px;
    content: '首帧';
    position: absolute;
    top: 7px;
    left: 5px;
    width: 36px;
    height: 20px;
    color: rgb(255, 255, 255);
    line-height: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    z-index: 1000;
}
.display-none-selset {
    display: none !important;
}
.logo {
    padding-left: 24px;
    img {
        height: 32px !important;
    }
    .name {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ced2d9;
        // line-height: 22px;
        margin-left: 20px;
        padding-left: 21px;
        position: relative;
    }
    .name::before {
        content: '';
        width: 1px;
        height: 18px;
        background: rgba(255, 255, 255, 0.31);
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -9px;
    }
}
.chartBox {
    margin-top: 80px;
    .chartBody {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .search-box {
        margin-bottom: 20px;
    }
}

/deep/ .ant-descriptions-item-content {
    font-weight: bold;
}

.info-detail {
    /deep/ table tr td {
        border: 0;
    }
    /deep/ .ant-descriptions-item-label {
        color: darkgray;
        // min-width: 30px;
        white-space: nowrap;
    }
}
.flex-main {
    display: flex;
    margin-bottom: 10px;
    p {
        color: black;
        font-weight: 600;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
    }
}
</style>
<style lang="scss">
.hide-checkbox .ant-table-thead .ant-table-selection {
    display: none;
}
.new-batch .ant-card-head-title {
    font-weight: 700;
}
// .new-batch textarea {
//   resize: none;
//   border: none;
//   outline: 0;
//   box-shadow: none;
// }
.create-info .ant-form-item {
    margin-bottom: 0 !important;
}
.fengmian .ant-checkbox-wrapper:first-child {
    margin-left: 8px;
}
@media screen and (max-width: 1200px) {
    // 这里写对应要修改的样式如：
    .new-batch .el-step__title {
        font-size: 12px;
    }
}
.line-height-one .ant-form-item-control {
    line-height: inherit;
}
.creat-all-info .ant-form-item-control {
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.config-new-batch {
    .display-none-selset {
        display: none !important;
    }
    .ant-btn-danger {
        background-color: #ff4d4f !important;
    }
}
</style>
<template>
    <div ref="questionnaireBox" class="new-batch config-new-batch">
        <a-layout-header
            class="ant-header-fixedHeader ant-header-side-opened"
            :style="{ padding: '0' }"
            style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
        >
            <div :class="['top-nav-header-index', theme]">
                <div class="header-index-wide">
                    <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
                        <div class="logo">
                            <img src="~@/assets/logoNew1.png" alt="logo" />
                            <span class="name">有腾投放管家</span>
                        </div>
                    </div>
                </div>
            </div>
        </a-layout-header>
        <div class="chartBox" style="padding: 0 20px">
            <a-row :gutter="20">
                <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
                    <a-card class="search-box" style="height: 90vh">
                        <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
                            <el-step
                                v-for="(item, index) in stepsArr"
                                :key="index"
                                :title="item.title"
                                @click.native="jump(index)"
                            >
                            </el-step>
                        </el-steps>
                    </a-card>
                </a-col>
                <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
                    <a-card class="search-box step-jump" title="选择项目">
                        <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
                            <a-row :gutter="16">
                                <a-col :span="16" class=" table-page-search-wrapper">
                                    <a-form-item
                                        label="账户名称"
                                        :labelCol="formItemLayout.labelCol"
                                        class="require-check"
                                    >
                                        <selectTreeAccount
                                            v-decorator="[
                                                'accountId',
                                                {
                                                    rules: [{ required: true, message: '账户名称必选' }],
                                                    initialValue: undefined
                                                }
                                            ]"
                                            style="display: inline-block;position: relative;margin-left: 0px;width:100%"
                                            :limit="1"
                                            :disabled="!!$route.query.id"
                                            @change="changeAccount"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="营销目标">
                                        <a-radio-group
                                            :disabled="!!$route.query.id"
                                            button-style="solid"
                                            v-decorator="[
                                                'campaignType',
                                                {
                                                    rules: [{ required: true, message: '营销目标必选' }],
                                                    initialValue: 2
                                                }
                                            ]"
                                            @change="changeCampaignType"
                                        >
                                            <a-radio-button :value="2">提升应用安装</a-radio-button>
                                            <a-radio-button :value="5" disabled>收集销售线索</a-radio-button>
                                            <a-radio-button :value="7">提高应用活跃</a-radio-button>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="基础信息配置">
                                        <a-button type="primary" slot="extra" @click="formInfoShow">基础信息</a-button>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="行为意向">
                                        <a-radio-group
                                            button-style="solid"
                                            v-decorator="[
                                                'intentionTarget',
                                                {
                                                    rules: [{ required: true, message: '行为意向必选' }],
                                                    initialValue: 0
                                                }
                                            ]"
                                        >
                                            <a-radio-button :value="0">不限</a-radio-button>
                                            <a-radio-button :value="1">系统优选</a-radio-button>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-card>
                    <a-card class="search-box step-jump" title="优化目标">
                        <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="优化目标">
                                        <a-radio-group
                                            v-decorator="['bidType', { initialValue: 10 }]"
                                            button-style="solid"
                                        >
                                            <a-radio-button :value="10">
                                                转化数
                                            </a-radio-button>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="转化目标">
                                        <a-select
                                            style="width:300px"
                                            allowClear
                                            v-decorator="[
                                                'ocpxActionType',
                                                { rules: [{ required: true, message: '转化目标必选' }] }
                                            ]"
                                        >
                                            <a-select-option :value="2">行为数</a-select-option>
                                            <a-select-option :value="180">激活</a-select-option>
                                            <a-select-option :value="53">表单提交</a-select-option>
                                            <a-select-option :value="394">订单提交</a-select-option>
                                            <a-select-option :value="348">使用有效线索</a-select-option>
                                            <a-select-option :value="383">授信出价</a-select-option>
                                            <a-select-option :value="384">完件出价</a-select-option>
                                            <a-select-option :value="190">付费出价</a-select-option>
                                            <a-select-option :value="191">首日ROI</a-select-option>
                                            <a-select-option :value="396">注册优化目标</a-select-option>
                                            <a-select-option :value="324">唤起应用</a-select-option>
                                            <a-select-option :value="715">微信复制优化目标</a-select-option>
                                            <a-select-option :value="716">多转化事件</a-select-option>
                                            <a-select-option :value="717">广告观看次数</a-select-option>
                                            <a-select-option :value="773">关键行为</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="计费方式">
                                        <a-radio-group default-value="10" button-style="solid">
                                            <a-radio-button value="10">
                                                按展示付费（oCPM）
                                            </a-radio-button>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="深度转化目标">
                                        <a-select
                                            style="width:300px"
                                            size="default"
                                            allowClear
                                            v-decorator="['deepConversionType']"
                                        >
                                            <a-select-option :value="3">
                                                付费
                                            </a-select-option>
                                            <a-select-option :value="7">
                                                次日留存
                                            </a-select-option>
                                            <a-select-option :value="10">
                                                完件
                                            </a-select-option>
                                            <a-select-option :value="11">
                                                授信
                                            </a-select-option>
                                            <a-select-option :value="13">
                                                添加购物车
                                            </a-select-option>
                                            <a-select-option :value="14">
                                                提交订单
                                            </a-select-option>
                                            <a-select-option :value="15">
                                                购买
                                            </a-select-option>
                                            <a-select-option :value="44">
                                                有效线索
                                            </a-select-option>
                                            <a-select-option :value="92">
                                                付费roi
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="转化目标出价">
                                        <a-input
                                            style="width:300px"
                                            v-decorator="[
                                                'cpaBid',
                                                {
                                                    rules: [
                                                        { required: true, message: ' ' },
                                                        { validator: cpaBidValid }
                                                    ]
                                                }
                                            ]"
                                        >
                                        </a-input>
                                        <br />
                                        <span style="color:red"
                                            >单出价请输入单数字，阶梯出价请用/隔开 例如10/12，区间出价请用-链接
                                            例如20-25</span
                                        >
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <!-- { rules: [{ validator: deepBidValid }] } -->
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="深度转化出价">
                                        <a-input style="width:300px" v-decorator="['deepConversionBid']"> </a-input>
                                        <br />
                                        <span style="color:red"
                                            >单出价请输入单数字，阶梯出价请用/隔开 例如10/12，区间出价请用-链接
                                            例如20-25</span
                                        >
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-card>

                    <a-card class="search-box step-jump" title="目标应用">
                        <a-button
                            type="primary"
                            slot="extra"
                            @click="targetAppEdit"
                            :disabled="!getFormData('formProject', 'accountId')"
                            >编辑</a-button
                        >
                        <a-row :gutter="16" class="bottom-to-one">
                            <a-col :span="16">
                                <a-form-item label="" v-bind="tailFormItemLayout">
                                    <a-descriptions class="white-space-other">
                                        <a-descriptions-item label="系统平台">
                                            {{
                                                appDetail && appDetail.platformOs
                                                    ? appDetail.platformOs === 1
                                                        ? 'Android'
                                                        : 'IOS'
                                                    : '-'
                                            }}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="单/多应用">
                                            {{ multipleBidData.length > 1 ? '多应用' : '单应用' }}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="应用数量">
                                            {{ multipleBidData.length }}
                                        </a-descriptions-item>

                                        <a-descriptions-item label="是否使用渠道号">
                                            {{ appDetail && appDetail.useChannel ? '是' : '否' }}
                                        </a-descriptions-item>
                                        <a-descriptions-item
                                            label="渠道号作用纬度"
                                            v-if="
                                                appDetail &&
                                                    appDetail.useChannel &&
                                                    channelData &&
                                                    channelData.channel.usageLevel
                                            "
                                        >
                                            {{
                                                channelData.channel.usageLevel == 'account'
                                                    ? '账户'
                                                    : channelData.channel.usageLevel == 'plan'
                                                    ? '计划'
                                                    : '组'
                                            }}
                                        </a-descriptions-item>
                                        <a-descriptions-item
                                            label="是否使用单品"
                                            v-if="
                                                appDetail &&
                                                    appDetail.useChannel &&
                                                    channelData &&
                                                    channelData.channel.isHaveItem
                                            "
                                        >
                                            {{ channelData.channel.isHaveItem == 1 ? '是' : '否' }}
                                        </a-descriptions-item>

                                        <a-descriptions-item label="转化跟踪" v-if="convertId && !convert">
                                            {{ convertId.label }}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="优先从系统应用商店下载">
                                            {{ appDetail && appDetail.useAppMarket ? '是' : '否' }}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="调起链接">
                                            <a-tooltip placement="topLeft">
                                                <template slot="title">
                                                    {{ appDetail && appDetail.schemaUri ? appDetail.schemaUri : '无' }}
                                                </template>
                                                {{ appDetail && appDetail.schemaUri ? appDetail.schemaUri : '无' }}
                                            </a-tooltip>
                                        </a-descriptions-item>
                                    </a-descriptions>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16" v-for="(item, index) in multipleBidData" :key="index">
                            <a-col :span="16" v-if="!appDetail.useChannel">
                                <a-form-item
                                    :label="'应用' + (index + 1)"
                                    :labelCol="{ span: 4 }"
                                    :wrapperCol="{ span: 20 }"
                                >
                                    <a-collapse expand-icon-position="right">
                                        <a-collapse-panel key="1" :header="item.appName">
                                            <a-descriptions class="white-space-collapse">
                                                <a-descriptions-item label="应用标识" :span="3">
                                                    {{ item.appVersion }}
                                                </a-descriptions-item>
                                                <a-descriptions-item label="第三方点击监测链接" :span="3">
                                                    <a-tooltip placement="topLeft">
                                                        <template slot="title">
                                                            {{ !!item.clickTrackUrl ? item.clickTrackUrl : '-' }}
                                                        </template>
                                                        {{ !!item.clickTrackUrl ? item.clickTrackUrl : '-' }}
                                                    </a-tooltip>
                                                </a-descriptions-item>
                                                <a-descriptions-item label="第三方actionBar监测链接" :span="3">
                                                    <a-tooltip placement="topLeft">
                                                        <template slot="title">
                                                            {{
                                                                !!item.actionbarClickUrl ? item.actionbarClickUrl : '-'
                                                            }}
                                                        </template>
                                                        {{ !!item.actionbarClickUrl ? item.actionbarClickUrl : '-' }}
                                                    </a-tooltip>
                                                </a-descriptions-item>
                                            </a-descriptions>
                                        </a-collapse-panel>
                                    </a-collapse>
                                </a-form-item>
                            </a-col>
                            <a-col :span="16" v-else>
                                <a-form-item
                                    :label="'应用' + (index + 1)"
                                    :labelCol="{ span: 4 }"
                                    :wrapperCol="{ span: 20 }"
                                >
                                    <p style="width:100%;display: flex;justify-content: space-between;">
                                        {{ item.appName }}({{ item.appVersion }})
                                        <a @click="lookChannel(item.appName)">详情</a>
                                    </p>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-card>
                    <a-card class="search-box step-jump">
                        <span slot="title">
                            目标人群
                            <a-tooltip>
                                <template slot="title">
                                    定向包支持多选,
                                    将根据人群包匹配情况进行随机匹配。若账户中无此人群包,则进行下一个定向包匹配。若此账户全部匹配不成功则不创建
                                </template>
                                <a-icon type="question-circle" />
                            </a-tooltip>
                        </span>
                        <a-row :gutter="16">
                            <a-col :span="16" style="width:100%;    margin-left: -10%;">
                                <a-form-item label="" v-bind="tailFormItemLayout">
                                    <div class="target-person-add">
                                        <span>已选定向包：{{ showCheckPerson.length }}</span>
                                        <a-button
                                            type="primary"
                                            class="target-person-add-button"
                                            @click="targetPersonCheck"
                                            :disabled="!getFormData('formProject', 'accountId')"
                                            >选择定向包 ></a-button
                                        >
                                        <a-tooltip>
                                            <template slot="title">
                                                当编辑定向包时，需要重新选择定向包
                                            </template>
                                            <a-icon
                                                type="question-circle"
                                                v-if="$route.query.id"
                                                style="margin-left:20px"
                                            />
                                        </a-tooltip>
                                    </div>
                                </a-form-item>
                                <a-form-item label="" v-bind="tailFormItemLayout">
                                    <div
                                        class="card-person-drawer info-detail"
                                        style="justify-content: flex-start;max-height:500px;overflow:auto"
                                    >
                                        <a-card
                                            :title="item.targetName"
                                            class="card-person card-item-else"
                                            style="margin-right:10px"
                                            v-for="(item, index) in showCheckPerson"
                                            :key="index"
                                        >
                                            <div slot="extra">
                                                <a-popconfirm
                                                    title="确定要删除这个定向吗?"
                                                    ok-text="确定"
                                                    cancel-text="取消"
                                                    @confirm="removeVideoMaterial(index, item.id)"
                                                    @cancel="cancel"
                                                >
                                                    <a-icon type="delete" />
                                                </a-popconfirm>
                                            </div>

                                            <div class="card-main-case">
                                                <a-row style="margin-top:10px">
                                                    <a-col :xl="24" :md="24" class="flex-main" v-if="item">
                                                        <span class="ant-descriptions-item-label"> 人群:</span>
                                                        <div v-if="item" style="word-break: break-all;">
                                                            <span
                                                                v-if="
                                                                    (!item.population && !item.excludePopulation) ||
                                                                        (item.population == '[]' &&
                                                                            item.excludePopulation == '[]')
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <span
                                                                v-else-if="
                                                                    item.population &&
                                                                        (!item.excludePopulation ||
                                                                            item.excludePopulation == '[]')
                                                                "
                                                            >
                                                                定向人群：{{ JSON.parse(item.population).join() }}
                                                            </span>
                                                            <span
                                                                v-else-if="
                                                                    item.excludePopulation &&
                                                                        (!item.population || item.population == '[]')
                                                                "
                                                            >
                                                                排除人群：{{
                                                                    JSON.parse(item.excludePopulation).join()
                                                                }}
                                                            </span>
                                                            <span v-else>
                                                                定向人群：{{ JSON.parse(item.population).join() }}
                                                                <br />
                                                                排除人群：{{
                                                                    JSON.parse(item.excludePopulation).join()
                                                                }}
                                                            </span>
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row style="margin-top:10px">
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 地区:</span>
                                                        <div v-if="item">
                                                            <span
                                                                v-if="
                                                                    item.region == '' ||
                                                                        item.region == null ||
                                                                        JSON.parse(item.region).length == 0
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <div v-else>
                                                                {{ item.regionName.join(',') }}
                                                            </div>
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 年龄:</span>
                                                        <div v-if="item">
                                                            <span
                                                                v-if="
                                                                    (item.agesRange == '[]' ||
                                                                        item.agesRange == null) &&
                                                                        (item.min == -1 || item.min == null) &&
                                                                        (item.max == -1 || item.max == null)
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <div v-else>
                                                                <span
                                                                    v-if="
                                                                        item.agesRange == '[]' || item.agesRange == null
                                                                    "
                                                                >
                                                                    {{ item.min + '岁~' + item.max + '岁' }}
                                                                </span>
                                                                <span v-else>
                                                                    <span
                                                                        v-for="(items, index) in JSON.parse(
                                                                            item.agesRange
                                                                        )"
                                                                        :key="index"
                                                                    >
                                                                        {{ items | kuaishouAge
                                                                        }}{{
                                                                            index ==
                                                                            JSON.parse(item.agesRange).length - 1
                                                                                ? ''
                                                                                : ','
                                                                        }}
                                                                    </span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>

                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 性别:</span>
                                                        <div v-if="item">
                                                            {{
                                                                item.gender == 1
                                                                    ? '女'
                                                                    : item.gender == 2
                                                                    ? '男'
                                                                    : '不限'
                                                            }}
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 最低版本:</span>
                                                        <div v-if="item">
                                                            {{
                                                                item.platformOs == 1
                                                                    ? 'Android系统(' +
                                                                      (item.androidOsv == 3
                                                                          ? '不限)'
                                                                          : item.androidOsv + 'x+)')
                                                                    : item.platformOs == 2
                                                                    ? 'IOS系统(' +
                                                                      (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
                                                                    : '不限'
                                                            }}
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>

                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 设备品牌:</span>
                                                        <div v-if="item">
                                                            <span
                                                                v-if="
                                                                    item.deviceBrand == '' ||
                                                                        item.deviceBrand == null ||
                                                                        JSON.parse(item.deviceBrand).length == 0
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <span v-else>
                                                                <span
                                                                    v-for="(items, index) in JSON.parse(
                                                                        item.deviceBrand
                                                                    )"
                                                                    :key="index"
                                                                >
                                                                    {{ items | deviceBrand
                                                                    }}{{
                                                                        index == JSON.parse(item.deviceBrand).length - 1
                                                                            ? ''
                                                                            : ','
                                                                    }}
                                                                </span>
                                                            </span>
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 设备价格:</span>
                                                        <div v-if="item">
                                                            <span
                                                                v-if="
                                                                    item.devicePrice == '' ||
                                                                        item.devicePrice == null ||
                                                                        JSON.parse(item.devicePrice).length == 0
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <span v-else>
                                                                <span
                                                                    v-for="(items, index) in JSON.parse(
                                                                        item.devicePrice
                                                                    )"
                                                                    :key="index"
                                                                >
                                                                    {{ items | kuaishouPrice
                                                                    }}{{
                                                                        index == JSON.parse(item.devicePrice).length - 1
                                                                            ? ''
                                                                            : ','
                                                                    }}
                                                                </span>
                                                            </span>
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 商业兴趣:</span>
                                                        <div>
                                                            <span
                                                                v-if="
                                                                    item.businessInterest == '[]' ||
                                                                        item.businessInterest == null ||
                                                                        item.businessInterest == ''
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <div v-else>
                                                                <span
                                                                    v-for="(items, index) in JSON.parse(
                                                                        item.businessInterest
                                                                    )"
                                                                    :key="index"
                                                                >
                                                                    {{ items | business }}
                                                                    {{
                                                                        index ==
                                                                        JSON.parse(item.businessInterest).length - 1
                                                                            ? ''
                                                                            : ','
                                                                    }}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </a-col>
                                                </a-row>
                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 网红粉丝:</span>

                                                        <span
                                                            v-if="
                                                                item.fansStar == '[]' ||
                                                                    item.fansStar == null ||
                                                                    item.fansStar == ''
                                                            "
                                                        >
                                                            不限
                                                        </span>
                                                        <div v-else>
                                                            <span
                                                                v-for="(items, index) in JSON.parse(item.fansStar)"
                                                                :key="index"
                                                            >
                                                                {{ items | fansStarLabel }}
                                                                {{
                                                                    index == JSON.parse(item.fansStar).length - 1
                                                                        ? ''
                                                                        : ','
                                                                }}
                                                            </span>
                                                        </div>
                                                    </a-col>
                                                </a-row>
                                                <a-row v-if="item.platformOs == 1">
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> APP行为:</span>
                                                        <div v-if="item">
                                                            <span
                                                                v-if="
                                                                    (item.appIds == '[]' ||
                                                                        item.appIds == null ||
                                                                        item.appIds == '') &&
                                                                        (item.appInterest == '[]' ||
                                                                            item.appInterest == null ||
                                                                            item.appInterest == '')
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <div v-else>
                                                                <span
                                                                    v-if="
                                                                        item.appIds == '[]' ||
                                                                            item.appIds == null ||
                                                                            item.appIds == ''
                                                                    "
                                                                >
                                                                    <span
                                                                        v-for="(items, index) in JSON.parse(
                                                                            item.appInterest
                                                                        )"
                                                                        :key="index"
                                                                    >
                                                                        {{ items | optionsApp
                                                                        }}{{
                                                                            index ==
                                                                            JSON.parse(item.appInterest).length - 1
                                                                                ? ''
                                                                                : ','
                                                                        }}
                                                                    </span>
                                                                </span>
                                                                <span v-else>
                                                                    <span
                                                                        v-for="(items, index) in JSON.parse(
                                                                            item.appIds
                                                                        )"
                                                                        :key="index"
                                                                    >
                                                                        {{ items }}
                                                                    </span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>

                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
                                                        <div v-if="item">
                                                            <span
                                                                v-if="
                                                                    item.interestVideo == '[]' ||
                                                                        item.interestVideo == null ||
                                                                        item.interestVideo == ''
                                                                "
                                                            >
                                                                不限
                                                            </span>
                                                            <div v-else>
                                                                <span
                                                                    v-for="(items, index) in JSON.parse(
                                                                        item.interestVideo
                                                                    )"
                                                                    :key="index"
                                                                >
                                                                    {{ items | interestVideo
                                                                    }}{{
                                                                        index ==
                                                                        JSON.parse(item.interestVideo).length - 1
                                                                            ? ''
                                                                            : ','
                                                                    }}
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>

                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 网络环境:</span>
                                                        <div v-if="item">
                                                            {{
                                                                item.network == 1
                                                                    ? 'Wi-Fi'
                                                                    : item.network == 2
                                                                    ? '移动网络'
                                                                    : '不限'
                                                            }}
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label">
                                                            过滤已转换用户:</span
                                                        >
                                                        <div v-if="item">
                                                            {{
                                                                item.filterConvertedLevel | kuaishouFilterConvertedLevel
                                                            }}
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row>
                                                    <a-col :xl="24" :md="24" class="flex-main">
                                                        <span class="ant-descriptions-item-label"> 智能扩量:</span>
                                                        <div v-if="item">
                                                            {{ item.isOpen == 0 ? '关闭' : '开启' }}
                                                        </div>
                                                        <p title="-" v-else>-</p>
                                                    </a-col>
                                                </a-row>
                                            </div>
                                        </a-card>
                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-card>
                    <a-card class="search-box step-jump" title="创意信息">
                        <a-button
                            type="primary"
                            slot="extra"
                            @click="originalityEdit"
                            :disabled="!getFormData('formProject', 'accountId')"
                            >编辑</a-button
                        >
                        <a-form-item v-bind="tailFormItemLayoutElse" style="margin-left:1.15%">
                            <a-descriptions>
                                <a-descriptions-item label="创意制作方式">
                                    <span v-if="showCreativeData">
                                        {{ showCreativeData.unitType | unitType }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label=" 广告位置">
                                    <span v-if="showCreativeData && showCreativeData.sceneId">
                                        <span v-for="(item, index) in showCreativeData.sceneId" :key="index">
                                            {{ item | kuaishouSceneId
                                            }}{{ index === showCreativeData.sceneId.length - 1 ? '' : ',' }}
                                        </span>
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="关联封面数">
                                    <span v-if="showCreativeData && showCreativeData.imageCnt">
                                        {{ showCreativeData.imageCnt }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="自定义计划数量/组数量">
                                    <span
                                        v-if="
                                            showCreativeData &&
                                                showCreativeData.customPlanCnt &&
                                                showCreativeData.customUnitCnt &&
                                                showCreativeData.unitType != 7
                                        "
                                    >
                                        {{ showCreativeData.customPlanCnt + '/' + showCreativeData.customUnitCnt }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="程序化计划数量/组数量">
                                    <span
                                        v-if="
                                            showCreativeData &&
                                                showCreativeData.programUnitCnt &&
                                                showCreativeData.programPlanCnt &&
                                                showCreativeData.unitType != 4
                                        "
                                    >
                                        {{ showCreativeData.programPlanCnt + '/' + showCreativeData.programUnitCnt }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="素材类型">
                                    <span v-if="showCreativeData">
                                        {{ showCreativeData.channelType | channelType }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="素材挖掘">
                                    <span v-if="showCreativeData">
                                        {{ showCreativeData.assetMining === 0 ? '关闭' : '开启' }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="智能抽帧">
                                    <span v-if="showCreativeData">
                                        {{ showCreativeData.smartCover === 0 ? '关闭' : '开启' }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <!-- <a-descriptions-item label="素材选取">
                                    <span v-if="showCreativeData">
                                        不限
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item> -->

                                <a-descriptions-item label="创意分类">
                                    <span v-if="showCreativeData && showCreativeData.creativeCategory">
                                        <a-cascader
                                            :options="createOptions"
                                            v-model="showCreativeData.creativeCategory"
                                            disabled
                                            :fieldNames="fieldNames"
                                            placeholder="请选择创意分类"
                                        />
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="行动号召">
                                    <span v-if="showCreativeData && showCreativeData.actionBarText">
                                        {{ showCreativeData.actionBarText.join() }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="创意标签" :span="2">
                                    <span
                                        v-if="
                                            showCreativeData &&
                                                showCreativeData.creativeTag &&
                                                showCreativeData.creativeTag.length > 0
                                        "
                                    >
                                        {{ showCreativeData.creativeTag.join() }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="广告语" :span="3">
                                    <span v-if="showCreativeData">
                                        <span v-for="(item, index) in descriptionList" :key="index">
                                            {{ item.value }}{{ index === descriptionList.length - 1 ? '' : ';' }}
                                        </span>
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                            </a-descriptions>
                        </a-form-item>
                    </a-card>
                    <a-card class="search-box step-jump" title="素材信息">
                        <a-form layout="horizontal" v-bind="formItemLayout" :form="formMaterial">
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item>
                                        <span slot="label">
                                            <a-tooltip>
                                                <template slot="title">
                                                    自动投放自动选取素材，在此处可限制选取素材逻辑。上新素材不可取消勾选，“高质量素材”“遗漏素材”“历史素材打捞”可随意组合使用
                                                </template>
                                                <a-icon type="question-circle" />
                                            </a-tooltip>
                                            素材选取
                                        </span>
                                        <a-checkbox-group
                                            v-decorator="[
                                                'sourceMaterial',
                                                {
                                                    rules: [
                                                        {
                                                            required: true,
                                                            message: '转化目标必选'
                                                        }
                                                    ],
                                                    initialValue: [1]
                                                }
                                            ]"
                                        >
                                            <a-checkbox :value="1" disabled>
                                                上新素材
                                            </a-checkbox>
                                            <a-checkbox :value="2">
                                                高质量素材
                                            </a-checkbox>
                                            <a-checkbox :value="3">
                                                遗漏素材
                                            </a-checkbox>
                                            <a-checkbox :value="4">
                                                历史打捞
                                            </a-checkbox>
                                        </a-checkbox-group>
                                    </a-form-item>
                                    <a-form-item>
                                        <span slot="label">
                                            素材匹配逻辑
                                        </span>
                                        <a-radio-group
                                            :disabled="!!$route.query.id"
                                            v-decorator="[
                                                'matchType',
                                                {
                                                    rules: [
                                                        {
                                                            required: true,
                                                            message: '转化目标必选'
                                                        }
                                                    ],
                                                    initialValue: 1
                                                }
                                            ]"
                                        >
                                            <a-radio :value="1">
                                                定向匹配
                                            </a-radio>
                                            <a-radio :value="2">
                                                素材匹配
                                            </a-radio>
                                        </a-radio-group>
                                    </a-form-item>

                                    <a-form-item v-if="appDetail && !appDetail.useChannel">
                                        <span slot="label">
                                            <a-tooltip>
                                                <template slot="title">
                                                    若有多个关键字，请用"-"隔开
                                                </template>
                                                <a-icon type="question-circle" />
                                            </a-tooltip>
                                            素材关键字
                                        </span>
                                        <a-textarea
                                            class="rending"
                                            placeholder="请输入素材关键字"
                                            v-decorator="['materialKeyword']"
                                            :autosize="{ minRows: 2, maxRows: 6 }"
                                        ></a-textarea>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-card>
                    <div style="display: flex; justify-content: flex-end; margin-bottom: 100px">
                        <div>
                            <a-button
                                type="primary"
                                style="margin-right: 15px"
                                @click="handleSubmit"
                                :loading="sumbitLoading"
                                :disabled="disabled"
                            >
                                创建
                            </a-button>
                            <a-button @click="clearAllData"> 取消 </a-button>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>

        <!-- 基本信息编辑 -->
        <a-drawer
            :width="800"
            :visible="formInformationVisible"
            :body-style="{ paddingBottom: '80px' }"
            @close="closeFormInfo"
        >
            <h2 slot="title" style="margin-bottom: 0">设置基本信息</h2>
            <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formInformation">
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="计划命名规范">
                            <a-input
                                v-decorator="[
                                    'campaignName',
                                    { rules: [{ required: true, message: '请填写计划的命名规则' }] }
                                ]"
                                allow-clear
                                id="campaignName"
                            />

                            <a-tag color="#2db7f5" @click="getChangeAll('日期', 'formInformation', 'campaignName')"
                                >+日期</a-tag
                            >
                            <!-- <a-tag
                                            color="#2db7f5"
                                            @click="getChangeAll('渠道号', 'formInformation', 'campaignName')"
                                            >+渠道号</a-tag
                                        >
                                        <a-tag
                                            color="#2db7f5"
                                            @click="getChangeAll('横竖版', 'formInformation', 'campaignName')"
                                            >+横竖版</a-tag
                                        > -->
                            <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formInformation', 'campaignName')"
                                >+渠道号</a-tag
                            >
                            <a-tag
                                color="#2db7f5"
                                @click="getChangeAll('渠道号名称', 'formInformation', 'campaignName')"
                                >+渠道号名称</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('序号', 'formInformation', 'campaignName')"
                                >+序号</a-tag
                            >
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="计划单日预算">
                            <a-radio-group v-model="budgetType" button-style="solid">
                                <a-radio-button value="1">不限</a-radio-button>
                                <a-radio-button value="2">统一预算</a-radio-button>
                            </a-radio-group>
                            <a-input-number
                                v-if="budgetType === '2'"
                                v-decorator="[
                                    'campaignDayBudget',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '不小于500， 不超过100000000，仅支持输入自然数'
                                            }
                                        ]
                                    }
                                ]"
                                :min="500"
                                :precision="0"
                                :max="100000000"
                                style="width: 100%"
                                placeholder="不小于500， 不超过100000000，仅支持输入自然数"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="广告计划状态">
                            <a-radio-group
                                v-decorator="[
                                    'campaignStatus',
                                    {
                                        rules: [
                                            {
                                                required: true
                                            }
                                        ],
                                        initialValue: 1
                                    }
                                ]"
                                button-style="solid"
                            >
                                <a-radio-button :value="1">投放</a-radio-button>
                                <a-radio-button :value="2">暂停</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="组命名规范">
                            <a-input
                                v-decorator="[
                                    'groupName',
                                    { rules: [{ required: true, message: '请填写组命名规范' }] }
                                ]"
                                allow-clear
                                id="groupName"
                            />

                            <a-tag color="#2db7f5" @click="getChangeAll('日期', 'formInformation', 'groupName')"
                                >+日期</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('素材名称', 'formInformation', 'groupName')"
                                >+素材名称</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('应用包名', 'formInformation', 'groupName')"
                                >+应用包名</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('定向包名', 'formInformation', 'groupName')"
                                >+定向包名</a-tag
                            >
                            <!-- <a-tag color="#2db7f5" @click="getChangeAll('序号', 'formInformation', 'groupName')"
                                >+序号</a-tag
                            > -->
                            <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'formInformation', 'groupName')"
                                >+创意制作方式</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'formInformation', 'groupName')"
                                >+广告位置</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formInformation', 'groupName')"
                                >+渠道号</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('渠道号名称', 'formInformation', 'groupName')"
                                >+渠道号名称</a-tag
                            >
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="组单日预算">
                            <a-radio-group v-model="dayBudgetType" button-style="solid">
                                <a-radio-button value="1">不限</a-radio-button>
                                <a-radio-button value="2">统一预算</a-radio-button>
                            </a-radio-group>
                            <a-input-number
                                v-if="dayBudgetType === '2'"
                                v-decorator="[
                                    'unitDayBudget',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '不小于100， 不超过100000000，仅支持输入自然数'
                                            }
                                        ]
                                    }
                                ]"
                                style="width: 100%"
                                placeholder="不小于100， 不超过100000000，仅支持输入自然数"
                                :min="100"
                                :precision="0"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="广告组状态">
                            <a-radio-group
                                v-decorator="[
                                    'groupStatus',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '不小于500， 不超过100000000，仅支持输入自然数'
                                            }
                                        ],
                                        initialValue: 1
                                    }
                                ]"
                                button-style="solid"
                            >
                                <a-radio-button :value="1">投放</a-radio-button>
                                <a-radio-button :value="2">暂停</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <div
                :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="closeFormInfo"> 取消 </a-button>
                <a-button type="primary" @click="submitFormInfo"> 提交 </a-button>
            </div>
        </a-drawer>

        <!-- 目标应用编辑 -->
        <a-drawer :width="800" :visible="targetAppVisible" :body-style="{ paddingBottom: '80px' }" @close="closeUnit">
            <!-- @close="closeUnit('createForm')" -->
            <h2 slot="title" style="margin-bottom: 0">目标应用</h2>
            <!-- class="create-info" -->
            <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formTargetApp">
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="系统平台">
                            <a-radio-group
                                v-decorator="['platformOs', { initialValue: 1 }]"
                                button-style="solid"
                                @change="changeType"
                            >
                                <!-- <a-radio-button :value="0">不限</a-radio-button> -->
                                <a-radio-button :value="1">Android</a-radio-button>
                                <a-radio-button :value="2">IOS</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                <a-tooltip>
                                    <template slot="title">
                                        单应用情况下 账户对应一个应用。多应用情况下 账户可对应多个应用
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>
                                单/多应用
                            </span>
                            <a-radio-group
                                v-decorator="['singleAppid', { initialValue: 1 }]"
                                button-style="solid"
                                @change="clearAppId"
                            >
                                <a-radio-button :value="1">单应用</a-radio-button>
                                <a-radio-button :value="0" disabled>多应用</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                <a-tooltip>
                                    <template slot="title">
                                        调起链接需要加白使用 若多应用的情况下在创建时则一一匹配，若账户未加白
                                        则不使用调起链接
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>
                                调起链接
                            </span>

                            <a-switch
                                default-checked
                                v-model="uriCheck"
                                :disabled="getFormData('formProject', 'campaignType') == 7"
                            />
                            <span style="color:red" v-if="getFormData('formProject', 'campaignType') != 7">
                                需加白使用</span
                            >
                            <div v-if="uriCheck">
                                <a-input
                                    placeholder="请填写链接"
                                    v-decorator="[
                                        'schemaUri',
                                        {
                                            rules: [
                                                {
                                                    required:
                                                        uriCheck && getFormData('formProject', 'campaignType') == 7,
                                                    message: '链接不能为空'
                                                }
                                            ]
                                        }
                                    ]"
                                />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getFormData('formProject', 'campaignType') == 7">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                H5链接
                            </span>

                            <a-input
                                placeholder="请填写链接"
                                v-decorator="['url', { rules: [{ required: true, message: '链接不能为空' }] }]"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="选择应用">
                            <a-select
                                v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
                                showSearch
                                allowClear
                                placeholder="选择应用目标"
                                optionFilterProp="children"
                                style="width: 500px"
                                :filterOption="filterOption"
                                @change="appIdChange"
                                :mode="getFormData('formTargetApp', 'singleAppid') == 1 ? 'defalut' : 'multiple'"
                                :maxTagCount="1"
                                :labelInValue="true"
                            >
                                <a-select-option v-if="getFormData('formTargetApp', 'singleAppid') == 0" :value="0"
                                    >选择以下全部</a-select-option
                                >
                                <a-select-option
                                    v-for="appModel in appList"
                                    :key="appModel.appId"
                                    :value="appModel.appId"
                                >
                                    {{ appModel.platform | platform }}&#12288;&#12288;&#12288;{{
                                        appModel.appName
                                    }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}
                                </a-select-option>
                            </a-select>
                            <a-button type="primary" @click="addApplication" :loading="tongbuLoading"
                                >刷新应用</a-button
                            >
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                <a-tooltip>
                                    <template slot="title">
                                        渠道号开启后，会自动识别选中应用所绑定的监测链接、调起链接等，无需运营手动输入
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>
                                使用渠道号
                            </span>

                            <a-switch default-checked v-model="useChannel" @change="changeChannel" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="channelData && channelData.channel.isHaveItem>-1">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                是否使用单品
                            </span>

                            <a-radio-group v-model="channelData.channel.isHaveItem" disabled>
                                <a-radio-button :value="1">是</a-radio-button>
                                <a-radio-button :value="0">否</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="channelData && channelData.channel.usageLevel">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                渠道号作用维度
                            </span>

                            <a-radio-group button-style="solid" v-model="channelData.channel.usageLevel" disabled>
                                <a-radio-button value="account">账户</a-radio-button>
                                <a-radio-button value="plan">计划</a-radio-button>
                                <a-radio-button value="group">组</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row
                    :gutter="16"
                    v-if="
                        channelData && channelData.channel.usageLevel && channelData.list && channelData.list.length > 0
                    "
                >
                    <a-col :span="24">
                        <a-form-item v-bind="tailFormDrawerItemLayout" style="margin-left:-12%">
                            <a-collapse accordion ref="collapse">
                                <template v-for="(item, index) in channelData.list">
                                    <a-collapse-panel
                                        :forceRender="true"
                                        :header="item.appName + '(应用标记)'"
                                        style="background: #f9f9fa;border-radius: 4px;margin-bottom:15px;overflow: hidden;border: 1px solid #d9d9d9;"
                                    >
                                        <a-form-item label="渠道号" v-bind="formItemLayout">
                                            {{ item.channelCode }}
                                        </a-form-item>
                                        <a-form-item label="素材关键字" v-bind="formItemLayout">
                                            {{ item.keyword }}
                                        </a-form-item>
                                    </a-collapse-panel>
                                </template>
                            </a-collapse>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="18">
                        <a-form-item v-bind="formDrawerItemLayout">
                            <a-table
                                ref="table"
                                size="middle"
                                bordered
                                :dataSource="multipleBidDataDrawer"
                                :pagination="false"
                                style="width:180%"
                                :scroll="!useChannel ? { x: 1200 } : { x: true }"
                            >
                                <a-table-column
                                    key="appName"
                                    :width="!useChannel ? '10%' : true"
                                    data-index="appName"
                                    title="应用名称"
                                    align="center"
                                />
                                <a-table-column
                                    :width="!useChannel ? '10%' : true"
                                    key="appVersion"
                                    data-index="appVersion"
                                    title="应用标记"
                                    align="center"
                                />
                                <a-table-column
                                    v-if="!useChannel"
                                    width="20%"
                                    key="clickTrackUrl"
                                    data-index="clickTrackUrl"
                                    title="第三方点击监测链接"
                                    align="center"
                                    :ellipsis="true"
                                >
                                    <template slot-scope="text, record">
                                        <editable-cell
                                            :text="text"
                                            @change="onCellChange(record.id, 'clickTrackUrl', $event)"
                                        />
                                    </template>
                                </a-table-column>
                                <!-- <a-table-column
                                    v-if="!useChannel"
                                    width="20%"
                                    key="impressionUrl"
                                    data-index="impressionUrl"
                                    title="第三方开始播放监测链接"
                                    align="center"
                                    :ellipsis="true"
                                >
                                    <template slot-scope="text, record">
                                        <editable-cell
                                            :text="text"
                                            @change="onCellChange(record.id, 'impressionUrl', $event)"
                                        />
                                    </template>
                                </a-table-column> -->
                                <a-table-column
                                    v-if="!useChannel"
                                    width="20%"
                                    key="actionbarClickUrl"
                                    data-index="actionbarClickUrl"
                                    title="第三方点击按钮监测链接"
                                    align="center"
                                    :ellipsis="true"
                                >
                                    <template slot-scope="text, record">
                                        <editable-cell
                                            :text="text"
                                            @change="onCellChange(record.id, 'actionbarClickUrl', $event)"
                                        />
                                    </template>
                                </a-table-column>
                                <!-- <a-table-column
                                    v-if="!useChannel"
                                    width="20%"
                                    key="adPhotoPlayedT3sUrl"
                                    data-index="adPhotoPlayedT3sUrl"
                                    title="第三方有效播放监测链接"
                                    align="center"
                                    :ellipsis="true"
                                >
                                    <template slot-scope="text, record">
                                        <editable-cell
                                            :text="text"
                                            @change="onCellChange(record.id, 'adPhotoPlayedT3sUrl', $event)"
                                        />
                                    </template>
                                </a-table-column> -->
                                <a-table-column
                                    v-if="useChannel"
                                    width="10%"
                                    key="action"
                                    data-index="action"
                                    title="操作"
                                    align="center"
                                    :ellipsis="true"
                                >
                                    <template slot-scope="text, record">
                                        <a @click="lookChannel(record.appName)">详情</a>
                                    </template>
                                </a-table-column>
                            </a-table>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="转化跟踪">
                            <span v-if="convertId && !convert" style="display:block;font-size:16px"
                                >已选择转化目标: {{ convertId.label }}</span
                            >
                            <a-button type="primary" @click="showConvert">{{
                                convertId ? '更换转化目标' : '选择转化目标'
                            }}</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16" v-if="getFormData('formTargetApp', 'platformOs') != 2">
                    <a-col :span="16">
                        <a-form-item v-bind="tailFormDrawerItemLayout">
                            <a-checkbox
                                v-decorator="[
                                    'useAppMarket',
                                    {
                                        valuePropName: 'checked',
                                        initialValue: false
                                    }
                                ]"
                            >
                                优先从系统应用商店下载
                            </a-checkbox>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row
                    :gutter="16"
                    v-if="
                        getFormData('formTargetApp', 'platformOs') != 2 && getFormData('formTargetApp', 'useAppMarket')
                    "
                >
                    <a-col :span="24">
                        <a-form-item v-bind="tailFormDrawerItemLayout" style="margin-left:-12%">
                            请勾选投放应用已上架的应用商店（默认全选）
                            <a-checkbox-group
                                v-decorator="[
                                    'appStore',
                                    {
                                        initialValue: []
                                    }
                                ]"
                            >
                                <a-checkbox value="huawei">华为</a-checkbox>
                                <a-checkbox value="oppo">OPPO</a-checkbox>
                                <a-checkbox value="vivo">VIVO</a-checkbox>
                                <a-checkbox value="xiaomi">小米</a-checkbox>
                                <a-checkbox value="meizu">魅族</a-checkbox>
                                <a-checkbox value="smartisan">锤子</a-checkbox>
                            </a-checkbox-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="应用下载详情页">
                            <a-select
                                v-decorator="['siteId']"
                                showSearch
                                allowClear
                                placeholder="选择应用下载详情页"
                                optionFilterProp="children"
                                :filterOption="filterOption"
                                style="width:400px"
                            >
                                <a-select-option
                                    v-for="appModel in siteList"
                                    :key="appModel.siteId"
                                    :value="appModel.siteId"
                                >
                                    {{ appModel.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <div
                :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="closeUnit"> 取消 </a-button>
                <a-button type="primary" @click="submitApp"> 提交 </a-button>
            </div>
        </a-drawer>

        <!-- 定向包选择 -->
        <a-drawer
            :width="800"
            :visible="targetPersonVisible"
            :body-style="{ paddingBottom: '80px' }"
            @close="closePerson"
        >
            <!-- @close="closeUnit('createForm')" -->
            <h2 slot="title" style="margin-bottom: 0">定向包选择</h2>
            <span style="color:red;">该页面仅展示与目标应用所选系统相同或包含目标应用系统的定向包</span>
            <div style="display: flex;justify-content:space-between;margin-top:10px">
                <div>
                    <a-input placeholder="输入定向包名称关键词" style="width:50%" v-model="searchTemplate" />
                    <a-button
                        type="primary"
                        :style="{ marginRight: '8px', marginLeft: '8px' }"
                        @click="
                            ipagination.current = 1
                            getTargetPerson()
                        "
                    >
                        查询
                    </a-button>
                    <a-button
                        @click="
                            searchTemplate = null
                            ipagination.current = 1
                            checkPerson = checkPersonElse
                            getTargetPerson()
                        "
                    >
                        重置
                    </a-button>
                </div>
                <div style="display:flex">
                    <div style="line-height: 32px;font-weight: 700;margin:0 20px;">已选择({{ sumContent }})</div>
                    <a-button type="primary" @click="addNewTemplate">
                        新增定向包
                    </a-button>
                </div>
            </div>
            <a-checkbox-group v-model="checkPerson" style="width: 100%;" @change="setVideoData">
                <div class="card-person-drawer info-detail">
                    <a-card
                        :title="item.targetName"
                        class="card-person card-item"
                        v-for="(item, index) in personList"
                        :key="item.id"
                    >
                        <div slot="extra">
                            <a-checkbox :value="item.id" @change="setData(item.id)"></a-checkbox>
                        </div>
                        <template slot="actions" class="ant-card-actions">
                            <a-icon key="edit" type="edit" @click="editNewTemplate(item)" />
                            <a-icon key="delete" type="delete" @click="deleteNewTemplate(item.id)" />
                        </template>

                        <div class="card-main-case">
                            <a-row style="margin-top:10px">
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 人群:</span>
                                    <div v-if="item" style="word-break: break-all;">
                                        <span
                                            v-if="
                                                (!item.population && !item.excludePopulation) ||
                                                    (item.population == '[]' && item.excludePopulation == '[]')
                                            "
                                        >
                                            不限
                                        </span>
                                        <span
                                            v-else-if="
                                                item.population &&
                                                    (!item.excludePopulation || item.excludePopulation == '[]')
                                            "
                                        >
                                            定向人群：{{ JSON.parse(item.population).join() }}
                                        </span>
                                        <span
                                            v-else-if="
                                                item.excludePopulation && (!item.population || item.population == '[]')
                                            "
                                        >
                                            排除人群：{{ JSON.parse(item.excludePopulation).join() }}
                                        </span>
                                        <span v-else>
                                            定向人群：{{ JSON.parse(item.population).join() }} <br />排除人群：{{
                                                JSON.parse(item.excludePopulation).join()
                                            }}</span
                                        >
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                            <a-row style="margin-top:10px">
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 地区:</span>
                                    <div v-if="item">
                                        <span
                                            v-if="
                                                item.region == '' ||
                                                    item.region == null ||
                                                    JSON.parse(item.region).length == 0
                                            "
                                        >
                                            不限
                                        </span>
                                        <div v-else>
                                            {{ item.regionName.join(',') }}
                                        </div>
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 年龄:</span>
                                    <div v-if="item">
                                        <span
                                            v-if="
                                                (item.agesRange == '[]' || item.agesRange == null) &&
                                                    (item.min == -1 || item.min == null) &&
                                                    (item.max == -1 || item.max == null)
                                            "
                                        >
                                            不限
                                        </span>
                                        <div v-else>
                                            <span v-if="item.agesRange == '[]' || item.agesRange == null">
                                                {{ item.min + '岁~' + item.max + '岁' }}
                                            </span>
                                            <span v-else>
                                                <span v-for="(items, index) in JSON.parse(item.agesRange)" :key="index">
                                                    {{ items | kuaishouAge
                                                    }}{{ index == JSON.parse(item.agesRange).length - 1 ? '' : ',' }}
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>

                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 性别:</span>
                                    <div v-if="item">
                                        {{ item.gender == 1 ? '女' : item.gender == 2 ? '男' : '不限' }}
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 最低版本:</span>
                                    <div v-if="item">
                                        {{
                                            item.platformOs == 1
                                                ? 'Android系统(' +
                                                  (item.androidOsv == 3 ? '不限)' : item.androidOsv + 'x+)')
                                                : item.platformOs == 2
                                                ? 'IOS系统(' + (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
                                                : '不限'
                                        }}
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>

                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 设备品牌:</span>
                                    <div v-if="item">
                                        <span
                                            v-if="
                                                item.deviceBrand == '' ||
                                                    item.deviceBrand == null ||
                                                    JSON.parse(item.deviceBrand).length == 0
                                            "
                                        >
                                            不限
                                        </span>
                                        <span v-else>
                                            <span v-for="(items, index) in JSON.parse(item.deviceBrand)" :key="index">
                                                {{ items | deviceBrand
                                                }}{{ index == JSON.parse(item.deviceBrand).length - 1 ? '' : ',' }}
                                            </span>
                                        </span>
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 设备价格:</span>
                                    <div v-if="item">
                                        <span
                                            v-if="
                                                item.devicePrice == '' ||
                                                    item.devicePrice == null ||
                                                    JSON.parse(item.devicePrice).length == 0
                                            "
                                        >
                                            不限
                                        </span>
                                        <span v-else>
                                            <span v-for="(items, index) in JSON.parse(item.devicePrice)" :key="index">
                                                {{ items | kuaishouPrice
                                                }}{{ index == JSON.parse(item.devicePrice).length - 1 ? '' : ',' }}
                                            </span>
                                        </span>
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 商业兴趣:</span>
                                    <div>
                                        <span
                                            v-if="
                                                item.businessInterest == '[]' ||
                                                    item.businessInterest == null ||
                                                    item.businessInterest == ''
                                            "
                                        >
                                            不限
                                        </span>
                                        <div v-else>
                                            <span
                                                v-for="(items, index) in JSON.parse(item.businessInterest)"
                                                :key="index"
                                            >
                                                {{ items | business }}
                                                {{ index == JSON.parse(item.businessInterest).length - 1 ? '' : ',' }}
                                            </span>
                                        </div>
                                    </div>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 网红粉丝:</span>

                                    <span v-if="item.fansStar == '[]' || item.fansStar == null || item.fansStar == ''">
                                        不限
                                    </span>
                                    <div v-else>
                                        <span v-for="(items, index) in JSON.parse(item.fansStar)" :key="index">
                                            {{ items | fansStarLabel }}
                                            {{ index == JSON.parse(item.fansStar).length - 1 ? '' : ',' }}
                                        </span>
                                    </div>
                                </a-col>
                            </a-row>
                            <a-row v-if="item.platformOs == 1">
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> APP行为:</span>
                                    <div v-if="item">
                                        <span
                                            v-if="
                                                (item.appIds == '[]' || item.appIds == null || item.appIds == '') &&
                                                    (item.appInterest == '[]' ||
                                                        item.appInterest == null ||
                                                        item.appInterest == '')
                                            "
                                        >
                                            不限
                                        </span>
                                        <div v-else>
                                            <span
                                                v-if="item.appIds == '[]' || item.appIds == null || item.appIds == ''"
                                            >
                                                <span
                                                    v-for="(items, index) in JSON.parse(item.appInterest)"
                                                    :key="index"
                                                >
                                                    {{ items | optionsApp
                                                    }}{{ index == JSON.parse(item.appInterest).length - 1 ? '' : ',' }}
                                                </span>
                                            </span>
                                            <span v-else>
                                                <span v-for="(items, index) in JSON.parse(item.appIds)" :key="index">
                                                    {{ items }}
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>

                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
                                    <div v-if="item">
                                        <span
                                            v-if="
                                                item.interestVideo == '[]' ||
                                                    item.interestVideo == null ||
                                                    item.interestVideo == ''
                                            "
                                        >
                                            不限
                                        </span>
                                        <div v-else>
                                            <span v-for="(items, index) in JSON.parse(item.interestVideo)" :key="index">
                                                {{ items | interestVideo
                                                }}{{ index == JSON.parse(item.interestVideo).length - 1 ? '' : ',' }}
                                            </span>
                                        </div>
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>

                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 网络环境:</span>
                                    <div v-if="item">
                                        {{ item.network == 1 ? 'Wi-Fi' : item.network == 2 ? '移动网络' : '不限' }}
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 过滤已转换用户:</span>
                                    <div v-if="item">
                                        {{ item.filterConvertedLevel | kuaishouFilterConvertedLevel }}
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :xl="24" :md="24" class="flex-main">
                                    <span class="ant-descriptions-item-label"> 智能扩量:</span>
                                    <div v-if="item">
                                        {{ item.isOpen == 0 ? '关闭' : '开启' }}
                                    </div>
                                    <p title="-" v-else>-</p>
                                </a-col>
                            </a-row>
                        </div>
                    </a-card>
                </div>
            </a-checkbox-group>
            <a-pagination
                size="small"
                :showTotal="ipagination.showTotal"
                style="float: right"
                v-if="personList.length > 0"
                showQuickJumper
                :pageSize.sync="ipagination.pageSize"
                :total="ipagination.total"
                v-model="ipagination.current"
                @change="getDataSource"
            />
            <div
                :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="closePerson"> 取消 </a-button>
                <a-button type="primary" @click="submitPerson" :loading="personLoading"> 提交 </a-button>
            </div>
        </a-drawer>

        <!-- 创意信息编辑 -->
        <a-drawer
            :width="900"
            :visible="optimizeVisible"
            :body-style="{ paddingBottom: '80px' }"
            @close="closeCreative"
        >
            <!-- @close="closeUnit('createForm')" -->
            <h2 slot="title" style="margin-bottom: 0">创意信息</h2>
            <!-- class="create-info" -->
            <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formOriginality">
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="创意制作方式">
                            <a-radio-group
                                button-style="solid"
                                @change="unitTypeCheck"
                                v-decorator="[
                                    'unitType',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '创意制作方式必选'
                                            }
                                        ],
                                        initialValue: 0
                                    }
                                ]"
                            >
                                <a-radio-button :value="0">不限</a-radio-button>
                                <a-radio-button :value="4">自定义</a-radio-button>
                                <a-radio-button :value="7">程序化</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16" style="width: 110%;margin-left: -11%;">
                        <a-form-item label="广告位置">
                            <!-- { label: '视频播放页广告', value: 3 }, -->
                            <checkBoxGroup
                                :options="[
                                    { label: '优选广告位', value: 1 },
                                    { label: '上下滑大屏广告', value: 6 },

                                    { label: '激励视频广告', value: 24 },
                                    { label: '联盟广告', value: 5 }
                                ]"
                                v-decorator="[
                                    'sceneId',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '转化目标必选'
                                            }
                                        ],
                                        initialValue: [1]
                                    }
                                ]"
                                @change="changeData"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
                    <a-col :span="16">
                        <a-form-item label="自定义计划数量">
                            <a-input-number
                                style="width:200px"
                                :max="600"
                                :step="1"
                                :min="1"
                                v-decorator="[
                                    'customPlanCnt',
                                    { initialValue: 3, rules: [{ required: true, message: '请填写自定义计划数量' }] }
                                ]"
                                @change="setImageCnt"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                <a-tooltip>
                                    <template slot="title">
                                        每日创建组数量为广告计划数量*广告组，自定义创意组每日最多600
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>
                                自定义组数量
                            </span>
                            <a-input-number
                                style="width:200px"
                                :max="unitCntMax"
                                :step="1"
                                :min="1"
                                v-decorator="[
                                    'customUnitCnt',
                                    { initialValue: 120, rules: [{ required: true, message: '请填写自定义组数量' }] }
                                ]"
                                @change="setCreativeCntMax"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
                    <a-col :span="16">
                        <a-form-item label="自定义创意数量">
                            <a-input-number
                                style="width:200px"
                                :max="creativeCntMax"
                                :step="1"
                                :min="1"
                                v-decorator="[
                                    'imageCnt',
                                    { initialValue: 5, rules: [{ required: true, message: '请填写自定义创意数量' }] }
                                ]"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 4">
                    <a-col :span="16">
                        <a-form-item label="程序化计划数量">
                            <a-input-number
                                v-decorator="[
                                    'programPlanCnt',
                                    { initialValue: 3, rules: [{ required: true, message: '请填写程序化计划数量' }] }
                                ]"
                                style="width:200px"
                                placeholder="仅支持输入自然数"
                                :max="300"
                                :precision="0"
                                :step="1"
                                @change="setProgramUnitCnt"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 4">
                    <a-col :span="16">
                        <a-form-item>
                            <span slot="label">
                                <a-tooltip>
                                    <template slot="title">
                                        每日创建组数量为广告计划数量*广告组，程序化创意组最多300
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>
                                程序化组数量
                            </span>
                            <a-input-number
                                v-decorator="[
                                    'programUnitCnt',
                                    { initialValue: 100, rules: [{ required: true, message: '请填写程序化组数量' }] }
                                ]"
                                style="width: 200px"
                                placeholder="仅支持输入自然数"
                                :max="imageCntMax"
                                :precision="0"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="素材类型">
                            <a-radio-group
                                button-style="solid"
                                v-decorator="['channelType', { rules: [{ required: true }], initialValue: 2 }]"
                            >
                                <a-radio-button :value="2">不限</a-radio-button>
                                <a-radio-button :value="0">内部</a-radio-button>
                                <a-radio-button :value="1">素造</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="素材挖掘">
                            <a-radio-group
                                button-style="solid"
                                v-decorator="['assetMining', { rules: [{ required: true }], initialValue: 1 }]"
                            >
                                <a-radio-button :value="1">开启</a-radio-button>
                                <a-radio-button :value="0">关闭</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="智能抽帧">
                            <a-radio-group
                                button-style="solid"
                                v-decorator="['smartCover', { rules: [{ required: true }], initialValue: 1 }]"
                            >
                                <a-radio-button :value="1">开启</a-radio-button>
                                <a-radio-button :value="0">关闭</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="行动号召">
                            <a-select
                                mode="multiple"
                                v-decorator="[
                                    'actionBarText',
                                    { rules: [{ required: true, message: '请选择行动号召按钮文案' }] }
                                ]"
                                showSearch
                                allowClear
                                placeholder="选择行动号召按钮文案"
                                optionFilterProp="children"
                                :filterOption="filterOption"
                            >
                                <a-select-option
                                    v-for="appModel in actionBarTextList"
                                    :key="appModel.id"
                                    :value="appModel.actionBarText"
                                >
                                    {{ appModel.actionBarText }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="广告语">
                            <span style="color:red">
                                广告语最多30条，超过30条的部分将被截取;
                                <br />
                                每条广告语最多30字,超过30字将截取
                            </span>

                            <div style="max-height:200px;overflow-y:auto;border:1px solid #f2f2f2;padding:10px 0">
                                <div style="position:relative" v-for="(item, index) in descriptionList" :key="index">
                                    <a-textarea
                                        class="rending"
                                        placeholder="请输入广告语"
                                        @change="descriptionchange(item.value, index)"
                                        v-model="item.value"
                                        :autosize="{ minRows: 2, maxRows: 6 }"
                                        :max-length="30"
                                        style=" width: 80%;"
                                    ></a-textarea>
                                    <p
                                        style="
                                        font-size: 12px;
                                        color: #b6bbc7;
                                        letter-spacing: 0.3px;
                                        text-align: right;
                                        line-height: 30px;
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        width: 80%;
                                        margin-bottom: 0;
                                        "
                                    >
                                        {{ item.value.length }}/30
                                        <!-- {{ getFormData('description').length  }}/30 -->
                                    </p>
                                    <div style="position:absolute;right:0;top:-10px">
                                        <a-icon
                                            type="plus"
                                            @click="addDescription()"
                                            style="margin-right:15px"
                                            v-if="descriptionList.length < 30"
                                        />
                                        <a-icon
                                            type="minus"
                                            @click="removeDescription(index)"
                                            v-if="descriptionList.length > 1"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div style="display:flex">
                                <a style="margin-right:10px" @click="selectDescription">选择广告语</a>
                                <a @click="importExcel">导入广告语</a>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="创意分类">
                            <a-cascader
                                :options="createOptions"
                                v-decorator="[
                                    'creativeCategory',
                                    {
                                        initialValue: []
                                    }
                                ]"
                                :fieldNames="fieldNames"
                                placeholder="请选择创意分类"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="创意标签">
                            <a-select
                                mode="tags"
                                style="width: 100%"
                                placeholder="按回车生成标签"
                                v-decorator="[
                                    'creativeTag',
                                    {
                                        initialValue: [],
                                        rules: [
                                            {
                                                validator: creativeTagValid
                                            }
                                        ]
                                    }
                                ]"
                                dropdownClassName="display-none-selset"
                                :token-separators="[',', ' ', '，']"
                            >
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <div
                :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="closeCreative"> 取消 </a-button>
                <a-button type="primary" @click="submitCreative"> 提交 </a-button>
            </div>
        </a-drawer>
        <a-modal v-model="convert" title="选择转化目标">
            <template slot="footer">
                <a-button key="back" @click="convert = false">取消</a-button>
                <a-button key="submit" type="primary" @click="convertOk">
                    确定
                </a-button>
            </template>
            <a-form-item
                label="追踪方式"
                :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
            >
                <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
                    <a-radio-button
                        value="1"
                        v-show="
                            getFormData('formProject', 'campaignType') == 4 ||
                                getFormData('formProject', 'campaignType') == 5
                        "
                        >JS布玛</a-radio-button
                    >
                    <a-radio-button
                        value="2"
                        v-show="
                            getFormData('formProject', 'campaignType') == 4 ||
                                getFormData('formProject', 'campaignType') == 5
                        "
                        >Xpath</a-radio-button
                    >
                    <a-radio-button value="3" v-show="getFormData('formProject', 'campaignType') == 2"
                        >应用-SDK
                    </a-radio-button>
                    <a-radio-button value="7" v-show="getFormData('formProject', 'campaignType') == 2"
                        >应用-API</a-radio-button
                    >
                </a-radio-group>
            </a-form-item>
            <a-form-item
                label="选择转化"
                :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
            >
                <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
                    <a-select-option :value="item.convert_id" v-for="item in convertList" :key="item.convert_id">
                        {{ item.convert_name }}</a-select-option
                    >
                </a-select>
            </a-form-item>
        </a-modal>
        <a-modal v-model="lookChannelVisible" :footer="null" :width="1000" :zIndex="1000000">
            <a-table
                :columns="TTcolumns"
                :dataSource="lookChannelList"
                :pagination="lookChannelIpagination"
                :loading="lookChannelLoading"
                bordered
                size="middle"
                style="word-break: break-all;font-size:16px;font-weight:600;margin-top: 20px;"
                id="outTable"
                ref="accountTable"
                rowKey="id"
                :scroll="{x:1400}"
            >
            </a-table>
        </a-modal>
        <a-modal v-model="importExcelVisible" :footer="null" title="导入广告语" class="import-padding-top">
            <span style="color:red;display:flex"
                >最多只能输入30条广告语，从excel文档第一行开始，每行为一条，每条不能超过30字，超过后该条文案不予上传</span
            >
            <br />
            <a-upload
                name="file"
                :multiple="false"
                :headers="tokenHeader"
                :file-list="fileList"
                :showUploadList="false"
                :beforeUpload="beforeUpload"
                @change="handleChange"
                style="margin-right: 20px"
                class="require-class fileUpload"
                id="fileUpload"
            >
                <a-button :disabled="loadDisabled">
                    <a-icon type="upload" />
                    {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
                </a-button>
            </a-upload>
        </a-modal>
        <a-modal v-model="selectDescriptionVisible" title="选择广告语">
            <template slot="footer">
                <a-button
                    key="back"
                    @click="
                        selectDescriptionVisible = false
                        selectDescriptionArr = []
                    "
                    >取消</a-button
                >
                <a-button key="submit" type="primary" @click="okDescription">
                    确定
                </a-button>
            </template>
            已选广告语：{{ selectDescriptionArr.length }}
            <a-checkbox-group v-model="selectDescriptionArr" style="width:100%;margin-top:10px">
                <a-list bordered :data-source="descriptionListCheck" style="width:100%;max-height: 450px;overflow:auto">
                    <a-list-item slot="renderItem" slot-scope="item, index">
                        <a-checkbox :value="item.copy_writer">
                            {{ item.copy_writer }}
                        </a-checkbox>
                    </a-list-item>
                </a-list>
            </a-checkbox-group>
        </a-modal>

        <templateModal ref="templateModal" @getData="getTargetPerson" />
    </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import $ from 'jquery'
import Logo from '@/components/tools/Logo.vue'
import pick from 'lodash.pick'
import { mixin } from '@/utils/mixin.js'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import moment from 'moment'
import selectCheckAll from '@/components/formComponents/toutiaoTime'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
import EditableCell from './components/editablCell'
import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
import templateModal from './components/templateModal'
// import lookPreviewVue from './lookPreview.vue'
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 optionsAppActive = []
let businessOptions = []
let fansStarOptions = []
let interestVideoOptions = []
let TTcolumns = [
    {
        title: '渠道号',
        dataIndex: 'channelCode',
        scopedSlots: { customRender: 'channelCode' },
        align: 'center',
        key: 'channelCode'
    },
    {
        title: '渠道号名称',
        dataIndex: 'channelName',
        scopedSlots: { customRender: 'channelName' },
        align: 'center',
        key: 'channelName'
    },
    {
        title: '下载链接',
        dataIndex: 'url',
        scopedSlots: { customRender: 'url' },
        align: 'center',
        key: 'url',
        width: 300
    },
    {
        title: '调起链接',
        dataIndex: 'schemaUri',
        scopedSlots: { customRender: 'schemaUri' },
        align: 'center',
        key: 'schemaUri',
        width: 300
    },
    {
        title: '第三方点击监测链接',
        dataIndex: 'clickTrackUrl',
        scopedSlots: { customRender: 'clickTrackUrl' },
        align: 'center',
        key: 'clickTrackUrl',
        width: 300
    },
    {
        title: '第三方actionBar监测链接',
        dataIndex: 'actionbarClickUrl',
        scopedSlots: { customRender: 'actionbarClickUrl' },
        align: 'center',
        key: 'actionbarClickUrl',
        width: 300
    }
]
export default {
    name: 'GlobalHeader',
    components: {
        //   UserMenu,
        //   SMenu,
        Logo,
        Treeselect,
        selectCheckAll,
        checkBoxGroup,
        selectTable,
        EditableCell,
        selectTreeAccount,
        templateModal
    },
    mixins: [mixin],
    props: {
        mode: {
            type: String,
            // sidemenu, topmenu
            default: 'sidemenu'
        },
        theme: {
            type: String,
            required: false,
            default: 'dark'
        },
        collapsed: {
            type: Boolean,
            required: false,
            default: false
        },
        device: {
            type: String,
            required: false,
            default: 'desktop'
        }
    },
    data() {
        return {
            formProject: this.$form.createForm(this), //选择项目表单
            formInformation: this.$form.createForm(this), //设置基本信息表单
            formTargetApp: this.$form.createForm(this), //目标应用编辑表单
            formOptimize: this.$form.createForm(this), //优化目标表单
            formOriginality: this.$form.createForm(this), //创意表单
            formMaterial: this.$form.createForm(this), //素材表单
            sumbitLoading: false,
            siteList: [],
            //基本信息参数
            formInformationVisible: false,
            formInformaData: null,
            budgetType: '1',
            dayBudgetType: '1',
            projectId: null,
            projectName: null,
            accountId: null,
            //目标应用参数
            targetAppVisible: false,
            appList: [], //分平台数据，从总数据中筛选，避免多次请求接口
            appListAll: [], //所有的数据，做分平台的元数据
            tongbuLoading: false, //同步app按钮loading
            uriCheck: false, //调起链接，是否开启
            multipleBidDataDrawer: [],
            multipleBidData: [],
            appDetail: { useChannel: false },
            appDetailMiddle: null,
            personLoading: false,
            useChannel: false,
            channelData: null,
            convertId: null,
            convertList: [],
            convertType: '1',
            convert: false,
            TTcolumns,
            lookChannelVisible: false,
            lookChannelAppName: '',
            lookChannelList: [],
            lookChannelLoading: false,
            lookChannelIpagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: false,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.lookChannelIpagination.current = current
                    this.lookChannelIpagination.pageSize = pageSize
                    this.lookChannel(this.lookChannelAppName)
                }
            },

            //目标人群参数
            targetPersonVisible: false,
            personList: [],
            checkPerson: [],
            checkPersonAll: [],
            checkPersonElse: [],
            checkPersonOne: '',
            showCheckPerson: [],
            sumContent: 0,
            searchTemplate: '',
            ipagination: {
                current: 1,
                pageSize: 9,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: false,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                    this.getTargetPerson()
                }
            },
            //优化目标参数
            groupTypeData: {},
            //创意信息参数
            optimizeVisible: false,
            adposition: 1,
            programUnitCnt: 60,
            customUnitCnt: 400,
            customUnitCntMax: 400,
            imageCntMax: 300,
            unitCntMax: 600,
            creativeCntMax: 15,
            actionBarTextList: [],
            descriptionList: [{ value: '' }],
            fieldNames: {
                label: 'category_name',
                value: 'category_id',
                children: 'child'
            },
            createOptions: [],
            showCreativeData: null,
            importExcelVisible: false,
            selectDescriptionVisible: false,
            selectDescriptionArr: [],
            descriptionListCheck: [],
            tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
            fileList: [],
            fileUrl: '',
            loadDisabled: false,
            dataFile: null,
            //公共参数
            activeStep: 0,
            screenWidth: document.body.clientWidth,
            headerBarFixed: false,
            //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
            topMenuStyle: {
                headerIndexLeft: {},
                topNavHeader: {},
                headerIndexRight: {},
                topSmenuStyle: {}
            },

            stepsArr: [
                { title: '选择项目' },
                // { title: '设置基本信息' },
                { title: '优化目标' },
                { title: '目标应用' },
                { title: '目标人群' },

                { title: '创意信息' },
                { title: '素材信息' }
            ],
            formItemLayout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 16 }
            },
            formDrawerItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 20,
                        offset: 4
                    }
                }
            },
            tailFormItemLayoutElse: {
                wrapperCol: {
                    sm: {
                        span: 20,
                        offset: 1
                    }
                }
            },
            tailFormDrawerItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 18,
                        offset: 6
                    }
                }
            },
            disabled: false
        }
    },
    computed: {},
    watch: {},
    mounted() {
        this.$nextTick(function() {
            // this.accountId = 23212

            this.getDataType('APP_INTEREST', 'optionsAppActive')
            this.getDataType('BUSINESS_INTEREST', 'businessOptions')
            this.getDataType('FANS_STAR', 'fansStarOptions')
            this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
            this.getActionBarText()

            if (this.$route.query.id) {
                this.getQueryById(this.$route.query.id)
            }
            window.addEventListener('scroll', this.onScroll)
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        })
    },
    filters: {
        unitType(val) {
            let data = {
                4: '自定义',
                7: '程序化',
                0: '不限'
            }
            return data[val]
        },
        channelType(val) {
            let data = {
                0: '内部',
                1: '素造',
                2: '不限'
            }
            return data[val]
        },
        business(theme) {
            let businessInterest = businessOptions.map(item => {
                return {
                    tagId: item.tagId,
                    tagName: item.tagName
                }
            })

            return businessInterest.filter(item => {
                return item.tagId == theme
            })[0].tagName
        },
        optionsApp(theme) {
            let optionsAppdata = optionsAppActive.map(item => {
                return {
                    tagId: item.tagId,
                    tagName: item.tagName
                }
            })

            return optionsAppdata.filter(item => {
                return item.tagId == theme
            })[0].tagName
        },
        fansStarLabel(theme) {
            let fansStarOptionsData = fansStarOptions.map(item => {
                return {
                    tagId: item.tagId,
                    tagName: item.tagName
                }
            })

            return fansStarOptionsData.filter(item => {
                return item.tagId == theme
            })[0].tagName
        },
        interestVideo(theme) {
            let interestVideoOptionsData = interestVideoOptions.map(item => {
                return {
                    tagId: item.tagId,
                    tagName: item.tagName
                }
            })

            return interestVideoOptionsData.filter(item => {
                return item.tagId == theme
            })[0].tagName
        }
    },
    methods: {
        moment,
        changeCampaignType(e) {
            if (e.target.value == 7) {
                this.uriCheck = true
            }else {
                this.uriCheck = false
            }
        },
        changeAccount() {
            // formProject: this.$form.createForm(this), //选择项目表单
            // formInformation: this.$form.createForm(this), //设置基本信息表单
            // formTargetApp: this.$form.createForm(this), //目标应用编辑表单
            // formOptimize: this.$form.createForm(this), //优化目标表单
            // formOriginality: this.$form.createForm(this), //创意表单
            // formMaterial: this.$form.createForm(this), //素材表单
            if (this.$route.query.id) {
            } else {
                this.formProject.resetFields()
                this.formOptimize.resetFields()
                this.formMaterial.resetFields()
                this.formInformation.resetFields()
                this.formOriginality.resetFields()
                this.formInformaData = null
                this.appDetail = { useChannel: false }
                this.multipleBidDataDrawer = []
                this.multipleBidData = []
                this.checkPerson = []
                this.checkPersonAll = []
                this.checkPersonElse = []
                this.checkPersonOne = ''
                this.showCheckPerson = []
                this.budgetType = '1'
                this.dayBudgetType = '1'
                this.useChannel = false
                this.channelData = null
                this.showCreativeData = null
                this.formInformaData = null
                this.descriptionList = [{ value: '' }]
            }
        },
        importExcel() {
            this.importExcelVisible = true
        },
        selectDescription() {
            this.selectDescriptionVisible = true
            this.selectDescriptionArr = []
            this.getDescriptionList()
        },
        okDescription() {
            if (this.selectDescriptionArr.length > 0) {
                var data = this.selectDescriptionArr.map(item => {
                    return { value: item }
                })
                if (this.descriptionList[0].value == '') {
                    this.descriptionList = data
                } else {
                    for (let index = 0; index < this.descriptionList.length; index++) {
                        if (this.descriptionList[index].value == '') {
                            this.descriptionList.splice(index, 1)
                        }
                    }
                    this.descriptionList.push(...data)
                }
                this.descriptionList.splice(30)
                this.selectDescriptionVisible = false
            } else {
                this.$message.error('请选择广告语')
            }
        },
        getDescriptionList() {
            var params = {}
            params.accountIds = this.getFormData('formProject', 'accountId')
            params.Keywords = null
            params.pageNumber = 1
            params.pageSize = 1000

            this.getAction('/document/library/getDocumentList', params).then(res => {
                if (res.success) {
                    this.descriptionListCheck = res.result.list || []
                }
            })
        },
        beforeUpload(file) {
            this.dataFile = $('.fileUpload').find('input')[0].files[0]
            console.log(this.dataFile)
            this.loadDisabled = true
        },
        handleChange() {
            let formData = new FormData()
            formData.append('file', this.dataFile)
            this.postDataAction('/document/library/importAdLanguage', formData).then(res => {
                this.loadDisabled = false
                if (res.code === 200) {
                    //   console.log(res)
                    var data = res.result.map(item => {
                        return {
                            value: item
                                .replace(/\s*/g, '')
                                .trim()
                                .substring(0, 30)
                        }
                    })

                    if (this.descriptionList[0].value == '') {
                        this.descriptionList = data
                    } else {
                        for (let index = 0; index < this.descriptionList.length; index++) {
                            if (this.descriptionList[index].value == '') {
                                this.descriptionList.splice(index, 1)
                            }
                        }
                        this.descriptionList.push(...data)
                    }
                    this.descriptionList.splice(30)
                    this.importExcelVisible = false
                } else {
                    this.$message.error(res.message)
                }
            })
        },

        convertOk() {
            var dataLink = []
            dataLink = this.convertList.filter(item => {
                return item.convert_id == this.convertId.key
            })
            if (dataLink.length > 0) {
                this.convert = false
            } else {
                this.convert = false
                this.convertId = ''
            }
        },
        getPageList(appId) {
            this.getAction('/kuaishou/batch/getPageList', {
                accountId: this.getFormData('formProject', 'accountId'),
                appId: appId,
                viewComp: 7
            }).then(res => {
                if (res.success) {
                    this.siteList = res.result
                }
            })
        },
        getPlatForm(appId) {
            if (appId) {
                var data = this.appList.filter(item => {
                    return item.appId == appId.key
                })
                return data[0].platform
            }
        },
        showConvert() {
            this.convertChange()
            if (this.getFormData('formProject', 'campaignType') == 2) {
                if (this.getFormData('formTargetApp', 'appId')) {
                    this.convert = true
                    let appIdvalue = this.getFormData('formTargetApp', 'appId')

                    if (
                        this.getPlatForm(appIdvalue instanceof Array ? appIdvalue[0] : appIdvalue) == 1 ||
                        this.getPlatForm(appIdvalue instanceof Array ? appIdvalue[0] : appIdvalue) == 2
                    ) {
                        this.convertType = '3'
                    } else {
                        this.convertType = '7'
                    }
                } else {
                    this.$message.error('请选择应用')
                }
            } else {
                this.convert = true
                this.convertType = '1'
            }
            this.getConvertList()
        },
        convertChange() {
            this.convertId = ''
            this.getConvertList()
        },
        getConvertList() {
            var params = {}
            params.accountId = this.getFormData('formProject', 'accountId')
            params.type = this.convertType
            this.getAction('/kuaishou/batch/getConvertList', params).then(res => {
                //console.log(res)
                if (res.success) {
                    this.convertList = res.result.map(item => {
                        return {
                            ...item,
                            convert_id: item.convert_id + ''
                        }
                    })
                }
            })
        },
        changeChannel(checked) {
            if (checked) {
                if (!!this.getFormData('formProject', 'accountId')) {
                    if (!!this.getFormData('formTargetApp', 'appId')) {
                        if (
                            this.getFormData('formTargetApp', 'singleAppid') == 0 &&
                            this.getFormData('formTargetApp', 'appId').length == 0
                        ) {
                            this.useChannel = false
                            this.$message.error('未选择应用不可开启')
                            return
                        }
                        var paramsData = {}
                        paramsData.appIdArray =
                            this.getFormData('formTargetApp', 'appId') instanceof Array
                                ? this.getFormData('formTargetApp', 'appId').map(item => {
                                      return item.key
                                  })
                                : [this.getFormData('formTargetApp', 'appId').key]
                        this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', paramsData).then(result => {
                            var params = {}
                            params.appNameArray = result.result.map(item => {
                                return item.appName
                            })
                            params.accountId = this.getFormData('formProject', 'accountId')
                            this.postDataAction('/channel/queryChannelLevel', params).then(res => {
                                console.log(res)
                                if (res.code === 200) {
                                    if (res.result) {
                                        this.channelData = res.result
                                    } else {
                                        this.useChannel = false
                                        this.$message.error(res.message)
                                    }
                                } else {
                                    this.useChannel = false
                                    this.$message.error('该账户不能使用渠道号')
                                }
                            })
                        })
                    } else {
                        this.useChannel = false
                        this.$message.error('未选择应用不可开启')
                    }
                } else {
                    this.useChannel = false
                    this.$message.error('未选择账户不可开启')
                }
            } else {
                this.channelData = null
            }
        },
        getQueryById(id) {
            this.getAction('/auto/aiKuaishouAccountAutoStrategy/queryById', { id }).then(res => {
                if (res.success) {
                    this.getActionBarText()
                    // this.getAction('/ctop/userAllocation/getAccountListByProjectId', {
                    //     projectId: res.result.projectId
                    // }).then(res => {
                    //     if (res.success) {

                    //     }
                    // })

                    this.getAction('/kuaishou/batch/getCreativeCategory', {
                        accountId: res.result.accountId
                    }).then(result => {
                        if (result.success) {
                            //console.log(res)
                            this.createOptions = result.result
                        }
                    })
                    this.$nextTick(() => {
                        let data = res.result
                        this.formProject.setFieldsValue(pick(data, 'campaignType', 'accountId','intentionTarget'))

                        this.formInformaData = {
                            budgetType: data.campaignDayBudget ? '2' : '1',
                            dayBudgetType: data.unitDayBudget ? '2' : '1',
                            campaignName: data.campaignName,
                            groupName: data.groupName,
                            campaignDayBudget: data.campaignDayBudget ? data.campaignDayBudget / 1000 : undefined,
                            unitDayBudget: data.unitDayBudget ? data.unitDayBudget / 1000 : undefined,
                            groupStatus: data.groupStatus > -1 ? data.groupStatus : 1,
                            campaignStatus: data.campaignStatus ? data.campaignStatus : 1
                        }

                        if (data.campaignDayBudget && data.campaignDayBudget > 0) {
                            this.budgetType = '2'
                            data.campaignDayBudget = data.campaignDayBudget / 1000
                            setTimeout(() => {
                                this.formInformation.setFieldsValue(pick(data, 'campaignDayBudget'))
                            }, 100)
                        } else {
                            this.budgetType = '1'
                        }
                        if (data.unitDayBudget && data.unitDayBudget > 0) {
                            this.dayBudgetType = '2'
                            data.unitDayBudget = data.unitDayBudget / 1000
                            setTimeout(() => {
                                this.formInformation.setFieldsValue(pick(data, 'unitDayBudget'))
                            }, 100)
                        } else {
                            this.dayBudgetType = '1'
                        }
                        data.deepConversionType =
                            data.deepConversionType && data.deepConversionType != ''
                                ? data.deepConversionType
                                : undefined
                        data.deepConversionBid =
                            data.deepConversionBid && data.deepConversionBid != '' ? data.deepConversionBid : undefined
                        if (data.deepConversionType && data.deepConversionBid && data.deepConversionBid != '') {
                            if (res.result.deepConversionBid.includes('/')) {
                                let bidArr = res.result.deepConversionBid.split('/')
                                for (let index = 0; index < bidArr.length; index++) {
                                    bidArr[index] = bidArr[index] / 1000
                                }
                                data.deepConversionBid = bidArr.join('/')
                            } else if (res.result.deepConversionBid.includes('-')) {
                                let bidArr = res.result.deepConversionBid.split('-')
                                for (let index = 0; index < bidArr.length; index++) {
                                    bidArr[index] = bidArr[index] / 1000
                                }
                                data.deepConversionBid = bidArr.join('-')
                            } else {
                                data.deepConversionBid = res.result.deepConversionBid / 1000 + ''
                            }
                        } else {
                            data.deepConversionType = undefined
                            data.deepConversionBid = undefined
                        }

                        if (data.cpaBid.includes('/')) {
                            let bidArr = data.cpaBid.split('/')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index] / 1000
                            }
                            data.cpaBid = bidArr.join('/')
                        } else if (data.cpaBid.includes('-')) {
                            let bidArr = data.cpaBid.split('-')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index] / 1000
                            }
                            data.cpaBid = bidArr.join('-')
                        } else {
                            data.cpaBid = data.cpaBid / 1000 + ''
                        }
                        console.log(data.deepConversionBid, data.deepConversionType)
                        this.formOptimize.setFieldsValue(
                            pick(data, 'bidType', 'ocpxActionType', 'deepConversionType', 'cpaBid', 'deepConversionBid')
                        )
                        res.result.sourceMaterial = JSON.parse(res.result.sourceMaterial)
                        this.formMaterial.setFieldsValue(pick(data, 'sourceMaterial', 'matchType', 'materialKeyword'))
                        if (res.result.creativeCategory) {
                            // let arr=[];
                            if (res.result.creativeCategory > 10000) {
                                res.result.creativeCategory = res.result.creativeCategory
                                    ? [
                                          parseInt(res.result.creativeCategory / 10000),
                                          parseInt(res.result.creativeCategory / 100),
                                          res.result.creativeCategory
                                      ]
                                    : []
                            } else if (res.result.creativeCategory > 100) {
                                res.result.creativeCategory = res.result.creativeCategory
                                    ? [parseInt(res.result.creativeCategory / 100), res.result.creativeCategory]
                                    : []
                            } else {
                                res.result.creativeCategory = res.result.creativeCategory
                                    ? [res.result.creativeCategory]
                                    : []
                            }
                        }
                        res.result.creativeTag = res.result.creativeTag ? JSON.parse(res.result.creativeTag) : []
                        this.descriptionList =
                            res.result.description.charAt(0) === '['
                                ? eval(res.result.description).map(item => {
                                      return { value: item }
                                  })
                                : [{ value: res.result.description }]
                        res.result.sceneId = JSON.parse(res.result.sceneId)
                        data.actionBarText = data.actionBarText.split(',')
                        this.showCreativeData = pick(
                            data,
                            'unitType',
                            'sceneId',
                            'imageCnt',
                            'customPlanCnt',
                            'customUnitCnt',
                            'programPlanCnt',
                            'programUnitCnt',
                            'channelType',
                            'assetMining',
                            'smartCover',
                            'actionBarText',
                            'creativeCategory',
                            'creativeTag'
                        )
                        // this.appDetail = { platformOs: data.platformOs, singleAppid: 1 }
                        this.useChannel = res.result.useChannel ? (res.result.useChannel == 1 ? true : false) : false

                        if (data.campaignType == 7) {
                            this.uriCheck = true
                        } else {
                            this.uriCheck = data.schemaUri && data.schemaUri != '' ? true : false
                        }

                        this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
                            appIdArray: JSON.parse(data.appIdArray)
                        }).then(result => {
                            if (result.success) {
                                this.multipleBidData = result.result.map(item => {
                                    return {
                                        ...item,
                                        impressionUrl: data.impressionUrl,
                                        clickTrackUrl: data.clickTrackUrl,
                                        actionbarClickUrl: data.actionbarClickUrl,
                                        adPhotoPlayedT3sUrl: data.adPhotoPlayedT3sUrl
                                    }
                                })
                                this.appDetail = {
                                    platformOs: result.result[0].platform < 3 ? 1 : 2,
                                    singleAppid: 1,
                                    appId: { key: result.result[0].appId },
                                    schemaUri: data.schemaUri,
                                    useChannel: this.useChannel,
                                    siteId: data.siteId,
                                    url: data.url,
                                    useAppMarket: data.useAppMarket ? (data.useAppMarket == 1 ? true : false) : false,
                                    appStore: data.appStore ? JSON.parse(data.appStore) : []
                                }
                            }
                        })

                        if (this.useChannel) {
                            var paramsData = {}
                            paramsData.appIdArray = JSON.parse(data.appIdArray)
                            this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', paramsData).then(result => {
                                var params = {}
                                params.appNameArray = result.result.map(item => {
                                    return item.appName
                                })
                                params.accountId = data.accountId
                                this.postDataAction('/channel/queryChannelLevel', params).then(res => {
                                    if (res.code === 200) {
                                        if (res.result) {
                                            this.channelData = res.result
                                        } else {
                                            this.useChannel = false
                                            this.$message.error(res.message)
                                        }
                                    } else {
                                        this.useChannel = false
                                        this.$message.error('该账户不能使用渠道号')
                                    }
                                })
                            })
                        }

                        this.getPageList(data.appId)
                        this.checkPerson = JSON.parse(data.autoTargetArray)
                        this.checkPersonElse = JSON.parse(data.autoTargetArray)
                        if (data.autoTargetArray) {
                            this.postDataAction('/auto/aiKuaishouAccountAutoTarget/getAutoTargetByIds', {
                                ids: this.checkPerson
                            }).then(res => {
                                if (res.success) {
                                    this.showCheckPerson = res.result.map(item => {
                                        return {
                                            ...item,
                                            regionName: []
                                        }
                                    })

                                    for (let i = 0; i < this.showCheckPerson.length; i++) {
                                        if (
                                            this.showCheckPerson[i] &&
                                            (this.showCheckPerson[i].region == '' ||
                                                this.showCheckPerson[i].region == null ||
                                                JSON.parse(this.showCheckPerson[i].region).length == 0)
                                        ) {
                                        } else {
                                            // this.showRegion(this.personList[i].region, this.personList[i].regionName)
                                            let that = this
                                            new Promise((resolve, reject) => {
                                                this.postDataAction('/kuaishou/batch/getRegionDetail', {
                                                    regionArr: that.showCheckPerson[i].region
                                                }).then(res => {
                                                    if (res.success) {
                                                        //   this.populationData.allForm.region = res.result
                                                        that.showCheckPerson[i].regionName = res.result.map(item => {
                                                            return item.label
                                                        })
                                                    }
                                                })
                                            })
                                        }
                                    }
                                }
                            })
                        }
                    })
                }
            })
        },
        handleSubmit() {
            let formProjectData = new Promise((resolve, reject) => {
                this.formProject.validateFields((err, values) => {
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('选择项目表单出错')
                    }
                })
            })
            let formInformationData = new Promise((resolve, reject) => {
                this.formInformation.validateFields((err, values) => {
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('基本信息出错')
                    }
                })
            })
            let formOptimizeData = new Promise((resolve, reject) => {
                this.formOptimize.validateFields((err, values) => {
                    console.log(values, err)
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('优化目标出错')
                    }
                })
            })
            let formMaterialData = new Promise((resolve, reject) => {
                this.formMaterial.validateFields((err, values) => {
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('出错')
                    }
                })
            })

            this.getAction('/auto/aiKuaishouAccountAutoStrategy/checkStrategy', {
                accountId: this.getFormData('formProject', 'accountId'),
                type: 1
            }).then(res => {
                if (res.success) {
                    Promise.all([formProjectData, formOptimizeData, formMaterialData])
                        .then(res => {
                            console.log(res, this.formInformaData)
                            if (
                                !this.showCreativeData ||
                                this.showCheckPerson.length === 0 ||
                                this.multipleBidData.length === 0 ||
                                !this.formInformaData.campaignName || 
                                !this.formInformaData.groupName
                            ) {
                                this.$message.error('请填写完整')
                                return
                            }
                            this.sumbitLoading = true
                            let params = {
                                ...res[0],
                                ...res[1],
                                ...res[2],
                                ...this.showCreativeData,
                                ...this.formInformaData,
                                appStore: this.appDetail.appStore ? JSON.stringify(this.appDetail.appStore) : '[]',
                                useAppMarket: this.appDetail.useAppMarket,
                                schemaUri: this.appDetail.schemaUri ? this.appDetail.schemaUri : '',
                                siteId: this.appDetail.siteId ? this.appDetail.siteId : '',
                                url: this.appDetail.url ? this.appDetail.url : ''
                            }
                            if (this.budgetType === '2') {
                                params.campaignDayBudget = params.campaignDayBudget * 1000
                            } else {
                                params.campaignDayBudget = 0
                            }
                            if (this.dayBudgetType === '2') {
                                params.unitDayBudget = params.unitDayBudget * 1000
                            } else {
                                params.unitDayBudget = 0
                            }
                            if (params.cpaBid) {
                                if ((params.cpaBid + '').includes('/')) {
                                    let bidArr = params.cpaBid.split('/')
                                    for (let index = 0; index < bidArr.length; index++) {
                                        bidArr[index] = bidArr[index] * 1000
                                    }
                                    params.cpaBid = bidArr.join('/')
                                } else if ((params.cpaBid + '').includes('-')) {
                                    let bidArr = params.cpaBid.split('-')
                                    for (let index = 0; index < bidArr.length; index++) {
                                        bidArr[index] = bidArr[index] * 1000
                                    }
                                    params.cpaBid = bidArr.join('-')
                                } else {
                                    params.cpaBid = params.cpaBid * 1000
                                }
                            } else {
                                params.cpaBid = 0
                            }
                            if (params.deepConversionBid && params.deepConversionBid != 0) {
                                if ((params.deepConversionBid + '').includes('/')) {
                                    let bidArr = params.deepConversionBid.split('/')
                                    for (let index = 0; index < bidArr.length; index++) {
                                        bidArr[index] = bidArr[index] * 1000
                                    }
                                    params.deepConversionBid = bidArr.join('/')
                                } else if ((params.deepConversionBid + '').includes('-')) {
                                    let bidArr = params.deepConversionBid.split('-')
                                    for (let index = 0; index < bidArr.length; index++) {
                                        bidArr[index] = bidArr[index] * 1000
                                    }
                                    params.deepConversionBid = bidArr.join('-')
                                } else {
                                    params.deepConversionBid = params.deepConversionBid * 1000
                                }
                            } else {
                                params.deepConversionBid = 0
                            }
                            if (params.creativeCategory && params.creativeCategory.length > 0) {
                                params.creativeCategory = params.creativeCategory[params.creativeCategory.length - 1]
                            } else {
                                params.creativeCategory = undefined
                            }
                            params.creativeTag = params.creativeTag ? JSON.stringify(params.creativeTag) : undefined
                            params.appIdArray = JSON.stringify(
                                this.multipleBidData.map(res => {
                                    return res.appId
                                })
                            )
                            params.autoTargetArray = this.showCheckPerson.map(item => {
                                return item.id
                            })
                            params.description = JSON.stringify(
                                this.descriptionList.map(item => {
                                    return item.value
                                })
                            )
                            params.singleAppid = 1
                            params.actionBarText = params.actionBarText.join()
                            params.deepConversionType = params.deepConversionType ? params.deepConversionType : ''
                            params.deepConversionBid = params.deepConversionBid ? params.deepConversionBid : ''
                            params.usageLevel =
                                this.channelData && this.channelData ? this.channelData.channel.usageLevel : null
                            params.useChannel = this.appDetail.useChannel ? 1 : 0
                            params.sourceMaterial = JSON.stringify(params.sourceMaterial)
                            params.sceneId = JSON.stringify(params.sceneId)
                            params.autoTargetArray = JSON.stringify(params.autoTargetArray)
                            params.useAppMarket = params.useAppMarket ? 1 : 0
                            params.clickTrackUrl = this.multipleBidData[0].clickTrackUrl
                            params.actionbarClickUrl = this.multipleBidData[0].actionbarClickUrl

                            if (this.$route.query.id) {
                                params.id = this.$route.query.id
                                this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/edit', params).then(res => {
                                    if (res.success) {
                                        this.sumbitLoading = false
                                        localStorage.removeItem('createLaunch')
                                        window.close()
                                    } else {
                                        this.sumbitLoading = false
                                        this.$message.error('创建失败')
                                    }
                                })
                            } else {
                                this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/add', params).then(res => {
                                    if (res.success) {
                                        this.sumbitLoading = false
                                        localStorage.removeItem('createLaunch')
                                        window.close()
                                    } else {
                                        this.sumbitLoading = false
                                        this.$message.error(res.message)
                                    }
                                })
                            }
                            // this.getAction('/kuaishouProjectStrategy/checkProjectisOpen', { projectId: params.projectId }).then(
                            //     res => {
                            //         if (res.success) {
                            //             if (res.result === 1) {

                            //             } else {
                            //                 this.$message.error('此项目有开启的配置，无法新建配置')
                            //                 this.sumbitLoading = false
                            //             }
                            //         }
                            //     }
                            // )
                        })
                        .catch(err => {
                            this.$message.error('请填写完整')
                        })
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        clearAllData() {
            window.close()
        },
        descriptionchange(val, index) {
            console.log(val)
            this.$nextTick(() => {
                this.descriptionList[index].value = val.replace(/\s*/g, '').trim()
            })
        },
        addDescription() {
            this.descriptionList.push({ value: '' })
        },
        removeDescription(index) {
            this.descriptionList.splice(index, 1)
        },
        // 获取行动号召按钮
        getActionBarText() {
            this.actionBarTextList = []
            let that = this
            setTimeout(() => {
                this.getAction('/kuaishou/batch/getActionBarTextByType', {
                    type: that.getFormData('formProject','campaignType')
                    
                }).then(res => {
                    if (res.success) {
                        that.actionBarTextList = res.result
                    }
                })
            })
        },
        closeCreative() {
            this.optimizeVisible = false
            this.customUnitCntMax = 400
            this.imageCntMax = 300
            this.unitCntMax = 600
            this.creativeCntMax = 15
            this.formOriginality.resetFields()
        },
        submitCreative() {
            this.formOriginality.validateFields((err, values) => {
                if (!err) {
                    let isNotComplete = this.descriptionList.findIndex(item => {
                        return item.value === ''
                    })
                    if (isNotComplete > -1) {
                        this.$message.error('请正确填写必填项目,广告语未填')
                        return
                    }
                    this.showCreativeData = JSON.parse(JSON.stringify(values))
                    this.optimizeVisible = false
                    this.formOriginality.resetFields()
                    // this.closeCreative()
                }
            })
        },
        changeData(data) {
            if (data.length > 1 && data.findIndex(item => item == 1) == 0) {
                data.splice(
                    data.findIndex(item => item == 1),
                    1
                )
            } else if (data.length > 1 && data.findIndex(item => item == 1) == data.length - 1) {
                data.splice(0, data.length - 1)
            } else if (data.length == 0) {
                data.push(1)
            } else if (data.length > 1 && data.findIndex(item => item == 5) == 0) {
                data.splice(
                    data.findIndex(item => item == 5),
                    1
                )
            } else if (data.length > 1 && data.findIndex(item => item == 5) == data.length - 1) {
                data.splice(0, data.length - 1)
            }
        },
        unitTypeCheck(e) {
            // console.log(e.target.value)
            if (e.target.value === 7) {
                this.imageCntMax = 300
            } else {
                this.unitCntMax = 600
                this.creativeCntMax = 15
            }
        },
        setImageCnt(e) {
            this.unitCntMax = e ? Math.floor(600 / e) : 600
            this.creativeCntMax = e
                ? Math.floor(2000 / (e * this.getFormData('formOriginality', 'customUnitCnt'))) > 15
                    ? 15
                    : Math.floor(2000 / (e * this.getFormData('formOriginality', 'customUnitCnt')))
                : 15
        },
        setCreativeCntMax(e) {
            //  v-if="getFormData('formOriginality', 'unitType') != 7"
            this.creativeCntMax = e
                ? Math.floor(2000 / (e * this.getFormData('formOriginality', 'customPlanCnt'))) > 15
                    ? 15
                    : Math.floor(2000 / (e * this.getFormData('formOriginality', 'customPlanCnt')))
                : 15
        },
        setProgramUnitCnt(e) {
            this.imageCntMax = e ? Math.floor(300 / e) : 300
        },
        creativeTagValid(rule, value, callback) {
            //console.log(rule, value, callback)
            if (value.length == 0 || value == undefined) {
                // //console.log(1)
                callback()
            } else if (value.length > 10) {
                callback('创意标签最多填写10个，请删减')
            } else {
                // //console.log(2)
                callback()
            }
        },
        cpaBidValid(rule, value, callback) {
            let z = /-/g
            let a = /\//g
            let d = /\./g
            if (value === '' || value === undefined || value === 0 || value === '0') {
                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()
            }
        },
        deepBidValid(rule, value, callback) {
            let z = /-/g
            let a = /\//g
            let d = /\./g
            if (value === '' || value === undefined || value == 0 || value == '0') {
                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()
            }
        },
        getDataType(type, dataList) {
            this.getAction('/kuaishou/batch/getTargetList', { tagType: type }).then(res => {
                if (res.success) {
                    if (dataList === 'businessOptions') {
                        businessOptions = res.result
                    } else if (dataList === 'optionsAppActive') {
                        optionsAppActive = res.result
                    } else if (dataList === 'fansStarOptions') {
                        fansStarOptions = res.result
                    } else if (dataList === 'interestVideoOptions') {
                        interestVideoOptions = res.result
                    }
                }
            })
        },
        setData(data) {
            this.checkPersonOne = data
        },
        setVideoData(data) {
            //  checkPerson: [],
            // checkPersonAll: [],
            if (data.findIndex(item => item === this.checkPersonOne) > -1) {
                this.checkPersonElse.push(...data)
                this.checkPersonElse = [...new Set(this.checkPersonElse)]
            } else {
                if (this.checkPersonElse.findIndex(item => item === this.checkPersonOne) > -1) {
                    this.checkPersonElse.splice(
                        this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
                        1
                    )
                }
            }
            console.log(data, this.checkPersonOne, this.checkPersonElse)
            this.sumContent = this.checkPersonElse.length
            var dataCount = 10
            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
            }
        },
        cancel() {},
        removeVideoMaterial(index, id) {
            this.showCheckPerson.splice(index, 1)
            let indexElse = this.checkPerson.findIndex(item => {
                item == id
            })
            this.checkPerson.splice(indexElse, 1)
            // id
            this.checkPersonElse.splice(
                this.checkPersonElse.findIndex(item => {
                    item == id
                }),
                1
            )
            // for (let i = 0; i < this.checkPersonAll.length; i++) {
            //     if (this.checkPersonAll[i].length > 0) {
            //         for (let j = 0; j < this.checkPersonAll[i].length; j++) {
            //             if (this.checkPersonAll[i][j] == id) {
            //                 this.checkPersonAll[i].splice(j, 1)
            //             }
            //         }
            //     }
            // }

            // this.materialList[index].photoArr.splice(indexMaterial, 1)
        },
        getDataSource(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current
            this.ipagination.pageSize = pageSize

            // this.checkPerson = this.checkPersonAll[current - 1]
            this.checkPerson = this.checkPersonElse

            this.getTargetPerson()
        },
        disabledDate(current) {
            // Can not select days before today and today
            return current && current < moment().subtract(1, 'days')
        },
        disabledDateOne(current) {
            // Can not select days before today and today
            return current && current < moment().subtract(0, 'days')
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        //目标应用编辑
        targetAppEdit() {
            this.targetAppVisible = true

            if (this.appDetail) {
                if (this.appDetail.schemaUri) {
                    this.uriCheck = true
                }
                if (this.channelData && this.channelData.channel.isHaveItem>-1) {
                    this.useChannel = true
                }
                this.appDetailMiddle = JSON.parse(JSON.stringify(this.appDetail))
                this.$nextTick(() => {
                    this.formTargetApp.setFieldsValue({ ...this.appDetailMiddle })

                    this.multipleBidDataDrawer = JSON.parse(JSON.stringify(this.multipleBidData))
                    setTimeout(() => {
                        this.formTargetApp.setFieldsValue({ useAppMarket: this.appDetailMiddle.useAppMarket })
                    }, 100)
                    setTimeout(() => {
                        this.formTargetApp.setFieldsValue({ appStore: this.appDetailMiddle.appStore })
                    }, 200)
                })
            }
            this.getAppList()
        },
        submitApp() {
            this.formTargetApp.validateFields((err, values) => {
                //console.log(values)
                if (!err) {
                    this.appDetailMiddle = JSON.parse(JSON.stringify({ ...values, useChannel: this.useChannel }))
                    this.appDetail = JSON.parse(JSON.stringify(this.appDetailMiddle))
                    this.multipleBidData = JSON.parse(JSON.stringify(this.multipleBidDataDrawer))
                    this.targetAppVisible = false
                    this.multipleBidDataDrawer = []

                    this.checkPersonElse = []
                    this.checkPerson = []
                    this.showCheckPerson = []
                    this.closeUnit()
                } else {
                }
            })
        },
        closeUnit(form) {
            if (this.getFormData('formProject', 'campaignType') == 7) {
                this.uriCheck = true
            } else {
                this.uriCheck = false
            }

            this.targetAppVisible = false
            this.multipleBidDataDrawer = []
            this.appDetailMiddle = null
            this.useChannel = false
            // this.channelData = null
            this.convertId = null
            this.formTargetApp.resetFields()
        },
        formInfoShow() {
            this.$nextTick(() => {
                console.log(this.formInformaData)
                if (this.formInformaData) {
                    this.formInformationVisible = true
                    this.budgetType = this.formInformaData.budgetType
                    this.dayBudgetType = this.formInformaData.dayBudgetType
                    setTimeout(() => {
                        this.formInformation.setFieldsValue(
                            pick(this.formInformaData, 'campaignName', 'groupName', 'campaignStatus', 'groupStatus')
                        )
                    }, 100)
                    if (this.budgetType == '2') {
                        setTimeout(() => {
                            this.formInformation.setFieldsValue(pick(this.formInformaData, 'campaignDayBudget'))
                        }, 100)
                    }
                    if (this.dayBudgetType == '2') {
                        setTimeout(() => {
                            this.formInformation.setFieldsValue(pick(this.formInformaData, 'unitDayBudget'))
                        }, 100)
                    }
                } else {
                    this.formInformationVisible = true
                }
            })
        },
        closeFormInfo() {
            this.formInformationVisible = false
            this.budgetType = '1'
            this.dayBudgetType = '1'
            this.formInformation.resetFields()
        },
        submitFormInfo() {
            this.formInformation.validateFields((err, values) => {
                if (!err) {
                    var data = { ...values, budgetType: this.budgetType, dayBudgetType: this.dayBudgetType }
                    this.formInformaData = JSON.parse(JSON.stringify(data))
                    this.formInformationVisible = false
                    this.formInformation.resetFields()
                }
            })
        },
        clearAppId() {
            // this.formTargetApp.setFieldsValue({
            //     appId: undefined
            // })
        },
        appIdChange(val) {
            if (this.getFormData('formTargetApp', 'singleAppid') == 0) {
                if (val && val.findIndex(item => item.key === 0) > -1) {
                    let appidArr = this.appList.map(item => {
                        return {
                            key: item.appId,
                            label:
                                `${
                                    item.platform === 1
                                        ? 'Android应用下载'
                                        : item.platform === 2
                                        ? 'Android网页游戏'
                                        : item.platform === 3
                                        ? 'iOS应用下载'
                                        : 'iOS网页游戏'
                                }` +
                                '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                item.appName +
                                '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                item.appVersion
                        }
                    })
                    this.$nextTick(() => {
                        this.formTargetApp.setFieldsValue({
                            appId: appidArr
                        })
                        this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
                            appIdArray: appidArr.map(item => {
                                return item.key
                            })
                        }).then(res => {
                            if (res.success) {
                                this.multipleBidDataDrawer = res.result
                            }
                        })
                    })
                    // this.$nextTick(() => {
                    //     this.formTargetApp.setFieldsValue({
                    //         appId: appidArr
                    //     })
                    //     this.multipleBidDataDrawer = appidArr.map(item => {
                    //         return {
                    //             ...item,
                    //             cpaBid: null,
                    //             trackUrl: '',
                    //             channelCode: '',
                    //             appId: item.key,
                    //             deepConversionBid: null
                    //         }
                    //     })
                    // })
                } else {
                    this.$nextTick(() => {
                        // this.multipleBidDataDrawer = this.appList.filter(item => {
                        //     return item.id === val.key
                        // })
                        this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
                            appIdArray: val.map(item => {
                                return item.key
                            })
                        }).then(res => {
                            if (res.success) {
                                this.multipleBidDataDrawer = res.result
                            }
                        })
                    })
                }
                if (this.multipleBidDataDrawer.length == 0) {
                    this.useChannel = false
                    this.channelData = null
                }
            } else {
                if (val) {
                    this.$nextTick(() => {
                        this.siteList = []
                        this.getPageList(val.key)
                        this.multipleBidDataDrawer = []
                        // this.multipleBidDataDrawer = this.appList.filter(item => {
                        //     return item.id === val.key
                        // })
                        this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', { appIdArray: [val.key] }).then(
                            res => {
                                if (res.success) {
                                    this.multipleBidDataDrawer = res.result
                                }
                            }
                        )
                    })
                } else {
                    this.multipleBidDataDrawer = []
                    this.useChannel = false
                    this.channelData = null
                }
            }
        },
        lookChannel(appName) {
            this.lookChannelVisible = true
            this.lookChannelLoading = true
            this.lookChannelAppName = appName
            var params = {}
            params.accountId = this.getFormData('formProject', 'accountId')
            params.appName = appName
            params.pageNo = this.lookChannelIpagination.current
            params.pageSize = this.lookChannelIpagination.pageSize
            this.getAction('/channel/queryChannelList', params).then(res => {
                this.lookChannelLoading = false
                if (res.success) {
                    this.lookChannelList = res.result.list || []
                    this.lookChannelIpagination.total = res.result.total || 0
                }
            })
        },
        onCellChange(key, dataIndex, value) {
            const dataSource = [...this.multipleBidDataDrawer]
            const target = dataSource.find(item => item.id === key)
            if (target) {
                target[dataIndex] = value
                this.multipleBidDataDrawer = dataSource
                let params = { accountId: this.getFormData('formProject', 'accountId') }
                if (dataIndex == 'impressionUrl') {
                    params.impressionUrl = value
                } else if (dataIndex == 'clickTrackUrl') {
                    params.clickTrackUrl = value
                } else if (dataIndex == 'actionbarClickUrl') {
                    params.actionbarClickUrl = value
                } else if (dataIndex == 'adPhotoPlayedT3sUrl') {
                    params.adPhotoPlayedT3sUrl = value
                }
                this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/updateAppUrl', params).then(res => {
                    if (res.success) {
                        console.log(res)
                    }
                })
            }
        },
        addApplication() {
            if (this.getFormData('formProject', 'accountId')) {
                this.tongbuLoading = true
                // this.$refs.application.showApplication()
                this.getAction('/kuaishou/batch/syncAppList', {
                    accountId: this.getFormData('formProject', 'accountId')
                }).then(res => {
                    if (res.success) {
                        this.tongbuLoading = false
                        this.$message.success(res.message)
                        this.getAppList()
                    } else {
                        this.tongbuLoading = false
                        this.$message.error(res.message)
                    }
                })
            } else {
                this.$message.error('请先选择账户')
            }
        },
        changeType(e) {
            this.appList = []
            if (e.target.value === 1) {
                this.appList = this.appListAll.filter(item => {
                    return item.platform == 1 || item.platform == 2
                })
                this.formTargetApp.setFieldsValue({ appId: undefined })
                this.multipleBidDataDrawer = []
            } else if (e.target.value === 2) {
                this.appList = this.appListAll.filter(item => {
                    return item.platform == 3 || item.platform == 4
                })
                this.formTargetApp.setFieldsValue({ appId: undefined })
                this.multipleBidDataDrawer = []
            }
        },
        getAppList() {
            let params = {}
            params.accountId = this.getFormData('formProject', 'accountId')
            this.getAction('/kuaishou/batch/getAppList', params).then(res => {
                if (res.success) {
                    this.appListAll = res.result.map((item, index) => {
                        return {
                            ...item,
                            key: item.id
                        }
                    })
                    if (this.getFormData('formTargetApp', 'platformOs') === 1) {
                        this.appList = this.appListAll.filter(item => {
                            return item.platform == 1 || item.platform == 2
                        })
                    } else if (this.getFormData('formTargetApp', 'platformOs') === 2) {
                        this.appList = this.appListAll.filter(item => {
                            return item.platform == 3 || item.platform == 4
                        })
                    }
                }
            })
        },

        //目标人群选择
        targetPersonCheck() {
            // this.checkPerson = this.checkPersonAll[0]
            this.checkPersonElse = this.showCheckPerson.map(item => {
                return item.id
            })
            this.checkPerson = this.checkPersonElse
            this.ipagination.current = 1
            this.sumContent = this.showCheckPerson.length
            this.targetPersonVisible = true
            this.searchTemplate = ''
            this.getTargetPerson()
        },
        submitPerson() {
            // var dataAll = tqFun(this.checkPersonAll)
            let dataAll = this.checkPersonElse
            this.checkPerson = dataAll
            this.personLoading = true
            if (this.checkPerson.length > 0) {
                this.postDataAction('/auto/aiKuaishouAccountAutoTarget/getAutoTargetByIds', {
                    ids: this.checkPerson
                }).then(res => {
                    this.personLoading = false
                    if (res.success) {
                        this.showCheckPerson = res.result.map(item => {
                            return {
                                ...item,
                                regionName: []
                            }
                        })

                        for (let i = 0; i < this.showCheckPerson.length; i++) {
                            if (
                                this.showCheckPerson[i] &&
                                (this.showCheckPerson[i].region == '' ||
                                    this.showCheckPerson[i].region == null ||
                                    JSON.parse(this.showCheckPerson[i].region).length == 0)
                            ) {
                            } else {
                                // this.showRegion(this.personList[i].region, this.personList[i].regionName)
                                let that = this
                                new Promise((resolve, reject) => {
                                    this.postDataAction('/kuaishou/batch/getRegionDetail', {
                                        regionArr: that.showCheckPerson[i].region
                                    }).then(res => {
                                        if (res.success) {
                                            //   this.populationData.allForm.region = res.result
                                            that.showCheckPerson[i].regionName = res.result.map(item => {
                                                return item.label
                                            })
                                        }
                                    })
                                })
                            }
                        }
                        this.targetPersonVisible = false
                    }
                })
            } else if (this.checkPerson.length > 20) {
                this.personLoading = false
                this.$message.error('最多选择20个定向包')
            } else {
                this.personLoading = false
                this.$message.error('请选择定向包')
            }
        },
        closePerson(form) {
            this.targetPersonVisible = false
            this.sumContent = 0
            if (this.showCheckPerson.length > 0) {
            } else {
                this.checkPersonAll = []
                this.checkPersonElse = []
            }
            this.checkPerson = []
        },
        editNewTemplate(item) {
            var params = { ...item }
            params.accountId = this.getFormData('formProject', 'accountId')
            this.$refs.templateModal.handleOk(params, 'edit')
        },
        deleteNewTemplate(id) {
            var that = this

            this.$confirm({
                title: '是否删除此定向包?',
                onOk() {
                    var params = {}
                    params.ids = id
                    that.getAction('/auto/aiKuaishouAccountAutoTarget/deleteBatch', params).then(res => {
                        if (res.success) {
                            var index = that.checkPerson.findIndex(item => item == id)
                            var indexAll = that.checkPersonElse.findIndex(item => item == id)
                            var indexShow = that.showCheckPerson.findIndex(item => item.id == id)
                            if (index > -1) {
                                that.checkPerson.splice(index, 1)
                            }
                            if (indexAll > -1) {
                                that.checkPersonElse.splice(index, 1)
                            }
                            if (indexShow > -1) {
                                that.showCheckPerson.splice(index, 1)
                            }

                            that.$nextTick(() => {
                                that.checkPerson = that.checkPersonElse
                                that.sumContent = that.checkPersonElse.length

                                that.getTargetPerson()
                            })
                        } else {
                            that.$message.error(res.messsage)
                        }
                    })
                },
                onCancel() {}
            })
        },
        addNewTemplate() {
            this.$refs.templateModal.create(this.getFormData('formProject', 'accountId'), 'add')
        },
        getTargetPerson() {
            if (this.appDetail.platformOs) {
                let params = {}
                params.pageSize = this.ipagination.pageSize
                params.pageNo = this.ipagination.current
                params.accountId = this.getFormData('formProject', 'accountId')
                params.targetName = this.searchTemplate == '' ? null : this.searchTemplate
                params.platformOs = this.appDetail ? this.appDetail.platformOs : '1'

                this.getAction('/auto/aiKuaishouAccountAutoTarget/list', params).then(res => {
                    if (res.success) {
                        this.personList = res.result.list.map(item => {
                            return {
                                ...item,
                                regionName: []
                            }
                        })
                        for (let i = 0; i < this.personList.length; i++) {
                            if (
                                this.personList[i] &&
                                (this.personList[i].region == '' ||
                                    this.personList[i].region == null ||
                                    JSON.parse(this.personList[i].region).length == 0)
                            ) {
                            } else {
                                // this.showRegion(this.personList[i].region, this.personList[i].regionName)
                                let that = this
                                new Promise((resolve, reject) => {
                                    this.postDataAction('/kuaishou/batch/getRegionDetail', {
                                        regionArr: that.personList[i].region
                                    }).then(res => {
                                        if (res.success) {
                                            //   this.populationData.allForm.region = res.result
                                            that.personList[i].regionName = res.result.map(item => {
                                                return item.label
                                            })
                                        }
                                    })
                                })
                            }
                        }
                        this.ipagination.total = res.result.total
                    }
                })
            } else {
                this.$message.error('请先选择应用')
            }
        },
        showRegion(data, name) {
            return new Promise((resolve, reject) => {
                this.postDataAction('/kuaishou/batch/getRegionDetail', {
                    regionArr: data
                }).then(res => {
                    if (res.success) {
                        //   this.populationData.allForm.region = res.result
                        name = res.result.map(item => {
                            return item.label
                        })
                    }
                })
            })
        },

        //创意信息
        originalityEdit() {
            this.optimizeVisible = true
            this.getActionBarText()

            this.getAction('/kuaishou/batch/getCreativeCategory', {
                accountId: this.getFormData('formProject', 'accountId')
            }).then(result => {
                if (result.success) {
                    //console.log(res)
                    this.createOptions = result.result
                }
            })

            this.$nextTick(() => {
                if (this.showCreativeData) {
                    // if (this.showCreativeData.unitType === 7) {
                    //     this.imageCntMax = 8
                    // } else {
                    //     this.imageCntMax = 15
                    // }
                    this.customUnitCntMax = 400
                    this.imageCntMax = 300
                    this.unitCntMax = 600
                    this.creativeCntMax = 15
                    this.formOriginality.setFieldsValue(this.showCreativeData)
                }
            })
        },
        //设置通配符
        getChangeAll(type, form, field) {
            var node = document.getElementById(field)
            var v = '-{{' + type + '}}-'
            if (document.selection) {
                //IE
                node.focus()
                var sel = document.selection.createRange()
                sel.text = v
                sel.select()
                if (field == 'campaignName') {
                    this[form].setFieldsValue({ campaignName: sel.text })
                } else if (field == 'groupName') {
                    this[form].setFieldsValue({ groupName: sel.text })
                }
            } else if (node.selectionStart || node.selectionStart == '0') {
                //MOZILLA/GOOGLE
                var startPos = node.selectionStart
                var endPos = node.selectionEnd
                var restoreTop = node.scrollTop
                node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
                if (restoreTop > 0) {
                    node.scrollTop = restoreTop
                }
                if (field == 'campaignName') {
                    this[form].setFieldsValue({ campaignName: node.value })
                } else if (field == 'groupName') {
                    this[form].setFieldsValue({ groupName: node.value })
                }
                node.focus()
                node.selectionStart = startPos + v.length
                node.selectionEnd = startPos + v.length
                // this.campaignName = node.value
            } else {
                //OTHER
                node.value += v
                // console.log(node.value)
                if (field == 'campaignName') {
                    this[form].setFieldsValue({ campaignName: node.value })
                } else if (field == 'groupName') {
                    this[form].setFieldsValue({ groupName: node.value })
                }
                node.focus()
                // this.campaignName = node.value
            }
        },

        //获取表单的某一个属性值
        getFormData(form, className) {
            return this[form].getFieldValue(className)
        },
        onScroll() {
            // var box = document.getElementById('box')
            // var t = document.documentElement.scrollTop || document.body.scrollTop
            // box.style.top = t + 'px'

            var jump = document.querySelectorAll('.step-jump')
            var distance =
                document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
            jump.forEach((item, index) => {
                if (distance >= item.offsetTop) {
                    this.activeStep = index
                }
            })
        },
        // 锚点点击
        jump(index) {
            // console.log(index)
            this.activeStep = index
            // 用 class=".step-jump" 添加锚点，此时的类名要放在tr上，放在td上不对，
            // 以后做的时候要注意这点，不是表格的时候，如何放置锚点
            let jump = document.querySelectorAll('.step-jump')
            // 通过 offsetTop 获取对象到窗体顶部的距离，然后赋值给 scrollTop，就能实现锚点的功能
            let total = jump[index].offsetTop
            // console.log(total)
            // scrollTop滚动条距离页面的距离
            let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
            // console.log(distance)
            // 平滑滚动，时长500ms，每10ms一跳，共50跳
            let step = total / 50
            if (total > distance) {
                smoothDown()
            } else {
                let newTotal = distance - total
                step = newTotal / 100
                smoothUp()
            }
            function smoothDown() {
                if (distance < total) {
                    distance += step
                    document.body.scrollTop = distance
                    document.documentElement.scrollTop = distance
                    window.pageYOffset = distance
                    setTimeout(smoothDown, 1)
                } else {
                    document.body.scrollTop = total
                    document.documentElement.scrollTop = total
                    window.pageYOffset = total
                }
            }
            function smoothUp() {
                if (distance > total) {
                    distance -= step
                    document.body.scrollTop = distance
                    document.documentElement.scrollTop = distance
                    window.pageYOffset = distance
                    setTimeout(smoothUp, 10)
                } else {
                    document.body.scrollTop = total
                    document.documentElement.scrollTop = total
                    window.pageYOffset = total
                }
            }
        },

        getData(className, formName) {
            return this[formName].getFieldValue(className)
        }
    }
}
</script>

<style lang="scss" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

$height: 59px;
.layout .header .user-wrapper .action .anticon,
.layout .top-nav-header-index .user-wrapper .action .anticon {
    color: #999;
}
.layout .header .user-wrapper .action .anticon,
.layout .top-nav-header-index .user-wrapper .action .anticon {
    color: #999;
}
.layout {
    .top-nav-header-index {
        .header-index-wide {
            margin-left: 10px;

            .ant-menu.ant-menu-horizontal {
                height: $height;
                line-height: $height;
            }
        }

        .trigger {
            line-height: 48px;
            font-size: 17px;
            &:hover {
                background: rgba(0, 0, 0, 0.05);
            }
        }
    }

    .header {
        z-index: 2;
        color: #999;
        height: $height;
        background-color: #1890ff;
        transition: background 300ms;

        /* dark 样式 */
        &.dark {
            color: #000000;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
            background-color: white !important;
        }
    }

    .header,
    .top-nav-header-index {
        &.dark .trigger:hover {
            background: rgba(0, 0, 0, 0.05);
        }
    }
}

.ant-layout-header {
    height: $height;
    line-height: $height;
}
</style>
