<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> -->

                                            <selectTreeAccount
                                                v-model="accountIds"
                                                ref="treeSelect"
                                                style="width: 100%"
                                                :limit="1"
                                                :disabled="!!$route.query.id"
                                            />
                                        </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="[
                                                    'hostingScene',
                                                    {
                                                        rules: [{ required: true, message: '营销场景必选' }],
                                                        initialValue: 0,
                                                    },
                                                ]"
                                            >
                                                <a-radio-button :value="0">常规推广</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="投放媒体">
                                            <!-- { label: '视频播放页广告', value: 3 }, -->
                                            <checkBoxGroup
                                                :options="[
                                                    { label: '优选广告位', value: 1 },
                                                    { label: '上下滑大屏广告', value: 6 },

                                                    { label: '快手联盟优选', value: 10 },

                                                    { label: '激励视频广告', value: 24 },
                                                ]"
                                                v-decorator="[
                                                    'sceneIds',
                                                    {
                                                        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-radio-group
                                                button-style="solid"
                                                v-decorator="[
                                                    'campaignType',
                                                    {
                                                        rules: [{ required: true, message: '营销目标必选' }],
                                                        initialValue: 2,
                                                    },
                                                ]"
                                                @change="changeCampaign"
                                            >
                                                <a-radio-button :value="2" :disabled="!!$route.query.id"
                                                    >提升应用安装</a-radio-button
                                                >
                                                <a-radio-button :value="5" :disabled="!!$route.query.id"
                                                    >收集销售线索</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="[
                                                    'name',
                                                    {
                                                        rules: [{ required: true, message: '名称必填' }],
                                                    },
                                                ]"
                                            ></a-input>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item>
                                            <span slot="label">
                                                <a-tooltip>
                                                    <template slot="title">
                                                        命名规则修改后计划命名立刻生效，广告组/创意名称将在下次创建时生效，不输入将按照默认规则命名。日期/序号未设置情况下会默认在广告组名称后追加
                                                    </template>
                                                    <a-icon type="question-circle" />
                                                </a-tooltip>
                                                自定义命名规则
                                            </span>
                                            <a-radio-group
                                                button-style="solid"
                                                v-decorator="[
                                                    'ruleEnable',
                                                    {
                                                        rules: [{ required: true, message: '自定义命名规则必选' }],
                                                        initialValue: false,
                                                    },
                                                ]"
                                            >
                                                <a-radio-button :value="false">不开启</a-radio-button>
                                                <a-radio-button :value="true">开启</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
                                    <a-col :span="16">
                                        <a-form-item label="计划命名规则">
                                            <a-input
                                                v-decorator="[
                                                    'campaignNameRule',
                                                    { rules: [{ message: '请填写计划的命名规则' }] },
                                                ]"
                                                allow-clear
                                                id="campaignNameRule"
                                            />

                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('时间', 'formInformation', 'campaignNameRule')"
                                                >+时间</a-tag
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
                                    <a-col :span="16">
                                        <a-form-item label="组命名规则">
                                            <a-input
                                                v-decorator="[
                                                    'unitNameRule',
                                                    { rules: [{ message: '请填写组命名规范' }] },
                                                ]"
                                                allow-clear
                                                id="unitNameRule"
                                            />

                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('时间', 'formInformation', 'unitNameRule')"
                                                >+时间</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('序号', 'formInformation', 'unitNameRule')"
                                                >+序号</a-tag
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
                                    <a-col :span="16">
                                        <a-form-item label="创意命名规则">
                                            <a-input
                                                v-decorator="[
                                                    'creativeNameRule',
                                                    { rules: [{ message: '请填写创意命名规则' }] },
                                                ]"
                                                allow-clear
                                                id="creativeNameRule"
                                            />

                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('时间', 'formInformation', 'creativeNameRule')"
                                                >+时间</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('序号', 'formInformation', 'creativeNameRule')"
                                                >+序号</a-tag
                                            >
                                        </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">
                                <div
                                    v-if="
                                        getFormData('formProject', 'campaignType') &&
                                        getFormData('formProject', 'campaignType') == 2
                                    "
                                >
                                    <a-row :gutter="16">
                                        <a-col :span="16">
                                            <a-form-item label="选择应用">
                                                <a-select
                                                    style="width: 80%"
                                                    allowClear
                                                    v-decorator="[
                                                        'appId',
                                                        {
                                                            rules: [{ required: true, message: '应用必选' }],
                                                        },
                                                    ]"
                                                    @change="changeAppId"
                                                >
                                                    <a-select-option
                                                        :value="item.appId"
                                                        v-for="(item, index) in appList"
                                                        :key="item.appId"
                                                        >{{ item.appName }}({{ item.appVersion }}/{{
                                                            item.platform == 1 || item.platform == 2
                                                                ? 'android'
                                                                : 'ios'
                                                        }})</a-select-option
                                                    >
                                                </a-select>
                                                <a-button type="primary" :loading="tongbuLoading" @click="tongbuClick"
                                                    >刷新应用</a-button
                                                >
                                            </a-form-item>
                                        </a-col>
                                    </a-row>

                                    <a-row :gutter="16" v-if="changeAppIdVisible">
                                        <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: [
                                                                'huawei',
                                                                'oppo',
                                                                'vivo',
                                                                'xiaomi',
                                                                'meizu',
                                                                'smartisan',
                                                            ],
                                                        },
                                                    ]"
                                                >
                                                    <a-checkbox value="huawei">华为</a-checkbox>
                                                    <a-checkbox value="oppo">OPPO</a-checkbox>
                                                    <a-checkbox value="vivo">VIVO</a-checkbox>
                                                    <a-checkbox value="xiaomi">小米</a-checkbox>
                                                    <a-checkbox value="meizu">魅族</a-checkbox>
                                                    <a-checkbox value="smartisan">锤子</a-checkbox>
                                                </a-checkbox-group>
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                    <a-row :gutter="16">
                                        <a-col :span="16">
                                            <a-form-item label="应用下载详情">
                                                <a-select
                                                    v-decorator="['siteId']"
                                                    showSearch
                                                    allowClear
                                                    placeholder="选择应用下载详情页"
                                                    optionFilterProp="children"
                                                    :filterOption="filterOption"
                                                >
                                                    <a-select-option
                                                        v-for="appModel in siteList"
                                                        :key="appModel.siteId"
                                                        :value="appModel.siteId"
                                                    >
                                                        {{ appModel.name }}
                                                    </a-select-option>
                                                </a-select>
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                </div>
                                <a-row
                                    :gutter="16"
                                    v-else-if="
                                        getFormData('formProject', 'campaignType') &&
                                        getFormData('formProject', 'campaignType') == 5
                                    "
                                >
                                    <a-col :span="16">
                                        <a-form-item label="链接">
                                            <a-input
                                                placeholder="请填写链接"
                                                v-decorator="[
                                                    'webUri',
                                                    { rules: [{ required: true, message: '链接不能为空' }] },
                                                ]"
                                            />
                                        </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="自定义人群">
                                            <a-radio-group v-model="people" buttonStyle="solid" @change="personSelect">
                                                <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>

                                            <a-tabs v-model="tabKey" @change="retargetAccountId" v-if="people != '0'">
                                                <a-button
                                                    slot="tabBarExtraContent"
                                                    type="primary"
                                                    @click="refreshPopulation"
                                                    :loading="refreshPopulationLoading"
                                                    >刷新人群包</a-button
                                                >
                                                <a-tab-pane key="1" tab="定向池" v-if="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="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>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="地域">
                                            <a-radio-group v-model="district" @change="cityChange" buttonStyle="solid">
                                                <a-radio-button value="NONE">不限</a-radio-button>
                                                <a-radio-button value="CITY">按省市</a-radio-button>
                                            </a-radio-group>
                                            <div
                                                class="region"
                                                style="margin-top: 20px; width: 100%"
                                                v-show="district != 'NONE'"
                                            >
                                                <div class="provincyCity" v-if="district == 'CITY'">
                                                    <select-region
                                                        :checkData.sync="regionList"
                                                        :dataValue="regionList"
                                                    />
                                                </div>
                                            </div>
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                                <a-row :gutter="16" v-if="district == 'CITY'">
                                    <a-col :span="16">
                                        <a-form-item label="用户类型">
                                            <a-radio-group
                                                buttonStyle="solid"
                                                v-decorator="[
                                                    'userType',
                                                    {
                                                        initialValue: '0',
                                                    },
                                                ]"
                                            >
                                                <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-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="年龄">
                                            <a-radio-group v-model="ageType" buttonStyle="solid">
                                                <a-radio-button value="noLimit">不限</a-radio-button>
                                                <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
                                                <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
                                            </a-radio-group>
                                            <div v-if="ageType == 'ageLimit'" style="margin-top: 5px">
                                                <a-checkbox-group
                                                    v-decorator="[
                                                        'agesRange',
                                                        { rules: [{ required: true, message: '请选择年龄段' }] },
                                                    ]"
                                                >
                                                    <a-checkbox :value="18">18-23岁</a-checkbox>
                                                    <a-checkbox :value="24">24-30岁</a-checkbox>
                                                    <a-checkbox :value="31">31-40岁</a-checkbox>
                                                    <a-checkbox :value="41">41-49岁</a-checkbox>
                                                    <a-checkbox :value="50">50+</a-checkbox>
                                                </a-checkbox-group>
                                            </div>
                                            <div v-if="ageType == 'ageCustom'">
                                                <a-slider
                                                    range
                                                    :marks="marks"
                                                    :min="18"
                                                    :max="55"
                                                    v-decorator="[
                                                        'age',
                                                        {
                                                            rules: [
                                                                { required: true, message: '请选择年龄段' },
                                                                { validator: handleConfirmValue },
                                                            ],
                                                            initialValue: [18, 18],
                                                        },
                                                    ]"
                                                />
                                            </div>
                                        </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="[
                                                    'gender',
                                                    {
                                                        initialValue: '',
                                                    },
                                                ]"
                                            >
                                                <a-radio-button :value="''">不限</a-radio-button>
                                                <a-radio-button value="F">女性</a-radio-button>
                                                <a-radio-button value="M">男性</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-decorator="[
                                                    'platformOs',
                                                    {
                                                        initialValue: 3,
                                                    },
                                                ]"
                                                :disabled="getFormData('formProject', 'campaignType') != 5"
                                            >
                                                <a-radio-button :value="3">不限</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-form-item
                                            label=""
                                            v-bind="tailFormItemLayout"
                                            v-if="
                                                getFormData('formDirectional', 'platformOs') &&
                                                getFormData('formDirectional', 'platformOs') == 1
                                            "
                                        >
                                            <a-select
                                                style="width: 300px"
                                                v-decorator="[
                                                    'platformOv',
                                                    {
                                                        rules: [{ required: true, message: '版本必选' }],
                                                        initialValue: 3,
                                                    },
                                                ]"
                                            >
                                                <a-select-option :value="3">不限版本</a-select-option>
                                                <a-select-option :value="4">4.x及以上</a-select-option>
                                                <a-select-option :value="5">5.x及以上</a-select-option>
                                                <a-select-option :value="6">6.x及以上</a-select-option>
                                                <a-select-option :value="7">7.x及以上</a-select-option>
                                                <a-select-option :value="8">8.x及以上</a-select-option>
                                                <a-select-option :value="9">9.x及以上</a-select-option>
                                                <a-select-option :value="10">10.x及以上</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                        <a-form-item
                                            label=""
                                            v-bind="tailFormItemLayout"
                                            v-if="
                                                getFormData('formDirectional', 'platformOs') &&
                                                getFormData('formDirectional', 'platformOs') == 2
                                            "
                                        >
                                            <a-select
                                                style="width: 300px"
                                                v-decorator="[
                                                    'platformOv',
                                                    {
                                                        rules: [{ required: true, message: '版本必选' }],
                                                        initialValue: 6,
                                                    },
                                                ]"
                                            >
                                                <a-select-option :value="6">不限版本</a-select-option>
                                                <a-select-option :value="7">7.x及以上</a-select-option>
                                                <a-select-option :value="8">8.x及以上</a-select-option>
                                                <a-select-option :value="9">9.x及以上</a-select-option>
                                                <a-select-option :value="10">10.x及以上</a-select-option>
                                                <a-select-option :value="11">11.x及以上</a-select-option>
                                                <a-select-option :value="12">12.x及以上</a-select-option>
                                                <a-select-option :value="13">13.x及以上</a-select-option>
                                                <a-select-option :value="14">14.x及以上</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="[
                                                    'isOpen',
                                                    {
                                                        rules: [{ required: true, message: '版本必选' }],
                                                        initialValue: 1,
                                                    },
                                                ]"
                                            >
                                                <a-radio-button :value="1">智能扩量</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                        <a-form-item label="" v-bind="tailFormItemLayout">
                                            <a-checkbox-group
                                                v-decorator="['expansion', { initialValue: [] }]"
                                                style="width: 150%"
                                            >
                                                <a-checkbox
                                                    value="noAgeBreak"
                                                    style="margin-bottom: 8px"
                                                    :disabled="
                                                        ageType == 'ageLimit'
                                                            ? !getFormData('formDirectional', 'agesRange') ||
                                                              getFormData('formDirectional', 'agesRange').length == 0
                                                            : ageType == 'ageCustom'
                                                            ? !getFormData('formDirectional', 'age') ||
                                                              getFormData('formDirectional', 'age') == []
                                                            : true
                                                    "
                                                    >不可突破年龄</a-checkbox
                                                >
                                                <a-checkbox
                                                    value="noGenderBreak"
                                                    style="margin-bottom: 8px"
                                                    :disabled="
                                                        !getFormData('formDirectional', 'gender') ||
                                                        getFormData('formDirectional', 'gender') == ''
                                                    "
                                                    >不可突破性别</a-checkbox
                                                >
                                                <a-checkbox
                                                    value="noAreaBreak"
                                                    style="margin-bottom: 8px"
                                                    :disabled="regionList.length == 0"
                                                    >不可突破地域</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-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-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"
                                                v-decorator="[
                                                    'today',
                                                    {
                                                        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"
                                                @change="changeTimeData"
                                                v-decorator="[
                                                    'scheduleTime',
                                                    {
                                                        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-form-item
                                            label=""
                                            v-bind="tailFormItemLayout"
                                            v-show="
                                                getFormData('formOriginality', 'scheduleTime') &&
                                                getFormData('formOriginality', 'scheduleTime') == 2
                                            "
                                        >
                                            <scheduleTime
                                                v-if="
                                                    getFormData('formOriginality', 'scheduleTime') &&
                                                    getFormData('formOriginality', 'scheduleTime') == 2
                                                "
                                                style="width: 100%"
                                                :scheduleTime.sync="scheduleTimeData"
                                                ref="selectCheck"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="单日预算">
                                            <a-input-number
                                                v-decorator="[
                                                    'dayBudget',
                                                    {
                                                        rules: [
                                                            {
                                                                required: true,
                                                                message: '不小于500，不超过100000000，仅支持输入自然数',
                                                            },
                                                        ],
                                                    },
                                                ]"
                                                :min="500"
                                                :max="100000000"
                                                style="width: 90%"
                                                placeholder="不小于500，不超过100000000，仅支持输入自然数"
                                                :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="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: '转化目标必选' }] },
                                                ]"
                                                @change="getDeepTypesList"
                                            >
                                                <a-select-option
                                                    :value="items.ocpx_action_type"
                                                    v-for="items in ocpxActionList"
                                                    >{{ items.name }}</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-number
                                                v-decorator="[
                                                    'cpaBid',
                                                    {
                                                        rules: [{ required: true, message: '转化目标出价必填' }],
                                                    },
                                                ]"
                                                :min="0"
                                                :max="100000000"
                                                style="width: 90%"
                                                :precision="2"
                                            />
                                            元
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col
                                        :span="16"
                                        v-if="
                                            (getFormData('formOptimize', 'ocpxActionType') == 180 ||
                                                getFormData('formOptimize', 'ocpxActionType') == 53) &&
                                            deepTypesList.length > 0
                                        "
                                    >
                                        <a-form-item label="深度转化目标">
                                            <a-select
                                                v-decorator="['deepConversionType']"
                                                allowClear
                                                style="width: 300px"
                                            >
                                                <a-select-option
                                                    :value="items.event_type"
                                                    v-for="(items, index) of deepTypesList"
                                                    :key="index"
                                                >
                                                    {{ items.name }}</a-select-option
                                                >
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col
                                        :span="16"
                                        v-if="
                                            (getFormData('formOptimize', 'ocpxActionType') == 180 ||
                                                getFormData('formOptimize', 'ocpxActionType') == 53) &&
                                            deepTypesList.length > 0
                                        "
                                    >
                                        <a-form-item label="深度转化出价">
                                            <a-input-number
                                                v-decorator="['deepConversionBid']"
                                                :min="0"
                                                :max="100000000"
                                                style="width: 90%"
                                                :precision="2"
                                            />
                                            元
                                        </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="formCreative">
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="智能抽帧">
                                            <a-radio-group
                                                v-decorator="['smartCover', { initialValue: 2 }]"
                                                button-style="solid"
                                            >
                                                <a-radio-button :value="2"> 关闭 </a-radio-button>
                                                <a-radio-button :value="1"> 开启 </a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="行动号召按钮">
                                            <a-select
                                                v-decorator="[
                                                    'actionBar',
                                                    { 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: 3, 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-radio-group
                                                v-decorator="['assetMining', { initialValue: 2 }]"
                                                button-style="solid"
                                            >
                                                <a-radio-button :value="2"> 关闭 </a-radio-button>
                                                <a-radio-button :value="1"> 开启 </a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="第三方点击监测链接">
                                            <a-input
                                                v-decorator="[
                                                    'clickUrl',
                                                    {
                                                        rules: [
                                                            {
                                                                required:
                                                                    getFormData('formProject', 'campaignType') &&
                                                                    getFormData('formProject', 'campaignType') == 2,
                                                                message: '请填写第三方点击监测链接',
                                                            },
                                                            { validator: handleConfirmValueUrl },
                                                        ],
                                                    },
                                                ]"
                                                allow-clear
                                                id="clickUrl"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="第三方actionBar监测链接">
                                            <a-input
                                                v-decorator="[
                                                    'actionbarClickUrl',
                                                    {
                                                        rules: [{ validator: handleConfirmValueOkUndefind }],
                                                    },
                                                ]"
                                                allow-clear
                                                id="actionbarClickUrl"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="视频数量">
                                            <a-input-number
                                                v-decorator="[
                                                    'videoCount',
                                                    {
                                                        rules: [
                                                            {
                                                                required: true,
                                                                message: '视频数量必填',
                                                            },
                                                        ],
                                                    },
                                                ]"
                                                :min="1"
                                                :max="20"
                                                style="width: 90%"
                                                :precision="0"
                                            />
                                        </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 selectTreeAccount from '@/components/formComponents/selectAccount.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 selectRegion from '@/views/modules/kuaishouapp/account/stepForm/stepModule/selectRegion'
