<style scoped lang="scss">
.account-item {
    ::v-deep .ant-form-item-control {
        line-height: 1;
    }
}

::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 {
    .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-spin :spinning="spinning">
            <div class="chartBox">
                <a-row :gutter="20">
                    <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
                        <a-card class="search-box step-jump" title="选择账户">
                            <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item
                                            label="账户名称"
                                            :labelCol="formItemLayout.labelCol"
                                            class="account-item require-check"
                                        >
                                            <div
                                                v-if="$route.query.id"
                                                style="line-height: 40px;
                                            font-size: 16px;
                                            font-weight: bold;"
                                            >
                                                <span v-for="(item, index) in creativeTagData" :key="index"
                                                    >{{ item.authName + '(' + item.accountId + ')'
                                                    }}{{ index == creativeTagData.length - 1 ? '' : ',' }}</span
                                                >
                                            </div>

                                            <Treeselect
                                                v-else
                                                :appId.sync="accountIds"
                                                :multiple="true"
                                                request="2,4"
                                                ref="treeSelect"
                                                style="width:100%"
                                                :limit="1"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="策略名称" :labelCol="formItemLayout.labelCol">
                                            <a-input
                                                v-decorator="[
                                                    'strategyName',
                                                    {
                                                        rules: [
                                                            { required: true, message: ' ' },
                                                            { validator: strategyNameValid }
                                                        ]
                                                    }
                                                ]"
                                            ></a-input>
                                        </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="[
                                                    '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="[
                                                    'unitName',
                                                    { rules: [{ required: true, message: '请填写组命名规范' }] }
                                                ]"
                                                allow-clear
                                                id="unitName"
                                            />

                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('日期', 'formInformation', 'unitName')"
                                                >+日期</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('应用包名', 'formInformation', 'unitName')"
                                                >+应用包名</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('创意制作方式', 'formInformation', 'unitName')"
                                                >+创意制作方式</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('广告位置', 'formInformation', 'unitName')"
                                                >+广告位置</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-form layout="horizontal" v-bind="formItemLayout" :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 label="选择应用">
                                            <a-button type="primary" :loading="tongbuLoading" @click="tongbuClick"
                                                >刷新应用</a-button
                                            >
                                            <a-table
                                                ref="table"
                                                size="middle"
                                                bordered
                                                :dataSource="multipleBidDataDrawer"
                                                :pagination="false"
                                                style="width:180%"
                                                :scroll="{ y: 400 }"
                                                rowKey="accountId"
                                            >
                                                <a-table-column
                                                    key="authName"
                                                    width="10%"
                                                    data-index="authName"
                                                    title="账户名称"
                                                    align="center"
                                                />
                                                <a-table-column
                                                    width="20%"
                                                    key="appId"
                                                    data-index="appId"
                                                    title="选择应用"
                                                    align="center"
                                                    :ellipsis="true"
                                                >
                                                    <template slot-scope="text, record">
                                                        <a-select
                                                            allowClear
                                                            v-model="text"
                                                            @change="onCellChange(record.accountId, 'appId', $event)"
                                                        >
                                                            <a-select-option
                                                                :value="item.appId"
                                                                v-for="(item, index) in record.appList"
                                                                :key="item.appId"
                                                                >{{ item.appName }}</a-select-option
                                                            >
                                                        </a-select>
                                                    </template>
                                                </a-table-column>
                                                <a-table-column
                                                    width="10%"
                                                    key="appVersion"
                                                    data-index="appVersion"
                                                    title="应用标记"
                                                    align="center"
                                                >
                                                </a-table-column>
                                                <a-table-column
                                                    width="20%"
                                                    key="clickTrackUrl"
                                                    data-index="clickTrackUrl"
                                                    title="第三方点击监测链接"
                                                    align="center"
                                                    :ellipsis="true"
                                                >
                                                    <template slot-scope="text, record">
                                                        <a-input
                                                            v-model="text"
                                                            allow-clear
                                                            @change="
                                                                onCellChange(record.accountId, 'clickTrackUrl', $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">
                                                        <a-input
                                                            v-model="text"
                                                            allow-clear
                                                            @change="
                                                                onCellChange(
                                                                    record.accountId,
                                                                    'actionbarClickUrl',
                                                                    $event
                                                                )
                                                            "
                                                        />
                                                    </template>
                                                </a-table-column>
                                                <a-table-column
                                                    width="20%"
                                                    key="useSchemaUri"
                                                    data-index="useSchemaUri"
                                                    title="是否调起链接"
                                                    align="center"
                                                    :ellipsis="true"
                                                >
                                                    <template slot-scope="text, record">
                                                        <a-radio-group
                                                            v-model="text"
                                                            @change="
                                                                onCellChange(record.accountId, 'useSchemaUri', $event)
                                                            "
                                                        >
                                                            <a-radio :value="1">
                                                                否
                                                            </a-radio>
                                                            <a-radio :value="0">
                                                                是
                                                            </a-radio>
                                                        </a-radio-group>
                                                        <br />
                                                        <a-input
                                                            v-if="text === 0"
                                                            v-model="record.schemaUri"
                                                            allow-clear
                                                            @change="
                                                                onCellChange(record.accountId, 'schemaUri', $event)
                                                            "
                                                        />
                                                    </template>
                                                </a-table-column>
                                            </a-table>
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                                <a-row :gutter="16" v-if="getFormData('formTargetApp', 'platformOs') == 1">
                                    <a-col :span="16">
                                        <a-form-item label="" v-bind="tailFormItemLayout">
                                            <a-checkbox
                                                v-decorator="[
                                                    'useAppMarket',
                                                    {
                                                        valuePropName: 'checked',
                                                        initialValue: false
                                                    }
                                                ]"
                                            >
                                                优先从系统应用商店下载
                                            </a-checkbox>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" v-if="getFormData('formTargetApp', 'useAppMarket')">
                                    <a-col :span="16">
                                        <a-form-item label="" v-bind="tailFormItemLayout">
                                            请勾选投放应用已上架的应用商店（默认全选）
                                            <a-checkbox-group
                                                v-decorator="[
                                                    'appStore',
                                                    {
                                                        initialValue: []
                                                    }
                                                ]"
                                            >
                                                <a-checkbox value="huawei">华为</a-checkbox>
                                                <a-checkbox value="oppo">OPPO</a-checkbox>
                                                <a-checkbox value="vivo">VIVO</a-checkbox>
                                                <a-checkbox value="xiaomi">小米</a-checkbox>
                                                <a-checkbox value="meizu">魅族</a-checkbox>
                                                <a-checkbox value="smartisan">锤子</a-checkbox>
                                            </a-checkbox-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </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-form layout="horizontal" v-bind="formItemLayout" :form="formDirectional">
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="自定义人群">
                                            <el-collapse
                                                v-model="activeKey"
                                                accordion
                                                v-if="finallyRightTree.length > 0"
                                            >
                                                <el-collapse-item
                                                    :name="item.key"
                                                    :key="index"
                                                    v-for="(item, index) in finallyRightTree"
                                                >
                                                    <template slot="title">
                                                        <h4>{{ item.label }}</h4>
                                                    </template>
                                                    <a-form :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                                                        <div class="acount-title">
                                                            <div class="acount-title-right">
                                                                <a-radio-group
                                                                    v-model="item.people"
                                                                    buttonStyle="solid"
                                                                    @change="personSelect(item)"
                                                                >
                                                                    <a-radio-button value="0">不限</a-radio-button>
                                                                    <a-radio-button value="1">定向</a-radio-button>
                                                                    <a-radio-button value="2">排除</a-radio-button>
                                                                    <a-radio-button value="3"
                                                                        >同时定向排除</a-radio-button
                                                                    >
                                                                </a-radio-group>
                                                            </div>
                                                        </div>
                                                        <div
                                                            class="dingxiang_paichu"
                                                            v-if="item.people != '0'"
                                                            style="width:100%"
                                                        >
                                                            <a-tabs
                                                                v-model="item.tabKey"
                                                                @change="retargetAccountId(item.key)"
                                                            >
                                                                <a-tab-pane
                                                                    key="1"
                                                                    tab="定向池"
                                                                    v-if="item.people != '2'"
                                                                >
                                                                    <a-table
                                                                        :columns="retargetColumns"
                                                                        :row-key="record => record.key"
                                                                        :data-source="retargetDataAll"
                                                                        :loading="loading"
                                                                        style="width:100%;margin:15px 0"
                                                                        :pagination="false"
                                                                        :scroll="{ y: 250 }"
                                                                        :row-selection="rowSelectionMin"
                                                                        bordered
                                                                        rowKey="id"
                                                                    >
                                                                        <template slot="name" slot-scope="name">
                                                                            {{ name }}
                                                                        </template>
                                                                        <template
                                                                            slot="populationType"
                                                                            slot-scope="populationType"
                                                                        >
                                                                            {{ populationType | customCrowdHandler }}
                                                                        </template>
                                                                    </a-table>
                                                                </a-tab-pane>
                                                                <a-tab-pane
                                                                    key="2"
                                                                    tab="排除池"
                                                                    v-if="item.people != '1'"
                                                                >
                                                                    <a-table
                                                                        :columns="retargetColumns"
                                                                        :row-key="record => record.key"
                                                                        :data-source="retargetDataAll"
                                                                        :loading="loading"
                                                                        style="width:100%;margin:15px 0"
                                                                        :pagination="false"
                                                                        :scroll="{ y: 250 }"
                                                                        :row-selection="rowSelectionMax"
                                                                        bordered
                                                                        rowKey="id"
                                                                    >
                                                                        <template slot="name" slot-scope="name">
                                                                            {{ name }}
                                                                        </template>
                                                                        <template
                                                                            slot="populationType"
                                                                            slot-scope="populationType"
                                                                        >
                                                                            {{ populationType | customCrowdHandler }}
                                                                        </template>
                                                                    </a-table>
                                                                </a-tab-pane>
                                                            </a-tabs>
                                                        </div>
                                                    </a-form>
                                                </el-collapse-item>
                                            </el-collapse>
                                            <h3 v-else>请选择账户</h3>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="网络">
                                            <a-radio-group
                                                buttonStyle="solid"
                                                v-decorator="[
                                                    'network',
                                                    {
                                                        initialValue: 0
                                                    }
                                                ]"
                                            >
                                                <a-radio-button :value="0">不限</a-radio-button>
                                                <a-radio-button :value="1">Wi-Fi</a-radio-button>
                                                <a-radio-button :value="2">移动网络</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="网红粉丝">
                                            <a-radio-group buttonStyle="solid" v-model="fansStarType">
                                                <a-radio-button :value="0">不限</a-radio-button>
                                                <a-radio-button :value="1">自定义</a-radio-button>
                                            </a-radio-group>
                                            <a-select
                                                v-if="fansStarType == 1"
                                                mode="multiple"
                                                style="width: 100%"
                                                optionFilterProp="children"
                                                showSearch
                                                :filterOption="filterOption"
                                                v-decorator="[
                                                    'fansStar',
                                                    { rules: [{ required: true, message: '请选择网红类别' }] }
                                                ]"
                                            >
                                                <a-select-option
                                                    v-for="item in fansStarOptions"
                                                    :key="item.tagId"
                                                    :value="item.tagId"
                                                    >{{ item.tagName }}</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
                                                buttonStyle="solid"
                                                v-decorator="['filterConvertedLevel', { initialValue: 0 }]"
                                                style="width:150%"
                                            >
                                                <a-radio-button :value="0">不限</a-radio-button>
                                                <a-radio-button :value="1">广告组</a-radio-button>
                                                <a-radio-button :value="2">广告计划</a-radio-button>
                                                <a-radio-button :value="3">本账户</a-radio-button>
                                                <a-radio-button :value="4">公司主体</a-radio-button>
                                                <a-radio-button :value="5">APP</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 buttonStyle="solid" v-model="deviceType">
                                                <a-radio-button :value="0">不限</a-radio-button>
                                                <a-radio-button :value="1">选择品牌</a-radio-button>
                                            </a-radio-group>
                                            <a-checkbox-group
                                                v-if="deviceType == 1"
                                                v-decorator="[
                                                    'deviceBrand',
                                                    { rules: [{ required: true, message: '请选择设备品牌' }] }
                                                ]"
                                                style="width:150%"
                                            >
                                                <a-checkbox :value="1" style="margin-bottom: 8px">OPPO</a-checkbox>
                                                <a-checkbox :value="2" style="margin-bottom: 8px">VIVO</a-checkbox>
                                                <a-checkbox :value="3" style="margin-bottom: 8px">华为</a-checkbox>
                                                <a-checkbox :value="4" style="margin-bottom: 8px">小米</a-checkbox>
                                                <a-checkbox :value="5" style="margin-bottom: 8px">荣耀</a-checkbox>
                                                <a-checkbox :value="6" style="margin-bottom: 8px">三星</a-checkbox>
                                                <a-checkbox :value="7" style="margin-bottom: 8px">金立</a-checkbox>
                                                <a-checkbox :value="8" style="margin: 0 0 8px 0">魅族</a-checkbox>
                                                <a-checkbox :value="9" style="margin-bottom: 8px">乐视</a-checkbox>
                                                <a-checkbox :value="10" style="margin-bottom: 8px">其他</a-checkbox>
                                                <a-checkbox
                                                    :value="11"
                                                    style="margin-bottom: 8px"
                                                    v-if="getFormData('formTargetApp', 'platformOs') == 2"
                                                    >苹果</a-checkbox
                                                >
                                            </a-checkbox-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="设备价格">
                                            <a-radio-group buttonStyle="solid" v-model="priceType">
                                                <a-radio-button :value="0">不限</a-radio-button>
                                                <a-radio-button :value="1">选择价格</a-radio-button>
                                            </a-radio-group>
                                            <a-checkbox-group
                                                v-if="priceType == 1"
                                                v-decorator="[
                                                    'devicePrice',
                                                    { rules: [{ required: true, message: '请选择设备价格' }] }
                                                ]"
                                                style="width:150%"
                                            >
                                                <a-checkbox :value="1" style="margin-bottom: 8px">1500以下</a-checkbox>
                                                <a-checkbox :value="2" style="margin-bottom: 8px">1501~2000</a-checkbox>
                                                <a-checkbox :value="3" style="margin-bottom: 8px">2001~2500</a-checkbox>
                                                <a-checkbox :value="4" style="margin-bottom: 8px">2501~3000</a-checkbox>
                                                <a-checkbox :value="5" style="margin-left: 0; margin-bottom: 8px"
                                                    >3001~3500</a-checkbox
                                                >
                                                <a-checkbox :value="6" style="margin-bottom: 8px">3501~4000</a-checkbox>
                                                <a-checkbox :value="7" style="margin-bottom: 8px">4001~4500</a-checkbox>
                                                <a-checkbox :value="8" style="margin-bottom: 8px">4501~5000</a-checkbox>
                                                <a-checkbox :value="9" style="margin-left: 0; margin-bottom: 8px"
                                                    >5001~5500</a-checkbox
                                                >
                                                <a-checkbox :value="10" style="margin-bottom: 8px">5500以上</a-checkbox>
                                            </a-checkbox-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </a-card>
                        <a-card class="search-box step-jump" title="优化目标">
                            <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="优化目标">
                                            <a-radio-group
                                                v-decorator="['bidType', { initialValue: 10 }]"
                                                button-style="solid"
                                            >
                                                <a-radio-button :value="10">
                                                    转化数
                                                </a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="转化目标">
                                            <a-select
                                                style="width:300px"
                                                allowClear
                                                v-decorator="[
                                                    'ocpxActionType',
                                                    { rules: [{ required: true, message: '转化目标必选' }] }
                                                ]"
                                            >
                                                <a-select-option :value="2">行为数</a-select-option>
                                                <a-select-option :value="180">激活</a-select-option>
                                                <a-select-option :value="53">表单提交</a-select-option>
                                                <a-select-option :value="394">订单提交</a-select-option>
                                                <a-select-option :value="348">使用有效线索</a-select-option>
                                                <a-select-option :value="383">授信出价</a-select-option>
                                                <a-select-option :value="384">完件出价</a-select-option>
                                                <a-select-option :value="190">付费出价</a-select-option>
                                                <a-select-option :value="191">首日ROI</a-select-option>
                                                <a-select-option :value="396">注册优化目标</a-select-option>
                                                <a-select-option :value="324">唤起应用</a-select-option>
                                                <a-select-option :value="715">微信复制优化目标</a-select-option>
                                                <a-select-option :value="716">多转化事件</a-select-option>
                                                <a-select-option :value="717">广告观看次数</a-select-option>
                                                <a-select-option :value="773">关键行为</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="计费方式">
                                            <a-radio-group default-value="10" button-style="solid">
                                                <a-radio-button value="10">
                                                    按展示付费（oCPM）
                                                </a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="转化目标出价">
                                            <a-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>
                                <a-row :gutter="16" v-if="groupTypeData">
                                    <a-col
                                        :span="16"
                                        v-if="
                                            (getFormData('formOptimize', 'ocpxActionType') == 180 ||
                                                getFormData('formOptimize', 'ocpxActionType') == 53) &&
                                                groupTypeData &&
                                                groupTypeData.deepConversionTypes.length > 0
                                        "
                                    >
                                        <a-form-item label="深度转化目标">
                                            <a-select
                                                v-decorator="['deepConversionType']"
                                                allowClear
                                                style="width:300px"
                                            >
                                                <a-select-option
                                                    :value="items.deepConversionType"
                                                    v-for="(items, index) of groupTypeData.deepConversionTypes"
                                                    :key="index"
                                                >
                                                    {{ items.desc }}</a-select-option
                                                >
                                            </a-select>
                                        </a-form-item>
                                        <!-- <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" v-if="groupTypeData">
                                    <a-col
                                        :span="16"
                                        v-if="
                                            (getFormData('formOptimize', 'ocpxActionType') == 180 ||
                                                getFormData('formOptimize', 'ocpxActionType') == 53) &&
                                                groupTypeData &&
                                                groupTypeData.deepConversionTypes.length > 0
                                        "
                                    >
                                        <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-form layout="horizontal" v-bind="formItemLayout" :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: 4
                                                    }
                                                ]"
                                            >
                                                <a-radio-button :value="4">自定义</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="[
                                                    'showMode',
                                                    {
                                                        rules: [
                                                            {
                                                                required: true,
                                                                message: '创意展现方式必选'
                                                            }
                                                        ],
                                                        initialValue: 1
                                                    }
                                                ]"
                                            >
                                                <a-radio-button :value="1">轮播</a-radio-button>
                                                <a-radio-button :value="2">优选</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="投放方式">
                                            <a-radio-group
                                                button-style="solid"
                                                v-decorator="[
                                                    'speed',
                                                    {
                                                        rules: [
                                                            {
                                                                required: true,
                                                                message: '创意展现方式必选'
                                                            }
                                                        ],
                                                        initialValue: 1
                                                    }
                                                ]"
                                            >
                                                <a-radio-button :value="1">加速投放</a-radio-button>
                                                <a-radio-button :value="2">平滑投放</a-radio-button>
                                                <a-radio-button :value="3">优先低成本</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="广告位置">
                                            <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
                                                v-decorator="[
                                                    'unitNum',
                                                    {
                                                        initialValue: 60,
                                                        rules: [{ required: true, message: '单计划组数量必填' }]
                                                    }
                                                ]"
                                                :min="1"
                                                style="width: 100%"
                                                placeholder="仅支持输入自然数"
                                                :precision="0"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="组下素材数量">
                                            <a-input-number
                                                v-decorator="[
                                                    'materialNum',
                                                    {
                                                        initialValue: 15,
                                                        rules: [{ required: true, message: '组下素材数量必填' }]
                                                    }
                                                ]"
                                                style="width: 100%"
                                                placeholder="仅支持输入自然数"
                                                :precision="0"
                                                :max="15"
                                                :min="1"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="行动号召">
                                            <!-- mode="multiple" -->
                                            <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;
                                                    border: 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-table
                                                ref="table"
                                                size="middle"
                                                bordered
                                                :dataSource="creativeTagData"
                                                :pagination="false"
                                                style="width:180%"
                                                :scroll="{ y: 400 }"
                                                rowKey="accountId"
                                            >
                                                <a-table-column
                                                    key="authName"
                                                    width="10%"
                                                    data-index="authName"
                                                    title="账户名称"
                                                    align="center"
                                                />
                                                <a-table-column
                                                    width="10%"
                                                    key="creativeCategory"
                                                    data-index="creativeCategory"
                                                    title="创意分类"
                                                    align="center"
                                                    :ellipsis="true"
                                                >
                                                    <template slot-scope="text, record">
                                                        <a-cascader
                                                            @change="
                                                                onCellChangeCreative(
                                                                    record.accountId,
                                                                    'creativeCategory',
                                                                    $event
                                                                )
                                                            "
                                                            :options="createOptions"
                                                            v-model="text"
                                                            :fieldNames="fieldNames"
                                                            placeholder="请选择创意分类"
                                                        />
                                                    </template>
                                                </a-table-column>
                                                <a-table-column
                                                    width="10%"
                                                    key="creativeTag"
                                                    data-index="creativeTag"
                                                    title="创意标签"
                                                    align="center"
                                                >
                                                    <template slot-scope="text, record">
                                                        <a-select
                                                            @change="
                                                                onCellChangeCreative(
                                                                    record.accountId,
                                                                    'creativeTag',
                                                                    $event
                                                                )
                                                            "
                                                            mode="tags"
                                                            style="width: 100%"
                                                            placeholder="按回车生成标签"
                                                            v-model="text"
                                                            dropdownClassName="display-none-selset"
                                                            :token-separators="[',', ' ', '，']"
                                                        >
                                                        </a-select>
                                                    </template>
                                                </a-table-column>
                                            </a-table>
                                        </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-spin>
    </div>
