<style scoped lang="scss">
::v-deep .ant-card-cover {
    display: flex;
    justify-content: center;
}
.showShare {
    position: relative;
}
.share {
    display: none;
}
.showShare:hover .share {
    display: flex;
    justify-content: center;
    align-items: center;
}
.chouzhen {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(20% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
    float: left;
}

li.chouzhen.first:before {
    font-size: 12px;
    content: '首帧';
    position: absolute;
    top: 7px;
    left: 5px;
    width: 36px;
    height: 20px;
    color: rgb(255, 255, 255);
    line-height: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    z-index: 1000;
}
.display-none-selset {
    display: none !important;
}
.logo {
    padding-left: 24px;
    img {
        height: 32px !important;
    }
    .name {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ced2d9;
        // line-height: 22px;
        margin-left: 20px;
        padding-left: 21px;
        position: relative;
    }
    .name::before {
        content: '';
        width: 1px;
        height: 18px;
        background: rgba(255, 255, 255, 0.31);
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -9px;
    }
}
.chartBox {
    margin-top: 80px;
    .chartBody {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .search-box {
        margin-bottom: 20px;
    }
}
</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;
}
.display-none-selset {
    display: none !important;
}
</style>
<template>
    <div ref="questionnaireBox" class="new-batch">
        <a-layout-header
            class="ant-header-fixedHeader ant-header-side-opened"
            :style="{ padding: '0' }"
            style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
        >
            <div :class="['top-nav-header-index', theme]">
                <div class="header-index-wide">
                    <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
                        <div class="logo">
                            <img src="~@/assets/logoNew1.png" alt="logo" />
                            <span class="name">有腾投放管家</span>
                        </div>
                    </div>
                </div>
            </div>
        </a-layout-header>
        <div class="chartBox" style="padding: 0 20px">
            <a-row :gutter="20">
                <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
                    <a-card class="search-box" style="height: 90vh">
                        <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
                            <el-step
                                v-for="(item, index) in stepsArr"
                                :key="index"
                                :title="item.title"
                                @click.native="jump(index)"
                            >
                            </el-step>
                        </el-steps>
                    </a-card>
                </a-col>
                <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
                    <a-form :form="form" @submit="handleSubmit" layout="horizontal" v-bind="formItemLayout">
                        <a-spin :spinning="spinning">
                            <a-card class="search-box step-jump" title="创建规则">
                                <a-row class="line-height-one">
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="选择广告账户">
                                            <Treeselect
                                                :appId.sync="accountId"
                                                :multiple="false"
                                                request="2,4"
                                                ref="treeSelect"
                                                :disabled="$route.query.batchId != undefined"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="营销目标">
                                            <a-radio-group
                                                @change="typeChange"
                                                v-decorator="[
                                                    'campaignType',
                                                    {
                                                        rules: [{ required: true, message: '营销目标必选' }],
                                                        initialValue: 2,
                                                    },
                                                ]"
                                            >
                                                <a-radio-button :value="2">提升应用安装</a-radio-button>
                                                <a-radio-button :value="3" disabled>获取电商下单</a-radio-button>
                                                <a-radio-button :value="4" disabled>推广品牌活动</a-radio-button>
                                                <a-radio-button :value="5">收集销售线索</a-radio-button>
                                                <a-radio-button :value="7">提高应用活跃</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="广告计划类型">
                                            <a-radio-group
                                                v-decorator="[
                                                    'adType',
                                                    { rules: [{ required: true, message: '' }], initialValue: 0 },
                                                ]"
                                            >
                                                <a-radio-button :value="0">展示广告</a-radio-button>
                                                <a-radio-button :value="1" disabled>搜索广告</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row
                                    v-show="
                                        getData('campaignType', 'form') == 2 || getData('campaignType', 'form') == 7
                                    "
                                >
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="推广平台">
                                            <a-radio-group
                                                @change="systemChange"
                                                v-decorator="[
                                                    'systemType',
                                                    { rules: [{ required: true, message: '' }], initialValue: 'iOS' },
                                                ]"
                                            >
                                                <a-radio-button value="iOS">iOS</a-radio-button>
                                                <a-radio-button value="Android">Android</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="是否新建计划">
                                            <a-radio-group
                                                v-decorator="[
                                                    'newClick',
                                                    { rules: [{ required: true, message: '' }], initialValue: '1' },
                                                ]"
                                            >
                                                <a-radio-button value="1">是</a-radio-button>
                                                <a-radio-button value="2">否</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                                <a-row v-if="!getData('newClick', 'form') || getData('newClick', 'form') == '1'">
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="规则配置">
                                            <a-button type="primary" @click="ruleConfigShow"> 规则配置 </a-button>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row v-else-if="getData('newClick', 'form') == '2'">
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="选择广告计划" selfUpdate>
                                            <a-select
                                                v-model="campaignId"
                                                showSearch
                                                allowClear
                                                placeholder="请选择广告计划"
                                                optionFilterProp="children"
                                                :filterOption="filterOption"
                                            >
                                                <a-select-option
                                                    v-for="appModel in campaignList"
                                                    :key="appModel.campaignId"
                                                    :value="appModel.campaignId"
                                                    >{{ appModel.campaignName }}</a-select-option
                                                >
                                            </a-select>
                                            <span v-if="showCount" style="margin-top: 15px"
                                                >当前计划下还可创建{{ groupCount }}个广告组</span
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-card>

                            <a-card class="search-box step-jump create-info creat-all-info">
                                <div slot="title">
                                    广告组基本信息
                                    <a-button type="primary" style="float: right" @click="showDrawer"> 编辑 </a-button>
                                </div>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="投放范围"
                                            >{{
                                                allianceAccount == '1'
                                                    ? '默认'
                                                    : allianceAccount == '2'
                                                    ? '联盟'
                                                    : '快手主站'
                                            }}
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                                        <a-form-item label="计费方式">
                                            {{
                                                groupTemplateId
                                                    ? unitInfo.bidType == 2
                                                        ? '点击计费'
                                                        : unitInfo.bidType == 10
                                                        ? '展示计费(oCPM)'
                                                        : '最大转化'
                                                    : '无'
                                            }}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="单日预算">
                                            {{
                                                groupTemplateId
                                                    ? unitInfo.dayBudget && unitInfo.dayBudget > 0
                                                        ? unitInfo.dayBudget + '元'
                                                        : '不限'
                                                    : '无'
                                            }}</a-form-item
                                        >
                                    </a-col>
                                    <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                                        <a-form-item :label="unitInfo.bidType == 2 ? '出价' : '转化目标出价'">
                                            {{
                                                getData('bidType', 'ruleConfigForm') == 1
                                                    ? '无'
                                                    : groupTemplateId &&
                                                      ((unitInfo.bid && unitInfo.bid > 0) ||
                                                          (unitInfo.cpaBid && unitInfo.cpaBid > 0) ||
                                                          (unitInfo.bidMin && unitInfo.bidMax))
                                                    ? unitInfo.bidType == 2
                                                        ? unitInfo.bid && unitInfo.bid > 0
                                                            ? unitInfo.bid + '元'
                                                            : unitInfo.bidMin + '~' + unitInfo.bidMax + '元'
                                                        : unitInfo.cpaBid && unitInfo.cpaBid > 0
                                                        ? unitInfo.cpaBid + '元'
                                                        : unitInfo.bidMin + '~' + unitInfo.bidMax + '元'
                                                    : '无'
                                            }}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="投放时段">
                                            <div v-if="groupTemplateId == null">无</div>
                                            <div v-else-if="scheduleTime == '1'">不限</div>
                                            <!-- <div > -->
                                            <a-popover
                                                v-else
                                                title="投放时段"
                                                :overlayStyle="{ width: '400px' }"
                                                placement="left"
                                            >
                                                <template slot="content">
                                                    <span
                                                        v-for="(item, index) in unitInfo.scheduleTime.split('')"
                                                        :key="index"
                                                        v-if="item == 1"
                                                    >
                                                        {{
                                                            setItemDate(index, item) +
                                                            (index == unitInfo.scheduleTime.split('').length - 1
                                                                ? ''
                                                                : ',')
                                                        }}
                                                    </span>
                                                </template>
                                                <span
                                                    v-for="(item, index) in unitInfo.scheduleTime.split('')"
                                                    :key="index"
                                                >
                                                    {{ setItemDate(index, item) }}
                                                </span>
                                            </a-popover>
                                            <!-- <span v-for="(item, index) in unitInfo.scheduleTime.split('')" :key="index">
                        {{ setItemDate(index, item) }}
                      </span>
                    </div> -->
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                                        <a-form-item label="场景广告位">
                                            <div v-if="groupTemplateId == null">无</div>

                                            <div v-else>
                                                <span v-for="(item, index) in unitInfo.sceneId" :key="index">
                                                    {{ item | kuaishouSceneId
                                                    }}{{ index == unitInfo.sceneId.length - 1 ? '' : ',' }}
                                                </span>
                                            </div>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="排期">
                                            <div v-if="groupTemplateId == null">无</div>

                                            <div v-else-if="unitTime == '1'">
                                                从今天开始长期投放({{
                                                    moment(unitInfo.timeRange[0]).format('YYYY-MM-DD')
                                                }}起)
                                            </div>
                                            <div v-else>
                                                {{ moment(unitInfo.timeRange[0]).format('YYYY-MM-DD') }}~{{
                                                    moment(unitInfo.timeRange[1]).format('YYYY-MM-DD')
                                                }}
                                            </div>
                                        </a-form-item>
                                    </a-col>
                                    <a-col
                                        :xl="10"
                                        :md="24"
                                        :pull="screenWidth >= 1200 ? 4 : 0"
                                        v-if="unitInfo.deepConversionType"
                                    >
                                        <a-form-item label="深度转化目标">
                                            <div v-if="groupTemplateId == null">无</div>

                                            <div v-else>
                                                {{ setDeepConversionType(unitInfo.deepConversionType) }}
                                            </div>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="优化目标">
                                            {{
                                                groupTemplateId
                                                    ? unitInfo.bidType == 2
                                                        ? '封面点击数'
                                                        : '转化数'
                                                    : '无'
                                            }}
                                        </a-form-item>
                                    </a-col>
                                    <a-col
                                        :xl="10"
                                        :md="24"
                                        :pull="screenWidth >= 1200 ? 4 : 0"
                                        v-if="unitInfo.deepConversionBid"
                                    >
                                        <a-form-item label="深度转化出价">
                                            <div v-if="groupTemplateId == null">无</div>

                                            <div v-else>
                                                {{ unitInfo.deepConversionBid }}
                                            </div>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-card>
                            <a-card class="search-box step-jump" title="定向包">
                                <p>
                                    已选定向包： {{ checkDirectionalList.length }}/20
                                    <a-button
                                        style="margin: 0 15px"
                                        @click="addTemplate(null)"
                                        :disabled="this.accountId == undefined || accountId == '' || accountId == null"
                                    >
                                        新增定向包 </a-button
                                    ><a-button
                                        type="primary"
                                        @click="
                                            directionalVisible = true
                                            getTemplateList()
                                        "
                                    >
                                        选择定向包
                                    </a-button>
                                </p>
                                <a-table
                                    v-if="checkDirectionalList.length > 0"
                                    :columns="columns"
                                    :data-source="checkDirectionalList"
                                    bordered
                                    :pagination="false"
                                >
                                    <!-- @visibleChange="changeTag(items.code)" -->
                                    <span slot="action" slot-scope="text, record">
                                        <a @click="changeTag(record.templateId)">预览</a>
                                        <a-divider type="vertical" />
                                        <a @click="removeTarget(record.templateId)">删除</a>
                                    </span>
                                </a-table>

                                <div v-if="allianceAccount != '3'" style="margin-top: 15px">
                                    <p>
                                        媒体定向
                                        <a-radio-group v-model="mediaSourceType" style="margin-left: 15px">
                                            <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>
                                    </p>
                                    <a-radio-group v-model="media" size="large" v-if="mediaSourceType == '1'">
                                        <a-radio :value="1">超休闲游戏</a-radio>
                                        <a-radio :value="2">重度游戏</a-radio>
                                        <a-radio :value="3">特型广告</a-radio>
                                        <a-radio :value="4">直营电商</a-radio>
                                        <a-radio :value="5">平台电商</a-radio>
                                        <a-radio :value="6">教育行业</a-radio>
                                    </a-radio-group>

                                    <a-tabs v-model="tabKey" @change="retargetTabChange" v-if="mediaSourceType == '2'">
                                        <a-tab-pane key="1" tab="媒体定向包">
                                            <a-table
                                                :columns="retargetColumns"
                                                :row-key="(record) => record.key"
                                                :data-source="retargetDataAll"
                                                :loading="mediaLoading"
                                                style="width: 100%; margin: 15px 0"
                                                :pagination="false"
                                                @change="retargetTableChange"
                                                :scroll="{ y: 250 }"
                                                :rowSelection="{
                                                    selectedRowKeys: incluedSelectedRowKeys,
                                                    onChange: onSelectChangeKey,
                                                }"
                                                bordered
                                            >
                                                <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="媒体排除定向包">
                                            <a-table
                                                :columns="retargetColumns"
                                                :row-key="(record) => record.key"
                                                :data-source="retargetDataAll"
                                                :loading="mediaLoading"
                                                style="width: 100%; margin: 15px 0"
                                                :pagination="false"
                                                @change="retargetTableChange"
                                                :scroll="{ y: 250 }"
                                                :rowSelection="{
                                                    selectedRowKeys: excludeSelectedRowKeys,
                                                    onChange: onSelectChangeExclude,
                                                }"
                                                bordered
                                            >
                                                <template slot="name" slot-scope="name"> {{ name }} </template>
                                                <template slot="populationType" slot-scope="populationType">
                                                    {{ populationType | customCrowdHandler }}
                                                </template>
                                            </a-table>
                                        </a-tab-pane>
                                        <!-- <a-button
                                            slot="tabBarExtraContent"
                                            type="primary"
                                            @click="refreshPopulation"
                                            :loading="refreshPopulationLoading"
                                            >刷新人群包</a-button
                                        > -->
                                    </a-tabs>
                                </div>
                            </a-card>
                            <a-card class="search-box step-jump create-info creat-all-info">
                                <div slot="title">
                                    创意基本信息

                                    <a-tooltip
                                        placement="left"
                                        title="请填写广告组信息"
                                        autoAdjustOverflow
                                        v-if="groupTemplateId == null && !campaignData.campaignName"
                                    >
                                        <a-button
                                            type="primary"
                                            style="float: right"
                                            :disabled="groupTemplateId == null && !campaignData.campaignName"
                                        >
                                            编辑
                                        </a-button>
                                    </a-tooltip>
                                    <a-button
                                        v-else
                                        type="primary"
                                        style="float: right"
                                        @click="showDrawerCreate"
                                        :disabled="groupTemplateId == null && !campaignData.campaignName"
                                    >
                                        编辑
                                    </a-button>
                                </div>
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="制作方式">
                                            <!-- {{}} -->{{
                                                creativeInfo.unitType == 4
                                                    ? '自定义'
                                                    : creativeInfo.unitType == 7
                                                    ? '程序化'
                                                    : '-'
                                            }}
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                                        <a-form-item label="创意分类">
                                            <!-- {{creativeInfo.creativeCategory}} -->

                                            <a-cascader
                                                v-if="createTiveTemplateId"
                                                :options="createOptions"
                                                v-model="creativeInfo.creativeCategory"
                                                :fieldNames="fieldNames"
                                                placeholder="请选择创意分类"
                                                disabled
                                            />
                                            <span v-else>无</span>
                                        </a-form-item>

                                        <!-- creativeInfo.creativeCategory -->
                                    </a-col>
                                </a-row>
                                <!-- v-if="creativeCategorySwitch" -->
                                <!-- v-if="creativeCategorySwitch" -->
                                <a-row>
                                    <a-col :xl="14" :md="24">
                                        <a-form-item label="创意标签">
                                            {{
                                                createTiveTemplateId && creativeInfo.creativeTag
                                                    ? creativeInfo.creativeTag.join()
                                                    : '无'
                                            }}
                                        </a-form-item>
                                        <!-- creativeInfo.creativeTag -->
                                    </a-col>
                                    <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                                        <a-form-item label="行动号召">
                                            {{ createTiveTemplateId ? creativeInfo.actionBarText : '无' }}
                                        </a-form-item>
                                        <!-- creativeInfo.actionBarText -->
                                    </a-col>
                                </a-row>
                            </a-card>
                            <a-card class="search-box step-jump" title="创意素材">
                                <p>
                                    已选素材：{{ videoMaterialShow ? materialCount : 0 }}/200
                                    <a-button
                                        type="primary"
                                        @click="materialVisible = true"
                                        style="margin: 0 15px"
                                        :disabled="this.accountId == undefined || accountId == '' || accountId == null"
                                    >
                                        选择视频素材
                                    </a-button>
                                    <!-- <a-button type="primary" @click="materialImageVisible = true">
                                      
                                        上传开屏图片
                                    </a-button> -->
                                </p>
                                <div
                                    v-if="videoMaterialShow && materialCount > 0"
                                    style="
                                        width: 100%;
                                        height: 400px;
                                        overflow: auto;
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        background: #f2f2f2;
                                        padding: 30px;
                                    "
                                >
                                    <div
                                        v-for="(item, index) in materialList"
                                        :key="index"
                                        style="width: 100%; display: contents"
                                    >
                                        <template v-for="(items, indexMaterial) in item.photoArr">
                                            <div
                                                style="
                                                    width: 45%;
                                                    height: 250px;
                                                    display: flex;
                                                    background: white;
                                                    justify-content: space-between;
                                                    margin: 20px;
                                                    padding: 10px;
                                                "
                                            >
                                                <div
                                                    style="width: 45%; height: 100%; text-align: center"
                                                    class="showShare"
                                                >
                                                    <img
                                                        :src="items.photoId.coverUrl"
                                                        style="width: auto; height: 100%"
                                                        alt=""
                                                        srcset=""
                                                    />
                                                    <div
                                                        style="
                                                            width: 100%;
                                                            height: 100%;
                                                            background: rgba(0, 0, 0, 0.5);
                                                            position: absolute;
                                                            top: 0;
                                                        "
                                                        class="share"
                                                        :style="!!items.photoId.coverUrl ? '' : 'overflow:hidden'"
                                                    >
                                                        <a-button
                                                            @click="
                                                                visibleVideo = true
                                                                videoUrlShow = items.photoId.url
                                                            "
                                                            v-if="items.photoId.coverUrl"
                                                        >
                                                            查看视频
                                                        </a-button>
                                                    </div>
                                                </div>

                                                <div style="width: 45%; height: 100%; text-align: center">
                                                    <img
                                                        v-if="items.image.url"
                                                        :src="items.image.url"
                                                        style="width: auto; height: 100%"
                                                        alt=""
                                                        srcset=""
                                                    />
                                                    <img
                                                        v-else
                                                        :src="items.photoId.coverUrl"
                                                        style="width: auto; height: 100%"
                                                        alt=""
                                                        srcset=""
                                                    />
                                                </div>
                                                <a-popconfirm
                                                    title="确定要删除这个素材吗?"
                                                    ok-text="确定"
                                                    cancel-text="取消"
                                                    @confirm="removeVideoMaterial(index, indexMaterial)"
                                                    @cancel="cancel"
                                                >
                                                    <a-icon type="close-circle" style="cursor: pointer" />
                                                </a-popconfirm>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div
                                    style="margin-top: 20px"
                                    v-if="materialInfo.matchingMethod != 1 && videoMaterialShow"
                                >
                                    <a-list bordered :data-source="descriptionList">
                                        <a-list-item slot="renderItem" slot-scope="item, index">
                                            <p v-if="!item.edit" style="margin-bottom: 0; width: 100%">
                                                {{ item.value }}
                                            </p>
                                            <p v-else style="margin-bottom: 0; width: 100%">
                                                <a-input
                                                    id="error"
                                                    placeholder="请输入广告语"
                                                    v-model.trim="item.value"
                                                    :max-length="30"
                                                    style="width: 50%"
                                                />
                                            </p>

                                            <div slot="actions">
                                                <a @click="editDescription(item)">{{ item.edit ? '确定' : '编辑' }}</a>
                                                <a-divider type="vertical" />
                                                <a @click="removeDescription(index)">删除</a>
                                            </div>
                                        </a-list-item>
                                        <div slot="header">
                                            <a-button
                                                type="primary"
                                                style="margin-right: 20px"
                                                @click="addOne"
                                                :disabled="
                                                    descriptionList.length >=
                                                    (materialInfo.matchingMethod == 2
                                                        ? materialCount
                                                        : materialInfo.materialList.length)
                                                "
                                            >
                                                添加广告语
                                            </a-button>
                                            {{ descriptionList.length }}/{{
                                                materialInfo.matchingMethod == 2
                                                    ? materialCount
                                                    : materialInfo.materialList.length
                                            }}
                                            <a style="margin-left: 20px" @click="descriptionList = []">清空 </a>
                                        </div>
                                    </a-list>
                                </div>
                            </a-card>
                            <div style="display: flex; justify-content: space-between; margin-bottom: 100px">
                                <a-button type="primary" @click="checkAppIds"> 预览应用/链接 </a-button>
                                <div>
                                    <a-button
                                        type="primary"
                                        style="margin-right: 15px"
                                        @click="handleSubmit"
                                        :loading="sumbitLoading"
                                    >
                                        预览广告组
                                    </a-button>
                                    <a-button @click="clearAllData"> 清空配置 </a-button>
                                </div>
                            </div>
                        </a-spin>
                    </a-form>
                </a-col>
            </a-row>
        </div>
        <!-- 规则配置 -->
        <a-modal
            title="规则配置"
            v-model="ruleConfigVisible"
            :width="1000"
            @ok="ruleConfigFormOk"
            @cancel="ruleConfigFormCancel"
            v-dialog-drag
            :confirmLoading="confirmLoading"
        >
            <a-form :form="ruleConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="广告分组规则">
                            <a-radio-group
                                v-decorator="[
                                    'groupRule',
                                    { rules: [{ required: true, message: '' }], initialValue: 1 },
                                ]"
                            >
                                <a-radio-button :value="1">按定向包分组</a-radio-button>
                                <a-radio-button :value="2">按创意组分组</a-radio-button>
                                <a-radio-button :value="3" disabled>按落地页分组</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="投放方式">
                            <a-radio-group
                                v-decorator="['bidType', { rules: [{ required: true, message: '' }], initialValue: 0 }]"
                                @change="changeBidType"
                            >
                                <a-radio-button :value="0">稳健投放</a-radio-button>
                                <a-radio-button :value="1">最大转化</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="广告计划单日预算">
                            <a-radio-group
                                v-decorator="[
                                    'budgetType',
                                    { rules: [{ required: true, message: '' }], initialValue: '1' },
                                ]"
                            >
                                <a-radio-button value="1" :disabled="getData('bidType', 'ruleConfigForm') == 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" v-if="getData('budgetType', 'ruleConfigForm') == '2'">
                    <a-col :span="16">
                        <a-form-item label="" v-bind="tailFormItemLayout" selfUpdate>
                            <a-input-number
                                v-decorator="[
                                    'dayBudget',
                                    {
                                        rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }],
                                    },
                                ]"
                                :min="500"
                                :precision="0"
                                :max="100000000"
                                style="width: 100%"
                                placeholder="不小于500， 不超过100000000，仅支持输入自然数"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="计划默认状态">
                            <a-radio-group
                                v-decorator="[
                                    'campaignStatus',
                                    { rules: [{ required: true, message: '' }], initialValue: 2 },
                                ]"
                            >
                                <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" v-if="getData('campaignStatus', 'ruleConfigForm') == 2">
                    <a-col :span="16">
                        <a-form-item label="是否定时开始计划">
                            <a-radio-group
                                v-decorator="[
                                    'isTime',
                                    { rules: [{ required: true, message: '' }], initialValue: '2' },
                                ]"
                            >
                                <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-col :span="8" :pull="6" v-if="getData('isTime', 'ruleConfigForm') == '1'">
                        <a-form-item label="选择时间">
                            <a-date-picker
                                v-decorator="[
                                    'timeStart',
                                    { rules: [{ required: true, message: '定时开始计划时，开启时间必填' }] },
                                ]"
                                show-time
                                placeholder="选择开启时间"
                                @change="onChange"
                                @ok="onOk"
                                :disabled-date="disabledDateOne"
                                :showToday="false"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="广告组默认状态">
                            <a-radio-group
                                v-decorator="[
                                    'unitStatus',
                                    { rules: [{ required: true, message: '' }], initialValue: 1 },
                                ]"
                            >
                                <a-radio-button :value="1">开启</a-radio-button>
                                <a-radio-button :value="2">关闭</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="广告计划名称">
                            <a-input
                                id="campaignName"
                                v-decorator="[
                                    'campaignName',
                                    {
                                        rules: [{ required: true, message: '广告计划名称必填' }],
                                    },
                                ]"
                                style="width: 100%"
                                placeholder="请输入"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="" v-bind="tailFormItemLayout">
                            <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'ruleConfigForm', 'campaignName')"
                                >+应用名称</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'ruleConfigForm', 'campaignName')"
                                >+定向包</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('日期', 'ruleConfigForm', 'campaignName')"
                                >+日期</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'ruleConfigForm', 'campaignName')"
                                >+渠道号（应用标记）</a-tag
                            >
                             <a-tag color="#2db7f5" @click="getChangeAll('序号', 'ruleConfigForm', 'campaignName')"
                                >+序号</a-tag
                            >
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="" v-bind="tailFormItemLayout">
                            <!-- <a-checkbox v-decorator="['keep']"> 存为预设 </a-checkbox> -->
                            <!-- <a-checkbox-group v-decorator="['keep']"> -->
                            <a-checkbox v-model="campaignKeep"> 存为预设 </a-checkbox>
                            <!-- </a-checkbox-group> -->
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
        <!-- 规则配置结束 -->

        <!-- 广告组基本信息预设 -->
        <a-drawer
            :width="800"
            :visible="visible"
            :body-style="{ paddingBottom: '80px' }"
            @close="closeUnit('ruleForm')"
        >
            <h2 slot="title" style="margin-bottom: 0">广告组基本信息</h2>
            <!-- class="create-info" -->
            <a-form-model
                ref="ruleForm"
                :model="unitInfo"
                v-bind="formItemLayout"
                :rules="rules"
                :hideRequiredMark="true"
            >
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="投放范围">
                            <a-radio-group v-model="allianceAccount" @change="LOLchange">
                                <a-radio-button value="1">默认</a-radio-button>
                                <a-radio-button value="3">快手主站</a-radio-button>
                                <a-radio-button value="2">快手广告联盟</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- <a-row :gutter="16" v-if="allianceAccount == '1'">
                    <a-col :span="24" :pull="2" style="margin-left: 15px">
                        <a-form-model-item
                            label="场景广告位"
                            :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                            :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
                        >
                            <checkBoxGroup
                                :options="[
                                    { label: '优选广告位', value: 1 },
                                    { label: '信息流广告', value: 7 },
                                    { label: '上下滑大屏广告', value: 6 },
                                    { label: '视频播放页广告', value: 3 },
                                ]"
                                v-model="unitInfo.sceneId"
                                @change="changeData"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row> -->
                <a-row :gutter="16" v-if="allianceAccount == '3'">
                    <a-col :span="24" :pull="2" style="margin-left: 15px">
                        <a-form-model-item
                            label="场景广告位"
                            :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                            :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
                        >
                            <checkBoxGroup
                                :options="[
                                    { label: '开屏广告位', value: 27 },
                                    { label: '上下滑大屏广告', value: 6 },
                                    { label: '快手联盟优选广告', value: 10 },
                                    { label: '激励视频广告', value: 24 },
                                ]"
                                v-model="unitInfo.sceneId"
                                @change="changeData"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- 
                <a-row :gutter="16">
                    <a-col :span="24" :pull="2" style="margin-left: 15px">
                        <a-form-model-item
                            label="调起链接"
                            :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                            :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
                        >
                            <a-input v-model="unitInfo.schemaUri" placeholder="请输入调起链接"> </a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getData('campaignType', 'form') == 7">
                    <a-col :span="24" :pull="2" style="margin-left: 15px">
                        <a-form-model-item
                            label="h5链接"
                            :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                            :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
                            prop="url"
                        >
                            <a-input v-model="unitInfo.url" placeholder="请输入h5链接"> </a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row> -->

                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="搜索快投">
                            <a-radio-group defaultValue="2">
                                <a-radio-button value="1" disabled>开启</a-radio-button>
                                <a-radio-button value="2">关闭</a-radio-button>
                            </a-radio-group>
                            <br />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getData('systemType', 'form') == 'Android'">
                    <a-col :span="16">
                        <a-form-model-item label="" v-bind="tailFormItemLayout">
                            <a-checkbox v-model="unitInfo.useAppMarket" @change="appStoreCheck">
                                优先从系统应用商店下载
                            </a-checkbox>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="getData('systemType', 'form') == 'Android'">
                    <a-col :span="16">
                        <a-form-model-item label="" :wrapperCol="{ span: 24, offset: 5 }" v-if="unitInfo.useAppMarket">
                            <a-checkbox-group v-model="unitInfo.appStore">
                                <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>
                            <br />
                            请勾选投放应用已上架的应用商店（默认全选）
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="转化目标">
              <a-button type="primary" style="margin-right: 15px"> 选择转化目标 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row> -->
                <h2 style="margin: 20px 0 10px 0">预算与出价</h2>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="单日预算">
                            <a-radio-group v-model="dayBudgetType" @change="unitInfo.dayBudget = null">
                                <a-radio-button value="1">不限</a-radio-button>
                                <a-radio-button value="2" :disabled="getData('bidType', 'ruleConfigForm') == 1"
                                    >统一预算</a-radio-button
                                >
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="dayBudgetType == '2'">
                    <a-col :span="16">
                        <a-form-model-item label="" :wrapperCol="{ span: 24, offset: 5 }" prop="dayBudget">
                            <a-input-number
                                v-model="unitInfo.dayBudget"
                                style="width: 100%"
                                placeholder="不小于500， 不超过100000000，仅支持输入自然数"
                                :min="500"
                                :precision="0"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="投放方式" prop="speed">
                            <a-radio-group v-model="unitInfo.speed">
                                <a-radio-button value="1">快速投放</a-radio-button>
                                <a-radio-button value="2">平滑投放</a-radio-button>
                                <a-radio-button value="3">优先低成本</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row> -->
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="排期">
                            <a-radio-group v-model="unitTime" @change="setTime">
                                <a-radio-button value="1">从今天开始长期投放</a-radio-button>
                                <a-radio-button value="2">设置开始和结束日期</a-radio-button>
                            </a-radio-group>
                            <br />
                            <a-range-picker
                                v-if="unitTime == '2'"
                                v-model="unitInfo.timeRange"
                                format="YYYY-MM-DD"
                                :allowClear="false"
                                :disabled-date="disabledDate"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="投放时段">
                            <a-radio-group v-model="scheduleTime" @change="setTimeAll">
                                <a-radio-button value="1">全天</a-radio-button>
                                <a-radio-button value="2">特定时间</a-radio-button>
                            </a-radio-group>
                            <br />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="scheduleTime == '2'">
                    <a-col :span="24">
                        <a-form-model-item label="" :wrapperCol="{ span: 24 }">
                            <selectCheckAll
                                style="width: 100%"
                                :scheduleTime.sync="unitInfo.scheduleTime"
                                ref="selectCheck"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="创意展现方式">
                            <a-radio-group v-model="unitInfo.showMode">
                                <a-radio-button value="2">智能优选</a-radio-button>
                                <a-radio-button value="1">随机轮播</a-radio-button>
                            </a-radio-group>
                            <br />
                        </a-form-model-item>
                    </a-col>
                </a-row> -->

                <h2 style="margin: 20px 0 10px 0">优化目标和计费</h2>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="优化目标">
                            <a-radio-group v-model="unitInfo.bidType" @change="bidTypeChange">
                                <a-radio-button
                                    :value="2"
                                    :disabled="allianceAccount == '2' || getData('bidType', 'ruleConfigForm') == 1"
                                    >CPC</a-radio-button
                                >
                                <a-radio-button :value="10" :disabled="getData('bidType', 'ruleConfigForm') == 1"
                                    >OCPM</a-radio-button
                                >
                                <a-radio-button :value="12">最大转化</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16" v-if="(unitInfo.bidType == 10 || unitInfo.bidType == 12) && groupTypeData">
                    <a-col :span="16">
                        <a-form-model-item label="转化目标">
                            <a-select v-model="unitInfo.ocpxActionType" @change="clearDeep">
                                <a-select-option
                                    :value="items.ocpx_action_type"
                                    v-for="items in ocpxActionList"
                                    :key="items.ocpx_action_type"
                                    >{{ items.name }}</a-select-option
                                >
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>

                <a-row
                    :gutter="16"
                    v-if="
                        groupTypeData &&
                        (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
                        groupTypeData.deepConversionTypes.length > 0
                    "
                >
                    <a-col :span="16">
                        <a-form-model-item label="深度转化目标">
                            <a-select v-model="unitInfo.deepConversionType" allowClear>
                                <a-select-option
                                    :value="items.deepConversionType"
                                    v-for="(items, index) of groupTypeData.deepConversionTypes"
                                    :key="index"
                                >
                                    {{ items.desc }}</a-select-option
                                >
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="计费方式">
                            <a-radio default-checked>{{
                                unitInfo.bidType == 2 ? '点击计费' : '展示计费(oCPM)'
                            }}</a-radio>
                        </a-form-model-item>
                    </a-col>
                </a-row> -->
                <a-row :gutter="16" v-if="getData('bidType', 'ruleConfigForm') != 1">
                    <a-col :span="16">
                        <a-form-model-item label="出价方式">
                            <a-radio-group
                                v-model="unitInfo.templateBidType"
                                @change="
                                    unitInfo.bidMin = null
                                    unitInfo.bidMax = null
                                    unitInfo.cpaBid = null
                                    unitInfo.bid = null
                                "
                            >
                                <a-radio-button :value="1">固定出价</a-radio-button>
                                <a-radio-button :value="2">随机出价</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <div v-if="getData('bidType', 'ruleConfigForm') != 1">
                    <div v-if="unitInfo.bidType == 10">
                        <div v-if="unitInfo.templateBidType == 1">
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-model-item label="转化目标出价" prop="cpaBid">
                                        <a-input-number
                                            v-model="unitInfo.cpaBid"
                                            style="width: 90%"
                                            :min="0"
                                            :precision="2"
                                            :max="unitInfo.dayBudget ? unitInfo.dayBudget : 999999"
                                        />元
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row
                                :gutter="16"
                                v-if="
                                    groupTypeData &&
                                    (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
                                    groupTypeData.deepConversionTypes.length > 0
                                "
                            >
                                <a-col :span="16">
                                    <a-form-model-item label="深度转化出价">
                                        <a-input-number
                                            v-model="unitInfo.deepConversionBid"
                                            style="width: 90%"
                                            :min="unitInfo.cpaBid ? unitInfo.cpaBid : 0"
                                            :precision="2"
                                        />元
                                        <br />
                                        <span
                                            v-if="
                                                unitInfo.deepConversionBid && (unitInfo.cpaBid || unitInfo.cpaBid > 0)
                                            "
                                            >按照两个出价得到的期望目标深度转化率为{{
                                                ((unitInfo.cpaBid / unitInfo.deepConversionBid) * 100).toFixed(2)
                                            }}%</span
                                        >
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </div>
                        <div v-else>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-model-item
                                        label="出价范围"
                                        prop="bidMin"
                                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                                        :wrapperCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                                    >
                                        <a-input-number
                                            v-model="unitInfo.bidMin"
                                            style="width: 60%"
                                            @change="changeBidMin"
                                            :min="1"
                                            :precision="2"
                                            :max="
                                                unitInfo.dayBudget
                                                    ? unitInfo.dayBudget > 3000
                                                        ? 3000
                                                        : unitInfo.dayBudget
                                                    : 3000
                                            "
                                        />
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="2" :pull="10" style="position: relative; right: 312px; top: 8px">~</a-col>
                                <a-col :span="6" :pull="11">
                                    <a-form-model-item label="" prop="bidMax">
                                        <a-input-number
                                            v-model="unitInfo.bidMax"
                                            style="width: 53.3%"
                                            @change="changeBidMax"
                                            :min="1"
                                            :precision="2"
                                            :max="
                                                unitInfo.dayBudget
                                                    ? unitInfo.dayBudget > 3000
                                                        ? 3000
                                                        : unitInfo.dayBudget
                                                    : 3000
                                            "
                                        />
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row
                                :gutter="16"
                                v-if="
                                    groupTypeData &&
                                    (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
                                    groupTypeData.deepConversionTypes.length > 0
                                "
                            >
                                <a-col :span="16">
                                    <a-form-model-item label="深度转化出价">
                                        <a-input-number
                                            v-model="unitInfo.deepConversionBid"
                                            style="width: 90%"
                                            :min="unitInfo.bidMax ? unitInfo.bidMax : 0"
                                            :precision="2"
                                        />元
                                        <br />
                                        <span
                                            v-if="
                                                unitInfo.deepConversionBid &&
                                                (unitInfo.bidMin || unitInfo.bidMin > 0) &&
                                                (unitInfo.bidMax || unitInfo.bidMax > 0)
                                            "
                                            >按照两个出价得到的期望目标深度转化率为{{
                                                ((unitInfo.bidMin / unitInfo.deepConversionBid) * 100).toFixed(2)
                                            }}%~{{
                                                ((unitInfo.bidMax / unitInfo.deepConversionBid) * 100).toFixed(2)
                                            }}%</span
                                        >
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </div>
                    </div>

                    <div v-else-if="unitInfo.bidType == 2">
                        <div v-if="unitInfo.templateBidType == 1">
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-model-item label="出价" prop="bid">
                                        <a-input-number
                                            v-model="unitInfo.bid"
                                            style="width: 90%"
                                            :min="0.2"
                                            :precision="2"
                                            :max="
                                                unitInfo.dayBudget
                                                    ? unitInfo.dayBudget > 100
                                                        ? 100
                                                        : unitInfo.dayBudget
                                                    : 100
                                            "
                                        />元
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </div>
                        <div v-else>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-model-item
                                        label="出价范围"
                                        prop="bidMin"
                                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                                        :wrapperCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                                    >
                                        <a-input-number
                                            v-model="unitInfo.bidMin"
                                            style="width: 60%"
                                            @change="changeBidMin"
                                            :min="0.2"
                                            :precision="2"
                                            :max="
                                                unitInfo.dayBudget
                                                    ? unitInfo.dayBudget > 100
                                                        ? 100
                                                        : unitInfo.dayBudget
                                                    : 100
                                            "
                                        />
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="2" :pull="10" style="position: relative; right: 280px; top: 8px">~</a-col>
                                <a-col :span="6" :pull="11">
                                    <a-form-model-item label="" prop="bidMax">
                                        <a-input-number
                                            v-model="unitInfo.bidMax"
                                            style="width: 53.3%"
                                            @change="changeBidMax"
                                            :min="0.2"
                                            :precision="2"
                                            :max="
                                                unitInfo.dayBudget
                                                    ? unitInfo.dayBudget > 100
                                                        ? 100
                                                        : unitInfo.dayBudget
                                                    : 100
                                            "
                                        />
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                </div>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="广告组名称" prop="unitName">
                            <a-input v-model="unitInfo.unitName" style="width: 90%" id="unitName" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="" v-bind="tailFormItemLayout">
                            <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'unitInfo', 'unitName')"
                                >+应用名称</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'unitInfo', 'unitName')"
                                >+定向包</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('日期', 'unitInfo', 'unitName')">+日期</a-tag>
                            <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'unitInfo', 'unitName')"
                                >+渠道号（应用标记）</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'unitInfo', 'unitName')"
                                >+创意制作方式</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'unitInfo', 'unitName')"
                                >+广告位置</a-tag
                            >
                            <a-tag color="#2db7f5" @click="getChangeAll('序号', 'unitInfo', 'unitName')"
                                >+序号</a-tag
                            >
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="" v-bind="tailFormItemLayout">
                            <a-checkbox v-model="keep"> 存为预设 </a-checkbox>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <div
                :style="{
                    position: 'absolute',
                    right: 0,
                    bottom: 0,
                    width: '100%',
                    borderTop: '1px solid #e9e9e9',
                    padding: '10px 16px',
                    background: '#fff',
                    textAlign: 'right',
                    zIndex: 1,
                }"
            >
                <a-button :style="{ marginRight: '8px' }" @click="closeUnit('ruleForm')"> 取消 </a-button>
                <a-button type="primary" @click="onClose" :loading="ruleFormLoading"> 提交 </a-button>
            </div>
        </a-drawer>
        <!-- 广告组基本信息预设结束 -->

        <!-- 广告创意基本信息预设 -->
        <a-drawer
            :width="800"
            :visible="creativeVisible"
            :body-style="{ paddingBottom: '80px' }"
            @close="closeUnit('createForm')"
        >
            <h2 slot="title" style="margin-bottom: 0">广告创意基本信息</h2>
            <!-- class="create-info" -->
            <a-form-model
                ref="createForm"
                :model="creativeInfo"
                v-bind="formItemLayout"
                :rules="creativeRules"
                :hideRequiredMark="true"
            >
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="原生广告设置">
                            <a-radio-group v-model="creativeInfo.outerLoopNative" @change="changeOuterLoopNative">
                                <a-radio-button :value="0">关闭</a-radio-button>
                                <a-radio-button :value="1">开启</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="creativeInfo.outerLoopNative == 1">
                    <a-col :span="16">
                        <a-form-model-item label="授权类型">
                            <a-radio-group v-model="creativeInfo.kolUserType">
                                <a-radio-button :value="2">服务号原生</a-radio-button>
                                <a-radio-button :value="3">聚星达人原生</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="创意制作方式">
                            <a-radio-group v-model="creativeInfo.unitType">
                                <a-radio-button :value="4">自定义</a-radio-button>
                                <a-radio-button :value="7" :disabled="creativeInfo.outerLoopNative == 1||unitInfo.sceneId.includes(27)"
                                    >程序化</a-radio-button
                                >
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                  <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="曝光监测链接" prop="impressionUrl">

                            <a-input v-model="creativeInfo.impressionUrl" style="width: 100%" placeholder="请输入" />
                            <!-- <a-select
                                v-model="creativeInfo.impressionUrl"
                                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-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="行动号召" prop="actionBarText">
                            <a-select
                                v-model="creativeInfo.actionBarText"
                                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-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="creativeInfo.overlayType.length > 0">
                    <a-col :span="16">
                        <a-form-model-item label="封面广告语标题" prop="stickerTitle">
                            <a-input v-model="creativeInfo.stickerTitle" style="width: 100%" placeholder="请输入" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <h2 style="margin: 20px 0 10px 0" v-if="creativeCategorySwitch">创意分类和标签</h2>
                <a-row :gutter="16" v-if="creativeCategorySwitch">
                    <a-col :span="16">
                        <a-form-model-item label="创意分类">
                            <a-cascader
                                :options="createOptions"
                                v-model="creativeInfo.creativeCategory"
                                :fieldNames="fieldNames"
                                placeholder="请选择创意分类"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="creativeCategorySwitch">
                    <a-col :span="16">
                        <a-form-model-item label="创意标签" prop="creativeTag">
                            <a-select
                                mode="tags"
                                style="width: 100%"
                                placeholder="按回车生成标签"
                                v-model="creativeTag"
                                dropdownClassName="display-none-selset"
                                :token-separators="[',', ' ', '，']"
                                @change="setData"
                            >
                            </a-select>
                            <div
                                style="
                                    width: 100%;
                                    height: 200px;
                                    border: 1px solid #f2f2f2;
                                    padding: 0 10px;
                                    margin-top: 20px;
                                "
                            >
                                <h4 style="margin-bottom: 0">已填标签</h4>
                                <template v-for="(tag, index) in creativeInfo.creativeTag">
                                    <a-tooltip v-if="tag.length > 10" :key="tag" :title="tag">
                                        <a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">
                                            {{ `${tag.slice(0, 10)}...` }}
                                        </a-tag>
                                    </a-tooltip>
                                    <a-tag v-else :key="tag" :closable="true" @close="() => handleClose(tag)">
                                        {{ tag }}
                                    </a-tag>
                                </template>
                            </div>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="" v-bind="tailFormItemLayout">
                            <a-checkbox value="1" v-model="creativeInfo.keep"> 存为预设 </a-checkbox>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <div
                :style="{
                    position: 'absolute',
                    right: 0,
                    bottom: 0,
                    width: '100%',
                    borderTop: '1px solid #e9e9e9',
                    padding: '10px 16px',
                    background: '#fff',
                    textAlign: 'right',
                    zIndex: 1,
                }"
            >
                <a-button :style="{ marginRight: '8px' }" @click="closeUnit('createForm')"> 取消 </a-button>
                <a-button type="primary" @click="submitCreative" :loading="creativeLoading"> 提交 </a-button>
            </div>
        </a-drawer>
        <!-- 广告创意基本信息预设结束 -->

        <!-- 定向包选择开始 -->
        <a-modal
            title="我的定向包"
            v-model="directionalVisible"
            :width="1000"
            @ok="directionalOk"
            @cancel="directionalCancel"
        >
            <div style="margin-bottom: 15px; display: flex">
                <a-input-search
                    placeholder="请输入定向包名称"
                    enter-button
                    @search="onSearch"
                    v-model="templateName"
                    style="width: 200px; margin-right: 10px"
                />
                <a-button type="primary" @click="getTemplate()" :loading="templateLoading"> 刷新模板</a-button>
            </div>

            <a-table
                rowKey="templateId"
                :loading="loading"
                :columns="columns"
                :data-source="templateList"
                bordered
                :pagination="false"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :scroll="{ y: 500 }"
            >
                <!-- @visibleChange="changeTag(items.code)" -->
                <span slot="action" slot-scope="text, record">
                    <a @click="changeTag(record.templateId)">预览</a>
                    <a-divider type="vertical" />
                    <a @click="lookTemplate(null, record.templateId)">编辑</a>
                </span>
            </a-table>
        </a-modal>
        <!-- 定向包选择结束 -->

        <!--定向预览-->
        <a-modal title="我的定向包" v-model="previewVisible" :width="1000" :footer="null">
            <a-form
                layout="horizontal"
                hide-required-mark
                v-bind="formItemLayout"
                v-if="templateData.templateName"
                class="create-info"
            >
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="定向包">
                            {{ templateData.templateName }}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="定向人群包">
                            <span v-if="templateData.population == '' || templateData.population == null"> 不限 </span>
                            <div v-else>
                                <span v-for="(item, index) in JSON.parse(templateData.population)" :key="item">
                                    {{ showPeopleName(item)
                                    }}{{ index == JSON.parse(templateData.population).length - 1 ? '' : ',' }}
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24" :pull="1" style="margin-left: -26px">
                        <a-form-item label="区域">
                            <span v-if="templateData.region == '' || templateData.region == null"> 不限 </span>
                            <div v-else>
                                {{ region.join(',') }}
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="年龄">
                            <span
                                v-if="
                                    (templateData.agesRange == '' || templateData.agesRange == null) &&
                                    (templateData.min == '' || templateData.min == null) &&
                                    (templateData.max == '' || templateData.max == null)
                                "
                            >
                                不限
                            </span>
                            <div v-else>
                                <span v-if="templateData.agesRange == '' || templateData.agesRange == null">
                                    {{ templateData.min + '岁~' + templateData.max + '岁' }}
                                </span>
                                <span v-else>
                                    <span v-for="(item, index) in JSON.parse(templateData.agesRange)" :key="index">
                                        {{ item | kuaishouAge
                                        }}{{ index == JSON.parse(templateData.agesRange).length - 1 ? '' : ',' }}
                                    </span>
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="性别">
                            {{ templateData.gender == 1 ? '女' : templateData.gender == 2 ? '男' : '不限' }}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="平台">
                            {{
                                templateData.platformOs == 1
                                    ? 'Android系统'
                                    : templateData.platformOs == 2
                                    ? 'IOS系统'
                                    : '不限'
                            }}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="手机价格">
                            <span v-if="templateData.devicePrice == '' || templateData.devicePrice == null">
                                不限
                            </span>
                            <div v-else>
                                <span v-for="(item, index) in JSON.parse(templateData.devicePrice)" :key="index">
                                    {{ item | kuaishouPrice
                                    }}{{ index == JSON.parse(templateData.devicePrice).length - 1 ? '' : ',' }}
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="网络环境">
                            {{ templateData.network == 1 ? 'Wi-Fi' : templateData.network == 2 ? '移动网络' : '不限' }}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="过滤已转化人群">
                            {{ templateData.filterConvertedLevel | kuaishouFilterConvertedLevel }}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-item label="已安装用户">
                            {{ templateData.disableInstalledAppSwitch | disableInstalledAppSwitchLable }}
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
        <!-- 定向预览结束 -->

        <a-modal
            :maskClosable="false"
            title="上传图片"
            @cancel="closeImage"
            @afterClose="closeImage"
            v-model="materialImageVisible"
            :width="800"
        >
            <template slot="footer">
                <a-button key="back" @click="closeImage">取消</a-button>
                <a-button key="submit" type="primary" @click="handleOkImage" :loading="loadingImage"> 确定 </a-button>
            </template>
            <a-form-item label="">
                <uploadFile
                    v-if="materialImageVisible && kpImageList.length != 6"
                    :value.sync="urlListImage.url"
                    :checkFile="fileWaterImage"
                    @overUpload="overUploadImageUpload"
                    @removeUpload="deleteImageUpload"
                    :fileCount="6"
                    uploadType="image"
                />
                <!-- {{ kpImageList }} -->
                <a-row :gutter="16">
                    <a-col :span="8" v-for="(item, index) in kpImageList" :key="index">
                        <a-card style="width: 240px">
                            <template #cover>
                                <img
                                    alt="example"
                                    style="width: 60%; max-height: 200px; height: auto; min-height: 200px"
                                    :src="item.url"
                                />
                            </template>
                            <a-card-meta title="">
                                <template #description>{{ item.width }}*{{ item.height }}</template>
                            </a-card-meta>
                            <template #actions>
                                <a @click="deleteKpImage(index)">删除</a>
                            </template>
                        </a-card>
                    </a-col>
                </a-row>

                <!-- <file-upload ref="fileUploadDialog" v-if="materialImageVisible" :count="6"></file-upload> -->
            </a-form-item>
        </a-modal>
        <!-- 创意素材选择 -->
        <a-modal title="创意素材" v-model="materialVisible" :width="1000" @ok="handleOkVideo" @cancel="cancelVideo">
            <a-form-model
                ref="materialForm"
                :model="materialInfo"
                v-bind="formItemLayout"
                :rules="materialRules"
                :hideRequiredMark="true"
            >
                <!-- <a-row :gutter="16" v-if="unitInfo.sceneId.includes(27)">
                    <a-col :span="16">
                        <a-form-model-item label="视频类型">
                            <a-radio-group v-model="materialInfo.videoType">
                                <a-radio-button :value="1">视频</a-radio-button>
                                <a-radio-button :value="0">开屏视频</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row> -->
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="自动生成封面">
                            <a-radio-group v-model="materialInfo.isMakeCover">
                                <a-radio-button :value="1">不开启</a-radio-button>
                                <a-radio-button :value="2">开启</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="materialInfo.isMakeCover == 2">
                    <a-col :span="16">
                        <a-form-model-item label="设置封面数量" prop="coverNumber">
                            <a-input-number
                                v-model="materialInfo.coverNumber"
                                style="width: 100%"
                                placeholder="请输入1~8之间的封面数量"
                                :min="1"
                                :max="8"
                                :precision="0"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="广告语匹配方式">
                            <a-radio-group v-model="materialInfo.matchingMethod">
                                <a-radio-button :value="1">自定义</a-radio-button>
                                <a-radio-button :value="2">按创意匹配</a-radio-button>
                                <a-radio-button :value="3">按创意组匹配</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="16">
                        <a-form-model-item label="是否设置创意数量">
                            <a-radio-group v-model="materialInfo.groupCreativity">
                                <a-radio-button :value="1">是</a-radio-button>
                                <a-radio-button :value="2">否</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16" v-if="materialInfo.groupCreativity == 1">
                    <a-col :span="16">
                        <a-form-model-item label="设置创意数量" prop="creativityNumber">
                            <a-input-number
                                v-model="materialInfo.creativityNumber"
                                style="width: 100%"
                                placeholder="请输入1~15之间的创意数量"
                                :min="1"
                                :max="15"
                                :precision="0"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div
                            style="
                                width: 100%;
                                height: 50px;
                                border: 1px solid #f2f2f2;
                                padding: 0 20px;
                                line-height: 50px;
                                position: relative;
                            "
                        >
                            <span style="color: black; margin-right: 20px; font-weight: 700">创意制作</span>
                            <span style="margin-right: 20px"
                                >创意组数量： {{ materialInfo.materialList.length }} 组</span
                            >
                            <span style="margin-right: 20px"
                                >{{ !!kpType ? (kpType == 'video' ? '视频数量' : '图片数量') : '视频数量' }}：
                                {{ materialCount }} 个</span
                            >
                            <a
                                style="margin-right: 20px"
                                @click="
                                    materialInfo.materialList = []
                                    checkVideo = []
                                    checkVideoAll = []
                                    checkVideoWai = []
                                    sumContent = 0
                                    kpAllData = []
                                    kpType = undefined
                                "
                                >清空</a
                            >
                            <a-button
                                type="primary"
                                style="position: absolute; right: 150px; top: 8px"
                                @click="materialImageVisible = true"
                                :disabled="kpType == 'video'"
                                v-if="unitInfo.sceneId.includes(27)"
                            >
                                <!-- :disabled="this.accountId == undefined || accountId == '' || accountId == null" -->
                                上传开屏图片
                            </a-button>
                            <a-button
                                type="primary"
                                style="position: absolute; right: 20px; top: 8px"
                                @click="checkVideoFun()"
                                :disabled="kpType == 'image'"
                            >
                                批量选择视频
                            </a-button>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16" style="margin-top: 20px">
                    <a-col :span="24">
                        <a-collapse accordion :defaultActiveKey="0">
                            <a-collapse-panel
                                :header="item.name"
                                v-for="(item, indexList) in materialInfo.materialList"
                                :key="indexList"
                            >
                                <a-tabs type="editable-card" hideAdd v-model="item.active" @edit="remove">
                                    <a-tab-pane
                                        forceRender
                                        :tab="'创意' + (indexMater + 1)"
                                        v-for="(items, indexMater) in item.photoArr"
                                        :key="indexMater + '@' + indexList"
                                    >
                                        <div
                                            style="
                                                width: 100%;
                                                height: 308px;
                                                border: 1px solid #f2f2f2;
                                                padding: 10px;
                                                display: flex;
                                                justify-content: space-between;
                                            "
                                        >
                                            <div
                                                style="
                                                    width: 40%;
                                                    height: 100%;
                                                    display: flex;
                                                    justify-content: space-between;
                                                "
                                                v-if="items.creativeName"
                                            >
                                                <div style="width: 45%; height: 100%" class="showShare">
                                                    <img
                                                        :src="items.photoId.coverUrl"
                                                        style="width: 100%; height: auto"
                                                        alt=""
                                                        srcset=""
                                                        v-if="items.photoId.coverUrl"
                                                    />
                                                    <div
                                                        style="
                                                            width: 100%;
                                                            height: 100%;
                                                            background: rgba(0, 0, 0, 0.5);
                                                            position: absolute;
                                                            top: 0;
                                                        "
                                                        class="share"
                                                    >
                                                        <a-button
                                                            @click="
                                                                visibleVideo = true
                                                                videoUrlShow = items.photoId.url
                                                            "
                                                            v-if="items.photoId.coverUrl"
                                                        >
                                                            查看视频
                                                        </a-button>
                                                    </div>
                                                </div>
                                                <div style="width: 45%; height: 100%">
                                                    <img
                                                        v-if="items.image.url"
                                                        :src="items.image.url"
                                                        style="width: 100%; height: auto"
                                                        alt=""
                                                        srcset=""
                                                    />
                                                    <uploadFile
                                                        v-else
                                                        :value.sync="items.image"
                                                        :checkFile="fileWater"
                                                        @overUpload="overUploadImage"
                                                        @removeUpload="deleteImage"
                                                        :fileCount="1"
                                                        uploadType="image"
                                                        :multiple="false"
                                                    />
                                                </div>
                                            </div>
                                            <div style="width: 55%; height: 100%; line-height: 1">
                                                <a-form-model-item
                                                    ref="description"
                                                    :label="'广告语'"
                                                    :prop="
                                                        'materialList.' +
                                                        indexList +
                                                        '.photoArr.' +
                                                        indexMater +
                                                        '.description'
                                                    "
                                                    :rules="{
                                                        required: true,
                                                        message: '广告语必填',
                                                        trigger: 'blur',
                                                    }"
                                                    style="margin-top: 60px"
                                                    v-if="materialInfo.matchingMethod == 1"
                                                >
                                                    <a-textarea
                                                        class="rending"
                                                        placeholder="请输入广告语"
                                                        v-model.trim="items.description"
                                                        :autosize="{ minRows: 2, maxRows: 6 }"
                                                        :max-length="30"
                                                    ></a-textarea>

                                                    <p
                                                        style="
                                                            font-size: 12px;
                                                            color: #b6bbc7;
                                                            letter-spacing: 0.3px;
                                                            text-align: right;
                                                            line-height: 20px;
                                                            position: absolute;
                                                            bottom: 0;
                                                            right: 6px;
                                                            width: 100%;
                                                            margin-bottom: 0;
                                                        "
                                                    >
                                                        {{ items.description.length + '/30' }}
                                                    </p>
                                                </a-form-model-item>
                                                <a-form-model-item
                                                    ref="creativeName"
                                                    :label="'创意名称'"
                                                    :prop="
                                                        'materialList.' +
                                                        indexList +
                                                        '.photoArr.' +
                                                        indexMater +
                                                        '.creativeName'
                                                    "
                                                    :rules="{
                                                        required: true,
                                                        message: '创意名称必填',
                                                        trigger: 'blur',
                                                    }"
                                                    ><a-input
                                                        v-model="items.creativeName"
                                                        placeholder="请输入创意名称"
                                                        style="margin-right: 8px"
                                                    />
                                                </a-form-model-item>
                                            </div>
                                        </div>
                                    </a-tab-pane>

                                    <!-- <a-button
                    slot="tabBarExtraContent"
                    type="primary"
                    :disabled="
                      materialInfo.groupCreativity == 1
                        ? item.photoArr.length >= materialInfo.creativityNumber
                        : item.photoArr.length >= 15
                    "
                    @click="addMaterialOne(indexList)"
                  >
                    添加素材
                  </a-button> -->
                                </a-tabs>
                            </a-collapse-panel>
                            <!-- <a-collapse-panel key="2" header="创意组2" :disabled="false">
                <p>{{ materialVisible }}</p>
              </a-collapse-panel>
              <a-collapse-panel key="3" header="创意组3">
                <p>{{ materialVisible }}</p>
              </a-collapse-panel> -->
                        </a-collapse>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-modal>
        <!-- 创意素材选择结束 -->

        <!-- 选择素材相关 -->
        <a-modal
            :maskClosable="false"
            title="选择视频素材"
            v-model="checkMatemalVisible"
            @ok="handleOkShow"
            @cancel="cancelAll"
            :width="1000"
            :confirmLoading="directionalLoading"
        >
            <a-tabs type="card" @change="callback" v-model="activeTwo" class="check-video">
                <div slot="tabBarExtraContent">
                    当前选择数量 {{ sumContent }}/{{ Math.floor(200 / this.materialInfo.coverNumber) }}
                    <a-button type="primary" @click="tongbu()" :loading="tongbuLoading" style="margin-left: 10px">
                        刷新素材</a-button
                    >
                </div>
                <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
                    <a-row :gutter="24">
                        <a-col :span="9">
                            <a-form-item
                                label="日期选择"
                                :labelCol="{
                                    lg: {
                                        span: 6,
                                    },
                                    sm: {
                                        span: 6,
                                    },
                                    xs: {
                                        span: 6,
                                    },
                                    md: {
                                        span: 6,
                                    },
                                }"
                                :wrapperCol="{
                                    lg: {
                                        span: 18,
                                    },
                                    sm: {
                                        span: 18,
                                    },
                                    xs: {
                                        span: 14,
                                    },
                                    md: {
                                        span: 14,
                                    },
                                }"
                            >
                                <a-range-picker name="buildTime" v-model="time" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="9">
                            <a-form-item
                                label="唯一编码"
                                :labelCol="{
                                    lg: {
                                        span: 6,
                                    },
                                    sm: {
                                        span: 6,
                                    },
                                    xs: {
                                        span: 6,
                                    },
                                    md: {
                                        span: 6,
                                    },
                                }"
                                :wrapperCol="{
                                    lg: {
                                        span: 18,
                                    },
                                    sm: {
                                        span: 18,
                                    },
                                    xs: {
                                        span: 14,
                                    },
                                    md: {
                                        span: 14,
                                    },
                                }"
                            >
                                <a-input placeholder="请输入唯一标识，多个以,隔开" v-model="md5Str" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="9">
                            <a-form-item
                                label="素材名称"
                                :labelCol="{
                                    lg: {
                                        span: 6,
                                    },
                                    sm: {
                                        span: 6,
                                    },
                                    xs: {
                                        span: 6,
                                    },
                                    md: {
                                        span: 6,
                                    },
                                }"
                                :wrapperCol="{
                                    lg: {
                                        span: 18,
                                    },
                                    sm: {
                                        span: 18,
                                    },
                                    xs: {
                                        span: 14,
                                    },
                                    md: {
                                        span: 14,
                                    },
                                }"
                            >
                                <a-input placeholder="请输入素材名称" v-model="photoName" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-button style="position: relative; top: 4px" @click="selectAllVideo"> 全选 </a-button>
                            <a-button
                                type="primary"
                                style="position: relative; top: 4px; margin-left: 5px"
                                @click="searchVideo"
                            >
                                搜索
                            </a-button>
                        </a-col>
                    </a-row>
                    <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0; height: 400px">
                        <!-- :value="item.photoId" -->
                        <a-checkbox-group v-model="checkVideo" style="width: 100%" @change="setVideoData">
                            <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
                                <a-checkbox
                                    :value="item.photoId"
                                    style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0"
                                >
                                    <p
                                        style="
                                            width: 100%;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                        "
                                        :title="item.photoName"
                                    >
                                        {{ item.photoName }}
                                    </p>

                                    <img
                                        :src="item.coverUrl"
                                        alt=""
                                        style="width: 90%; margin-bottom: 30px; position: relative; left: 5%"
                                    />
                                    <div style="width: 100%; text-align: center">
                                        {{
                                            item.statDate
                                                ? '时间：' + item.statDate.split(' ')[0]
                                                : '消耗：' + item.charge
                                        }}
                                    </div>
                                </a-checkbox>
                            </li>
                        </a-checkbox-group>
                    </ul>
                    <div
                        v-else
                        style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center"
                    >
                        <img src="@/assets/nodata.png" alt="" v-if="!loadingVideoList" style="width: 50%" />
                        <img v-else src="@/views/modules/material/loading.gif" style="width: 50%" />
                    </div>
                </a-tab-pane>
            </a-tabs>
            <div style="text-align: right">
                <a-pagination
                    size="small"
                    :showTotal="ipagination.showTotal"
                    style="float: right"
                    v-if="dataSource.length > 0"
                    showQuickJumper
                    :pageSize.sync="ipagination.pageSize"
                    :total="ipagination.total"
                    v-model="ipagination.current"
                    @change="getDataSource"
                />
            </div>
        </a-modal>
        <!-- 选择素材相关结束 -->

        <!-- 选择开屏素材 -->
        <a-modal
            :maskClosable="false"
            title="选择开屏素材"
            v-model="sizeVisible"
            @ok="handleOkKpShow"
            @cancel="cancelAll"
            :width="1000"
            :confirmLoading="directionalLoading"
        >
            <a-tabs type="card" @change="callback" v-model="activeTwo" class="check-video">
                <div slot="tabBarExtraContent">
                    <a-button type="primary" @click="tongbu()" :loading="tongbuLoading" style="margin-left: 10px">
                        刷新素材</a-button
                    >
                </div>
                <a-tab-pane tab="开屏素材" :key="0">
                    <a-row :gutter="24">
                        <a-col :span="9">
                            <a-form-item
                                label="日期选择"
                                :labelCol="{
                                    lg: {
                                        span: 6,
                                    },
                                    sm: {
                                        span: 6,
                                    },
                                    xs: {
                                        span: 6,
                                    },
                                    md: {
                                        span: 6,
                                    },
                                }"
                                :wrapperCol="{
                                    lg: {
                                        span: 18,
                                    },
                                    sm: {
                                        span: 18,
                                    },
                                    xs: {
                                        span: 14,
                                    },
                                    md: {
                                        span: 14,
                                    },
                                }"
                            >
                                <a-range-picker name="buildTime" v-model="time" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="9">
                            <a-form-item
                                label="唯一编码"
                                :labelCol="{
                                    lg: {
                                        span: 6,
                                    },
                                    sm: {
                                        span: 6,
                                    },
                                    xs: {
                                        span: 6,
                                    },
                                    md: {
                                        span: 6,
                                    },
                                }"
                                :wrapperCol="{
                                    lg: {
                                        span: 18,
                                    },
                                    sm: {
                                        span: 18,
                                    },
                                    xs: {
                                        span: 14,
                                    },
                                    md: {
                                        span: 14,
                                    },
                                }"
                            >
                                <a-input placeholder="请输入唯一标识，多个以,隔开" v-model="md5Str" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="9">
                            <a-form-item
                                label="素材名称"
                                :labelCol="{
                                    lg: {
                                        span: 6,
                                    },
                                    sm: {
                                        span: 6,
                                    },
                                    xs: {
                                        span: 6,
                                    },
                                    md: {
                                        span: 6,
                                    },
                                }"
                                :wrapperCol="{
                                    lg: {
                                        span: 18,
                                    },
                                    sm: {
                                        span: 18,
                                    },
                                    xs: {
                                        span: 14,
                                    },
                                    md: {
                                        span: 14,
                                    },
                                }"
                            >
                                <a-input placeholder="请输入素材名称" v-model="photoName" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-button
                                type="primary"
                                style="position: relative; top: 4px; margin-left: 5px"
                                @click="searchVideo"
                            >
                                搜索
                            </a-button>
                        </a-col>
                    </a-row>
                    <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0; height: 400px">
                        <!-- :value="item.photoId" -->
                        <!-- {{sizeType}}
                        {{
                            checkKpVideo
                        }} -->
                        <a-checkbox-group v-model="checkKpVideo" style="width: 100%" @change="setKpVideoData">
                            <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
                                <a-checkbox
                                    :value="item"
                                    style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0"
                                    :disabled="
                                        checkKpVideo.length > 0 &&
                                        checkKpVideo.filter((i) => i.photoId == item.photoId).length == 0 &&
                                        sizeType.includes(item.height)
                                    "
                                >
                                    <p
                                        style="
                                            width: 100%;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                        "
                                        :title="item.photoName"
                                    >
                                        {{ item.photoName }}
                                    </p>

                                    <img
                                        :src="item.coverUrl"
                                        alt=""
                                        style="
                                            width: 90%;
                                            margin-bottom: 30px;
                                            position: relative;
                                            left: 5%;
                                            height: 280px;
                                        "
                                    />
                                    <div style="width: 100%; text-align: center">
                                        {{ item.width + '*' + item.height }}
                                    </div>
                                </a-checkbox>
                            </li>
                        </a-checkbox-group>
                    </ul>
                    <div
                        v-else
                        style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center"
                    >
                        <img src="@/assets/nodata.png" alt="" v-if="!loadingVideoList" style="width: 50%" />
                        <img v-else src="@/views/modules/material/loading.gif" style="width: 50%" />
                    </div>
                </a-tab-pane>
            </a-tabs>
            <div style="text-align: right">
                <a-pagination
                    size="small"
                    :showTotal="ipagination.showTotal"
                    style="float: right"
                    v-if="dataSource.length > 0"
                    showQuickJumper
                    :pageSize.sync="ipagination.pageSize"
                    :total="ipagination.total"
                    v-model="ipagination.current"
                    @change="getDataSource"
                />
            </div>
        </a-modal>
        <!-- 选择开屏素材结束-->

        <!-- 预览应用/链接 -->
        <a-modal
            :title="getData('campaignType', 'form') == 5 ? '填写链接' : '预览应用'"
            v-model="appIdVisible"
            :width="1000"
            @ok="appIdOk"
            @cancel="appIdVisible = false"
        >
            <a-row :gutter="10" class="hide-checkbox">
                <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
                    <a-card class="search-box" style="min-height: 500px">
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">应用分配方式</span>
                            <a-radio-group v-model="appList.appAllocation">
                                <a-radio-button :value="1">按账户分配</a-radio-button>
                                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                                <a-radio-button :value="3">按广告组分配</a-radio-button>
                            </a-radio-group>
                        </div>
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">选择应用</span>
                            广告账户：1 &nbsp;&nbsp;&nbsp;&nbsp; 广告计划：{{
                                campaignCount
                            }}
                            &nbsp;&nbsp;&nbsp;&nbsp;广告组数量：{{
                                checkDirectionalList.length * materialInfo.materialList.length
                            }}
                            <a-card style="min-height: 300px; margin-top: 15px" v-if="appIdVisible">
                                <a-transfer
                                    :data-source="appListArr"
                                    :target-keys="targetKeys"
                                    :disabled="disabled"
                                    :show-search="true"
                                    :filter-option="(inputValue, item) => item.appVersion.indexOf(inputValue) !== -1"
                                    :show-select-all="true"
                                    @change="onChangeTransFer"
                                >
                                    <template
                                        slot="children"
                                        slot-scope="{
                                            props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
                                            on: { itemSelectAll, itemSelect },
                                        }"
                                    >
                                        <a-table
                                            :row-selection="
                                                getRowSelection({
                                                    disabled: listDisabled,
                                                    selectedKeys,
                                                    itemSelectAll,
                                                    itemSelect,
                                                })
                                            "
                                            :columns="direction === 'left' ? leftColumns : rightColumns"
                                            :data-source="filteredItems"
                                            size="small"
                                            :style="{ pointerEvents: listDisabled ? 'none' : null }"
                                            :custom-row="
                                                ({ key, disabled: itemDisabled }) => ({
                                                    on: {
                                                        click: () => {
                                                            if (itemDisabled || listDisabled) return
                                                            itemSelect(key, !selectedKeys.includes(key))
                                                        },
                                                    },
                                                })
                                            "
                                        >
                                            <!-- platform -->

                                            <div slot="platform" slot-scope="text, records" @click.stop>
                                                {{ text | platform }}
                                            </div>
                                            <div slot="action" slot-scope="text, records" @click.stop>
                                                <!-- {{ records.siteId }} -->
                                                <a-select
                                                    v-model="records.siteId"
                                                    style="width: 100%"
                                                    @focus="getSiteList(records)"
                                                    allowClear
                                                >
                                                    <a-select-option
                                                        v-for="appModel in records.siteList"
                                                        :key="appModel.siteId"
                                                        :value="appModel.siteId"
                                                    >
                                                        {{ appModel.name }}
                                                    </a-select-option>
                                                </a-select>
                                            </div>
                                        </a-table>
                                    </template>
                                </a-transfer>
                            </a-card>
                        </div>
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">链接分配方式</span>
                            <a-radio-group v-model="appList.linkAllocation" @change="setCount">
                                <a-radio-button :value="1">按账户分配</a-radio-button>
                                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                                <a-radio-button :value="3">按广告组分配</a-radio-button>
                            </a-radio-group>
                        </div>
                        <!-- linkAllocation: 1,
        clickUrlList: [],
        clickUrlActionList: [], -->
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">第三方监测链接</span>

                            <a-input
                                v-model="item.value"
                                placeholder="请输入第三方检测链接"
                                style="width: 60%; margin-bottom: 10px"
                                v-for="(item, index) in appList.clickUrlList"
                                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                                :key="index"
                            >
                            </a-input>
                        </div>
                        <div style="margin-bottom: 30px" v-if="actionbarClickUrlSwitch">
                            <span style="display: inline-block; width: 140px">第三方点击监测链接</span>
                            <a-input
                                v-model="item.value"
                                placeholder="请输入第三方点击检测链接"
                                style="width: 60%; margin-bottom: 10px"
                                v-for="(item, index) in appList.clickUrlActionList"
                                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                                :key="index"
                            >
                            </a-input>
                        </div>
                        <!-- <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">第三方曝光监测链接</span>
                            <a-input
                                v-model="item.value"
                                placeholder="请输入第三方曝光监测链接"
                                style="width: 60%; margin-bottom: 10px"
                                v-for="(item, index) in appList.impressionUrl"
                                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                                :key="index"
                            >
                            </a-input>
                        </div> -->
                        <div style="margin-bottom: 30px" v-if="getData('campaignType', 'form') == 7">
                            <span style="display: inline-block; width: 140px">h5链接</span>

                            <a-input
                                v-model="item.value"
                                placeholder="请输入h5链接"
                                style="width: 60%; margin-bottom: 10px"
                                v-for="(item, index) in appList.urlArr"
                                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                                :key="index"
                            >
                            </a-input>
                        </div>
                        <div style="margin-bottom: 30px" v-if="getData('campaignType', 'form') == 7">
                            <span style="display: inline-block; width: 140px">调起链接</span>

                            <a-input
                                v-model="item.value"
                                placeholder="请输入调起链接"
                                style="width: 60%; margin-bottom: 10px"
                                v-for="(item, index) in appList.schemaUriArr"
                                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                                :key="index"
                            >
                            </a-input>
                        </div>

                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">试玩分配方式</span>
                            <a-radio-group
                                v-model="appList.playableAllocation"
                                @change="
                                    appList.playableIds = []
                                    appList.playableIdType = 1
                                    playableList = []
                                "
                            >
                                <a-radio-button :value="1">按账户分配</a-radio-button>
                                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                                <a-radio-button :value="3">按广告组分配</a-radio-button>
                            </a-radio-group>
                        </div>
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">是否选择试玩</span>

                            <a-radio-group
                                button-style="solid"
                                v-model="appList.playableIdType"
                                @change="getPlayableList"
                            >
                                <a-radio-button :value="1">关闭</a-radio-button>
                                <a-radio-button :value="0">开启</a-radio-button>
                            </a-radio-group>
                        </div>
                        <div style="margin-bottom: 30px" v-if="appList.playableIdType == 0">
                            <span style="display: inline-block; width: 140px">选择试玩</span>
                            <a-select
                                mode="multiple"
                                v-model="appList.playableIds"
                                showSearch
                                allowClear
                                placeholder="请选择试玩"
                                optionFilterProp="children"
                                :filterOption="filterOption"
                                style="width: 300px"
                                @change="onCategoryChange"
                            >
                                <a-select-option
                                    :disabled="appModel.disabled"
                                    v-for="appModel in playableList"
                                    :key="appModel.play_id"
                                    :value="appModel.play_id"
                                >
                                    {{ appModel.play_name }}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div style="margin-bottom: 30px" v-if="appList.playableIdType == 0">
                            <span style="display: inline-block; width: 140px">试玩按钮</span>
                            <a-select
                                v-model="appList.playButton"
                                showSearch
                                allowClear
                                placeholder="请选择试玩按钮"
                                optionFilterProp="children"
                                :filterOption="filterOption"
                                style="width: 300px"
                            >
                                <a-select-option value="立即试玩"> 立即试玩 </a-select-option>
                                <a-select-option value="试玩一下"> 试玩一下 </a-select-option>
                                <a-select-option value="立即体验"> 立即体验 </a-select-option>
                                <a-select-option value="免装试玩"> 免装试玩 </a-select-option>
                                <a-select-option value="免装体验"> 免装体验 </a-select-option>
                            </a-select>
                        </div>

                        <!-- playableAllocation: 1, playableIdType: '0', playableIds: [], playButton: '', -->
                    </a-card>
                </a-col>
            </a-row>
        </a-modal>

        <templateModal ref="templateModal" @getData="getTemplate" />
        <!-- 预览应用/链接结束 -->
        <a-modal
            :title="getData('campaignType', 'form') == 5 ? '填写链接' : '预览应用'"
            v-model="urlVisible"
            :width="1000"
            @ok="urlOk"
            @cancel="urlVisible = false"
        >
            <a-row :gutter="10" class="hide-checkbox">
                <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
                    <a-card class="search-box" style="min-height: 500px">
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">应用分配方式</span>
                            <a-radio-group v-model="appList.appAllocation" @change="setCountUrl">
                                <a-radio-button :value="1">按账户分配</a-radio-button>
                                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                                <a-radio-button :value="3">按广告组分配</a-radio-button>
                            </a-radio-group>
                        </div>
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">填写链接</span>
                            广告账户：1 &nbsp;&nbsp;&nbsp;&nbsp; 广告计划：{{
                                campaignCount
                            }}
                            &nbsp;&nbsp;&nbsp;&nbsp;广告组数量：{{
                                checkDirectionalList.length * materialInfo.materialList.length
                            }}
                            <a-input
                                v-model="item.value"
                                placeholder="请输入链接"
                                style="width: 60%; margin-bottom: 10px; margin-top: 10px"
                                v-for="(item, index) in appList.urlArr"
                                :key="index"
                                :style="{ marginLeft: '140px' }"
                            >
                            </a-input>
                        </div>
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">监测链接分配方式</span>
                            <a-radio-group v-model="appList.linkAllocation" @change="setCount">
                                <a-radio-button :value="1">按账户分配</a-radio-button>
                                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                                <a-radio-button :value="3">按广告组分配</a-radio-button>
                            </a-radio-group>
                        </div>
                        <!-- linkAllocation: 1,
        clickUrlList: [],
        clickUrlActionList: [], -->
                        <div style="margin-bottom: 30px">
                            <span style="display: inline-block; width: 140px">第三方监测链接</span>

                            <a-input
                                v-model="item.value"
                                placeholder="请输入第三方检测链接"
                                style="width: 60%; margin-bottom: 10px"
                                v-for="(item, index) in appList.clickUrlList"
                                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                                :key="index"
                            >
                            </a-input>
                        </div>
                        <div style="margin-bottom: 30px" v-if="actionbarClickUrlSwitch">
                            <span style="display: inline-block; width: 140px">第三方点击监测链接</span>
                            <a-input
                                v-model="item.value"
                                placeholder="请输入第三方点击检测链接"
                                style="width: 60%; margin-bottom: 10px"
                                v-for="(item, index) in appList.clickUrlActionList"
                                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                                :key="index"
                            >
                            </a-input>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </a-modal>

        <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
            <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
                您的浏览器不支持 video 标签。
            </video>
        </a-modal>
    </div>