import scheduleTime from '@/components/formComponents/toutiaoTime'
// 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' },
    },
]
var str = ''
for (let i = 0; i < 7 * 24; i++) {
    str += '0'
}
export default {
    name: 'GlobalHeader',
    components: {
        //   UserMenu,
        //   SMenu,
        Logo,
        selectTreeAccount,
        selectCheckAll,
        checkBoxGroup,
        uploadFile,
        selectTable,
        selectRegion,
        scheduleTime,
        // 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: undefined,
            fansStarOptions: [],
            fansStarType: 0,
            deviceType: 0,
            priceType: 0,
            customCrowd: '0',
            tabKey: '0',
            retargetDataAll: [],
            refreshPopulationLoading: false,
            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), //定向包编辑表单
            platformOsDisabled: false,
            formOptimize: this.$form.createForm(this), //优化目标
            formOriginality: this.$form.createForm(this), //排期预算表单
            formCreative: this.$form.createForm(this), //创意表单
            sumbitLoading: false,
            //基本信息参数
            budgetType: '1',
            dayBudgetType: '1',
            projectId: null,
            projectName: null,
            //目标应用参数
            targetAppVisible: false,
            appList: [], //分平台数据，从总数据中筛选，避免多次请求接口
            appListAll: [], //所有的数据，做分平台的元数据
            siteList: [],
            tongbuLoading: false, //同步app按钮loading
            uriCheck: false, //调起链接，是否开启
            multipleBidDataDrawer: [],
            creativeTagData: [],
            multipleBidData: [],
            appDetail: null,
            personLoading: false,
            district: 'NONE',
            regionList: [],
            ageType: 'noLimit',
            marks: {
                18: '18岁',
                23: '23岁',
                28: '28岁',
                33: '33岁',
                38: '38岁',
                43: '43岁',
                48: '48岁',
                55: '55岁',
            },
            // convertId: null,
            // convertList: [],
            // convertType: '1',

            //目标人群参数
            people: '0',
            tabKey: '1',
            incluedSelectedRowKeys: [],
            incluedSelectedKeys: [],
            excludeSelectedKeys: [],
            excludeSelectedRowKeys: [],
            targetPersonVisible: false,
            personList: [],
            checkPerson: [],
            checkPersonAll: [],
            checkPersonElse: [],
            checkPersonOne: '',
            showCheckPerson: [],
            sumContent: 0,
            searchTemplate: '',
            scheduleTimeData: str,
            //优化目标参数
            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: [],
            changeAppIdVisible: true,
            ocpxActionList: [],
            deepTypesList: [],
        }
    },
    computed: {
        rowSelectionMax() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    this.excludeSelectedRowKeys = selectedRowKeys
                    this.excludeSelectedKeys = selectedRows
                },
                // selectedRowKeys: this.finallyRightTree[
                //     this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                // ].excludeSelectedRowKeys,
                getCheckboxProps: (record) => ({
                    props: {
                        disabled: this.incluedSelectedRowKeys.indexOf(record.key) > -1,
                        name: record.name,
                        defaultChecked: this.excludeSelectedRowKeys.indexOf(record.key) > -1,
                    },
                }),
            }
        },
        rowSelectionMin() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    this.incluedSelectedRowKeys = selectedRowKeys
                    this.incluedSelectedKeys = selectedRows
                },
                // selectedRowKeys: this.finallyRightTree[
                //     this.finallyRightTree.findIndex(item => item.key === this.activeKey)
                // ].incluedSelectedRowKeys,
                getCheckboxProps: (record) => ({
                    props: {
                        disabled: this.excludeSelectedRowKeys.indexOf(record.key) > -1,
                        name: record.name,
                        defaultChecked: this.incluedSelectedRowKeys.indexOf(record.key) > -1,
                    },
                }),
            }
        },
    },
    watch: {
        accountIds: function (n, o) {
            if (this.$route.query.id) {
                return
            } else {
                if (!!n) {
                    this.descriptionList = [{ value: '' }]
                    this.getAction('/kuaishou/batch/getAppList', { accountId: n }).then((res) => {
                        if (res.success) {
                            this.appList = res.result.map((item, index) => {
                                return {
                                    ...item,
                                    key: index,
                                }
                            })
                        }
                    })
                    // this.getIsActivate(null)
                    this.getOcpxActionList(null)
                }
            }
        },
        activeKey: function (n, o) {
            if (n != '') {
                this.retargetAccountId(n)
            }
        },
    },
    mounted() {
        this.$nextTick(function () {
            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,
        getOcpxActionList(value) {
            var params = {}
            params.accountId = this.accountIds
            params.campaignType = this.getFormData('formProject', 'campaignType')
            params.sceneCategory = 2
            params.sceneIds = this.getFormData('formProject', 'sceneIds')
            params.appId = value ? value : null

            this.postDataAction('/kuaishou/batch/conversionInfos', params).then((res) => {
                if (res.success) {
                    this.ocpxActionList = res.result.data.ocpx_types
                }
            })
        },
        getDeepTypesList(data) {
            if (!!data) {
                var params = {}
                params.accountId = this.accountIds
                params.sceneCategory = 0
                params.campaignType = this.getFormData('formProject', 'campaignType')
                params.sceneIds = this.getFormData('formProject', 'sceneIds')
                params.appId = this.getFormData('formTargetApp', 'appId')
                params.ocpxActionType = data
                this.postDataAction('/kuaishou/batch/deepTypes', params).then((res) => {
                    if (res.success) {
                        this.deepTypesList = res.result.data.deep_types
                    }
                })
            } else {
                this.deepTypesList = []
            }
        },
        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)
            }
            this.getOcpxActionList(null)
        },
        changeCampaign(e) {
            console.log(e.target.value)
            this.getActionBarText()
            this.$nextTick(()=>{
                this.getOcpxActionList()
            })
            
        },
        tongbuClick() {
            this.tongbuLoading = true
            // this.$refs.application.showApplication()
            this.getAction('/kuaishou/batch/syncAppList', {
                accountId: this.accountIds,
            }).then((res) => {
                if (res.success) {
                    this.tongbuLoading = false
                    this.$message.success(res.message)
                    this.getAction('/kuaishou/batch/getAppList', { accountId: this.accountIds }).then((res) => {
                        if (res.success) {
                            this.appList = res.result.map((item, index) => {
                                return {
                                    ...item,
                                    key: index,
                                }
                            })
                        }
                    })
                } else {
                    this.tongbuLoading = false
                    this.$message.error(res.message)
                }
            })
        },
        refreshPopulation() {
            if (this.accountIds) {
                this.refreshPopulationLoading = true
                // this.$refs.application.showApplication()
                this.getAction('/kuaishou/batch/pullPopulationList', {
                    accountId: this.accountIds,
                }).then((res) => {
                    if (res.success) {
                        this.refreshPopulationLoading = false
                        this.$message.success(res.message)
                        this.retargetTabChange()
                    } else {
                        this.refreshPopulationLoading = false
                        this.$message.error(res.message)
                    }
                })
            } else {
                this.$message.error('请先选择账户')
            }
        },

        handleConfirmValueUrl(rule, value, callback) {
            if (
                this.getFormData('formProject', 'campaignType') &&
                this.getFormData('formProject', 'campaignType') == 2
            ) {
                if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
                    callback()
                } else {
                    callback('链接不能为空且开头为http://或https://或kwai://')
                }
            } else {
                if (!!!value) {
                    callback()
                } else if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value)) {
                    callback()
                } else {
                    callback('链接开头为http://或https://或kwai://')
                }
            }
        },
        handleConfirmValueOkUndefind(rule, value, callback) {
            if (!!!value) {
                callback()
            } else if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value)) {
                callback()
            } else {
                callback('链接开头为http://或https://或kwai://')
            }
        },
        /*
		@params str{ String} 要截取的字符串
	    @params start { Number } 首次截取的开始索引，每次截取后递增
	    @params end { Number } 首次截取的结束索引，每次截取后递增
	    @params unit { Number } 每一组个数
	    */
        // 将字符串转换成unit个字符为一组的数组

        createArr(str, start, end, unit) {
            if (str) {
                let arr = [] //保存每次截取后的字符串
                let counts = Math.ceil(str.length / unit) //循环截取的次数,向上取整

                for (let i = 0; i < counts; i++) {
                    let newStr = str.substring(start, end)
                    arr.push(newStr.split(''))
                    start = end
                    end += unit
                }
                return arr
            }
        },
        changeTimeData() {
            this.scheduleTimeData = str
        },
        getIsActivate(val) {
            let params = {}
            params.accountId = this.accountIds
            params.campaignType = this.getFormData('formProject', 'campaignType')
            params.appId = val

            this.getAction('/kuaishou/batch/getIsActivate', params).then((res) => {
                if (res.success) {
                    this.groupTypeData = res.result
                }
            })
        },
        handleConfirmValue(rule, value, callback) {
            if (Math.abs(value[0] - value[1]) < 5) {
                callback('自定义年龄段需要间隔大于5岁')
            }
            callback()
        },
        cityChange() {
            this.regionList = []
        },
        changeAppId(e) {
            this.getAction('/kuaishou/batch/getPageList', {
                accountId: this.accountIds,
                appId: e,
                viewComp: 7,
            }).then((res) => {
                if (res.success) {
                    this.siteList = res.result
                    this.formTargetApp.setFieldsValue({ siteId: undefined })
                }
            })
            // this.getIsActivate(e)
            this.getOcpxActionList(e)
            if (e) {
                var data = this.appList.filter((item) => item.appId == e)[0]
                this.formDirectional.setFieldsValue({ platformOs: data.platform == 1 || data.platform == 2 ? 1 : 2 })
                this.changeAppIdVisible = data.platform == 1 || data.platform == 2 ? true : false
            } else {
                this.changeAppIdVisible = true
                this.formDirectional.setFieldsValue({ platformOs: 3 })
            }
        },
        personSelect() {
            if (this.people === '1' || this.people === '2') {
                this.retargetAccountId()
                this.tabKey = this.people
            } else if (this.people === '3') {
                this.retargetAccountId()
                this.tabKey = '1'
            }
            this.$nextTick(() => {
                this.incluedSelectedRowKeys = []
                this.incluedSelectedKeys = []
                this.excludeSelectedKeys = []
                this.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() {
            this.retargetDataAll = []
            this.loading = true

            this.getAction('/kuaishou/batch/getPopulationList', {
                accountId: this.accountIds,
            }).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 = this.accountIds
                    })
                    // this.retargetData=res.data;
                    this.retargetDataAll = [...this.retargetDataAll, ...res.result]
                }
            })
        },
        getQueryById(id) {
            this.spinning = true
            this.getAction('/hosting/kuaishouHostingTemplate/queryById', { id }).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        let data = res.result
                        this.accountIds = data.accountId
                        data.sceneIds = data.sceneIds ? JSON.parse(data.sceneIds) : [1]
                        this.formProject.setFieldsValue(pick(data, 'campaignType', 'sceneIds'))
                        this.$nextTick(() => {
                            this.getActionBarText()
                        })
                        data.ruleEnable = data.ruleEnable == 1 ? true : false
                        this.formInformation.setFieldsValue(pick(data, 'name', 'ruleEnable'))
                        this.retargetAccountId()
                        if (data.ruleEnable) {
                            setTimeout(() => {
                                this.formInformation.setFieldsValue(
                                    pick(data, 'creativeNameRule', 'unitNameRule', 'campaignNameRule')
                                )
                            }, 100)
                        }

                        this.getAction('/kuaishou/batch/getAppList', { accountId: this.accountIds }).then((res) => {
                            if (res.success) {
                                this.appList = res.result.map((item, index) => {
                                    return {
                                        ...item,
                                        key: index,
                                    }
                                })
                            }
                        })
                        this.changeAppIdVisible = data.platformOs == 1 ? true : false
                        if (data.campaignType == 2) {
                            data.useAppMarket = data.useAppMarket == 1 ? true : false
                            this.formTargetApp.setFieldsValue(pick(data, 'appId', 'useAppMarket', 'siteId'))
                            if (data.useAppMarket) {
                                data.appStore = JSON.parse(data.appStore)
                                setTimeout(() => {
                                    this.formTargetApp.setFieldsValue(pick(data, 'appStore'))
                                }, 500)
                            }
                            this.getOcpxActionList(data.appId)
                            setTimeout(() => {
                                this.getDeepTypesList(data.ocpxActionType)
                            }, 100)
                            this.getAction('/kuaishou/batch/getPageList', {
                                accountId: this.accountIds,
                                appId: data.appId,
                                viewComp: 7,
                            }).then((res) => {
                                if (res.success) {
                                    this.siteList = res.result
                                }
                            })
                        } else {
                            setTimeout(() => {
                                this.formTargetApp.setFieldsValue(pick(data, 'webUri'))
                            })
                            this.getOcpxActionList(null)
                            setTimeout(() => {
                                this.getDeepTypesList(data.ocpxActionType)
                            }, 100)
                        }

                        this.people =
                            JSON.parse(data.population) &&
                            JSON.parse(data.excludePopulation) &&
                            JSON.parse(data.population).length > 0 &&
                            JSON.parse(data.excludePopulation).length > 0
                                ? '3'
                                : JSON.parse(data.population) && JSON.parse(data.population).length > 0
                                ? '1'
                                : JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
                                ? '2'
                                : !JSON.parse(data.population) && !JSON.parse(data.excludePopulation)
                                ? '0'
                                : '0'
                        this.tabKey = this.people == '2' ? '2' : '1'
                        this.incluedSelectedRowKeys =
                            JSON.parse(data.population) && JSON.parse(data.population).length > 0
                                ? JSON.parse(data.population)
                                : []
                        this.incluedSelectedKeys =
                            JSON.parse(data.population) && JSON.parse(data.population).length > 0
                                ? JSON.parse(data.population)
                                : []
                        this.excludeSelectedKeys =
                            JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
                                ? JSON.parse(data.excludePopulation)
                                : []
                        this.excludeSelectedRowKeys =
                            JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
                                ? JSON.parse(data.excludePopulation)
                                : []

                        this.district =
                            JSON.parse(data.regionIds) && JSON.parse(data.regionIds).length > 0 ? 'CITY' : 'NONE'
                        if (this.district == 'CITY') {
                            this.regionList = JSON.parse(data.regionIds)
                            this.$nextTick(() => {
                                this.formDirectional.setFieldsValue(pick(data, 'userType'))
                            })
                        } else {
                            this.regionList = []
                        }

                        this.ageType =
                            JSON.parse(data.agesRange) && JSON.parse(data.agesRange).length > 0
                                ? 'ageLimit'
                                : data.minAge != -1 && data.maxAge != -1
                                ? 'ageCustom'
                                : 'noLimit'
                        if (this.ageType == 'ageCustom') {
                            data.age = [data.minAge, data.maxAge]
                            this.$nextTick(() => {
                                this.formDirectional.setFieldsValue(pick(data, 'age'))
                            })
                        } else if (this.ageType == 'ageLimit') {
                            data.agesRange = JSON.parse(data.agesRange)
                            this.$nextTick(() => {
                                this.formDirectional.setFieldsValue(pick(data, 'agesRange'))
                            })
                        }
                        data.expansion = []
                        if (data.noAgeBreak == 1) {
                            data.expansion.push('noAgeBreak')
                        }
                        if (data.noGenderBreak == 1) {
                            data.expansion.push('noGenderBreak')
                        }
                        if (data.noAreaBreak == 1) {
                            data.expansion.push('noAreaBreak')
                        }
                        this.formDirectional.setFieldsValue(
                            pick(data, 'gender', 'platformOs', 'isOpen', 'expansion', 'filterConvertedLevel')
                        )
                        setTimeout(() => {
                            this.formDirectional.setFieldsValue(pick(data, 'platformOv'))
                        }, 500)

                        data.today = 4
                        if (JSON.parse(data.schedule) && JSON.parse(data.schedule).length > 0) {
                            data.scheduleTime = 2
                        } else {
                            data.scheduleTime = 1
                        }
                        data.dayBudget = data.dayBudget / 1000
                        this.formOriginality.setFieldsValue(pick(data, 'today', 'scheduleTime', 'dayBudget'))
                        this.$nextTick(() => {
                            if (data.scheduleTime == 2) {
                                var arrList = JSON.parse(data.schedule)
                                for (let i = 0; i < arrList.length; i++) {
                                    for (let j = 0; j < arrList[i].length; j++) {
                                        if (arrList[i][j] == null) {
                                            arrList[i][j] = '0'
                                        } else {
                                            arrList[i][j] = '1'
                                        }
                                    }
                                }
                                var timeArr = tqFun(arrList)
                                this.scheduleTimeData = str
                                setTimeout(() => {
                                    this.scheduleTimeData = timeArr.join('')
                                }, 200)
                            }
                        })

                        data.deepConversionType =
                            data.deepConversionType && data.deepConversionType != ''
                                ? data.deepConversionType
                                : undefined
                        data.deepConversionBid =
                            data.deepConversionBid && data.deepConversionBid != ''
                                ? data.deepConversionBid / 1000
                                : undefined
                        data.cpaBid = data.cpaBid / 1000

                        this.formOptimize.setFieldsValue(pick(data, 'bidType', 'ocpxActionType', 'cpaBid'))
                        if (data.ocpxActionType == 180 || data.ocpxActionType == 53) {
                            this.$nextTick(() => {
                                setTimeout(() => {
                                    this.formOptimize.setFieldsValue(
                                        pick(data, 'deepConversionType', 'deepConversionBid')
                                    )
                                }, 1000)
                            })
                        }

                        this.descriptionList = res.result.captions
                            ? res.result.captions.charAt(0) === '['
                                ? eval(res.result.captions).map((item) => {
                                      return { value: item }
                                  })
                                : [{ value: res.result.captions }]
                            : []
                        this.formCreative.setFieldsValue(
                            pick(
                                data,
                                'smartCover',
                                'actionBar',
                                'assetMining',
                                'clickUrl',
                                'actionbarClickUrl',
                                'videoCount'
                            )
                        )
                        this.spinning = false
                    })
                } else {
                    this.spinning = false
                    let that = this
                    this.$error({
                        title: '请求出错，请返回列表页',
                        // JSX support
                        onOk: function () {
                            that.$router.replace('/autoLaunch/trusteeship')
                            that.$bus.$emit(
                                'remove',
                                `/autoLaunch/trusteeship/creatMaterialTest?id=${that.$route.query.id}`
                            )
                        },
                    })
                }
            })
        },
        handleSubmit() {
            if (this.accountIds) {
                let formProjectData = new Promise((resolve, reject) => {
                    this.formProject.validateFields((err, values) => {
                        if (!err) {
                            resolve({ ...values })
                        } else {
                            reject('选择项目表单出错')
                        }
                    })
                })
                let formInformationData = new Promise((resolve, reject) => {
                    this.formInformation.validateFields((err, values) => {
                        if (!err) {
                            resolve({ ...values })
                        } else {
                            reject('基本信息出错')
                        }
                    })
                })
                let formOptimizeData = new Promise((resolve, reject) => {
                    this.formOptimize.validateFields((err, values) => {
                        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('排期预算出错')
                        }
                    })
                })
                let formCreativeData = new Promise((resolve, reject) => {
                    this.formCreative.validateFields((err, values) => {
                        if (!err) {
                            resolve({ ...values })
                        } else {
                            reject('创意信息出错')
                        }
                    })
                })

                Promise.all([
                    formProjectData,
                    formInformationData,
                    formOptimizeData,
                    formTargetAppData,
                    formDirectionalData,
                    formOriginalityData,
                    formCreativeData,
                ])
                    .then((res) => {
                        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], ...res[6] }
                        params.accountId = this.accountIds
                        params.userId = this.userInfo().id
                        params.useAppMarket = params.useAppMarket ? 1 : 2
                        params.appStore = params.appStore ? JSON.stringify(params.appStore) : '[]'
                        params.sceneIds = params.sceneIds ? JSON.stringify(params.sceneIds) : '[]'
                        params.regionIds =
                            this.district == 'NONE'
                                ? JSON.stringify([])
                                : JSON.stringify(
                                      this.regionList.map((item) => {
                                          return item.value
                                      })
                                  )
                        params.ruleEnable = params.ruleEnable ? 1 : 2

                        if (params.campaignType == 5) {
                            params.webUriType = 1
                        } else {
                            params.webUriType = 0
                        }
                        if (params.ruleEnable == 1) {
                            if (!params.campaignNameRule && !params.unitNameRule && !params.creativeNameRule) {
                                this.$message.error('自定义命名规则开启，至少任一规则不可为空')
                            }
                        }
                        params.captions = JSON.stringify(
                            this.descriptionList.map((item) => {
                                return item.value
                            })
                        )
                        //  {{ createArr(scheduleTimeData, 0, 24, 24) }}
                        //                                             {{scheduleTime}}
                        if (params.scheduleTime == 1) {
                            params.schedule = JSON.stringify([])
                        } else {
                            var data = this.createArr(this.scheduleTimeData, 0, 24, 24)
                            for (let i = 0; i < data.length; i++) {
                                for (let j = 0; j < data[i].length; j++) {
                                    if (data[i][j] == '1') {
                                        data[i][j] = j
                                    } else {
                                        delete data[i][j]
                                    }
                                }
                            }
                            // console.log(data)
                            params.schedule = JSON.stringify(data)
                        }

                        if (this.ageType == 'noLimit') {
                            params.minAge = -1
                            params.maxAge = -1
                            params.agesRange = JSON.stringify([])
                        } else if (this.ageType == 'ageLimit') {
                            params.minAge = -1
                            params.maxAge = -1
                            params.agesRange = JSON.stringify(params.agesRange)
                        } else if (this.ageType == 'ageCustom') {
                            params.minAge = params.age[0]
                            params.maxAge = params.age[1]
                            params.agesRange = JSON.stringify([])
                        }
                        params.isOpen = 1

                        if (params.expansion.includes('noAgeBreak')) {
                            params.noAgeBreak = 1
                        } else {
                            params.noAgeBreak = 2
                        }
                        if (params.expansion.includes('noGenderBreak')) {
                            params.noGenderBreak = 1
                        } else {
                            params.noGenderBreak = 2
                        }
                        if (params.expansion.includes('noAreaBreak')) {
                            params.noAreaBreak = 1
                        } else {
                            params.noAreaBreak = 2
                        }

                        params.population =
                            this.people === '0'
                                ? JSON.stringify([])
                                : this.people === '1' || this.people === '3'
                                ? JSON.stringify(this.incluedSelectedRowKeys)
                                : JSON.stringify([])
                        params.excludePopulation =
                            this.people === '0'
                                ? JSON.stringify([])
                                : this.people === '2' || this.people === '3'
                                ? JSON.stringify(this.excludeSelectedRowKeys)
                                : JSON.stringify([])
                        params.cpaBid = params.cpaBid * 1000
                        params.deepConversionBid = params.deepConversionBid ? params.deepConversionBid * 1000 : null

                        params.singleAppid = 1
                        params.deepConversionType = params.deepConversionType ? params.deepConversionType : ''
                        params.dayBudget = params.dayBudget * 1000
                        params.userId = this.userInfo().id
                        // params.
                        if (this.$route.query.id) {
                            params.id = this.$route.query.id
                            this.postDataAction('/hosting/kuaishouHostingTemplate/edit', params).then((res) => {
                                if (res.success) {
                                    this.sumbitLoading = false

                                    this.$bus.$emit(
                                        'remove',
                                        `/autoLaunch/trusteeship/creatMaterialTest?id=${params.id}`
                                    )

                                    this.$router.replace('/autoLaunch/trusteeship')
                                } else {
                                    this.sumbitLoading = false
                                }
                            })
                        } else {
                            this.postDataAction('/hosting/kuaishouHostingTemplate/add', params).then((res) => {
                                if (res.success) {
                                    this.sumbitLoading = false

                                    this.$bus.$emit('remove', '/autoLaunch/trusteeship/creatMaterialTest')

                                    this.$router.replace('/autoLaunch/trusteeship')
                                } else {
                                    this.sumbitLoading = false
                                }
                            })
                        }
                    })
                    .catch((err) => {
                        this.$message.error('请填写完整')
                    })
            } else {
                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}`)

            this.$bus.$emit('remove', `/autoLaunch/trusteeship/creatMaterialTest?id=${this.$route.query.id}`)
            this.$bus.$emit('remove', '/autoLaunch/trusteeship/creatMaterialTest')

            this.$router.replace('/autoLaunch/trusteeship')
        },
        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: this.getFormData('formProject', 'campaignType'),
                }).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()
            }
        },
        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()
            }
        },

        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
        },
        addApplication() {},

        //设置通配符
        getChangeAll(type, form, field) {
            this.$nextTick(() => {
                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 == 'campaignNameRule') {
                        this[form].setFieldsValue({ campaignNameRule: sel.text })
                    } else if (field == 'unitNameRule') {
                        this[form].setFieldsValue({ unitNameRule: sel.text })
                    } else {
                        this[form].setFieldsValue({ creativeNameRule: 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 == 'campaignNameRule') {
                        this[form].setFieldsValue({ campaignNameRule: node.value })
                    } else if (field == 'unitNameRule') {
                        this[form].setFieldsValue({ unitNameRule: node.value })
                    } else {
                        this[form].setFieldsValue({ creativeNameRule: 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 == 'campaignNameRule') {
                        this[form].setFieldsValue({ campaignNameRule: node.value })
                    } else if (field == 'unitNameRule') {
                        this[form].setFieldsValue({ unitNameRule: node.value })
                    } else {
                        this[form].setFieldsValue({ creativeNameRule: 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>
<style scoped lang="scss">
.region {
    width: 100%;
}
.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-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>