</template>

<script>
//   import UserMenu from '../tools/UserMenu'
//   import SMenu from '../menu/'
import { mapGetters } from 'vuex'

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 Treeselect from './treeSelectAccount.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 interestVideoOptions = []
let retargetColumns = [
    {
        title: '人群包',
        dataIndex: 'name',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'name' }
    },
    {
        title: '属性',
        dataIndex: 'populationType',
        scopedSlots: {
            customRender: 'populationType'
        },
        width: 200
    },
    {
        title: '所属账号',
        dataIndex: 'accountId',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'accountId' }
    }
]
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 {
            spinning: false,
            accountIds: [],
            fansStarOptions: [],
            fansStarType: 0,
            deviceType: 0,
            priceType: 0,
            customCrowd: '0',
            tabKey: '0',
            retargetDataAll: [],
            finallyRightTree: [],
            retargetColumns,
            activeKey: '',
            loading: false,
            formProject: this.$form.createForm(this), //选择项目表单
            formInformation: this.$form.createForm(this), //设置基本信息表单
            formTargetApp: this.$form.createForm(this), //目标应用编辑表单
            formDirectional: this.$form.createForm(this), //定向包编辑表单
            formOptimize: this.$form.createForm(this), //优化目标表单
            formOriginality: 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: [],
            creativeTagData: [],
            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: null,
            //创意信息参数
            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,
            retargetDataAll: []
        }
    },
    computed: {
        rowSelectionMax() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                    this.finallyRightTree[index].excludeSelectedRowKeys = selectedRowKeys
                    this.finallyRightTree[index].excludeSelectedKeys = selectedRows
                },
                // selectedRowKeys: this.finallyRightTree[
                //     this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                // ].excludeSelectedRowKeys,
                getCheckboxProps: record => ({
                    props: {
                        disabled:
                            this.finallyRightTree[
                                this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                            ].incluedSelectedRowKeys.indexOf(record.key) > -1,
                        name: record.name,
                        defaultChecked:
                            this.finallyRightTree[
                                this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                            ].excludeSelectedRowKeys.indexOf(record.key) > -1
                    }
                })
            }
        },
        rowSelectionMin() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                    this.finallyRightTree[index].incluedSelectedRowKeys = selectedRowKeys
                    this.finallyRightTree[index].incluedSelectedKeys = selectedRows
                },
                // selectedRowKeys: this.finallyRightTree[
                //     this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                // ].incluedSelectedRowKeys,
                getCheckboxProps: record => ({
                    props: {
                        disabled:
                            this.finallyRightTree[
                                this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                            ].excludeSelectedRowKeys.indexOf(record.key) > -1,
                        name: record.name,
                        defaultChecked:
                            this.finallyRightTree[
                                this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                            ].incluedSelectedRowKeys.indexOf(record.key) > -1
                    }
                })
            }
        }
    },
    watch: {
        projectId: function(n, o) {
            if (this.$route.query.id) {
                return
            } else {
                if (n) {
                    this.getAction('/kuaishouProjectStrategy/checkProjectisOpen', { projectId: n }).then(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.multipleBidData = []
                    this.appDetail = {}
                    this.showCheckPerson = []
                    this.checkPerson = []
                    this.checkPersonAll = []
                    this.showCreativeData = null
                    this.description = [{ value: '' }]
                }
            }
        },
        accountIds: function(n, o) {
            if (this.$route.query.id) {
                return
            } else {
                if (n && n.length > 0) {
                    this.finallyRightTree = []
                    this.multipleBidDataDrawer = []
                    this.creativeTagData = []
                    this.descriptionList = [{ value: '' }]
                    this.formProject.resetFields()
                    this.formInformation.resetFields()
                    this.formOptimize.resetFields()

                    this.formTargetApp.resetFields()
                    this.formDirectional.resetFields()
                    this.formOriginality.resetFields()
                    this.postDataAction('/ctop/userAllocation/getAccountDetailByAccountIds', { accountIds: n }).then(
                        res => {
                            if (res.success) {
                                this.getAction('/kuaishou/batch/getCreativeCategory', {
                                    accountId: n[0]
                                }).then(result => {
                                    if (result.success) {
                                        this.createOptions = result.result
                                    }
                                })

                                this.finallyRightTree = res.result.map(item => {
                                    return {
                                        key: item.accountId,
                                        label: item.authName,
                                        // ...item,
                                        incluedSelectedRowKeys: [],
                                        incluedSelectedKeys: [],
                                        excludeSelectedKeys: [],
                                        excludeSelectedRowKeys: [],
                                        people: '0',
                                        tabKey: '1'
                                    }
                                })

                                this.creativeTagData = res.result.map((item, index) => {
                                    return {
                                        ...item,
                                        creativeCategory: [],
                                        creativeTag: [],
                                        key: index
                                    }
                                })

                                this.multipleBidDataDrawer = res.result.map(item => {
                                    return {
                                        ...item,
                                        appId: null,
                                        appVersion: '',
                                        clickTrackUrl: '',
                                        actionbarClickUrl: '',
                                        appList: [],
                                        appListAll: [],
                                        useSchemaUri: 1,
                                        schemaUri: ''
                                    }
                                })
                                for (let i = 0; i < this.multipleBidDataDrawer.length; i++) {
                                    let params = {}
                                    params.accountId = this.multipleBidDataDrawer[i].accountId
                                    this.getAction('/kuaishou/batch/getAppList', params).then(res => {
                                        if (res.success) {
                                            this.multipleBidDataDrawer[i].appListAll = res.result.map((item, index) => {
                                                return {
                                                    ...item,
                                                    key: index
                                                }
                                            })
                                            if (this.getFormData('formTargetApp', 'platformOs') == 1) {
                                                this.multipleBidDataDrawer[i].appList = this.multipleBidDataDrawer[
                                                    i
                                                ].appListAll.filter(item => {
                                                    return item.platform == 1 || item.platform == 2
                                                })
                                            } else if (this.getFormData('formTargetApp', 'platformOs') == 2) {
                                                this.multipleBidDataDrawer[i].appList = this.multipleBidDataDrawer[
                                                    i
                                                ].appListAll.filter(item => {
                                                    return item.platform == 3 || item.platform == 4
                                                })
                                            }
                                        }
                                    })
                                }
                            }
                        }
                    )
                    // this.postDataAction('/kuaishou/kuaiShouAppList/refreshAppByAccountIds', { accountIds: n }).then(res => {
                    //
                    // })
                } else {
                    this.finallyRightTree = []
                    this.multipleBidDataDrawer = []
                    this.creativeTagData = []
                    this.descriptionList = [{ value: '' }]
                    this.formProject.resetFields()
                    this.formInformation.resetFields()
                    this.formOptimize.resetFields()

                    this.formTargetApp.resetFields()
                    this.formDirectional.resetFields()
                    this.formOriginality.resetFields()
                }
            }
        },
        activeKey: function(n, o) {
            if (n != '') {
                this.retargetAccountId(n)
            }
        }
    },
    mounted() {
        this.$nextTick(function() {
            this.getDataType('FANS_STAR', 'fansStarOptions')
            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
        },
        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: {
        ...mapGetters(['userInfo']),
        moment,
        tongbuClick() {
            this.tongbuLoading = true
            this.postDataAction('/kuaishou/kuaiShouAppList/refreshAppByAccountIds', {
                accountIds: this.accountIds
            }).then(res => {
                if (res.success) {
                    this.tongbuLoading = false
                    this.postDataAction('/ctop/userAllocation/getAccountDetailByAccountIds', {
                        accountIds: this.accountIds
                    }).then(res => {
                        this.multipleBidDataDrawer = res.result.map(item => {
                            return {
                                ...item,
                                appId: null,
                                appVersion: '',
                                clickTrackUrl: '',
                                actionbarClickUrl: '',
                                appList: [],
                                appListAll: [],
                                useSchemaUri: 1,
                                schemaUri: ''
                            }
                        })
                        for (let i = 0; i < this.multipleBidDataDrawer.length; i++) {
                            let params = {}
                            params.accountId = this.multipleBidDataDrawer[i].accountId
                            this.getAction('/kuaishou/batch/getAppList', params).then(res => {
                                if (res.success) {
                                    this.multipleBidDataDrawer[i].appListAll = res.result.map((item, index) => {
                                        return {
                                            ...item,
                                            key: index
                                        }
                                    })
                                    if (this.getFormData('formTargetApp', 'platformOs') == 1) {
                                        this.multipleBidDataDrawer[i].appList = this.multipleBidDataDrawer[
                                            i
                                        ].appListAll.filter(item => {
                                            return item.platform == 1 || item.platform == 2
                                        })
                                    } else if (this.getFormData('formTargetApp', 'platformOs') == 2) {
                                        this.multipleBidDataDrawer[i].appList = this.multipleBidDataDrawer[
                                            i
                                        ].appListAll.filter(item => {
                                            return item.platform == 3 || item.platform == 4
                                        })
                                    }
                                }
                            })
                        }
                    })
                } else {
                    this.tongbuLoading = false
                }
            })
        },
        changeType(e) {
            let data = JSON.parse(JSON.stringify(this.multipleBidDataDrawer))

            if (e.target.value === 1) {
                this.$nextTick(() => {
                    this.multipleBidDataDrawer = []
                    this.multipleBidDataDrawer = data.map(item => {
                        return {
                            ...item,
                            appId: null,
                            appVersion: '',
                            clickTrackUrl: '',
                            actionbarClickUrl: '',
                            useSchemaUri: 1,
                            schemaUri: '',
                            appList: item.appListAll.filter(item => {
                                return item.platform == 1 || item.platform == 2
                            })
                        }
                    })
                })
            } else if (e.target.value === 2) {
                this.$nextTick(() => {
                    this.multipleBidDataDrawer = []
                    this.multipleBidDataDrawer = data.map(item => {
                        return {
                            ...item,
                            appId: null,
                            appVersion: '',
                            clickTrackUrl: '',
                            actionbarClickUrl: '',
                            useSchemaUri: 1,
                            schemaUri: '',
                            appList: item.appListAll.filter(item => {
                                return item.platform == 3 || item.platform == 4
                            })
                        }
                    })
                })
            }
        },
        personSelect(item) {
            if (item.people === '1' || item.people === '2') {
                this.retargetAccountId(item.key)
                item.tabKey = item.people
            } else if (item.people === '3') {
                this.retargetAccountId(item.key)
                item.tabKey = '1'
            }
            this.$nextTick(() => {
                item.incluedSelectedRowKeys = []
                item.incluedSelectedKeys = []
                item.excludeSelectedKeys = []
                item.excludeSelectedRowKeys = []
            })
        },
        customCrowdChange(e) {
            if (e.target.value == '1' || e.target.value == '2') {
                this.retargetTabChange()
                this.tabKey = e.target.value
            } else if (e.target.value == '3') {
                this.retargetTabChange()
                this.tabKey = '1'
            }
        },
        // 自定义人群的--同时定向排除tab切换事件
        // 自定义人群的--同时定向排除tab切换事件
        retargetAccountId(accountId) {
            this.retargetDataAll = []
            this.loading = true

            this.getAction('/kuaishou/batch/getPopulationList', {
                accountId: accountId
            }).then(res => {
                this.loading = false
                if (res.success) {
                    res.result.forEach(ele => {
                        ele.key = ele.orientationId
                        ele.id = ele.orientationId
                        ele.name = ele.orientationName + '(' + ele.orientationId + ')'
                        // ele.accountName=this.accountInfo.title
                        ele.accountId = accountId
                    })
                    // this.retargetData=res.data;
                    this.retargetDataAll = [...this.retargetDataAll, ...res.result]
                }
            })
        },
        getQueryById(id) {
            this.spinning = true
            this.getAction('/dimension/kuaiShouDimensionStrategy/queryById', { id }).then(res => {
                if (res.success) {
                    this.getActionBarText()

                    this.$nextTick(() => {
                        let data = res.result
                        this.accountIds = data.appInfoArray.map(item => {
                            return item.accountId
                        })
                        this.projectName = data.projectName
                        this.projectId = data.projectId
                        this.formProject.setFieldsValue(pick(data, 'campaignType', 'strategyName'))
                        this.formInformation.setFieldsValue(pick(data, 'campaignName', 'unitName'))
                        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 + ''
                        }
                        this.formOptimize.setFieldsValue(pick(data, 'bidType', 'ocpxActionType', 'cpaBid'))
                        this.descriptionList = res.result.description
                            ? 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 ? JSON.parse(data.actionBarText) : []
                        this.showCreativeData = pick(
                            data,
                            'unitType',
                            'sceneId',
                            'imageCnt',
                            'customUnitCnt',
                            'programUnitCnt',
                            'channelType',
                            'assetMining',
                            'smartCover',
                            'actionBarText'
                        )
                        this.formOriginality.setFieldsValue(
                            pick(
                                data,
                                'unitType',
                                'sceneId',
                                'imageCnt',
                                'customUnitCnt',
                                'programUnitCnt',
                                'channelType',
                                'assetMining',
                                'smartCover',
                                'actionBarText',
                                'showMode',
                                'speed',
                                'unitNum',
                                'materialNum'
                            )
                        )
                        data.platformOs = data.appInfoArray[0].platform > 2 ? 2 : 1
                        this.formTargetApp.setFieldsValue(pick(data, 'platformOs'))
                        setTimeout(() => {
                            if (data.platformOs == 1) {
                                data.useAppMarket = data.useAppMarket == 1 ? true : false
                                this.formTargetApp.setFieldsValue(pick(data, 'useAppMarket'))
                            }
                            setTimeout(() => {
                                data.appStore = data.appStore ? JSON.parse(data.appStore) : []
                                this.formTargetApp.setFieldsValue(pick(data, 'appStore'))
                            }, 100)
                        }, 100)

                        this.$nextTick(() => {
                            this.formDirectional.setFieldsValue(pick(data, 'network', 'filterConvertedLevel'))
                        })
                        if (data.fansStar && data.fansStar != '[]') {
                            this.fansStarType = 1
                            data.fansStar = JSON.parse(data.fansStar)
                            this.$nextTick(() => {
                                this.formDirectional.setFieldsValue(pick(data, 'fansStar'))
                            })
                        } else {
                            this.fansStarType = 0
                        }
                        if (data.deviceBrand && data.deviceBrand != '[]') {
                            this.deviceType = 1
                            data.deviceBrand = JSON.parse(data.deviceBrand)
                            this.$nextTick(() => {
                                this.formDirectional.setFieldsValue(pick(data, 'deviceBrand'))
                            })
                        } else {
                            this.deviceType = 0
                        }

                        if (data.devicePrice && data.devicePrice != '[]') {
                            this.priceType = 1
                            data.devicePrice = JSON.parse(data.devicePrice)
                            this.$nextTick(() => {
                                this.formDirectional.setFieldsValue(pick(data, 'devicePrice'))
                            })
                        } else {
                            this.priceType = 0
                        }

                        // this.appDetail = { platformOs: data.platformOs, singleAppid: 1 }

                        this.getAction('/kuaishou/batch/getCreativeCategory', {
                            accountId: data.creativeArray[0].accountId
                        }).then(result => {
                            if (result.success) {
                                this.createOptions = result.result
                                this.$nextTick(() => {
                                    this.creativeTagData = data.creativeArray.map(item => {
                                        return {
                                            ...item,
                                            authName: item.accountName,
                                            creativeTag: item.creativeTag
                                                ? item.creativeTag.charAt(0) === '['
                                                    ? JSON.parse(item.creativeTag)
                                                    : []
                                                : [],
                                            creativeCategory: item.creativeCategory
                                                ? item.creativeCategory > 10000
                                                    ? [
                                                          parseInt(item.creativeCategory / 10000),
                                                          parseInt(item.creativeCategory / 100),
                                                          item.creativeCategory
                                                      ]
                                                    : item.creativeCategory > 100
                                                    ? [parseInt(item.creativeCategory / 100), item.creativeCategory]
                                                    : [item.creativeCategory]
                                                : []
                                        }
                                    })
                                })
                            }
                        })
                        this.multipleBidDataDrawer = data.appInfoArray.map(item => {
                            return {
                                ...item,
                                authName: item.accountName,
                                appListAll: [],
                                appList: []
                            }
                        })
                        for (let i = 0; i < this.multipleBidDataDrawer.length; i++) {
                            let params = {}
                            params.accountId = this.multipleBidDataDrawer[i].accountId
                            if (i == 0) {
                                this.getAction('/kuaishou/batch/getIsActivate', {
                                    accountId: params.accountId,
                                    appId: this.multipleBidDataDrawer[i].appId,
                                    campaignType: 2
                                }).then(res => {
                                    if (res.success) {
                                        this.groupTypeData = res.result
                                    }
                                })
                            }
                            this.getAction('/kuaishou/batch/getAppList', params).then(res => {
                                if (res.success) {
                                    this.multipleBidDataDrawer[i].appListAll = res.result.map((item, index) => {
                                        return {
                                            ...item,
                                            key: index
                                        }
                                    })
                                    if (this.getFormData('formTargetApp', 'platformOs') == 1) {
                                        this.multipleBidDataDrawer[i].appList = this.multipleBidDataDrawer[
                                            i
                                        ].appListAll.filter(item => {
                                            return item.platform == 1 || item.platform == 2
                                        })
                                    } else if (this.getFormData('formTargetApp', 'platformOs') == 2) {
                                        this.multipleBidDataDrawer[i].appList = this.multipleBidDataDrawer[
                                            i
                                        ].appListAll.filter(item => {
                                            return item.platform == 3 || item.platform == 4
                                        })
                                    }
                                }
                            })
                        }
                        this.activeKey = data.crowdArray[0].accountId.accountId
                        this.$nextTick(() => {
                            this.finallyRightTree = data.crowdArray.map(item => {
                                return {
                                    key: item.accountId.accountId,
                                    label: item.accountName,
                                    // ...item,
                                    incluedSelectedRowKeys:
                                        item.population && item.population.length > 0 ? item.population : [],
                                    incluedSelectedKeys:
                                        item.population && item.population.length > 0 ? item.population : [],
                                    excludeSelectedKeys:
                                        item.excludePopulation && item.excludePopulation.length > 0
                                            ? item.excludePopulation
                                            : [],
                                    excludeSelectedRowKeys:
                                        item.excludePopulation && item.excludePopulation.length > 0
                                            ? item.excludePopulation
                                            : [],
                                    people:
                                        item.population && item.excludePopulation
                                            ? '3'
                                            : item.population && !item.excludePopulation
                                            ? '1'
                                            : !item.population && item.excludePopulation
                                            ? '2'
                                            : !item.population && !item.excludePopulation
                                            ? '0'
                                            : '0',

                                    tabKey:
                                        item.population && item.excludePopulation
                                            ? '1'
                                            : item.population && !item.excludePopulation
                                            ? '1'
                                            : !item.population && item.excludePopulation
                                            ? '2'
                                            : !item.population && !item.excludePopulation
                                            ? '1'
                                            : '1'
                                }
                            })
                        })
                        this.spinning = false
                    })
                } else {
                    this.spinning = false
                    let that = this
                    this.$error({
                        title: '请求出错，请返回列表页',
                        // JSX support
                        onOk: function() {
                            that.$router.replace('/autoLaunch/material-test')
                            that.$bus.$emit('remove', `/autoLaunch/creatMaterialTest?id=${that.$route.query.id}`)
                        }
                    })
                }
            })
        },
        handleSubmit() {
            let formProjectData = new Promise((resolve, reject) => {
                this.formProject.validateFields((err, values) => {
                    if (!err) {
                        if (this.accountIds.length > 0) {
                            resolve({ ...values, accountIds: this.accountIds })
                        }
                    } 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) => {
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('优化目标出错')
                    }
                })
            })
            let formTargetAppData = new Promise((resolve, reject) => {
                this.formTargetApp.validateFields((err, values) => {
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('目标应用出错')
                    }
                })
            })
            let formDirectionalData = new Promise((resolve, reject) => {
                this.formDirectional.validateFields((err, values) => {
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('定向包出错')
                    }
                })
            })
            let formOriginalityData = new Promise((resolve, reject) => {
                this.formOriginality.validateFields((err, values) => {
                    if (!err) {
                        resolve({ ...values })
                    } else {
                        reject('创意信息出错')
                    }
                })
            })
            Promise.all([
                formProjectData,
                formInformationData,
                formOptimizeData,
                formTargetAppData,
                formDirectionalData,
                formOriginalityData
            ])
                .then(res => {
                    if (this.multipleBidDataDrawer.length === 0 || this.descriptionList === 0) {
                        this.$message.error('请填写完整')
                        return
                    }
                    let isNotComplete = this.multipleBidDataDrawer.findIndex(item => {
                        return item.appId === null || item.appId === '' || item.appId === undefined
                    })
                    if (isNotComplete > -1) {
                        this.$message.error('未选择应用')
                        return
                    }
                    let isNotComplete2 = this.descriptionList.findIndex(item => {
                        return item.value === ''
                    })
                    if (isNotComplete2 > -1) {
                        this.$message.error('广告语未填')
                        return
                    }
                    this.sumbitLoading = true
                    let params = { ...res[0], ...res[1], ...res[2], ...res[3], ...res[4], ...res[5] }
                    params.useAppMarket = params.useAppMarket ? 1 : 0
                    params.appStore = params.appStore ? JSON.stringify(params.appStore) : '[]'
                    params.crowdArray = this.finallyRightTree.map(item => {
                        return {
                            accountId: item.key,
                            population:
                                item.people === '0'
                                    ? []
                                    : item.people === '1' || item.people === '3'
                                    ? item.incluedSelectedRowKeys
                                    : [],
                            excludePopulation:
                                item.people === '0'
                                    ? []
                                    : item.people === '2' || item.people === '3'
                                    ? item.excludeSelectedRowKeys
                                    : []
                        }
                    })
                    params.appInfoArray = this.multipleBidDataDrawer
                    params.creativeArray = this.creativeTagData.map(item => {
                        return {
                            ...item,
                            creativeCategory: item.creativeCategory
                                ? item.creativeCategory[item.creativeCategory.length - 1]
                                : '',
                            creativeTag: JSON.stringify(item.creativeTag)
                        }
                    })
                    if (this.fansStarType == 0) {
                        params.fansStar = []
                    }
                    if (this.deviceType == 0) {
                        params.deviceBrand = []
                    }
                    if (this.priceType == 0) {
                        params.devicePrice = []
                    }
                    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.description = JSON.stringify(
                        this.descriptionList.map(item => {
                            return item.value
                        })
                    )
                    params.singleAppid = 1
                    params.actionBarText = params.actionBarText
                    params.deepConversionType = params.deepConversionType ? params.deepConversionType : ''
                    params.deepConversionBid = params.deepConversionBid ? params.deepConversionBid : ''
                    if (this.$route.query.id) {
                        params.id = this.$route.query.id
                    }
                    params.userId = this.userInfo().id;
                    this.postDataAction('/dimension/kuaiShouDimensionStrategy/insertOrUpdate', params).then(res => {
                        if (res.success) {
                            this.sumbitLoading = false

                            if (params.id) {
                                this.$bus.$emit('remove', `/autoLaunch/creatMaterialTest?id=${params.id}`)
                            } else {
                                this.$bus.$emit('remove', '/autoLaunch/creatMaterialTest')
                            }
                            this.$router.replace('/autoLaunch/material-test')
                        } else {
                            this.sumbitLoading = false
                        }
                    })
                })
                .catch(err => {
                    this.$message.error('请填写完整')
                })
        },
        clearAllData() {
            this.$router.replace('/autoLaunch/material-test')
            this.$bus.$emit('remove', '/autoLaunch/creatMaterialTest')
            this.$bus.$emit('remove', `/autoLaunch/creatMaterialTest?id=${this.$route.query.id}`)
        },
        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))
                    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) {
            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) {
            if (value.length == 0 || value == undefined) {
                callback()
            } else if (value.length > 10) {
                callback('创意标签最多填写10个，请删减')
            } else {
                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()
            }
        },
        strategyNameValid(rule, value, callback) {
            if (value === '' || value === undefined) {
                callback('策略名称必须填写')
            } else {
                let params = {}
                params.strategyName = value
                if (this.$route.query.id) {
                    params.id = this.$route.query.id
                }
                this.getAction('/dimension/kuaiShouDimensionStrategy/checkStrategyName', params).then(res => {
                    if (res.success) {
                        if (res.result) {
                            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') {
                        this.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
        },
        submitApp() {
            this.formTargetApp.validateFields((err, 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()
        },
        onCellChangeCreative(key, dataIndex, value) {
            const dataSource = [...this.creativeTagData]
            const target = dataSource.find(item => item.accountId === key)

            if (target) {
                target[dataIndex] = value.length > 0 ? value : []
                if (dataIndex == 'creativeTag') {
                    if (value.length > 10) {
                        this.$message.error('账户的创意标签不能超过十个')
                        value.splice(10, value.length - 9)
                        target[dataIndex] = value
                        this.creativeTagData = dataSource
                        return
                    } else {
                        this.creativeTagData = dataSource
                    }
                } else {
                    this.creativeTagData = dataSource
                }
            }
        },
        onCellChange(key, dataIndex, value) {
            const dataSource = [...this.multipleBidDataDrawer]
            const target = dataSource.find(item => item.accountId === key)
            const index = dataSource.findIndex(item => item.accountId === key)
            if (target) {
                target[dataIndex] = typeof value === 'object' ? value.target.value : value
                if (dataIndex == 'appId') {
                    this.$nextTick(() => {
                        if (value) {
                            if (index === 0) {
                                this.getAction('/kuaishou/batch/getIsActivate', {
                                    accountId: key,
                                    appId: value,
                                    campaignType: 2
                                }).then(res => {
                                    if (res.success) {
                                        this.groupTypeData = res.result
                                    }
                                })
                            }
                            this.$nextTick(() => {
                                target['appVersion'] = target['appList'].filter(item => {
                                    return item.appId == value
                                })[0].appVersion
                            })

                            target['schemaUri'] = ''
                            target['useSchemaUri'] = 1
                            target['actionbarClickUrl'] = ''
                            target['clickTrackUrl'] = ''
                        } else {
                            this.$nextTick(() => {
                                target['appVersion'] = ''
                                target['schemaUri'] = ''
                                target['useSchemaUri'] = 1
                                target['actionbarClickUrl'] = ''
                                target['clickTrackUrl'] = ''
                            })
                        }
                    })
                }
                if (dataIndex == 'useSchemaUri') {
                    this.$nextTick(() => {
                        target['schemaUri'] = ''
                    })
                }
                setTimeout(() => {
                    this.multipleBidDataDrawer = dataSource
                }, 100)
            }
        },
        addApplication() {},

        //目标人群选择
        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
                        })
                    }
                })
            })
        },

        //设置通配符
        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 == 'unitName') {
                    this[form].setFieldsValue({ unitName: 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 == 'unitName') {
                    this[form].setFieldsValue({ unitName: node.value })
                }
                node.focus()
                node.selectionStart = startPos + v.length
                node.selectionEnd = startPos + v.length
                // this.campaignName = node.value
            } else {
                //OTHER
                node.value += v
                if (field == 'campaignName') {
                    this[form].setFieldsValue({ campaignName: node.value })
                } else if (field == 'unitName') {
                    this[form].setFieldsValue({ unitName: 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) {
            this.activeStep = index
            // 用 class=".step-jump" 添加锚点，此时的类名要放在tr上，放在td上不对，
            // 以后做的时候要注意这点，不是表格的时候，如何放置锚点
            let jump = document.querySelectorAll('.step-jump')
            // 通过 offsetTop 获取对象到窗体顶部的距离，然后赋值给 scrollTop，就能实现锚点的功能
            let total = jump[index].offsetTop
            // scrollTop滚动条距离页面的距离
            let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
            // 平滑滚动，时长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>