</template>

<script>
//   import UserMenu from '../tools/UserMenu'
//   import SMenu from '../menu/'
import Logo from '@/components/tools/Logo.vue'
import pick from 'lodash.pick'
import { mixin } from '@/utils/mixin.js'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import moment from 'moment'
import selectCheckAll from '@/components/formComponents/toutiaoTime'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
import uploadFile from '@/components/uploadFileMd5Push.vue'
import BMF from 'browser-md5-file'
import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import FileUpload from './upload.vue'
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)
}

const mockData = []

const originTargetKeys = mockData.filter((item) => +item.key % 3 > 1).map((item) => item.key)

const leftTableColumns = [
    {
        dataIndex: 'appVersion',
        title: '应用标记',
    },
    {
        dataIndex: 'appId',
        title: '应用Id',
    },
    {
        dataIndex: 'platform',
        title: '应用类型',
        scopedSlots: { customRender: 'platform' },
    },
]
const rightTableColumns = [
    {
        dataIndex: 'appName',
        title: '应用名称',
    },
    {
        dataIndex: 'action',
        title: '选择应用下载详情',
        scopedSlots: { customRender: 'action' },
    },
]
export default {
    name: 'GlobalHeader',
    components: {
        //   UserMenu,
        //   SMenu,
        Logo,
        Treeselect,
        selectCheckAll,
        checkBoxGroup,
        uploadFile,
        templateModal,
        FileUpload,
    },
    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 {
            kpType: undefined,
            tabKey: '1',
            retargetColumns: [
                {
                    title: '媒体包',
                    dataIndex: 'name',
                    sorter: true,
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '所属账号',
                    dataIndex: 'accountId',
                    sorter: true,
                    scopedSlots: { customRender: 'accountId' },
                },
            ],
            retargetData: [],
            retargetDataAll: [],
            mediaLoading: false,
            md5Str: '',
            photoName: '',
            spinning: true,
            removeActive: null,
            visibleVideo: false,
            videoUrlShow: '',
            disabled: false,
            showSearch: false,
            targetKeys: [],
            leftColumns: leftTableColumns,
            rightColumns: rightTableColumns,

            active: 0,
            previewVisible: false,
            ruleFormLoading: false,
            targetIds: [],
            accountId: '',
            directionalVisible: false, //定向包选择模态框
            directionalLoading: false,
            templateList: [], //定向包模板列表
            templateListAll: [],
            selectedRowKeys: [],
            selectionRows: [],
            checkDirectionalList: [], //选择的定向包
            populationList: [],
            videoVisibleChange: '',
            templateData: {},
            loading: false,
            region: [],
            columns: [
                {
                    title: '定向包名称',
                    dataIndex: 'templateName',
                    width: '33%',
                    align: 'center',
                    scopedSlots: { customRender: 'templateName' },
                },
                {
                    title: '关联广告组',
                    dataIndex: 'unitCount',
                    width: '33%',
                    align: 'center',
                    scopedSlots: { customRender: 'unitCount' },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: { customRender: 'action' },
                },
            ],
            ruleConfigVisible: false, //规则配置的模态框
            confirmLoading: false,
            ruleConfigForm: this.$form.createForm(this),
            visible: false, //广告组信息配置右侧抽屉
            screenWidth: document.body.clientWidth,
            form: this.$form.createForm(this),
            formUnit: this.$form.createForm(this),
            headerBarFixed: false,
            //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
            topMenuStyle: {
                headerIndexLeft: {},
                topNavHeader: {},
                headerIndexRight: {},
                topSmenuStyle: {},
            },
            activeStep: 0,
            campaignData: {},
            //组相关
            unitInfo: {
                useAppMarket: false,
                appStore: [],
                dayBudget: null,
                speed: '1',
                timeRange: [moment().startOf('day'), moment().add(1, 'months')],
                scheduleTime: '',
                showMode: '2',
                sceneId: [1],
                url: '',
                schemaUri: '',
                bidType: 10,
                ocpxActionType: 2,
                deepConversionType: null,
                templateBidType: 1,
                cpaBid: null,
                bid: null,
                deepConversionBid: null,
                bidMax: null,
                bidMin: null,
                unitName: '',
                // 'huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'
            },
            allianceAccount: '1',
            dayBudgetType: '1',
            unitTime: '1',
            scheduleTime: '1',
            rules: {
                dayBudget: [{ required: true, trigger: 'change', validator: this.handleConfirmValue }],
                unitName: [{ required: true, message: '广告组名称必填', trigger: 'change' }],
                cpaBid: [{ required: true, trigger: 'change', validator: this.cpaBidValue }],
                bid: [{ required: true, trigger: 'change', validator: this.bidValue }],
                bidMax: [{ required: true, trigger: 'change', validator: this.maxValue }],
                bidMin: [{ required: true, trigger: 'change', validator: this.minValue }],
                url: [{ required: true, trigger: 'change', validator: this.handleConfirmValueUrl }],
            },
            groupTypeData: null, //加白
            keep: false,
            campaignKeep: false,
            //组相关结束

            //创意相关
            creativeVisible: false,
            creativeLoading: false,
            creativeInfo: {
                outerLoopNative: 0,
                kolUserType: 2,
                unitType: 4,
                // targetActionType: 1,
                overlayType: [],
                creativeCategory: [],
                creativeTag: [],
                stickerTitle: '',
                actionBarText: '',
                keep: false,
                impressionUrl:''
            },
            creativeTag: [],
            creativeRules: {
                actionBarText: [{ required: true, message: '行动号召按钮必选', trigger: 'change' }],
                creativeTag: [
                    { required: true, message: '创意标签最多十个', trigger: 'change', validator: this.creativeMany },
                ],
                stickerTitle: [{ required: true, trigger: 'change', validator: this.stickerCheck }],
                impressionUrl: [{ required: false, trigger: '请注意曝光监测链接的格式', validator: this.handleConfirmValueUrlOk }],
            },
            stickerStyles: [], //贴纸信息
            actionBarTextList: [],
            createOptions: [], //创意分类
            fieldNames: {
                label: 'category_name',
                value: 'category_id',
                children: 'child',
            },
            //创意相关结束

            //素材相关
            materialImageVisible: false,
            loadingImage: false,
            urlListImage: {
                url: [],
                md5: [],
            },
            kpImageList: [],
            imageArrList: [],
            materialVisible: false,
            videoMaterialShow: false,
            materialInfo: {
                videoType: 1,
                isMakeCover: 1, //是否自动生成封面  1不开启,2开启
                coverNumber: 1, //设置封面数量
                matchingMethod: 2, //广告语匹配方式  1自定义,2按创意,3按创意组
                groupCreativity: 2, //是否设置组中创意数量  1是,2否
                creativityNumber: 1,
                creativeType: 1,
                materialList: [
                    // {
                    //   name: '创意组1',
                    //   photoArr: [{ photoId: '', image: {}, creativeName: '', description: '' }],
                    // },
                ],
                materialImageList: [],
            },
            materialRules: {
                coverNumber: [{ required: true, message: '封面数量必填', trigger: 'blur' }],
                creativityNumber: [{ required: true, message: '创意数量必填', trigger: 'blur' }],
            },
            checkMatemalVisible: false, //素材模态框展示
            dataSource: [], //素材列表
            checkVideo: [],
            checkVideoAll: [],
            checkVideoWai: [],
            tongbuLoading: false,
            loadingVideoList: false,
            videoList: [],
            ipagination: {
                current: 1,
                pageSize: 50,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                //   showSizeChanger: true,
                total: 0,
                onChange: (current) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                },
            },
            time: [],
            channelType: 0,
            activeTwo: 0,
            tab: [
                // {
                //   value: 2,
                //   label: '全部',
                // },
                {
                    value: 0,
                    label: '视频素材',
                },
                // {
                //     value: 1,
                //     label: '外部',
                // },
            ],

            //自定义
            materialList: [],
            //按创意和按创意组匹配
            descriptionList: [],
            titleVisible: false,
            options: [],
            value: '',
            dataOne: [],
            title: [],
            checkTitle: [],
            //素材相关结束

            //配置应用/链接
            appList: {
                checkType: 'app',
                appAllocation: 1, //1按账户，2按广告计划，3按广告组
                appArr: [], //{ appId: '', siteId: 123123 }
                urlArr: [{ value: '' }],
                schemaUriArr: [{ value: '' }],
                linkAllocation: 1,
                clickUrlList: [{ value: '' }],
                clickUrlActionList: [{ value: '' }],
                // impressionUrl:[{value:''}],
                playableAllocation: 1,
                playableIdType: 1,
                playableIds: [],
                playButton: '',
            },
            playableList: [],
            // appAllocation: 1, //1按账户，2按广告计划，3按广告组
            // appIds: [],
            // linkAllocation: 1,
            // clickUrlList: [],
            appIdVisible: false,
            urlVisible: false,
            appListArr: [],
            //配置应用/链接结束

            stepsArr: [
                { title: '创建规则' },
                { title: '广告组基本信息' },
                { title: '定向包' },
                { title: '创意基本信息' },
                { title: '创意素材' },
                // { title: '转化跟踪' },
                // { title: '预览提交' },
            ],
            formItemLayout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 },
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 16,
                        offset: 5,
                    },
                },
            },

            campaignTemplateId: null,
            groupTemplateId: null,
            createTiveTemplateId: null,
            creativeCategorySwitch: false,
            actionbarClickUrlSwitch: false,

            campaignList: [],
            campaignId: '',
            sumContent: 0,
            templateLoading: false,
            templateName: '',
            groupCount: 0,
            showCount: false,
            sumbitLoading: false,
            ocpxActionList: [],
            incluedSelectedRowKeys: [],
            incluedSelectedKeys: [],
            excludeSelectedRowKeys: [],
            excludeSelectedKeys: [],
            mediaSourceType: '0',
            media: 1,
            sizeType: [],
            sizeVisible: false,
            checkKpVideo: [],
            kpAllData: [],
        }
    },
    computed: {
        countMax() {
            if (this.appList.playableAllocation == 1) {
                return 1
            } else if (this.appList.playableAllocation == 2) {
                return this.campaignData.groupRule
                    ? this.campaignData.groupRule == 1
                        ? this.checkDirectionalList.length
                        : this.campaignData.groupRule == 2
                        ? this.materialInfo.materialList.length
                        : 0
                    : this.checkDirectionalList.length
            } else if (this.appList.playableAllocation == 3) {
                return this.checkDirectionalList.length * this.materialInfo.materialList.length
            }
        },
        allPhotoIdArr() {
            var data = []
            for (let i = 0; i < this.materialInfo.materialList.length; i++) {
                for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
                    data.push(this.materialInfo.materialList[i].photoArr[j].photoId.photoId)
                }
            }
            data = [...new Set(data)]
            return data
        },
        showTip() {
            if (this.groupTemplateId == null && !this.campaignData.campaignName) {
                return true
            } else {
                return false
            }
        },
        materialCount() {
            var count = 0

            for (let i = 0; i < this.materialInfo.materialList.length; i++) {
                if (this.materialInfo.materialList.length > 0) {
                    for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
                        count++
                    }
                }
            }
            return count
        },
        campaignCount() {
            return this.campaignData.groupRule
                ? this.campaignData.groupRule == 1
                    ? this.checkDirectionalList.length
                    : this.campaignData.groupRule == 2
                    ? this.materialInfo.materialList.length
                    : 0
                : this.checkDirectionalList.length
        },
    },
    watch: {
        materialCount(n, o) {
            if (n == 0) {
                this.kpType = undefined
            }
        },
        'unitInfo.sceneId': function (n, o) {
            console.log(n)
            if (n.includes(27)) {
                this.materialInfo.videoType = 0
            } else {
                this.materialInfo.videoType = 1
            }
        },
        campaignId(n, o) {
            this.showCount = false
            if (n != null && n != '') {
                this.getCount()
            }
        },
        visibleVideo(n, o) {
            if (!n) {
                closeAllVideoFun()
            }
        },
        accountId: function (n, o) {
            if (this.$route.query.batchId) {
            } else {
                if (n != '') {
                    this.spinning = true
                    this.retargetTabChange()
                    this.getCampaignTemplate(n)
                    this.getGroupTemplate(n)
                    this.getCreativeTemplate(n)
                    this.getCampaignList(n)
                    this.clearAllData()
                    this.getAction('/kuaishou/batch/getCreativeCategory', {
                        accountId: n,
                    }).then((res) => {
                        if (res.success) {
                            this.createOptions = res.result
                        }
                    })
                    this.getAction('/kuaishou/batch/getIsActivate', {
                        accountId: n,
                    }).then((res) => {
                        if (res.success) {
                            this.groupTypeData = res.result
                        }
                    })
                    this.getAction('/kuaishou/batch/getCreativeWordStyles', {
                        accountId: n,
                    }).then((res) => {
                        this.stickerStyles = []
                        if (res.success) {
                            if (res.result) {
                                // this.stickerStyles = res.result.map((item) => {
                                //   return {
                                //     id: item.sticker_style_id,
                                //     url: item.sticker_styles[0],
                                //   }
                                // })
                                var data = res.result.map((item) => {
                                    return item.sticker_styles
                                })
                                data.map((item) => {
                                    item.map((i) => {
                                        this.stickerStyles.push({
                                            id: i.overlay_type,
                                            url: i.overlay_preview_url,
                                        })
                                    })
                                })
                            } else {
                                this.stickerStyles = []
                            }
                        } else {
                            this.stickerStyles = []
                        }
                    })

                    this.getAction('/kuaishou/batch/getWhiteList', {
                        accountId: n,
                    }).then((res) => {
                        if (res.success) {
                            // console.log(res)
                            if (res.result) {
                                this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
                                this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false

                                // if (res.result.alliance_account == 1) {
                                //   this.allianceAccount = true
                                // } else {
                                //   this.allianceAccount = false
                                // }
                            } else {
                                this.creativeCategorySwitch = false
                                this.actionbarClickUrlSwitch = false
                            }
                        }
                    })
                    this.spinning = false
                } else {
                    this.spinning = false
                }
            }
        },
        sizeVisible(n, o) {
            if (n) {
                var params = {}
                params.accountId = this.accountId
                params.materialType = 1
                params.pageSize = this.ipagination.pageSize
                params.pageNo = 1
                params.status = 0
                // //params.channelType = this.channelType
                params.orderBy = 'time'
                params.signatures = this.md5Str
                params.photoName = this.photoName
                params.isKaiPing = this.materialInfo.videoType
                this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
            }
        },

        checkMatemalVisible(n, o) {
            if (n) {
                var params = {}
                params.accountId = this.accountId
                params.materialType = 1
                params.pageSize = this.ipagination.pageSize
                params.pageNo = 1
                params.status = 0
                // //params.channelType = this.channelType
                params.orderBy = 'time'
                params.signatures = this.md5Str
                params.photoName = this.photoName
                params.isKaiPing = this.materialInfo.videoType
                this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
            }
        },
        time(n, o) {
            if (n.length > 0) {
                var params = {}
                params.accountId = this.accountId
                params.materialType = 1
                params.pageSize = this.ipagination.pageSize
                params.pageNo = 1
                params.status = 0
                //params.channelType = this.channelType
                params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
                params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
                params.orderBy = 'time'
                params.signatures = this.md5Str
                params.photoName = this.photoName
                params.isKaiPing = this.materialInfo.videoType
                this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
            } else {
                var params = {}
                params.accountId = this.accountId
                params.materialType = '1'
                params.pageSize = this.ipagination.pageSize
                params.pageNo = 1
                params.status = 0
                //params.channelType = this.channelType
                params.orderBy = 'time'
                params.signatures = this.md5Str
                params.photoName = this.photoName
                this.ipagination.current = 1
                params.isKaiPing = this.materialInfo.videoType
                this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
            }
        },
    },
    mounted() {
        if (this.$route.query.accountId && this.$route.query.batchId != undefined) {
            this.spinning = false
            this.getAction('/kuaishou/batch/getCreativeCategory', {
                accountId: this.$route.query.accountId,
            }).then((res) => {
                if (res.success) {
                    this.createOptions = res.result
                }
            })
            this.getAction('/kuaishou/batch/getIsActivate', {
                accountId: this.$route.query.accountId,
            }).then((res) => {
                if (res.success) {
                    this.groupTypeData = res.result
                }
            })
            this.getAction('/kuaishou/batch/getCreativeWordStyles', {
                accountId: this.$route.query.accountId,
            }).then((res) => {
                this.stickerStyles = []
                if (res.success) {
                    if (res.result) {
                        // this.stickerStyles = res.result.map((item) => {
                        //   return {
                        //     id: item.sticker_style_id,
                        //     url: item.sticker_styles[0],
                        //   }
                        // })
                        var data = res.result.map((item) => {
                            return item.sticker_styles
                        })
                        data.map((item) => {
                            item.map((i) => {
                                this.stickerStyles.push({
                                    id: i.overlay_type,
                                    url: i.overlay_preview_url,
                                })
                            })
                        })
                    } else {
                        this.stickerStyles = []
                    }
                } else {
                    this.stickerStyles = []
                }
            })

            this.getAction('/kuaishou/batch/getWhiteList', {
                accountId: this.$route.query.accountId,
            }).then((res) => {
                if (res.success) {
                    // console.log(res)
                    if (res.result) {
                        this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
                        this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false

                        // if (res.result.alliance_account == 1) {
                        //   this.allianceAccount = true
                        // } else {
                        //   this.allianceAccount = false
                        // }
                    } else {
                        this.creativeCategorySwitch = false
                        this.actionbarClickUrlSwitch = false
                    }
                }
            })

            var str = ''
            for (let i = 0; i < 7 * 24; i++) {
                str += '0'
            }

            this.accountId = this.$route.query.accountId
            var dataJson = JSON.parse(localStorage.getItem('lookPreview'))
            this.getTemplateList()
            let params = {}
            params.accountId = this.accountId

            this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
                if (res.success) {
                    var dataOne = res.result.filter((item, index) => {
                        return this.getData('systemType', 'form') == 'Android'
                            ? item.platform == 1 || item.platform == 2
                            : item.platform == 3 || item.platform == 4
                    })
                    this.appListArr = dataOne.map((item, index) => {
                        return {
                            ...item,
                            key: item.appId + '',
                            title: item.appName,
                            siteId: null,
                            siteList: [],
                        }
                    })
                }
            })
            this.retargetTabChange()
            this.$nextTick(() => {
                this.tabKey =
                    dataJson.unitJson.mediaSourceType == '2'
                        ? !!dataJson.unitJson.media && dataJson.unitJson.media != '[]'
                            ? '1'
                            : '2'
                        : '1'
                this.mediaSourceType = dataJson.unitJson.mediaSourceType
                this.media =
                    dataJson.unitJson.mediaSourceType == '1'
                        ? +JSON.parse(dataJson.unitJson.media)[0]
                        : dataJson.unitJson.mediaSourceType == '2'
                        ? JSON.parse(dataJson.unitJson.media)
                        : 1
                this.excludeSelectedRowKeys =
                    dataJson.unitJson.mediaSourceType == '1'
                        ? dataJson.unitJson.excludeMedia
                        : dataJson.unitJson.mediaSourceType == '2'
                        ? JSON.parse(dataJson.unitJson.excludeMedia)
                        : []
                this.incluedSelectedRowKeys =
                    dataJson.unitJson.mediaSourceType == '1'
                        ? []
                        : dataJson.unitJson.mediaSourceType == '2'
                        ? JSON.parse(dataJson.unitJson.media)
                        : []
                if (!dataJson.campaignJson.campaignId) {
                    this.form.setFieldsValue({ systemType: dataJson.campaignJson.systemType })
                    this.form.setFieldsValue({ campaignType: dataJson.campaignJson.campaignType })
                } else {
                    this.form.setFieldsValue({ systemType: dataJson.campaignJson.systemType })
                    this.form.setFieldsValue({ campaignType: dataJson.campaignJson.campaignType })
                    this.form.setFieldsValue({ newClick: '2' })
                    this.campaignId = dataJson.campaignJson.campaignId
                }

                this.getCampaignList(this.$route.query.accountId)
                this.campaignTemplateId = 'edit'
                this.campaignData = { ...dataJson.campaignJson }

                this.groupTemplateId = 'edit'
                this.unitInfo.useAppMarket = dataJson.unitJson.useAppMarket == 1 ? true : false
                this.unitInfo.appStore = dataJson.unitJson.appStore ? JSON.parse(dataJson.unitJson.appStore) : []
                this.dayBudgetType = dataJson.unitJson.dayBudget && dataJson.unitJson.dayBudget > 0 ? '2' : '1'
                this.unitInfo.dayBudget =
                    dataJson.unitJson.dayBudget && dataJson.unitJson.dayBudget > 0
                        ? dataJson.unitJson.dayBudget / 1000
                        : null
                this.unitInfo.speed = dataJson.unitJson.speed + ''
                this.unitTime = dataJson.unitJson.endTime && dataJson.unitJson.endTime != '' ? '2' : '1'
                this.unitInfo.timeRange =
                    dataJson.unitJson.endTime && dataJson.unitJson.endTime != ''
                        ? [moment().startOf('day'), moment().add(1, 'months')]
                        : [moment().startOf('day'), moment().add(1, 'months')]
                this.scheduleTime =
                    dataJson.unitJson.scheduleTime == null || dataJson.unitJson.scheduleTime == str ? '1' : '2'
                this.unitInfo.scheduleTime =
                    dataJson.unitJson.scheduleTime == null || dataJson.unitJson.scheduleTime == str
                        ? str
                        : dataJson.unitJson.scheduleTime
                this.unitInfo.showMode = dataJson.unitJson.showMode + ''
                this.allianceAccount =
                    JSON.parse(dataJson.unitJson.sceneId)[0] == 5
                        ? '2'
                        : JSON.parse(dataJson.unitJson.sceneId)[0] == 1
                        ? '1'
                        : '3'
                this.unitInfo.sceneId =
                    JSON.parse(dataJson.unitJson.sceneId)[0] == 5
                        ? JSON.parse(dataJson.unitJson.sceneId).length == 0
                            ? [1]
                            : JSON.parse(dataJson.unitJson.sceneId)
                        : JSON.parse(dataJson.unitJson.sceneId)

                this.unitInfo.url = dataJson.unitJson.url
                this.unitInfo.schemaUri = dataJson.unitJson.schemaUri
                this.unitInfo.bidType = dataJson.unitJson.bidType
                this.unitInfo.ocpxActionType = dataJson.unitJson.ocpxActionType ? dataJson.unitJson.ocpxActionType : 2
                this.unitInfo.deepConversionType = !!dataJson.unitJson.deepConversionType
                    ? dataJson.unitJson.deepConversionType
                    : null

                this.unitInfo.templateBidType = dataJson.unitJson.templateBidType
                this.unitInfo.cpaBid =
                    dataJson.unitJson.cpaBid && dataJson.unitJson.cpaBid > 0 ? dataJson.unitJson.cpaBid / 1000 : null
                this.unitInfo.bid =
                    dataJson.unitJson.bid && dataJson.unitJson.bid > 0 ? dataJson.unitJson.bid / 1000 : null
                this.unitInfo.deepConversionBid =
                    dataJson.unitJson.deepConversionBid && dataJson.unitJson.deepConversionBid > 0
                        ? dataJson.unitJson.deepConversionBid / 1000
                        : null
                this.unitInfo.bidMax =
                    dataJson.unitJson.bidMax && dataJson.unitJson.bidMax > 0 ? dataJson.unitJson.bidMax / 1000 : null
                this.unitInfo.bidMin =
                    dataJson.unitJson.bidMin && dataJson.unitJson.bidMin > 0 ? dataJson.unitJson.bidMin / 1000 : null
                this.unitInfo.unitName = dataJson.unitJson.unitName

                this.createTiveTemplateId = 'edit'
                this.creativeInfo.impressionUrl = !!dataJson.creativeJson.impressionUrl?dataJson.creativeJson.impressionUrl:''
                this.creativeInfo.overlayType = dataJson.creativeJson.overlayType
                    ? [dataJson.creativeJson.overlayType]
                    : []
                this.creativeInfo.creativeCategory =
                    dataJson.creativeJson.creativeCategory > 10000
                        ? [
                              parseInt(dataJson.creativeJson.creativeCategory / 10000),
                              parseInt(dataJson.creativeJson.creativeCategory / 100),
                              dataJson.creativeJson.creativeCategory,
                          ]
                        : dataJson.creativeJson.creativeCategory > 100
                        ? [
                              parseInt(dataJson.creativeJson.creativeCategory / 100),
                              dataJson.creativeJson.creativeCategory,
                          ]
                        : []
                this.creativeInfo.creativeTag = dataJson.creativeJson.creativeTag
                    ? JSON.parse(dataJson.creativeJson.creativeTag)
                    : []
                this.creativeInfo.actionBarText = dataJson.creativeJson.actionBarText
                this.creativeInfo.stickerTitle = dataJson.creativeJson.stickerTitle

                if (this.campaignData.timeStart != '') {
                    this.campaignData.timeStart = moment(this.campaignData.timeStart)
                }
                if (this.campaignData.dayBudget > 0) {
                    this.campaignData.budgetType = '2'
                    this.campaignData.dayBudget = this.campaignData.dayBudget / 1000
                } else {
                    this.campaignData.budgetType = '1'
                    this.campaignData.dayBudget = null
                }
                var that = this

                this.checkDirectionalList = JSON.parse(dataJson.checkDirectionalList)
                this.selectedRowKeys = JSON.parse(dataJson.checkDirectionalList).map((item) => {
                    return item.templateId
                })
                this.materialList = dataJson.materialArray.materialInfo.materialList
                this.materialInfo = { ...dataJson.materialArray.materialInfo }
                this.descriptionList = dataJson.materialArray.descriptionList.map((item) => {
                    return { value: item }
                })
                this.videoMaterialShow = true
                this.targetKeys =
                    dataJson.appList.appArr && dataJson.appList.appArr.length > 0
                        ? dataJson.appList.appArr.map((item) => {
                              return item.appId
                          })
                        : []
                this.appList = {
                    checkType: dataJson.appList.checkType,
                    appAllocation: dataJson.appList.appAllocation,
                    appArr: dataJson.appList.appArr,
                    urlArr: dataJson.appList.urlArr
                        ? dataJson.appList.urlArr.map((item) => {
                              return { value: item }
                          })
                        : [{ value: '' }],
                    schemaUriArr: dataJson.appList.schemaUriArr
                        ? dataJson.appList.schemaUriArr.map((item) => {
                              return { value: item }
                          })
                        : [{ value: '' }],
                    linkAllocation: dataJson.appList.linkAllocation,
                    clickUrlList: dataJson.appList.clickUrlList
                        ? dataJson.appList.clickUrlList.map((item) => {
                              return { value: item }
                          })
                        : [{ value: '' }],
                    clickUrlActionList: dataJson.appList.clickUrlList
                        ? dataJson.appList.clickUrlList.map((item) => {
                              return { value: item }
                          })
                        : [{ value: '' }],
                    // impressionUrl: dataJson.appList.impressionUrl
                    //     ? dataJson.appList.impressionUrl.map((item) => {
                    //           return { value: item }
                    //       })
                    //     : [{ value: '' }],
                }
                this.appIdVisible = true
                this.appIdVisible = false
                this.urlVisible = true
                this.urlVisible = false
            })
        } else if (this.$route.query.accountId) {
            this.accountId = this.$route.query.accountId
        } else {
            this.spinning = false
        }
        this.$nextTick(function () {
            // this.accountId = 23212
            window.addEventListener('scroll', this.onScroll)
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        })
    },
    methods: {
        // 自定义人群的改变
        retargetTableChange(pagination, filters, sorter) {
            // //console.log(pagination);
        },
        onSelectChangeKey(selectedRowKeys, selectionRows) {
            this.incluedSelectedRowKeys = selectedRowKeys
            this.incluedSelectedKeys = selectionRows
        },
        onSelectChangeExclude(selectedRowKeys, selectionRows) {
            this.excludeSelectedRowKeys = selectedRowKeys
            this.excludeSelectedKeys = selectionRows
        },
        retargetTabChange() {
            //console.log()
            this.retargetDataAll = []
            this.$nextTick(() => {
                this.excludeSelectedRowKeys = []
                this.excludeSelectedKeys = []
                this.incluedSelectedRowKeys = []
                this.incluedSelectedKeys = []
            })

            this.mediaLoading = true
            this.getAction('/kuaishou/batch/getMedias', {
                accountId: this.accountId,
            }).then((res) => {
                // //console.log(res)
                this.mediaLoading = false
                if (res.success) {
                    res.result.forEach((ele) => {
                        ele.key = ele.mediaId
                        ele.id = ele.mediaId
                        ele.name = ele.mediaName + '(' + ele.mediaId + ')'
                        // ele.accountName=this.accountInfo.title
                        ele.accountId = this.accountId
                    })
                    // this.retargetData=res.data;
                    this.retargetDataAll = [...this.retargetDataAll, ...res.result]
                }
            })
        },
        clearDeep() {
            this.unitInfo.deepConversionType = ''
            this.unitInfo.deepConversionBid = 0
        },
        getOcpxActionList(value) {
            // 广告组基本信息
            var params = {}
            params.accountId = this.accountId
            params.campaignType = this.getData('campaignType', 'form')
            params.sceneCategory = 2
            params.sceneIds = this.unitInfo.sceneId
            params.appId = null

            this.postDataAction('/kuaishou/batch/conversionInfos', params).then((res) => {
                if (res.success) {
                    this.ocpxActionList = res.result.data.ocpx_types
                }
            })
        },
        changeBidType(e) {
            if (e.target.value == 1) {
                this.ruleConfigForm.setFieldsValue({ budgetType: '2' })
                this.dayBudgetType = '1'
                this.unitInfo.bidType = 12
                this.unitInfo.cpaBid = null
                this.unitInfo.bid = null
                this.unitInfo.deepConversionBid = null
                this.unitInfo.bidMax = null
                this.unitInfo.bidMin = null
            } else {
                this.ruleConfigForm.setFieldsValue({ budgetType: '1' })
                this.unitInfo.bidType = 10
            }
        },
        setDeepConversionType(typeChange) {
            // groupTypeData.deepConversionTypes
            var data = this.groupTypeData.deepConversionTypes.filter((item) => {
                return item.deepConversionType == typeChange
            })
            return data[0].desc
        },
        checkVideoFun() {
            this.ipagination.current = 1
            if (this.materialInfo.videoType == 0) {
                this.sizeVisible = true
                this.checkKpVideo = []
                this.sizeType = []
            } else {
                this.checkMatemalVisible = true
            }

            this.checkVideo = this.allPhotoIdArr
            this.sumContent = this.checkVideo.length
            this.checkVideoAll = this.allPhotoIdArr.length > 0 ? this.checkVideoAll : []
            this.checkVideoWai = this.allPhotoIdArr.length > 0 ? this.checkVideoWai : []
        },
        getCount() {
            this.getAction('/kuaishou/kuaiShouGroup/queryToDayBuiltCount', { accountId: this.accountId }).then(
                (res) => {
                    if (res.success) {
                        this.groupCount = res.result
                        this.showCount = true
                    } else {
                        this.showCount = false
                    }
                }
            )
        },
        //编辑模板
        lookTemplate(accountId, templateId) {
            this.$refs.templateModal.handleOk(this.accountId, templateId, 'look')
        },
        //新增定向模板
        addTemplate(accountId) {
            this.$refs.templateModal.create(this.accountId, 'add')
        },
        onSearch() {
            this.templateList = this.templateListAll.filter((item) => {
                return item.templateName.toLowerCase().indexOf(this.templateName.toLowerCase()) > -1
            })
        },
        getTemplate() {
            this.templateLoading = true
            this.getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
                accountId: this.accountId,
            }).then((res) => {
                if (res.success) {
                    this.getTemplateList()
                    this.templateLoading = false
                }
            })
        },
        addMaterialOne(indexList) {
            this.checkMatemalVisible = true
        },
        overUploadVideo(urlAll) {
            // console.log(urlAll)
        },
        overUploadImage(urlAll) {
            var that = this
            // console.log(urlAll)
        },
        deleteImage() {},
        deleteImageUpload(url) {
            var index = this.imageArrList.findIndex((v) => v.url === url)
            this.imageArrList.splice(index, 1)
        },
        fileWater(file) {
            var bmf = new BMF()
            var that = this
            return new Promise(function (resolve, reject) {
                bmf.md5(file, (err, md5) => {
                    resolve({ md5: md5, accountId: that.accountId })
                })
            })
        },
        deleteKpImage(index) {
            this.kpImageList.splice(index, 1)
        },

        fileWaterImage(file) {
            var bmf = new BMF()
            var that = this
            return new Promise(function (resolve, reject) {
                bmf.md5(file, (err, md5) => {
                    that.urlListImage.md5.push(md5)
                    var formData = new FormData()
                    formData.append('file', file)
                    formData.append('accountId', that.accountId)
                    formData.append('signature', md5)
                    that.postDataAction('/kusiShouUpload/uploadImage', formData).then((res) => {
                        console.log(res)
                        if (that.kpImageList.length == 0) {
                            switch (res.result.width) {
                                case 720:
                                    if (res.result.height == 1280) {
                                        that.kpImageList.push(res.result)
                                    }

                                    return
                                case 750:
                                    if (res.result.height == 1334) {
                                        that.kpImageList.push(res.result)
                                    }

                                    return
                                case 1080:
                                    if (
                                        res.result.height == 1920 ||
                                        res.result.height == 2160 ||
                                        res.result.height == 2280 ||
                                        res.result.height == 2340
                                    ) {
                                        that.kpImageList.push(res.result)
                                    }
                                    return
                                default:
                                    that.$message.error('尺寸错误的图片，已经帮忙剔除')
                                    return
                            }
                        } else {
                            var index = that.kpImageList.findIndex((i) => {
                                return i.width == res.result.width && i.height == res.result.height
                            })
                            console.log(index)
                            if (index == -1) {
                                if (that.kpImageList.length < 6) {
                                    switch (res.result.width) {
                                        case 720:
                                            if (res.result.height == 1280) {
                                                that.kpImageList.push(res.result)
                                            }

                                            return
                                        case 750:
                                            if (res.result.height == 1334) {
                                                that.kpImageList.push(res.result)
                                            }

                                            return
                                        case 1080:
                                            if (
                                                res.result.height == 1920 ||
                                                res.result.height == 2160 ||
                                                res.result.height == 2280 ||
                                                res.result.height == 2340
                                            ) {
                                                that.kpImageList.push(res.result)
                                            }
                                            return
                                        default:
                                            that.$message.error('尺寸错误的图片，已经帮忙剔除')
                                            return
                                    }
                                }
                            } else {
                                that.kpImageList.splice(index, 1, res.result)
                            }
                        }
                    })
                    // formData.append
                    reject({ md5: md5, accountId: that.accountId })
                })
            })
        },
        overUploadImageUpload(urlAll) {
            var that = this
            that.imageArrList = []
            var img
            if (urlAll.length > 0) {
                for (var i = 0; i < urlAll.length; i++) {
                    that.imageArrList.push({
                        signature: this.urlListImage.md5[i],
                        url: urlAll[i].url,
                    })

                    img = new Image()
                    img.src = urlAll[i].url
                }
            }
        },
        handleOkImage(e) {
            if (this.kpImageList.length == 6) {
                this.loadingImage = true
                var dataAll = this.kpImageList
                // this.checkKpVideo = dataAll
                // this.kpAllData.push(dataAll)
                // console.log(this.kpAllData)
                var count = this.materialInfo.groupCreativity == 2 ? 15 : this.materialInfo.creativityNumber
                if (
                    this.materialList.length == 0 ||
                    count == this.materialList[this.materialList.length - 1].photoArr.length
                ) {
                    this.materialInfo.materialList.push({
                        name: '创意组' + `${this.materialInfo.materialList.length + 1}`,
                        photoArr: [
                            {
                                photoId: dataAll,
                                image: { url: dataAll[0].url },
                                creativeName: '创意组' + `${this.materialInfo.materialList.length + 1}` + '-创意',
                                description: '',
                            },
                        ],
                        active: 0 + '@' + this.materialInfo.materialList.length,
                    })
                    this.materialList.push({
                        name: '创意组' + `${this.materialList.length + 1}`,
                        photoArr: [
                            {
                                photoId: dataAll,
                                image: { url: dataAll[0].url },
                                creativeName: '创意组' + `${this.materialList.length + 1}` + '-创意',
                                description: '',
                            },
                        ],
                        active: 0 + '@' + this.materialList.length,
                    })
                } else if (count > this.materialList[this.materialList.length - 1].photoArr.length) {
                    this.materialInfo.materialList[this.materialInfo.materialList.length - 1].photoArr.push({
                        photoId: dataAll,
                        image: { url: dataAll[0].url },
                        creativeName: '创意组' + `${this.materialList.length}` + '-创意',
                        description: '',
                    })
                    this.materialList[this.materialList.length - 1].photoArr.push({
                        photoId: dataAll,
                        image: { url: dataAll[0].url },
                        creativeName: '创意组' + `${this.materialList.length}` + '-创意',
                        description: '',
                    })
                } else {
                }
                console.log(this.materialList)
                this.materialImageVisible = false
                this.loadingImage = false
                this.photoName = ''
                this.kpType = 'image'
                this.kpImageList = []
            } else {
                this.$message.error('请上传六个不同尺寸视频')
            }
        },
        closeImage() {
            this.materialImageVisible = false
            this.kpType = undefined
            this.kpImageList = []
            this.urlListImage = {
                url: [],
                md5: [],
            }
            this.imageArrList = []
            this.loadingImage = false
        },
        okAppId() {},
        setCountUrl(e) {
            this.appList.urlArr = []
            if (e.target.value == 1) {
                this.appList.urlArr = [{ value: '' }]
            } else if (e.target.value == 2) {
                for (let i = 0; i < this.campaignCount; i++) {
                    this.appList.urlArr.push({ value: '' })
                }
            } else if (e.target.value == 3) {
                var count = this.checkDirectionalList.length * this.materialInfo.materialList.length
                for (let i = 0; i < count; i++) {
                    this.appList.urlArr.push({ value: '' })
                }
            }
        },
        setCount(e) {
            this.appList.clickUrlList = []
            this.appList.clickUrlActionList = []
            // this.appList.impressionUrl = []
            this.appList.urlArr = []
            this.appList.schemaUriArr = []
            if (e.target.value == 1) {
                this.appList.clickUrlList = [{ value: '' }]
                this.appList.clickUrlActionList = [{ value: '' }]
                // this.appList.impressionUrl = [{ value: '' }]
                this.appList.urlArr = [{ value: '' }]
                this.appList.schemaUriArr = [{ value: '' }]
            } else if (e.target.value == 2) {
                for (let i = 0; i < this.campaignCount; i++) {
                    this.appList.clickUrlList.push({ value: '' })
                    this.appList.clickUrlActionList.push({ value: '' })
                    // this.appList.impressionUrl.push({ value: '' })
                    this.appList.urlArr.push({ value: '' })
                    this.appList.schemaUriArr.push({ value: '' })
                }
            } else if (e.target.value == 3) {
                var count = this.checkDirectionalList.length * this.materialInfo.materialList.length
                for (let i = 0; i < count; i++) {
                    this.appList.clickUrlList.push({ value: '' })
                    this.appList.clickUrlActionList.push({ value: '' })
                    // this.appList.impressionUrl.push({ value: '' })
                    this.appList.urlArr.push({ value: '' })
                    this.appList.schemaUriArr.push({ value: '' })
                }
            }
        },
        getAllData() {
            var data = []
            this.appListArr.filter((co, i) => {
                let temp = this.targetKeys.indexOf(co.key)
                if (temp >= 0) {
                    data.push(co)
                }
            })
            return data
        },
        urlOk() {
            var count = this.appList.urlArr.filter((item) => {
                return item.value != ''
            })
            if (this.appList.appAllocation == 1) {
                if (count.length != 1) {
                    this.$message.error('按账户分配必须填写1个链接')
                    return
                }
            } else if (this.appList.appAllocation == 2) {
                if (count.length != this.campaignCount) {
                    this.$message.error('按广告计划分配必须填写' + this.campaignCount + '个链接')
                    return
                }
            } else if (this.appList.appAllocation == 3) {
                if (count.length != this.checkDirectionalList.length * this.materialInfo.materialList.length) {
                    this.$message.error(
                        '按广告组分配必须填写' +
                            this.checkDirectionalList.length * this.materialInfo.materialList.length +
                            '个链接'
                    )
                    return
                }
            }

            var dataArr = []
            for (let i = 0; i < this.appList.clickUrlList.length; i++) {
                if (
                    /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.clickUrlList[i].value) &&
                    this.appList.clickUrlList[i].value.length < 10000
                ) {
                } else {
                    dataArr.push(false)
                }
            }

            for (let i = 0; i < this.appList.urlArr.length; i++) {
                if (
                    /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.urlArr[i].value) &&
                    this.appList.urlArr[i].value.length < 10000
                ) {
                } else {
                    dataArr.push(false)
                }
            }
            if (dataArr.length > 0) {
                this.$message.error('请检查链接是否填写正确')
                return
            }
            this.urlVisible = false
        },
        handleConfirmValueUrlOk(rule, value, callback) {
            if (!value||/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
                callback()
            } else {
                callback('链接开头为http://或https://，并且长度小于10000')
            }
        },
        handleConfirmValueUrl(rule, value, callback) {
            if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
                callback()
            } else {
                callback('链接不能为空且开头为http://或https://，并且长度小于10000')
            }
        },
        appIdOk() {
            if (this.appList.appAllocation == 1) {
                if (this.targetKeys.length != 1) {
                    this.$message.error('按账户分配只可以选择一个应用')
                    return
                }
            } else if (this.appList.appAllocation == 2) {
                if (this.targetKeys.length != this.campaignCount) {
                    this.$message.error('按广告计划分配必须选择' + this.campaignCount + '个应用')
                    return
                }
            } else if (this.appList.appAllocation == 3) {
                if (
                    this.targetKeys.length !=
                    this.checkDirectionalList.length * this.materialInfo.materialList.length
                ) {
                    this.$message.error(
                        '按广告组分配必须选择' +
                            this.checkDirectionalList.length * this.materialInfo.materialList.length +
                            '个应用'
                    )
                    return
                }
            }
            var dataArr = []
            for (let i = 0; i < this.appList.clickUrlList.length; i++) {
                if (
                    /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.clickUrlList[i].value) &&
                    this.appList.clickUrlList[i].value.length < 10000
                ) {
                } else {
                    dataArr.push(false)
                }
            }
            if (this.getData('campaignType', 'form') == 7) {
                for (let i = 0; i < this.appList.urlArr.length; i++) {
                    if (
                        /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.urlArr[i].value) &&
                        this.appList.urlArr[i].value.length < 10000
                    ) {
                    } else {
                        dataArr.push(false)
                    }
                }
            }

            if (dataArr.length > 0) {
                this.$message.error('请检查链接是否填写正确')
                return
            }

            if (this.appList.playableIdType == 0) {
                if (this.appList.playableIds.length == 0 || !this.appList.playButton) {
                    this.$message.error('已开启选择试玩，请填写完整试玩和试玩按钮')
                    return
                }
            }
            this.appIdVisible = false
        },
        onChangeTransFer(nextTargetKeys, direction, moveKeys) {
            this.targetKeys = nextTargetKeys
        },
        getSiteList(item) {
            this.getAction('/kuaishou/batch/getPageList', {
                accountId: this.accountId,
                appId: item.appId,
                viewComp: 7,
            }).then((res) => {
                if (res.success) {
                    // console.log(item)
                    item.siteList = res.result
                } else {
                    this.showSite = false
                }
            })
        },
        getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
            return {
                getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
                onSelectAll(selected, selectedRows) {
                    itemSelectAll(selected)
                },
                onSelect({ key }, selected) {
                    itemSelect(key, selected)
                },
                selectedRowKeys: selectedKeys,
            }
        },

        checkAppIds() {
            if (
                this.campaignCount == 0 ||
                this.checkDirectionalList.length * this.materialInfo.materialList.length == 0
            ) {
                this.$message.error('请先完成以上操作，再进行此步骤')
                return
            } else {
                if (this.mediaSourceType == '2') {
                    if (this.incluedSelectedRowKeys.length == 0 && this.excludeSelectedRowKeys == 0) {
                        this.$message.error('请先完成以上操作，再进行此步骤')
                        return
                    }
                }

                if (this.getData('campaignType', 'form') == 2 || this.getData('campaignType', 'form') == 7) {
                    this.appIdVisible = true

                    let params = {}
                    params.accountId = this.accountId
                    this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
                        if (res.success) {
                            var dataOne = res.result.filter((item, index) => {
                                return this.getData('systemType', 'form') == 'Android'
                                    ? item.platform == 1 || item.platform == 2
                                    : item.platform == 3 || item.platform == 4
                            })
                            this.appListArr = dataOne.map((item, index) => {
                                return {
                                    ...item,
                                    key: item.appId + '',
                                    title: item.appName,
                                    siteId: null,
                                    siteList: [],
                                }
                            })
                        }
                    })
                } else {
                    this.urlVisible = true
                }
            }
        },
        getPlayableList() {
            this.playableList = []
            let that = this

            this.getAction('/kuaishou/batch/getPlayableList', {
                accountId: this.accountId,
            }).then((res) => {
                if (res.success) {
                    that.playableList = res.result.details.map((item) => {
                        return {
                            ...item,
                            disabled: false,
                        }
                    })
                }
            })
        },
        onCategoryChange(value) {
            this.setCategoryOptions(value)
        },
        setCategoryOptions(value = []) {
            if (value.length >= this.countMax) {
                this.$nextTick(() => {
                    this.playableList.forEach((item, index, array) => {
                        if (value.every((v) => v !== item.play_id)) {
                            this.$set(array[index], 'disabled', true)
                        } else {
                            this.$set(array[index], 'disabled', false)
                        }
                    })
                })
            } else {
                this.$nextTick(() => {
                    this.playableList.forEach((item, index, array) => {
                        this.$set(array[index], 'disabled', false)
                    })
                })
            }
            this.$forceUpdate()
        },
        moment,
        setItemDate(sum, item) {
            let i = sum
            if (item == 1) {
                if (i < 24) {
                    return '周一' + i + ':00~' + (i + 1) + ':00'
                } else if (i < 48 && i >= 24) {
                    return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
                } else if (i < 72 && i >= 48) {
                    return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
                } else if (i < 96 && i >= 72) {
                    return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
                } else if (i < 120 && i >= 96) {
                    return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
                } else if (i < 144 && i >= 120) {
                    return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
                } else {
                    return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
                }
            }
        },
        editDescription(item) {
            // console.log(item)
            item.edit = !item.edit
        },
        removeDescription(index) {
            this.descriptionList.splice(index, 1)
        },

        addDescription() {
            this.titleVisible = true
            this.getHangye()
        },
        addOne() {
            this.descriptionList.push({ value: '', edit: true })
        },
        getHangye() {
            this.getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
                if (res.success) {
                    this.options = res.result.map((item) => {
                        return {
                            label: item.label,
                            value: item.value,
                            children:
                                item.children.length > 0
                                    ? [
                                          {
                                              label: '不限',
                                              value: 0,
                                          },
                                      ].concat(item.children)
                                    : [
                                          {
                                              label: '不限',
                                              value: 0,
                                          },
                                      ],
                        }
                    })
                    this.options = [
                        {
                            label: '不限',
                            value: 0,
                        },
                    ].concat(this.options)
                    if (this.dataOne.length > 0) {
                        return
                    } else {
                        this.dataOne = [0]
                    }
                }
            })
        },
        remove(targetKey, action) {
            var keyArr = targetKey.split('@')
            var photoId = this.materialInfo.materialList[keyArr[1]].photoArr[keyArr[0]].photoId.photoId

            this.materialInfo.materialList[keyArr[1]].photoArr.splice(keyArr[0], 1)
            var lastIndex

            this.materialInfo.materialList[keyArr[1]].photoArr.forEach((pane, i) => {
                console.log(i, keyArr[0])
                if (i == +keyArr[0]) {
                    lastIndex = i - 1
                }
            })
            if (this.materialInfo.materialList[keyArr[1]].photoArr.length > 0) {
                if (lastIndex >= 0) {
                    this.materialInfo.materialList[keyArr[1]].active = lastIndex + '@' + keyArr[1]
                } else {
                    this.materialInfo.materialList[keyArr[1]].active = '0@' + keyArr[1]
                }
            } else {
                this.materialInfo.materialList.splice(keyArr[1], 1)
                if (this.materialInfo.materialList.length == 0) {
                } else {
                    this.materialInfo.materialList[keyArr[1]].active = '0@0'
                }
            }

            if (this.allPhotoIdArr.indexOf(photoId) > -1) {
            } else {
                for (let i = 0; i < this.checkVideoAll.length; i++) {
                    if (this.checkVideoAll[i].length > 0) {
                        for (let j = 0; j < this.checkVideoAll[i].length; j++) {
                            if (this.checkVideoAll[i][j] == photoId) {
                                this.checkVideoAll[i].splice(j, 1)
                            }
                        }
                    }
                }
                for (let i = 0; i < this.checkVideoWai.length; i++) {
                    if (this.checkVideoWai[i].length > 0) {
                        for (let j = 0; j < this.checkVideoWai[i].length; j++) {
                            if (this.checkVideoWai[i][j] == photoId) {
                                this.checkVideoWai[i].splice(j, 1)
                            }
                        }
                    }
                }
            }
        },

        handleOkVideo() {
            this.$refs.materialForm.validate((valid) => {
                if (valid) {
                    this.materialVisible = false
                    this.videoMaterialShow = true
                    this.checkMatchingMethod()
                } else {
                    this.$message.error('广告语匹配方式为自定义时，有未填写的广告语，请检查')
                    return
                }
            })
        },
        checkMatchingMethod() {
            if (this.materialInfo.matchingMethod == 2) {
                if (this.descriptionList.length > this.materialCount) {
                    this.$message.error('当前广告语匹配方式最多能填' + this.materialCount + '个广告语')
                    return
                }
            } else {
                if (this.descriptionList.length > this.materialInfo.materialList.length) {
                    this.$message.error(
                        '当前广告语匹配方式最多能填' + this.materialInfo.materialList.length + '个广告语'
                    )
                    return
                }
            }
        },
        cancelVideo() {
            // this.materialInfo.isMakeCover = 2
            // this.materialInfo.coverNumber = 1
            // this.materialInfo.matchingMethod = 1
            // this.materialInfo.groupCreativity = 2
            // this.materialInfo.creativityNumber = 1
            // this.materialInfo.materialList = []
            this.materialVisible = false
            // this.materialInfo.materialList = []
        },
        removeVideoMaterial(index, indexMaterial) {
            console.log(this.materialInfo.materialList)
            var photoId = this.materialInfo.materialList[index].photoArr[indexMaterial].photoId.photoId
            this.materialInfo.materialList[index].photoArr.splice(indexMaterial, 1)

            this.kpAllData.splice(index * this.materialInfo.creativityNumber + indexMaterial, 1)

            if (this.allPhotoIdArr.indexOf(photoId) > -1) {
            } else {
                for (let i = 0; i < this.checkVideoAll.length; i++) {
                    if (this.checkVideoAll[i].length > 0) {
                        for (let j = 0; j < this.checkVideoAll[i].length; j++) {
                            if (this.checkVideoAll[i][j] == photoId) {
                                this.checkVideoAll[i].splice(j, 1)
                            }
                        }
                    }
                }
                for (let i = 0; i < this.checkVideoWai.length; i++) {
                    if (this.checkVideoWai[i].length > 0) {
                        for (let j = 0; j < this.checkVideoWai[i].length; j++) {
                            if (this.checkVideoWai[i][j] == photoId) {
                                this.checkVideoWai[i].splice(j, 1)
                            }
                        }
                    }
                }
            }
            // this.materialList[index].photoArr.splice(indexMaterial, 1)
        },
        cancel() {},

        //选择素材相关
        handleOkShow() {
            this.directionalLoading = true
            if (this.sumContent > Math.floor(200 / this.materialInfo.coverNumber)) {
                this.$message.error('根据设置封面数量计算,已选择视频超过创意上限,请勾除！！！')
                return
            }
            var dataAll = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
            this.checkVideo = dataAll

            var arrPhotoId = []
            var count = this.materialInfo.groupCreativity == 2 ? 15 : this.materialInfo.creativityNumber
            for (let i = 0; i < this.materialInfo.coverNumber; i++) {
                var data = this.checkVideo
                arrPhotoId = arrPhotoId.concat(data)
            }
            arrPhotoId.sort()
            var arr = []
            for (let i = 0; i < arrPhotoId.length; i++) {
                arr.push({
                    photoId: arrPhotoId[i],
                    image: {},
                    creativeName: '创意组' + `${Math.ceil((i + 1) / count)}` + '-创意',
                    description: '',
                })
            }
            // +
            //       `${i > count ? (i % count == 0 ? count : i % count) : i + 1}`,
            var spArray = function (n, arr) {
                var newArr = [],
                    i
                for (i = 0; i < arr.length; ) {
                    newArr.push(arr.slice(i, (i += n)))
                }
                return newArr
            }
            var arrAll = spArray(count, arr)

            var dataCount = Math.ceil((this.materialInfo.coverNumber * this.checkVideo.length) / count)

            this.materialInfo.materialList = []
            this.materialList = []
            for (let i = 0; i < dataCount; i++) {
                var dataArr = arrAll[i]
                this.materialInfo.materialList.push({
                    name: '创意组' + (i + 1),
                    photoArr: dataArr,
                    active: 0 + '@' + i,
                })
                this.materialList.push({
                    name: '创意组' + (i + 1),
                    photoArr: dataArr,
                    active: 0 + '@' + i,
                })
            }

            for (let i = 0; i < this.materialInfo.materialList.length; i++) {
                for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
                    this.setVideUrl(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
                        this.materialInfo.materialList[i].photoArr[j].photoId = res
                        this.materialInfo.materialList[i].photoArr[j].image = { url: res.coverUrl }
                        this.materialList[i].photoArr[j].photoId = res
                        this.materialList[i].photoArr[j].image = { url: res.coverUrl }
                    })
                    this.checkMatemalVisible = false
                }
            }
            this.directionalLoading = false
        },
        setVideUrl(photoId) {
            this.videoList = []
            return new Promise((resolve, reject) => {
                this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
                    if (res.success) {
                        resolve({ ...res.result, photoId: photoId })
                    }
                })
            })
            // this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
            //   if (res.success) {
            //     this.videoList.push({ url: res.result.url, photoId: photoId, coverUrl: res.result.coverUrl })
            //     return res.result.url
            //   } else {
            //   }
            // })
        },
        getImageCover(photoId) {
            var params = {
                photoId: photoId,
                pageSize: 20,
                pageNo: 1,
            }
            return new Promise((resolve, reject) => {
                this.getAction('/cutFrame/material/queryByPhotoId', params).then((res) => {
                    if (res.success) {
                        var data = res.result.sort(function (a, b) {
                            return a.imageIndex - b.imageIndex
                        })
                        setTimeout(() => {
                            resolve(res.result)
                        })
                    }
                })
            })
        },
        cancelAll() {
            this.md5Str = ''
            this.photoName = ''
            this.checkMatemalVisible = false
            this.kpType = undefined
        },
        callback(key) {
            this.channelType = key
            this.checkVideo = []
            // this.allPhotoIdArr
            this.ipagination.current = 1
            this.time = []
            if (key == 0 && this.checkVideoAll.length > 0) {
                this.checkVideo = this.checkVideoAll[this.ipagination.current - 1]
            } else if (key == 1 && this.checkVideoWai.length > 0) {
                this.checkVideo = this.checkVideoWai[this.ipagination.current - 1]
            }
        },
        searchVideo() {
            var params = {}
            params.accountId = this.accountId
            params.materialType = 1
            params.pageSize = this.ipagination.pageSize
            params.pageNo = 1
            params.status = 0
            //params.channelType = this.channelType
            params.orderBy = 'time'
            params.signatures = this.md5Str
            params.photoName = this.photoName
            params.isKaiPing = this.materialInfo.videoType
            if (this.time.length > 0) {
                // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
                // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
                params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
                params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
            }
            this.ipagination.current = 1
            this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
        },
        selectAllVideo() {
            this.checkVideo = this.dataSource.map((item) => {
                return item.photoId
            })
            // console.log(this.checkVideo)
            if (this.activeTwo == 0) {
                for (let i = 0; i < this.ipagination.current; i++) {
                    this.checkVideoAll.push([])
                }
                this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
            } else if (this.activeTwo == 1) {
                for (let i = 0; i < this.ipagination.current; i++) {
                    this.checkVideoWai.push([])
                }
                this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
            }
            var sum = 0
            for (let i = 0; i < this.checkVideoAll.length; i++) {
                sum += this.checkVideoAll[i].length
            }
            for (let i = 0; i < this.checkVideoWai.length; i++) {
                sum += this.checkVideoWai[i].length
            }
            this.sumContent = sum

            var dataCount = Math.floor(200 / this.materialInfo.coverNumber)
            if (sum > dataCount) {
                this.$message.error('最多选择' + dataCount + '个素材')
                this.checkVideo = []
                this.sumContent = this.sumContent - this.dataSource.length

                if (this.activeTwo == 0) {
                    this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
                } else if (this.activeTwo == 1) {
                    this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
                }
            }
        },
        setKpVideoData(data) {
             for (let i = 0; i < this.ipagination.current; i++) {
                this.checkVideoAll.push([])
            }
            this.checkVideoAll[this.ipagination.current - 1] = data
            
            var dataAll = tqFun(this.checkVideoAll)
            this.sizeType =dataAll.map((item) => {
                return item.height
            })

            this.sizeType = [...new Set(this.sizeType)]
           

        },
        handleOkKpShow() {
             var dataAll = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
            if (dataAll.length == 4) {
                this.directionalLoading = true
                var dataAll = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
                this.checkKpVideo = dataAll
                this.kpAllData.push(dataAll)
                console.log(this.kpAllData)
                var count = this.materialInfo.groupCreativity == 2 ? 15 : this.materialInfo.creativityNumber
                if (
                    this.materialList.length == 0 ||
                    count == this.materialList[this.materialList.length - 1].photoArr.length
                ) {
                    this.materialInfo.materialList.push({
                        name: '创意组' + `${this.materialInfo.materialList.length + 1}`,
                        photoArr: [
                            {
                                photoId: dataAll[0],
                                image: { url: dataAll[0].coverUrl },
                                creativeName: '创意组' + `${this.materialInfo.materialList.length + 1}` + '-创意',
                                description: '',
                            },
                        ],
                        active: 0 + '@' + this.materialInfo.materialList.length,
                    })
                    this.materialList.push({
                        name: '创意组' + `${this.materialList.length + 1}`,
                        photoArr: [
                            {
                                photoId: dataAll[0],
                                image: { url: dataAll[0].coverUrl },
                                creativeName: '创意组' + `${this.materialList.length + 1}` + '-创意',
                                description: '',
                            },
                        ],
                        active: 0 + '@' + this.materialList.length,
                    })
                } else if (count > this.materialList[this.materialList.length - 1].photoArr.length) {
                    this.materialInfo.materialList[this.materialInfo.materialList.length - 1].photoArr.push({
                        photoId: dataAll[0],
                        image: { url: dataAll[0].coverUrl },
                        creativeName: '创意组' + `${this.materialList.length}` + '-创意',
                        description: '',
                    })
                    this.materialList[this.materialList.length - 1].photoArr.push({
                        photoId: dataAll[0],
                        image: { url: dataAll[0].coverUrl },
                        creativeName: '创意组' + `${this.materialList.length}` + '-创意',
                        description: '',
                    })
                } else {
                }
                console.log(this.materialList)
                this.sizeVisible = false
                this.directionalLoading = false
                this.photoName = ''
                this.kpType = 'video'
                this.checkVideoAll = []
                this.sizeType = []
            } else {
                this.$message.error('请选择四个不同尺寸视频')
            }
        },
        setVideoData(data) {
            if (this.activeTwo == 0) {
                for (let i = 0; i < this.ipagination.current; i++) {
                    this.checkVideoAll.push([])
                }
                this.checkVideoAll[this.ipagination.current - 1] = data
            } else if (this.activeTwo == 1) {
                for (let i = 0; i < this.ipagination.current; i++) {
                    this.checkVideoWai.push([])
                }
                this.checkVideoWai[this.ipagination.current - 1] = data
            }

            var sum = 0
            for (let i = 0; i < this.checkVideoAll.length; i++) {
                sum += this.checkVideoAll[i].length
            }
            for (let i = 0; i < this.checkVideoWai.length; i++) {
                sum += this.checkVideoWai[i].length
            }
            this.sumContent = sum
            var dataCount = Math.floor(200 / this.materialInfo.coverNumber)
            if (sum > dataCount) {
                this.$message.error('最多选择' + dataCount + '个素材')
                this.checkVideo.pop()
                this.sumContent--
                if (this.activeTwo == 0) {
                    this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
                } else if (this.activeTwo == 1) {
                    this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
                }
            }
        },
        tongbu() {
            this.tongbuLoading = true
            this.getAction('/kuaishou/batch/syncVideo', {
                accountId: this.accountId,
            }).then((res) => {
                if (res.success) {
                    this.$message.success(res.message)
                    this.tongbuLoading = false
                    var params = {}
                    params.accountId = this.accountId
                    params.materialType = 1
                    params.pageSize = this.ipagination.pageSize
                    params.pageNo = 1
                    params.status = 0
                    //params.channelType = this.channelType
                    params.orderBy = 'time'
                    params.signatures = this.md5Str
                    params.photoName = this.photoName
                    params.isKaiPing = this.materialInfo.videoType
                    if (this.time.length > 0) {
                        // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
                        // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
                        params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
                        params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
                    }
                    this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
                } else {
                    this.$message.error(res.message)
                    this.tongbuLoading = false
                }
            })
        },
        getDataSource(page, pageSize) {
            if (this.materialInfo.videoType == 0) {
                // this.checkKpVideo = this.checkVideoAll[page - 1]
            } else {
                if (this.activeTwo == 0) {
                    this.checkVideo = this.checkVideoAll[page - 1]
                } else if (this.activeTwo == 1) {
                    this.checkVideo = this.checkVideoWai[page - 1]
                }
            }

            this.ipagination.current = page
            var params = {}
            params.accountId = this.accountId
            params.materialType = '1'
            params.pageSize = this.ipagination.pageSize
            params.pageNo = page
            //params.channelType = this.channelType
            params.status = 0
            params.orderBy = 'time'
            params.signatures = this.md5Str
            params.isKaiPing = this.materialInfo.videoType
            params.photoName = this.photoName
            if (this.time.length > 0) {
                // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
                // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
                params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
                params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
            }
            this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
        },
        showVideoList(url, params) {
            this.dataSource = []
            this.loadingVideoList = true
            this.getAction(url, params).then((res) => {
                // console.log(res)
                this.loadingVideoList = false
                if (res.success) {
                    this.dataSource = res.result.list
                    this.ipagination.total = res.result.total
                }
            })
        },
        removeTarget(templateId) {
            var index = this.checkDirectionalList.findIndex((item) => item.templateId == templateId)
            var indexTwo = this.selectionRows.findIndex((item) => item.templateId == templateId)
            var indexThree = this.selectionRows.findIndex((item) => item.templateId == templateId)
            this.checkDirectionalList.splice(index, 1)
            // this.selectionRows.splice(indexTwo, 1)
            this.selectedRowKeys.splice(indexThree, 1)
        },
        directionalOk() {
            if (this.selectionRows.length > 20) {
                this.$message.error('最多选择20个定向包')
                return
            } else if (this.selectionRows.length == 0) {
                this.$message.error('请选择定向包')
                return
            }
            this.checkDirectionalList = this.selectionRows
            this.directionalVisible = false
            // this.selectedRowKeys = []
            // this.selectionRows = []
        },
        directionalCancel() {
            this.directionalVisible = false
            if (this.checkDirectionalList.length > 0) {
            } else {
                this.selectedRowKeys = []
            }
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectionRows = selectionRows
        },
        getTemplateList() {
            this.loading = true
            this.templateList = []
            var params = {}
            params.accountId = this.accountId

            this.getAction('/batch/kuaishouTemplate/list', params).then((res) => {
                this.loading = false
                if (res.success) {
                    this.templateList = res.result
                    this.templateListAll = JSON.parse(JSON.stringify(this.templateList))
                } else {
                    this.templateList = []
                }
            })
        },

        changeTag(visible) {
            this.videoVisibleChange = visible
            this.templateData = {}
            var params = {}
            params.templateId = visible
            this.getAction('/batch/kuaishouTemplateTarget/getDetailByTemplateId', params).then((res) => {
                if (res.success) {
                    var dataJson = {
                        ...res.result.base,
                        ...res.result.detail,
                    }

                    this.getPeople().then((item) => {
                        this.templateData = dataJson
                        if (dataJson.region == '' || dataJson.region == null) {
                        } else {
                            this.showRegion(dataJson.region)
                        }
                        this.previewVisible = true
                    })
                }
            })
        },
        showPeopleName(id) {
            return this.populationList.filter((item) => item.orientationId == id)[0].orientationName
        },
        showRegion(data) {
            return new Promise((resolve, reject) => {
                this.postDataAction('/kuaishou/batch/getRegionDetail', {
                    regionArr: data,
                }).then((res) => {
                    if (res.success) {
                        //   this.populationData.allForm.region = res.result
                        this.region = res.result.map((item) => {
                            return item.label
                        })
                    }
                })
            })
        },
        getPeople() {
            return new Promise((resolve, reject) => {
                this.getAction('/kuaishou/batch/getPopulationList', { accountId: this.accountId }).then((res) => {
                    if (res.success) {
                        if (res.result) {
                            this.populationList = res.result.map((item, index) => {
                                return {
                                    ...item,
                                    key: index,
                                }
                            })
                            resolve(res.result)
                        }
                    }
                })
            })
        },
        changeOuterLoopNative(e) {
            console.log(e)
            // this.creativeInfo.unitType = 4
        },
        setData(value) {
            // console.log(value)
            this.creativeInfo.creativeTag.push(...value)
            this.creativeInfo.creativeTag = [...new Set(this.creativeInfo.creativeTag)]
            for (let i = 0; i < this.creativeInfo.creativeTag.length; i++) {
                if (this.creativeInfo.creativeTag[i].length > 10) {
                    this.creativeInfo.creativeTag.splice(i, 1)
                    this.$message.error('创意标签最多只能十个字符，超过的已清除')
                }
            }
            this.creativeTag = []
        },
        handleClose(removedTag) {
            const tags = this.creativeInfo.creativeTag.filter((tag) => tag !== removedTag)
            // console.log(tags)
            this.creativeInfo.creativeTag = tags
            this.$refs.createForm.validateField('creativeTag')
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        filter(inputValue, path) {
            return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
        },
        checkAccountId() {
            if (this.accountId == undefined || this.accountId == '' || this.accountId == null) {
                this.$message.warning('请先选择广告投放账号')
                return false
            } else {
                return true
            }
        },
        //rules
        handleConfirmValue(rule, value, callback) {
            if (value == '' || value < 500 || value >= 100000000) {
                callback('不小于500， 不超过100000000，仅支持输入自然数')
            }
            callback()
        },
        creativeMany(rule, value, callback) {
            if (value.length > 10) {
                callback('标签最多十个，每个标签不超过10个字')
            }
            callback()
        },
        stickerCheck(rule, value, callback) {
            if (this.creativeInfo.overlayType.length > 0 && value == '') {
                callback('封面广告语标题必填')
            } else if (value.length > 14) {
                callback('封面广告语标题最多为14个字符')
            }
            callback()
        },
        cpaBidValue(rule, value, callback) {
            if (this.unitInfo.ocpxActionType == 53) {
                if (value == '' || value == null) {
                    callback('请输入转化目标出价')
                } else if (value < 0.1 || value > 3000) {
                    callback('转化目标出价不能低于0.1元，不能高于3000元，请正确输入')
                } else {
                    callback()
                }
            } else {
                if (value == '' || value == null) {
                    callback('请输入转化目标出价')
                } else if (value < 0.1 || value > 3000) {
                    callback('转化目标出价不能低于0.1元，不能高于3000元，请正确输入')
                } else {
                    callback()
                }
            }
        },
        bidValue(rule, value, callback) {
            if (value == '' || value == null) {
                callback('请输入出价')
            } else if (value < 0.2 || value > 100) {
                callback('不得低于0.2元，不得高于100元，不得高于组预算')
            } else {
                callback()
            }
        },
        maxValue(rule, value, callback) {
            if (value == '' || value == null) {
                callback('请输入最高出价')
            } else if (this.unitInfo.bidMin && value < this.unitInfo.bidMin) {
                callback('最高出价不能小于最低出价')
            } else {
                callback()
            }
        },
        minValue(rule, value, callback) {
            if (value == '' || value == null) {
                callback('请输入最低出价')
            } else if (this.unitInfo.bidMax && value > this.unitInfo.bidMax) {
                callback('最低出价不能大于最高出价')
            } else {
                callback()
            }
        },
        changeBidMin() {
            if (this.unitInfo.bidMax != '' && this.unitInfo.bidMax != null) {
                this.$refs.ruleForm.validateField('bidMax')
            }
        },
        changeBidMax() {
            if (this.unitInfo.bidMin != '' && this.unitInfo.bidMin != null) {
                this.$refs.ruleForm.validateField('bidMin')
            }
        },
        clearAllData() {
            this.videoMaterialShow = false
            this.materialList = []
            this.checkVideoAll = []
            this.checkVideoWai = []
            this.checkVideo = []
            this.descriptionList = []

            this.materialInfo.isMakeCover = 1
            this.materialInfo.coverNumber = 1
            this.materialInfo.groupCreativity = 2
            this.materialInfo.creativityNumber = 1
            this.materialInfo.matchingMethod = 2
            this.materialInfo.materialList = []

            this.checkDirectionalList = []
            this.selectionRows = []
            this.selectedRowKeys = []

            this.appList.appAllocation = 1
            this.appList.appArr = []
            this.appList.urlArr = [{ value: '' }]
            this.appList.schemaUriArr = [{ value: '' }]
            this.appList.linkAllocation = 1
            this.appList.clickUrlList = [{ value: '' }]
            this.appList.clickUrlActionList = [{ value: '' }]
            // this.appList.impressionUrl = [{value:''}]
            this.targetKeys = []
        },
        getCampaignList(accountId) {
            this.getAction('/kuaishou/batch/getCampaignList', {
                accountId: accountId,
                pageSize: 2000,
                pageNo: 1,
                campaignType: this.getData('campaignType', 'form'),
            }).then((res) => {
                if (res.success) {
                    this.campaignList = res.result.records
                }
            })
        },
        handleSubmit(e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                if (!err) {
                    var params = {}
                    params.batchId = new Date().getTime()
                    if (this.getData('newClick', 'form') == '2') {
                        params.campaignJson = {
                            accountId: this.accountId,
                            campaignId: this.campaignId,
                            systemType: this.getData('systemType', 'form'),
                            campaignType: this.getData('campaignType', 'form'),
                        }
                    } else {
                        if (this.campaignData.campaignName) {
                            params.campaignJson = {
                                ...this.campaignData,
                                accountId: this.accountId,
                                systemType: this.getData('systemType', 'form'),
                                campaignType: this.getData('campaignType', 'form'),
                                dayBudget: this.campaignData.dayBudget ? this.campaignData.dayBudget * 1000 : null,
                                timeStart: this.campaignData.timeStart
                                    ? moment(this.campaignData.timeStart).format('YYYY-MM-DD hh:mm:ss')
                                    : null,
                            }
                        } else {
                            this.$message.error('请填写规则的内容')
                            this.sumbitLoading = false
                            return
                        }
                    }

                    if (this.unitInfo.unitName) {
                        var str = ''
                        for (let i = 0; i < 7 * 24; i++) {
                            str += '0'
                        }
                        params.unitJson = {
                            ...this.unitInfo,
                            mediaSourceType: this.mediaSourceType,
                            media:
                                this.mediaSourceType == '0'
                                    ? ''
                                    : this.mediaSourceType == '1'
                                    ? JSON.stringify([this.media])
                                    : JSON.stringify(this.incluedSelectedRowKeys),
                            excludeMedia:
                                this.mediaSourceType == '0'
                                    ? ''
                                    : this.mediaSourceType == '1'
                                    ? ''
                                    : JSON.stringify(this.excludeSelectedRowKeys),
                            unitType: this.creativeInfo.unitType,
                            accountId: this.accountId,
                            splashAdSwitch: this.unitInfo.sceneId.includes(27) ? true : false,
                            sceneId:
                                this.allianceAccount == '3'
                                    ? JSON.stringify(this.unitInfo.sceneId)
                                    : this.allianceAccount == '2'
                                    ? JSON.stringify([5])
                                    : '[1]',

                            url: this.unitInfo.url,
                            schemaUri: this.unitInfo.schemaUri,
                            dayBudget: this.dayBudgetType == '1' ? 0 : this.unitInfo.dayBudget * 1000,
                            beginTime: moment(this.unitInfo.timeRange[0]).format('YYYY-MM-DD'),
                            endTime:
                                this.unitTime == '2' ? moment(this.unitInfo.timeRange[1]).format('YYYY-MM-DD') : null,
                            scheduleTime: this.scheduleTime == '2' ? this.unitInfo.scheduleTime : str,
                            useAppMarket: this.unitInfo.useAppMarket ? 1 : 0,
                            appStore: this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null,
                            cpaBid: this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : null,
                            bid: this.unitInfo.bid ? this.unitInfo.bid * 1000 : null,
                            bidMax: this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : null,
                            bidMin: this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : null,
                            deepConversionBid:
                                this.unitInfo.deepConversionBid && this.unitInfo.deepConversionBid > 0
                                    ? this.unitInfo.deepConversionBid * 1000
                                    : null,
                            deepConversionType: !!this.unitInfo.deepConversionType
                                ? this.unitInfo.deepConversionType
                                : null,
                        }
                    } else {
                        this.$message.error('请填写组内容')
                        this.sumbitLoading = false
                        return
                    }

                    if (this.checkDirectionalList.length > 0) {
                        params.targetIds = JSON.stringify(
                            this.checkDirectionalList.map((item) => {
                                return item.templateId
                            })
                        )
                        params.checkDirectionalList = JSON.stringify(this.checkDirectionalList)
                    } else {
                        this.$message.error('请选择定向包')
                        this.sumbitLoading = false
                        return
                    }

                    params.creativeJson = {
                        ...this.creativeInfo,
                        accountId: this.accountId,
                        overlayType: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null,
                        creativeCategory: this.creativeCategorySwitch
                            ? this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
                            : null,
                        creativeTag: this.creativeCategorySwitch ? JSON.stringify(this.creativeInfo.creativeTag) : [],
                        actionBarText: this.creativeInfo.actionBarText,
                        stickerTitle: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null,
                    }

                    if (this.materialList.length > 0) {
                        if (this.materialInfo.matchingMethod != 1 && this.descriptionList.length == 0) {
                            this.$message.error('请填写广告语')
                            this.sumbitLoading = false
                            return
                        }
                        this.checkMatchingMethod()
                        params.materialArray = {
                            materialInfo: { ...this.materialInfo },
                            materialList: this.materialList.map((item, index) => {
                                return {
                                    ...item,
                                    photoArr:
                                        this.materialInfo.videoType == 0
                                            ? this.kpType == 'video'
                                                ? item.photoArr.map((t, indexMaterial) => {
                                                      return {
                                                          splashPhotoIds: this.kpAllData.map((b) => {
                                                              return b.map((c) => {
                                                                  return c.photoId
                                                              })
                                                          })[
                                                              index * this.materialInfo.creativityNumber + indexMaterial
                                                          ],
                                                          creativeName: t.creativeName,
                                                      }
                                                  })
                                                :item.photoArr.map((t, indexMaterial) => {
                                                      return {
                                                          splashImageTokens: JSON.stringify(t.photoId.map((b) => {
                                                              return '' + b.imageToken
                                                          })),
                                                          creativeName: t.creativeName,
                                                      }
                                                  })
                                            : item.photoArr.map((t) => {
                                                  return { ...t, photoId: t.photoId.photoId }
                                              }),

                                    // this.materialInfo.videoType == 0
                                    //     ? item.photoArr.map((t, indexMaterial) => {
                                    //           return this.kpAllData[
                                    //               index * this.materialInfo.creativityNumber + indexMaterial
                                    //           ]
                                    //       })
                                    //     : // index * this.materialInfo.creativityNumber + indexMaterial, 1
                                    //       // [{
                                    //       //       splashPhotoIds: this.kpAllData.map((b) => {
                                    //       //           return b.map((c) => {
                                    //       //               return c.photoId
                                    //       //           })
                                    //       //       }),
                                    //       //   }]
                                    //       item.photoArr.map((t) => {
                                    //           return { ...t, photoId: t.photoId.photoId }
                                    //       }),
                                }
                            }),
                            descriptionList:
                                this.materialInfo.matchingMethod != 1
                                    ? this.descriptionList.map((item) => {
                                          return item.value
                                      })
                                    : null,
                        }
                    } else {
                        this.$message.error('请选择素材')
                        this.sumbitLoading = false
                        return
                    }

                    var dataArr = this.getAllData()
                    if (this.getData('campaignType', 'form') == 2 || this.getData('campaignType', 'form') == 7) {
                        if (dataArr.length > 0) {
                            params.appList = {
                                checkType:
                                    this.getData('campaignType', 'form') == 2 ||
                                    this.getData('campaignType', 'form') == 7
                                        ? 'app'
                                        : 'url',
                                appAllocation: this.appList.appAllocation, //1按账户，2按广告计划，3按广告组
                                appArr: dataArr.map((item) => {
                                    return { appId: item.key, siteId: item.siteId ? +item.siteId : null }
                                }),
                                urlArr: this.appList.urlArr.map((item) => {
                                    return item.value
                                }),
                                schemaUriArr: this.appList.schemaUriArr.map((item) => {
                                    return item.value
                                }),
                                linkAllocation: this.appList.linkAllocation,
                                clickUrlList: this.appList.clickUrlList.map((item) => {
                                    return item.value
                                }),
                                clickUrlActionList: this.actionbarClickUrlSwitch
                                    ? this.appList.clickUrlActionList.map((item) => {
                                          return item.value
                                      })
                                    : [],
                                // impressionUrlList: this.actionbarClickUrlSwitch
                                //     ? this.appList.impressionUrl.map((item) => {
                                //           return item.value
                                //       })
                                //     : [],
                                playableAllocation: this.appList.playableAllocation,
                                playableIds: this.appList.playableIdType == 1 ? '[]' : this.appList.playableIds,
                                playButton: this.appList.playableIdType == 1 ? '' : this.appList.playButton,
                            }
                        } else {
                            this.$message.error('请选择应用')
                            this.sumbitLoading = false
                            return
                        }
                    } else {
                        params.appList = {
                            checkType:
                                this.getData('campaignType', 'form') == 2 || this.getData('campaignType', 'form') == 7
                                    ? 'app'
                                    : 'url',
                            appAllocation: this.appList.appAllocation, //1按账户，2按广告计划，3按广告组
                            appArr: null,
                            urlArr:
                                this.getData('campaignType', 'form') == 2 || this.getData('campaignType', 'form') == 7
                                    ? null
                                    : this.appList.urlArr.map((item) => {
                                          return item.value
                                      }),
                            linkAllocation: this.appList.linkAllocation,
                            clickUrlList: this.appList.clickUrlList.map((item) => {
                                return item.value
                            }),
                            clickUrlActionList: this.actionbarClickUrlSwitch
                                ? this.appList.clickUrlActionList.map((item) => {
                                      return item.value
                                  })
                                : [],
                        }
                    }
                    console.log(params)
                    this.sumbitLoading = true
                    this.postDataAction('/kuaishouBatch/campaignPreview/addPreviewData', params).then((res) => {
                        if (res.success) {
                            this.sumbitLoading = false
                            // window.close()
                            localStorage.setItem('lookPreview', JSON.stringify(params))
                            window.open(
                                '/user/lookPreview?accountId=' + this.accountId + '&batchId=' + params.batchId,
                                '_self'
                            )
                            //    '_self'
                            //    '_black'
                        } else {
                            this.sumbitLoading = false
                        }
                    })
                }
            })
        },
        systemChange(e) {
            if (
                this.checkDirectionalList.length > 0 ||
                this.materialCount > 0 ||
                this.appList.urlArr[0].value != '' ||
                this.targetKeys.length > 0
            ) {
                setTimeout(() => {
                    //
                    if (e.target.value == 'iOS') {
                        this.form.setFieldsValue({ systemType: 'Android' })
                    } else {
                        this.form.setFieldsValue({ systemType: 'iOS' })
                    }
                })
                var that = this
                this.$confirm({
                    title: '警告',
                    content: '切换推广平台会清空定向包、素材、以及选择的应用及链接,是否继续?',
                    okText: '确认',
                    cancelText: '取消',
                    onOk: function () {
                        setTimeout(() => {
                            if (e.target.value == 'iOS') {
                                that.form.setFieldsValue({ systemType: 'iOS' })
                            } else {
                                that.form.setFieldsValue({ systemType: 'Android' })
                            }
                        })
                        that.clearAllData()
                    },
                })
            }

            // if()
        },
        typeChange(e) {
            this.campaignList = []
            this.unitInfo.url = ''
            this.unitInfo.schemaUri = ''
            if (e.target.value == 2) {
                this.allianceAccount = '1'
                this.unitInfo.sceneId = [1]
            } else if (e.target.value == 5) {
            } else if (e.target.value == 7) {
                this.allianceAccount = '2'
                this.unitInfo.sceneId = [5]
            }
            if (
                this.checkDirectionalList.length > 0 ||
                this.materialCount > 0 ||
                this.appList.urlArr[0].value != '' ||
                this.targetKeys.length > 0
            ) {
                // setTimeout(() => {
                //     //
                //     if (e.target.value == 2) {
                //         this.form.setFieldsValue({ campaignType: 5 })
                //     } else {
                //         this.form.setFieldsValue({ campaignType: 2 })
                //     }
                // })
                var that = this
                this.$confirm({
                    title: '警告',
                    content: '切换营销策略会清空定向包、素材、以及选择的应用及链接,是否继续?',
                    okText: '确认',
                    cancelText: '取消',
                    onOk: function () {
                        setTimeout(() => {
                            if (e.target.value == 2) {
                                that.form.setFieldsValue({ campaignType: 2 })
                            } else if (e.target.value == 5) {
                                that.form.setFieldsValue({ campaignType: 5 })
                            } else if (e.target.value == 7) {
                                that.form.setFieldsValue({ campaignType: 7 })
                                this.allianceAccount = '2'
                                this.unitInfo.sceneId = [5]
                            }
                            that.getCampaignList(that.accountId)
                            that.campaignId = ''
                        })
                        that.clearAllData()
                    },
                })
            } else {
                setTimeout(() => {
                    this.form.setFieldsValue({ campaignType: e.target.value })
                    this.getCampaignList(this.accountId)
                    this.campaignId = ''
                })
            }

            // if()
        },
        onChange(link) {
            // console.log('Anchor:OnChange', link)
        },

        showDrawer() {
            if (this.checkAccountId()) {
                this.getOcpxActionList()
                this.visible = true
                this.getAction('/kuaishou/batch/getIsActivate', {
                    accountId: this.accountId,
                }).then((res) => {
                    if (res.success) {
                        this.groupTypeData = res.result
                    }
                })
                if (this.groupTemplateId) {
                } else {
                    this.$nextTick(() => {
                        // this.closeUnit('ruleForm')
                        this.$refs.ruleForm.resetFields()
                        // this.allianceAccount = '1'
                        this.dayBudgetType = '1'
                        this.unitTime = '1'
                        this.scheduleTime = '1'
                        this.unitInfo.url = ''
                        this.unitInfo.schemaUri = ''
                        this.unitInfo.sceneId = [1]
                        this.unitInfo.useAppMarket = false
                        this.unitInfo.appStore = []
                        this.unitInfo.dayBudget = null
                        this.unitInfo.speed = '1'
                        this.unitInfo.timeRange = [moment().startOf('day'), moment().add(1, 'months')]
                        this.unitInfo.scheduleTime = ''
                        this.unitInfo.showMode = '2'
                        // this.unitInfo.bidType = 10
                        this.unitInfo.ocpxActionType = 2
                        this.unitInfo.deepConversionType = null
                        this.unitInfo.templateBidType = 1
                        this.unitInfo.cpaBid = null
                        this.unitInfo.bid = null
                        this.unitInfo.deepConversionBid = null
                        this.unitInfo.bidMax = null
                        this.unitInfo.bidMin = null
                        this.unitInfo.unitName = ''
                    })
                }
            }
        },
        showImgUrl(id) {
            var data = this.stickerStyles.filter((item) => item.id == id)[0]
            if (data && data.url) {
                return data.url
            }
        },
        showDrawerCreate() {
            if (this.checkAccountId()) {
                this.creativeVisible = true
                if (this.createTiveTemplateId) {
                } else {
                    this.$nextTick(() => {
                        this.$refs.createForm.resetFields()
                        this.creativeInfo.impressionUrl = ''
                        this.creativeInfo.unitType = 4
                        this.creativeInfo.overlayType = []
                        this.creativeInfo.creativeCategory = []
                        this.creativeInfo.creativeTag = []
                        this.creativeInfo.stickerTitle = ''
                        this.creativeInfo.actionBarText = ''
                        this.creativeInfo.keep = false
                        this.creativeInfo.kolUserType = 2
                        this.creativeInfo.outerLoopNative = 0
                    })
                }

                this.getAction('/kuaishou/batch/getCreativeWordStyles', {
                    accountId: this.accountId,
                }).then((res) => {
                    this.stickerStyles = []
                    if (res.success) {
                        if (res.result) {
                            var data = res.result.map((item) => {
                                return item.sticker_styles
                            })
                            data.map((item) => {
                                item.map((i) => {
                                    this.stickerStyles.push({
                                        id: i.overlay_type,
                                        url: i.overlay_preview_url,
                                    })
                                })
                            })
                        } else {
                            this.stickerStyles = []
                        }
                    } else {
                        this.stickerStyles = []
                    }
                })

                this.getAction('/kuaishou/batch/getActionBarTextByType', {
                    type: this.getData('campaignType', 'form'),
                }).then((res) => {
                    if (res.success) {
                        this.actionBarTextList = res.result
                    }
                })

                this.getAction('/kuaishou/batch/getCreativeCategory', {
                    accountId: this.accountId,
                }).then((res) => {
                    if (res.success) {
                        this.createOptions = res.result
                    }
                })
            }
        },
        closeUnit(form) {
            // console.log(form)
            // this.$nextTick(() => {
            //   this.$refs[form].resetFields()
            // })

            if (form == 'ruleForm') {
                this.visible = false
                this.allianceAccount = '1'
                this.dayBudgetType = '1'
                this.unitTime = '1'
                this.scheduleTime = '1'
            } else if (form == 'createForm') {
                this.creativeVisible = false
            }
        },
        onClose() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // console.log(this.unitInfo)
                    this.ruleFormLoading = true
                    var str = ''
                    for (let i = 0; i < 7 * 24; i++) {
                        str += '0'
                    }
                    var params = { ...this.unitInfo }
                    params.id = this.groupTemplateId
                        ? this.groupTemplateId == 'edit'
                            ? null
                            : this.groupTemplateId
                        : null
                    // params.unitType = 4
                    params.accountId = this.accountId
                    params.sceneId =
                        this.allianceAccount == '3'
                            ? JSON.stringify(this.unitInfo.sceneId)
                            : this.allianceAccount == '2'
                            ? JSON.stringify([5])
                            : '[1]'
                    params.url = this.unitInfo.url
                    params.schemaUri = this.unitInfo.schemaUri
                    params.dayBudget = this.dayBudgetType == '1' ? 0 : this.unitInfo.dayBudget * 1000
                    params.beginTime = moment(this.unitInfo.timeRange[0]).format('YYYY-MM-DD')
                    params.endTime =
                        this.unitTime == '2' ? moment(this.unitInfo.timeRange[1]).format('YYYY-MM-DD') : null
                    params.scheduleTime = this.scheduleTime == '2' ? this.unitInfo.scheduleTime : str
                    params.useAppMarket = this.unitInfo.useAppMarket ? 1 : 0
                    params.appStore = this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null

                    params.cpaBid = this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : 0
                    params.bid = this.unitInfo.bid ? this.unitInfo.bid * 1000 : 0
                    params.bidMax = this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : 0
                    params.bidMin = this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : 0
                    params.deepConversionBid = this.unitInfo.deepConversionBid
                        ? this.unitInfo.deepConversionBid * 1000
                        : 0
                    //      allianceAccount: '1',
                    // dayBudgetType: '1',
                    // unitTime: '1',
                    // scheduleTime: '1',

                    if (this.keep) {
                        this.postDataAction('/template/kuaiShouBatchGroupTemplate/saveOrUpdate', params).then((res) => {
                            this.visible = false
                            this.ruleFormLoading = false
                            if (res.success) {
                                this.groupTemplateId = res.result ? res.result : 'edit'
                                this.$message.success(res.message)
                                this.keep = false
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        this.ruleFormLoading = false
                        if (this.groupTemplateId) {
                        } else {
                            this.groupTemplateId = 'edit'
                        }

                        this.visible = false
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },

        submitCreative() {
            this.$refs.createForm.validate((valid) => {
                if (valid) {
                    this.creativeLoading = true
                    var params = { ...this.creativeInfo }
                    params.id = this.createTiveTemplateId
                        ? this.createTiveTemplateId == 'edit'
                            ? null
                            : this.createTiveTemplateId
                        : null
                    params.accountId = this.accountId
                    params.overlayType =
                        this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null
                    params.creativeCategory = this.creativeCategorySwitch
                        ? this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
                        : null
                    params.creativeTag = this.creativeCategorySwitch
                        ? JSON.stringify(this.creativeInfo.creativeTag)
                        : JSON.stringify([])
                    params.actionBarText = this.creativeInfo.actionBarText
                    params.stickerTitle =
                        this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null

                    //      allianceAccount: '1',
                    // dayBudgetType: '1',
                    // unitTime: '1',
                    // scheduleTime: '1',
                    if (this.creativeInfo.keep) {
                        this.creativeVisible = false
                        this.postDataAction('/template/kuaiShouBatchCreativeTemplate/saveOrUpdate', params).then(
                            (res) => {
                                this.creativeLoading = false
                                if (res.success) {
                                    this.createTiveTemplateId = res.result ? res.result : 'edit'
                                    this.$message.success(res.message)
                                    this.creativeInfo.keep = false
                                } else {
                                    this.$message.error(res.message)
                                }
                            }
                        )
                    } else {
                        this.creativeLoading = false
                        if (this.createTiveTemplateId) {
                        } else {
                            this.createTiveTemplateId = 'edit'
                        }

                        this.creativeVisible = false
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },

        onChange(value, dateString) {
            console.log('Selected Time: ', value)
            console.log('Formatted Selected Time: ', dateString)
        },
        onOk(value) {
            console.log('onOk: ', value)
        },
        getCreativeTemplate(accountId) {
            this.getAction('/template/kuaiShouBatchCreativeTemplate/getCreativeTemplate', {
                accountId: accountId,
            }).then((res) => {
                if (res.success) {
                    if (res.result) {
                        var data = res.result
                        //   params.id = this.createTiveTemplateId
                        // params.accountId = this.accountId
                        // params.overlayType = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null
                        // params.creativeCategory = this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
                        // params.creativeTag = JSON.stringify(this.creativeTag)
                        // params.actionBarText = this.creativeInfo.actionBarText
                        // params.stickerTitle = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null
                        this.createTiveTemplateId = data.id
                        this.creativeInfo.impressionUrl = !!data.impressionUrl ? data.impressionUrl: ""
                        this.creativeInfo.overlayType = data.overlayType ? [data.overlayType] : []
                        this.creativeInfo.creativeCategory =
                            data.creativeCategory > 10000
                                ? [
                                      parseInt(data.creativeCategory / 10000),
                                      parseInt(data.creativeCategory / 100),
                                      data.creativeCategory,
                                  ]
                                : data.creativeCategory > 100
                                ? [parseInt(data.creativeCategory / 100), data.creativeCategory]
                                : []
                        this.creativeInfo.creativeTag = data.creativeTag ? JSON.parse(data.creativeTag) : []
                        this.creativeInfo.actionBarText = data.actionBarText
                        this.creativeInfo.stickerTitle = data.stickerTitle
                        this.creativeInfo.kolUserType = data.kolUserType
                        this.creativeInfo.outerLoopNative = data.outerLoopNative
                        //      allianceAccount: '1',
                        // dayBudgetType: '1',
                        // unitTime: '1',
                        // scheduleTime: '1',
                    } else {
                        this.createTiveTemplateId = null
                        // this.closeUnit('createForm')
                    }
                }
            })
        },
        getGroupTemplate(accountId) {
            this.getAction('/template/kuaiShouBatchGroupTemplate/getGroupTemplate', {
                accountId: accountId,
            }).then((res) => {
                if (res.success) {
                    if (res.result) {
                        var str = ''
                        for (let i = 0; i < 7 * 24; i++) {
                            str += '0'
                        }
                        var data = res.result
                        this.groupTemplateId = data.id
                        this.unitInfo.useAppMarket = data.useAppMarket == 1 ? true : false
                        this.unitInfo.appStore = data.appStore ? JSON.parse(data.appStore) : []
                        this.dayBudgetType = data.dayBudget && data.dayBudget > 0 ? '2' : '1'
                        this.unitInfo.dayBudget = data.dayBudget && data.dayBudget > 0 ? data.dayBudget / 1000 : null
                        this.unitInfo.speed = data.speed + ''
                        this.unitTime = data.endTime && data.endTime != '' ? '2' : '1'
                        this.unitInfo.timeRange =
                            data.endTime && data.endTime != ''
                                ? [moment().startOf('day'), moment().add(1, 'months')]
                                : [moment().startOf('day'), moment().add(1, 'months')]
                        this.scheduleTime = data.scheduleTime == null || data.scheduleTime == str ? '1' : '2'
                        this.unitInfo.scheduleTime =
                            data.scheduleTime == null || data.scheduleTime == str ? str : data.scheduleTime
                        this.unitInfo.showMode = data.showMode + ''
                        this.unitInfo.sceneId =
                            JSON.parse(data.sceneId)[0] == 5
                                ? JSON.parse(data.sceneId)[0] == 1
                                    ? [1]
                                    : JSON.parse(data.sceneId)
                                : JSON.parse(data.sceneId)
                        this.unitInfo.url = data.url
                        this.unitInfo.schemaUri = data.schemaUri
                        this.allianceAccount =
                            JSON.parse(data.sceneId)[0] == 5 ? '2' : JSON.parse(data.sceneId)[0] == 1 ? '1' : '3'
                        this.unitInfo.bidType = data.bidType
                        this.unitInfo.ocpxActionType = data.ocpxActionType ? data.ocpxActionType : 2
                        this.unitInfo.deepConversionType = !!data.deepConversionType ? data.deepConversionType : null
                        this.unitInfo.templateBidType = data.templateBidType
                        this.unitInfo.cpaBid = data.cpaBid && data.cpaBid > 0 ? data.cpaBid / 1000 : null
                        this.unitInfo.bid = data.bid && data.bid > 0 ? data.bid / 1000 : null
                        this.unitInfo.deepConversionBid =
                            data.deepConversionBid && data.deepConversionBid > 0 ? data.deepConversionBid / 1000 : null
                        this.unitInfo.bidMax = data.bidMax && data.bidMax > 0 ? data.bidMax / 1000 : null
                        this.unitInfo.bidMin = data.bidMin && data.bidMin > 0 ? data.bidMin / 1000 : null
                        this.unitInfo.unitName = data.unitName
                    } else {
                        this.groupTemplateId = null
                        this.allianceAccount = '1'
                        // this.closeUnit('ruleForm')
                    }
                }
            })
        },
        getCampaignTemplate(accountId) {
            this.getAction('/template/kuaiShouBatchCampaignTemplate/getCampaignTemplate', {
                accountId: accountId,
            }).then((res) => {
                if (res.success) {
                    if (res.result) {
                        this.campaignTemplateId = res.result.id
                        this.campaignData = res.result
                        if (this.campaignData.timeStart != '') {
                            this.campaignData.timeStart = moment(this.campaignData.timeStart)
                        }
                        if (this.campaignData.dayBudget > 0) {
                            this.campaignData.budgetType = '2'
                            this.campaignData.dayBudget = res.result.dayBudget / 1000
                        } else {
                            this.campaignData.budgetType = '1'
                            this.campaignData.dayBudget = null
                        }
                        var that = this
                        // setTimeout(() => {
                        //   var mdl = Object.assign({}, that.campaignData)
                        //   that.$nextTick(() => {
                        //     that.form.setFieldsValue(pick(mdl, ['campaignType']))
                        //   })
                        // })
                    } else {
                        this.campaignTemplateId = null
                        this.campaignData = {}
                        // this.form.resetFields()
                    }
                }
            })
        },
        ruleConfigFormOk(e) {
            this.ruleConfigForm.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true
                    // console.log('Received values of form: ', values)
                    var params = { ...values }
                    params.id = this.campaignTemplateId
                        ? this.campaignTemplateId == 'edit'
                            ? null
                            : this.campaignTemplateId
                        : null
                    params.accountId = this.accountId
                    params.systemType = this.getData('systemType', 'form')
                    params.campaignType = this.getData('campaignType', 'form')
                    params.dayBudget = values.dayBudget ? values.dayBudget * 1000 : 0
                    params.timeStart = values.timeStart ? moment(values.timeStart).format('YYYY-MM-DD hh:mm:ss') : ''
                    this.campaignData = { ...params, dayBudget: values.dayBudget }
                    if (this.campaignKeep) {
                        this.postDataAction('/template/kuaiShouBatchCampaignTemplate/saveOrUpdate', params).then(
                            (res) => {
                                this.campaignTemplateId = res.result ? res.result : 'edit'
                                this.ruleConfigFormCancel()
                                this.ruleConfigForm.resetFields()
                                this.campaignKeep = false
                                this.confirmLoading = false
                                if (res.success) {
                                    this.$message.success(res.message)
                                } else {
                                    this.$message.error(res.message)
                                }
                            }
                        )
                    } else {
                        this.confirmLoading = false
                        if (this.campaignTemplateId) {
                        } else {
                            this.campaignTemplateId = 'edit'
                        }
                    }
                    this.ruleConfigVisible = false
                }
            })
        },
        ruleConfigShow() {
            if (this.checkAccountId()) {
                this.ruleConfigVisible = true
                var that = this
                if (that.campaignTemplateId) {
                    setTimeout(() => {
                        if (that.campaignData.campaignName) {
                            var mdl = Object.assign({}, that.campaignData)
                            that.ruleConfigForm.setFieldsValue({ keep: [] })
                            that.$nextTick(() => {
                                that.ruleConfigForm.setFieldsValue(
                                    pick(mdl, [
                                        'budgetType',
                                        'campaignName',
                                        'campaignStatus',
                                        'groupRule',
                                        'isTime',
                                        'keep',
                                        'unitStatus',
                                        'bidType',
                                    ])
                                )

                                setTimeout(() => {
                                    if (that.campaignData.isTime == '1') {
                                        that.ruleConfigForm.setFieldsValue(pick(mdl, 'timeStart'))
                                    }
                                    if (that.campaignData.budgetType == '2') {
                                        that.ruleConfigForm.setFieldsValue(pick(mdl, 'dayBudget'))
                                    }
                                }, 100)
                            })
                        }
                    })
                } else {
                    this.$nextTick(() => {
                        this.ruleConfigForm.resetFields()
                        this.ruleConfigForm.setFieldsValue({ keep: [] })
                        this.campaignData = {}
                    })
                }
            }
        },
        ruleConfigFormCancel() {
            this.ruleConfigVisible = false
        },
        getChangeAll(type, form, field) {
            var node = document.getElementById(field)
            if (this.getData('groupRule', 'ruleConfigForm') == 2 && form == 'ruleConfigForm' && type == '定向包') {
                this.$message.error('只有按定向包分组时,才可拼接定向包')
                return
            }
            var v = '{{' + type + '}}-'
            if (document.selection) {
                //IE
                node.focus()
                var sel = document.selection.createRange()
                sel.text = v
                sel.select()
                if (field == 'campaignName') {
                    this[form].setFieldsValue({ campaignName: sel.text })
                } else if (field == 'unitName') {
                    this.unitInfo.unitName = sel.text
                    this.$refs.ruleForm.validateField('unitName')
                }
            } else if (node.selectionStart || node.selectionStart == '0') {
                //MOZILLA/GOOGLE
                var startPos = node.selectionStart
                var endPos = node.selectionEnd
                var restoreTop = node.scrollTop
                node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
                if (restoreTop > 0) {
                    node.scrollTop = restoreTop
                }
                if (field == 'campaignName') {
                    this[form].setFieldsValue({ campaignName: node.value })
                } else if (field == 'unitName') {
                    this.unitInfo.unitName = node.value
                    this.$refs.ruleForm.validateField('unitName')
                }
                node.focus()
                node.selectionStart = startPos + v.length
                node.selectionEnd = startPos + v.length
                // this.campaignName = node.value
            } else {
                //OTHER
                node.value += v
                // console.log(node.value)
                if (field == 'campaignName') {
                    this[form].setFieldsValue({ campaignName: node.value })
                } else if (field == 'unitName') {
                    this.unitInfo.unitName = node.value
                    this.$refs.ruleForm.validateField('unitName')
                }
                node.focus()
                // this.campaignName = node.value
            }
        },

        appStoreCheck(value) {
            // console.log(value.target.checked)
            if (value.target.checked) {
                this.unitInfo.appStore = ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan']
            } else {
                this.unitInfo.appStore = []
            }
        },
        LOLchange(value) {
            if (value.target.value == '2') {
                this.unitInfo.sceneId = [5]
            } else if (value.target.value == '1') {
                this.unitInfo.sceneId = [1]
            } else if (value.target.value == '3') {
                this.unitInfo.sceneId = [6, 10, 24]
            }
        },
        bidTypeChange(value) {
            if (value.target.value == 10) {
                this.unitInfo.ocpxActionType = 2
                this.unitInfo.bid = null
            } else {
                this.unitInfo.ocpxActionType = null
                this.unitInfo.cpaBid = null
                this.unitInfo.deepConversionBid = null
            }
        },
        setTime(e) {
            if (e.target.value == '2') {
                this.unitInfo.timeRange[0] = moment().startOf('day')
                this.unitInfo.timeRange[1] = moment().add(1, 'months')
            }
        },
        setTimeAll(e) {
            //   console.log(moment('2019-12-27'))
            if (e.target.value == '2') {
                this.$nextTick(() => {
                    this.$refs.selectCheck.init()
                })
            } else {
            }
        },

        changeData(data) {
            if (data.length > 1 && data.findIndex((item) => item == 27) == 0) {
                data.splice(
                    data.findIndex((item) => item == 27),
                    1
                )
            } else if (data.length > 1 && data.findIndex((item) => item == 27) == data.length - 1) {
                data.splice(0, data.length - 1)
            } else if (data.length == 0) {
                data.push(27)
            }
        },
        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')
        },
        onScroll() {
            // var box = document.getElementById('box')
            // var t = document.documentElement.scrollTop || document.body.scrollTop
            // box.style.top = t + 'px'

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

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

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

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

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

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

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

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

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

.ant-layout-header {
    height: $height;
    line-height: $height;
}

/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
</style>
