<style scoped lang="scss">
::v-deep.display-none-selset {
    display: none !important;
}
.step-jump {
    ::v-deep table tr td {
        border-bottom: 0px;
    }
}
.bottom-to-one {
    ::v-deep .ant-form-item {
        margin-bottom: 0;
    }
}
.target-person-add-button {
    margin-left: 15px;
}
.card-person {
    width: 300px;
    ::v-deep.ant-card-body {
        padding: 0px;
    }
    ::v-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: space-between;
    .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;
    }
}

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

.info-detail {
    ::v-deep table tr td {
        border: 0;
    }
    ::v-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" hide-required-mark>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item
                                        label="项目名称"
                                        :labelCol="formItemLayout.labelCol"
                                        class="require-check"
                                        v-if="$route.query.id"
                                    >
                                        <a-input v-model="projectName" disabled></a-input>
                                    </a-form-item>
                                    <selectTable
                                        v-else
                                        :labelCol="formItemLayout.labelCol"
                                        :projectId.sync="projectId"
                                        ref="selectTable"
                                        :requireCheck="true"
                                    ></selectTable>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="营销目标">
                                        <a-radio-group
                                            button-style="solid"
                                            v-decorator="[
                                                'campaignType',
                                                {
                                                    rules: [{ required: true, message: '营销目标必选' }],
                                                    initialValue: 2
                                                }
                                            ]"
                                        >
                                            <a-radio-button :value="2">提升应用安装</a-radio-button>
                                            <a-radio-button :value="3" disabled>获取电商下单</a-radio-button>
                                            <a-radio-button :value="4" disabled>推广品牌活动</a-radio-button>
                                            <a-radio-button :value="5" disabled>收集销售线索</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="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-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-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-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: '不小于500， 不超过100000000，仅支持输入自然数'
                                                        }
                                                    ]
                                                }
                                            ]"
                                            style="width: 100%"
                                            placeholder="不小于500， 不超过100000000，仅支持输入自然数"
                                            :min="500"
                                            :precision="0"
                                        />
                                    </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="!projectId"
                            >编辑</a-button
                        >
                        <a-row :gutter="16" class="bottom-to-one">
                            <a-col :span="16">
                                <a-form-item label="" v-bind="tailFormItemLayout">
                                    <a-descriptions>
                                        <a-descriptions-item label="系统平台">
                                            {{
                                                appDetail && appDetail.platformOs
                                                    ? appDetail.platformOs === 1
                                                        ? 'Android'
                                                        : 'IOS'
                                                    : '-'
                                            }}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="单/多应用">
                                            单应用
                                        </a-descriptions-item>
                                        <a-descriptions-item label="应用数量">
                                            {{ multipleBidData.length }}
                                        </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">
                                <a-form-item :label="'应用' + (index + 1)" v-bind="formItemLayout">
                                    <a-collapse expand-icon-position="right">
                                        <a-collapse-panel key="1" :header="item.appName">
                                            <a-descriptions>
                                                <a-descriptions-item label="应用标识" :span="2">
                                                    {{ item.appVersion }}
                                                </a-descriptions-item>

                                                <a-descriptions-item label="覆盖账户">
                                                    {{ item.count }}
                                                </a-descriptions-item>
                                                <a-descriptions-item label="投放系统" :span="3">
                                                    {{ item.platform | platform }}
                                                </a-descriptions-item>
                                                <a-descriptions-item label="调起链接" :span="3">
                                                    {{ appDetail.schemaUri ? appDetail.schemaUri : '无' }}
                                                </a-descriptions-item>
                                            </a-descriptions>
                                        </a-collapse-panel>
                                    </a-collapse>
                                </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="!projectId"
                                            >选择定向包 ></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.templateName"
                                            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">
                                                        <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-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="originalityEdit" :disabled="!projectId"
                            >编辑</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.customUnitCnt">
                                        {{ showCreativeData.customUnitCnt }}
                                    </span>
                                    <span v-else>-</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="程序化组上限">
                                    <span v-if="showCreativeData && showCreativeData.programUnitCnt">
                                        {{ 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 v-if="showCreativeData && showCreativeData.creativeTag">
                                        {{ 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
                                            v-decorator="[
                                                'matchingLogic',
                                                {
                                                    rules: [
                                                        {
                                                            required: true,
                                                            message: '转化目标必选'
                                                        }
                                                    ],
                                                    initialValue: 1
                                                }
                                            ]"
                                        >
                                            <a-radio :value="1">
                                                多定向
                                            </a-radio>
                                        </a-radio-group>
                                    </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="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: 2 }]"
                                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">
                                <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 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.id" :value="appModel.id">
                                    {{ 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-form-item v-bind="formDrawerItemLayout">
                            <a-table
                                ref="table"
                                size="middle"
                                bordered
                                :dataSource="multipleBidDataDrawer"
                                :pagination="false"
                                style="width:180%"
                                :scroll="{ x: 1200 }"
                            >
                                <a-table-column
                                    key="appName"
                                    width="10%"
                                    data-index="appName"
                                    title="应用名称"
                                    align="center"
                                />
                                <a-table-column
                                    width="10%"
                                    key="appVersion"
                                    data-index="appVersion"
                                    title="应用标记"
                                    align="center"
                                />
                                <a-table-column
                                    width="10%"
                                    key="platform"
                                    data-index="platform"
                                    :scopedSlots="{ customRender: 'platform' }"
                                    ,
                                    title="系统平台"
                                    align="center"
                                >
                                    <span slot-scope="text, record">
                                        {{ text === 1 ? 'Android' : 'iOS' }}
                                    </span>
                                </a-table-column>
                                <a-table-column
                                    width="10%"
                                    key="count"
                                    data-index="count"
                                    title="覆盖账户"
                                    align="center"
                                >
                                </a-table-column>
                                <a-table-column
                                    width="20%"
                                    key="tracUrl"
                                    data-index="tracUrl"
                                    title="第三方点击监测链接"
                                    align="center"
                                    :ellipsis="true"
                                >
                                    <template slot-scope="text, record">
                                        <editable-cell
                                            :text="text"
                                            @change="onCellChange(record.id, 'tracUrl', $event)"
                                        />
                                    </template>
                                </a-table-column>
                                <a-table-column
                                    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
                                    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
                                    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>
                        </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" />
                            <span style="color:red"> 需加白使用</span>
                            <div v-if="uriCheck">
                                <a-input
                                    placeholder="请填写链接"
                                    v-decorator="['schemaUri', { rules: [{ message: '链接不能为空' }] }]"
                                />
                            </div>
                        </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-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>
            <div style="display: flex">
                <a-input placeholder="输入定向包名称关键词" style="width:60%" v-model="searchTemplate" />
                <a-button type="primary" :style="{ marginRight: '8px', marginLeft: '8px' }" @click="getTargetPerson()">
                    查询
                </a-button>
                <a-button
                    @click="
                        searchTemplate = null
                        ipagination.current = 1
                        checkPerson = checkPersonElse
                        getTargetPerson()
                    "
                >
                    重置
                </a-button>
                <div style="line-height: 32px;font-weight: 700;margin-left: 50px;">已选择({{ sumContent }})</div>
            </div>
            <a-checkbox-group v-model="checkPerson" style="width: 100%;" @change="setVideoData">
                <div class="card-person-drawer info-detail">
                    <a-card
                        :title="item.templateName"
                        class="card-person card-item"
                        v-for="(item, index) in personList"
                        :key="index"
                    >
                        <div slot="extra">
                            <a-checkbox :value="item.id" @change="setData(item.id)"></a-checkbox>
                        </div>

                        <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">
                                        <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="800"
            :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: -9%;">
                        <a-form-item label="广告位置">
                            <checkBoxGroup
                                :options="[
                                    { label: '优选广告位', value: 1 },
                                    { label: '上下滑大屏广告', value: 6 },
                                    { label: '视频播放页广告', value: 3 },
                                    { 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">
                    <a-col :span="16">
                        <a-form-item label="关联封面数">
                            <a-input-number
                                style="width:200px"
                                :max="imageCntMax"
                                :step="1"
                                :min="1"
                                v-decorator="[
                                    'imageCnt',
                                    { initialValue: 5, 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 label="自定义组上限">
                            <a-input-number
                                v-decorator="[
                                    'customUnitCnt',
                                    { initialValue: 400, rules: [{ required: true, message: '请填写自定义组上限' }] }
                                ]"
                                style="width: 100%"
                                placeholder="仅支持输入自然数"
                                :max="customUnitCntMax"
                                :precision="0"
                            />
                        </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="[
                                    'programUnitCnt',
                                    { initialValue: 60, rules: [{ required: true, message: '请填写程序化组上限' }] }
                                ]"
                                style="width: 100%"
                                placeholder="仅支持输入自然数"
                                :max="60"
                                :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="广告语">
                            <div style="position:relative" v-for="(item, index) in descriptionList" :key="index">
                                <a-textarea
                                    class="rending"
                                    placeholder="请输入广告语"
                                    @change="descriptionchange(item.value, index)"
                                    v-model.trim="item.value"
                                    :autosize="{ minRows: 2, maxRows: 6 }"
                                    :max-length="30"
                                ></a-textarea>
                                <p
                                    style="
                                font-size: 12px;
                                color: #b6bbc7;
                                letter-spacing: 0.3px;
                                text-align: right;
                                line-height: 30px;
                                position: absolute;
                                bottom: 0;
                                right: 6px;
                                width: 100%;
                                margin-bottom: 0;
                              "
                                >
                                    {{ item.value.length }}/30
                                    <!-- {{ getFormData('description').length  }}/30 -->
                                </p>
                                <div style="position:absolute;right:-50px;top:-10px">
                                    <a-icon type="plus" @click="addDescription()" style="margin-right:15px" />
                                    <a-icon
                                        type="minus"
                                        @click="removeDescription(index)"
                                        v-if="descriptionList.length > 1"
                                    />
                                </div>
                            </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>
    </div>
</template>

<script>
//   import UserMenu from '../tools/UserMenu'
//   import SMenu from '../menu/'
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 uploadFile from '@/components/uploadFileMd5Push.vue'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
import EditableCell from './editablCell'
// 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 = []
export default {
    name: 'GlobalHeader',
    components: {
        //   UserMenu,
        //   SMenu,
        Logo,
        Treeselect,
        selectCheckAll,
        checkBoxGroup,
        uploadFile,
        selectTable,
        EditableCell
    },
    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,
            //基本信息参数
            budgetType: '1',
            dayBudgetType: '1',
            projectId: null,
            projectName: null,
            //目标应用参数
            targetAppVisible: false,
            appList: [], //分平台数据，从总数据中筛选，避免多次请求接口
            appListAll: [], //所有的数据，做分平台的元数据
            tongbuLoading: false, //同步app按钮loading
            uriCheck: false, //调起链接，是否开启
            multipleBidDataDrawer: [],
            multipleBidData: [],
            appDetail: null,
            personLoading: false,
            // convertId: null,
            // convertList: [],
            // convertType: '1',

            //目标人群参数
            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: 15,
            actionBarTextList: [],
            descriptionList: [{ value: '' }],
            fieldNames: {
                label: 'category_name',
                value: 'category_id',
                children: 'child'
            },
            createOptions: [],
            showCreativeData: 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: 5 },
                wrapperCol: { span: 19 }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 20,
                        offset: 4
                    }
                }
            },
            tailFormItemLayoutElse: {
                wrapperCol: {
                    sm: {
                        span: 20,
                        offset: 1
                    }
                }
            },
            tailFormDrawerItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 19,
                        offset: 5
                    }
                }
            },
            disabled: false
        }
    },
    computed: {},
    watch: {
        projectId: function(n, o) {
            if (this.$route.query.id) {
                return
            } else {
                if (n) {
                    this.getAction('/kuaishouProjectStrategy/checkProjectisOpen', { projectId: n }).then(res => {
                        console.log(res)
                        if (res.success) {
                            if (res.result === 1) {
                                this.disabled = false
                            } else {
                                this.$message.error('此项目有开启的配置，无法新建配置')
                                this.disabled = true
                            }
                        }
                    })
                    this.formProject.resetFields()
                    this.formInformation.resetFields()
                    this.formOptimize.resetFields()
                    this.formMaterial.resetFields()
                    this.multipleBidData = []
                    this.appDetail = {}
                    this.showCheckPerson = []
                    this.checkPerson = []
                    this.checkPersonAll = []
                    this.showCreativeData = null
                    this.description = [{ value: '' }]
                }
            }
        }
    },
    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,
        test() {
            // this.formProject.validateFields((err, values) => {
            //     console.log(values)
            // })
            // this.formInformation.validateFields((err, values) => {
            //     console.log(values)
            // })
            this.formOptimize.validateFields((err, values) => {
                console.log(values)
            })
            // this.formMaterial.validateFields((err, values) => {
            //     console.log(values)
            // })
            //  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), //素材表单
        },
        getQueryById(id) {
            this.getAction('/kuaishouProjectStrategy/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[0].accountId
                            }).then(result => {
                                if (result.success) {
                                    //console.log(res)
                                    this.createOptions = result.result
                                }
                            })
                        }
                    })
                    this.$nextTick(() => {
                        let data = res.result
                        this.projectName = data.projectName
                        this.projectId = data.projectId
                        this.formProject.setFieldsValue(pick(data, 'campaignType'))
                        this.formInformation.setFieldsValue(pick(data, 'campaignName', 'groupName'))
                        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', 'matchingLogic'))
                        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',
                            'customUnitCnt',
                            'programUnitCnt',
                            'channelType',
                            'assetMining',
                            'smartCover',
                            'actionBarText',
                            'creativeCategory',
                            'creativeTag'
                        )
                        // this.appDetail = { platformOs: data.platformOs, singleAppid: 1 }
                        this.postDataAction('/kuaishouAppPackage/getAppsDetail', {
                            apptemIds: JSON.parse(data.appIdArray)
                        }).then(result => {
                            if (result.success) {
                                this.multipleBidData = result.result
                                this.appDetail = {
                                    platformOs: result.result[0].platform < 3 ? 1 : 2,
                                    singleAppid: 1,
                                    appId: { key: result.result[0].apptemId },
                                    schemaUri: res.result.schemaUri
                                }
                            }
                        })
                        this.checkPerson = JSON.parse(data.templateIdArray)
                        this.checkPersonElse = JSON.parse(data.templateIdArray)
                        this.postDataAction('/kuaishouDirectionalPackage/getProjectTargetByIds', {
                            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) {
                        if (this.projectId) {
                            resolve({ ...values, projectId: this.projectId })
                        }
                    } 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('出错')
                    }
                })
            })
            Promise.all([formProjectData, formInformationData, formOptimizeData, formMaterialData])
                .then(res => {
                    if (
                        !this.showCreativeData ||
                        this.showCheckPerson.length === 0 ||
                        this.multipleBidData.length === 0
                    ) {
                        this.$message.error('请填写完整')
                        return
                    }
                    this.sumbitLoading = true
                    let params = { ...res[0], ...res[1], ...res[2], ...res[3], ...this.showCreativeData }
                    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 = this.multipleBidData.map(res => {
                        return res.apptemId
                    })
                    params.templateIdArray = 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 : ''
                    if (this.$route.query.id) {
                        params.id = this.$route.query.id
                    }
                    this.getAction('/kuaishouProjectStrategy/checkProjectisOpen', { projectId: params.projectId }).then(
                        res => {
                            if (res.success) {
                                if (res.result === 1) {
                                    this.postDataAction('/kuaishouProjectStrategy/createProjectStrategy', params).then(
                                        res => {
                                            if (res.success) {
                                                this.sumbitLoading = false
                                                window.close()
                                            } else {
                                                this.sumbitLoading = false
                                                this.$message.error('创建失败')
                                            }
                                        }
                                    )
                                } else {
                                    this.$message.error('此项目有开启的配置，无法新建配置')
                                    this.sumbitLoading = false
                                }
                            }
                        }
                    )
                })
                .catch(err => {
                    this.$message.error('请填写完整')
                })
        },
        clearAllData() {
            window.close()
        },
        descriptionchange(val, index) {
            let data = val
            this.$nextTick(() => {
                this.descriptionList[index].value = data.replace(/\s/g, '')
            })
        },
        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: '2'
                }).then(res => {
                    if (res.success) {
                        that.actionBarTextList = res.result
                    }
                })
            })
        },
        closeCreative() {
            this.optimizeVisible = false
            this.customUnitCntMax = 400
            this.imageCntMax = 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))
                    console.log(values, this.showCreativeData)
                    this.optimizeVisible = false
                    // 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 = 8
            } else {
                this.imageCntMax = 15
            }
        },
        setImageCnt(e) {
            this.customUnitCntMax = e ? Math.floor(2000 / e) : 2000
        },
        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 {
                data.findIndex(item => item === this.checkPersonOne) > -1
                this.checkPersonElse.splice(
                    this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
                    1
                )
            }
            // for (let i = 0; i < this.ipagination.current; i++) {
            //     this.checkPersonAll.push([])
            // }
            // this.checkPersonAll[this.ipagination.current - 1] = data

            // var sum = 0
            // for (let i = 0; i < this.checkPersonAll.length; i++) {
            //     sum += this.checkPersonAll[i].length
            // }

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

                // this.checkPersonAll[this.ipagination.current - 1] = this.checkPerson
            }
        },
        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
                }
                this.$nextTick(() => {
                    this.formTargetApp.setFieldsValue({ ...this.appDetail })

                    this.multipleBidDataDrawer = JSON.parse(JSON.stringify(this.multipleBidData))
                })
            }
            this.getAppList()
        },
        submitApp() {
            this.formTargetApp.validateFields((err, values) => {
                //console.log(values)
                if (!err) {
                    this.appDetail = values
                    this.multipleBidData = JSON.parse(JSON.stringify(this.multipleBidDataDrawer))
                    this.targetAppVisible = false
                    this.multipleBidDataDrawer = []
                    this.closeUnit()
                } else {
                }
            })
        },
        closeUnit(form) {
            this.uriCheck = false
            this.targetAppVisible = false
            this.multipleBidDataDrawer = []
            this.formTargetApp.resetFields()
        },
        appIdChange(val) {
            // this.siteList = []
            // this.getPageList(val)
            this.multipleBidDataDrawer = []
            if (this.getFormData('formTargetApp', 'singleAppid') == 0) {
                if (val && val.findIndex(item => item.key === 0) > -1) {
                    let appidArr = this.appList.map(item => {
                        return {
                            key: item.id,
                            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.multipleBidDataDrawer = appidArr.map(item => {
                            return {
                                ...item,
                                cpaBid: null,
                                trackUrl: '',
                                channelCode: '',
                                appId: item.key,
                                deepConversionBid: null
                            }
                        })
                    })
                } else {
                    this.$nextTick(() => {
                        this.multipleBidDataDrawer = val.map(item => {
                            return {
                                ...item,
                                cpaBid: null,
                                trackUrl: '',
                                channelCode: '',
                                appId: item.key,
                                deepConversionBid: null
                            }
                        })
                    })
                }
            } else {
                if (val) {
                    this.$nextTick(() => {
                        // this.multipleBidDataDrawer = this.appList.filter(item => {
                        //     return item.id === val.key
                        // })
                        this.postDataAction('/kuaishouAppPackage/getAppsDetail', { apptemIds: [val.key] }).then(res => {
                            if (res.success) {
                                this.multipleBidDataDrawer = res.result
                            }
                        })
                    })
                } else {
                    this.multipleBidDataDrawer = []
                }
            }
        },
        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 = { id: key }
                if (dataIndex == 'impressionUrl') {
                    params.impressionUrl = value
                } else if (dataIndex == 'tracUrl') {
                    params.tracUrl = value
                }
                this.postDataAction('/kuaishouAppPackage/edit', params).then(res => {
                    if (res.success) {
                        console.log(res)
                    }
                })
            }
        },
        addApplication() {},
        changeType(e) {
            console.log(e.target.value)
            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.projectId = this.projectId
            this.getAction('/kuaishouAppPackage/getProjectAppList', 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('/kuaishouDirectionalPackage/getProjectTargetByIds', {
                    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.lenght > 0) {
            } else {
                this.checkPersonAll = []
                this.checkPersonElse = []
            }
            this.checkPerson = []
        },
        getTargetPerson() {
            let params = {}
            params.pageSize = this.ipagination.pageSize
            params.pageNo = this.ipagination.current
            params.projectId = this.projectId
            params.templateName = this.searchTemplate
            this.getAction('/kuaishouDirectionalPackage/getProjectTarget', 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
                }
            })
        },
        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('/ctop/userAllocation/getAccountListByProjectId', { projectId: this.projectId }).then(
                res => {
                    if (res.success) {
                        this.getAction('/kuaishou/batch/getCreativeCategory', {
                            accountId: res.result[0].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.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 / 50
                smoothUp()
            }
            function smoothDown() {
                if (distance < total) {
                    distance += step
                    document.body.scrollTop = distance
                    document.documentElement.scrollTop = distance
                    window.pageYOffset = distance
                    setTimeout(smoothDown, 5)
                } 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>
