<style lang="scss">
    .is-disabled .el-checkbox__inner {
        display: none !important;
    }
    .downLoad .ant-form-item-control-wrapper {
        width: 70%;
    }

    #material-card .ant-tabs-tab {
        border: 1px solid gainsboro !important;
    }

    #material-card .ant-tabs-top-bar {
        position: relative;
        z-index: 100;
    }

    #material-card .ant-badge-count {
        top: 0px;
    }

    .detail .ant-form-item {
        margin-bottom: 10px !important;
    }

    .ant-carousel .slick-slide {
        text-align: center;
        background: #364d79;
        overflow: hidden;
    }

    .ad_cover_container .ant-card-body {
        padding: 0;
    }

    .ant-carousel .slick-slide h3 {
        color: #fff;
    }

    .ant-carousel .custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        background-color: rgba(31, 45, 61, 0.11);
        opacity: 0.3;
    }

    .ant-carousel .custom-slick-arrow:before {
        display: none;
    }

    .ant-carousel .custom-slick-arrow:hover {
        opacity: 0.5;
    }

    .cover_carousel_con .slick-dots {
        bottom: 55px;
    }

    .add-image-material .draggable-list {
        display: block !important;
    }

    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;
    }
    .table-page-search-wrapper {
        .el-cascader .el-input {
            cursor: pointer;
            height: 100%;
        }
        .el-cascader .el-input .el-input__inner {
            text-overflow: ellipsis;
            height: 100%;
            position: relative;
            top: -4px;
        }
        .el-cascader .el-input .el-icon-arrow-down {
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
            font-size: 14px;
            position: relative;
            top: -4px;
        }
        .el-cascader .el-input .el-icon-arrow-down.is-reverse {
            -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
            position: relative;
            top: 2px;
        }
        .el-cascader .el-input .el-input__inner .el-input__icon.el-icon-arrow-down {
            text-overflow: ellipsis;
            height: 100%;
            position: relative;
            top: -4px;
        }
        .el-cascader .el-input .el-input__suffix .el-input__icon.el-icon-circle-close {
            text-overflow: ellipsis;
            height: 100%;
            position: relative;
            top: -4px;
        }
    }
</style>
<style lang="scss" scoped>
    .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;
    }

    .content {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .slick-dots {
            bottom: 55px;
        }
    }

    .video-content {
        width: 45%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid #f2f2f2;
    }

    .tag-video {
        position: absolute;
        right: 0px;
        top: 8px;
        padding: 4px;
        border-radius: 2px;
        line-height: 16px;
        font-size: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .home-item {
        overflow: hidden;
    }

    @media only screen and (min-width: 1200px) {
        .home-item {
            border-style: solid;
            border-width: 1px;
            border-color: #e4e4e4;
            width: calc(50% - 10px);
            padding: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            background: #fff;
            position: relative;
            z-index: 99;
        }
    }
    @media only screen and (min-width: 1250px) {
        .home-item {
            border-style: solid;
            border-width: 1px;
            border-color: #e4e4e4;
            width: calc(25% - 10px);
            padding: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            background: #fff;
            position: relative;
            z-index: 99;
        }
    }

    .actor-photo-list {
        display: flex;
        padding-left: 0;
        li {
            width: 25%;
            margin: 10px;
            position: relative;
            height: 250px;
            border: 1px solid #f2f2f2;

            img,
            video {
                width: 100%;
                margin-top: auto;
                margin-bottom: auto;
                top: 0;
                bottom: 0;
                position: absolute;
                max-height: 250px;
            }
        }
    }

    .home-card {
        width: 100%;
        overflow: hidden;
        padding: 10px 0px;
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;

        .home-right {
            width: 100%;
        }

        .bg:after {
            content: '';
            width: 110%;
            height: 110%;
            position: absolute;
            left: -5%;
            top: -5%;
            background: inherit;
            filter: blur(10px);
            z-index: 2;
        }
    }

    .bh {
        height: 60px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .bhShow {
        height: 100px;
        line-height: 25px;
        text-align: center;
    }

    .bhShow span {
        font-size: 14px;
    }

    .show-data {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    a {
        font-size: 14px;
    }

    .actor-photo-list {
        display: flex;
        padding-left: 0;

        li {
            width: 25%;
            margin: 10px;
            position: relative;
            height: 250px;
            border: 1px solid #f2f2f2;
            list-style: none;

            img,
            video {
                width: 100%;
                margin-top: auto;
                margin-bottom: auto;
                top: 0;
                bottom: 0;
                position: absolute;
                max-height: 250px;
            }
        }
    }
</style>
<template>
    <a-card :bordered="false" class="only-video-material-disable">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" :selfUpdate="true">
                <a-row :gutter="24">
                    <a-col :md="8" :sm="8">
                        <selectTable :projectId.sync="queryParam.productId" ref="selectTable"></selectTable>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <selectTableProject :projectId.sync="queryParam.projectId" :productId="queryParam.productId" ref="selectTableProject"></selectTableProject>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="素材名称">
                            <a-input placeholder="请输入素材名称" v-model="queryParam.materialName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="搜索时间">
                            <a-range-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="唯一标识">
                            <a-input placeholder="请输入素材唯一标识" v-model="queryParam.code"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="视频标签">
                            <el-cascader
                                placeholder="请选择视频的标签"
                                v-model="labelValue"
                                :options="options"
                                :props="{ checkStrictly: true, value: 'tagCode', label: 'tagName', expandTrigger: 'hover' }"
                                clearable
                                style="width: 100%; height: 32px"
                                filterable
                            >
                            </el-cascader>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="剪辑">
                            <a-select
                                v-model="queryParam.clipId"
                                :filter-option="filterOption"
                                allowClear
                                show-search
                            >
                                <a-select-option
                                    v-for="item in designList"
                                    :key="item.userId"
                                    :value="item.userId"
                                >
                                    {{ item.companyName + '_' + item.userName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="拍摄">
                            <a-select
                                v-model="queryParam.shotId"
                                :filter-option="filterOption"
                                allowClear
                                show-search
                            >
                                <a-select-option
                                    v-for="item in designList"
                                    :key="item.userId"
                                    :value="item.userId"
                                >
                                    {{ item.companyName + '_' + item.userName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    
                    <a-col :md="8" :sm="8">
                        <a-form-item label="编导">
                            <a-select
                                v-model="queryParam.planId"
                                :filter-option="filterOption"
                                allowClear
                                show-search
                            >
                                <a-select-option
                                    v-for="item in designList"
                                    :key="item.userId"
                                    :value="item.userId"
                                >
                                    {{ item.companyName + '_' + item.userName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8" v-if="active == '1'">
                        <a-form-item label="状态">
                            <a-select v-model="queryParam.videoStatus">
                                <a-select-option :value="0">
                                    不限
                                </a-select-option>
                                <a-select-option :value="1">
                                    未推送
                                </a-select-option>
                                <a-select-option :value="2">
                                    未推送到快手
                                </a-select-option>
                                <a-select-option :value="3">
                                    未推送到头条 
                                </a-select-option>
                                <a-select-option :value="4">
                                    推送到快手
                                </a-select-option>
                                <a-select-option :value="5">
                                    推送到头条
                                </a-select-option>
                                <a-select-option :value="6">
                                    已推送到快手&头条 
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="handleSubmit" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div class="table-operator" style="position: relative; z-index: 100">
            <!-- <a-button
                @click="
                    visible = true
                    confirmLoading = false
                    add = true
                "
                type="primary"
                icon="plus"
            >
                新增
            </a-button> -->
            <a-button
                @click="onCheckAllChange"
                v-if="
                queryParam.productId &&
                active == '1' &&
                (role.roleCode == 'operator' ||
                    role.roleCode == 'kuaishouOperationManager' ||
                    role.roleCode == 'admin' ||
                    role.roleCode == 'operationAssistant' ||
                    role.roleCode == 'touTiaoOperationManager')
                "
            >
                {{ checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选' }}
            </a-button>
            <a-button
                v-if="
                queryParam.productId &&
                active == '1' &&
                (role.roleCode == 'operator' ||
                    role.roleCode == 'kuaishouOperationManager' ||
                    role.roleCode == 'admin' ||
                    role.roleCode == 'operationAssistant' ||
                    role.roleCode == 'touTiaoOperationManager')
                "
                :disabled="checkArr.length == 0"
                @click="tongbu('1')"
            >
                一键同步头条
            </a-button>
            <a-button
                v-if="
                queryParam.productId &&
                active == '1' &&
                (role.roleCode == 'operator' ||
                    role.roleCode == 'kuaishouOperationManager' ||
                    role.roleCode == 'admin' ||
                    role.roleCode == 'operationAssistant' ||
                    role.roleCode == 'touTiaoOperationManager')
                "
                :disabled="checkArr.length == 0"
                @click="tongbu('3')"
            >
                一键同步头条内广
            </a-button>
            <!-- &&  -->
            <a-button v-if="checkArr.length && active !== '0'" type="primary" @click="handleFodderWind">素材下线</a-button>
            <a-button v-if="checkArr.length && active === '0'" type="primary" @click="handleApprovedClick">通过审核</a-button>
        </div>
        <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
            <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
                <a-spin :spinning="spinning">
                    <div v-if="dataSource.length > 0">
                        <a-checkbox-group @change="onChangeCheck($event, item)" v-model="checkArr" class="home-card">
                        <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
                            <span v-if="items.excellent == 0"></span>
                            <span
                                v-else
                                style="position:absolute;top:30px;right:-105px;display:block;width:300px;height:30px;text-align:center;line-height;30px;background:red;transform:rotate(45deg);z-index:1000"
                            >
                                优秀素材
                            </span>
                            <div class="home-right">
                            <a-badge
                                :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
                                :numberStyle="{ backgroundColor: '#52c41a' }"
                                style="width: 100%; display: flex"
                                @click.stop
                            >
                                <span
                                style="
                                    color: #999;
                                    fontsize: 14px;
                                    padding-bottom: 10px;
                                    display: inline-block;
                                    width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                "
                                :title="items.projectName"
                                >
                                    {{ items.projectName }}
                                </span>
                                <span
                                    style="
                                        color: #999;
                                        fontsize: 14px;
                                        padding-bottom: 10px;
                                        display: inline-block;
                                        width: 100%;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    "
                                    :title="items.materialName"
                                >
                                    {{ items.materialName }}
                                </span>
                                <a-icon
                                    type="close-circle"
                                    @click="deleteData(items.id)"
                                    v-show="active == '0'"
                                    v-if="items.userId == userInfo().id"
                                />
                            </a-badge>
                            <div style="display: flex; justify-content: center; width: 100%; height: 200px; position: relative">
                                <div style="width: 100px; position: absolute; left: 0; z-index: 1000">
                                <a-tooltip placement="top">
                                    <template slot="title">
                                        <span>{{ items.kuaishouEffiType == 1 ? '快手有效视频' : '已经同步到快手平台' }}</span>
                                    </template>
                                    <img
                                        style="width: 30px; height: 30px"
                                        v-if="items.syncKuaishou == 2"
                                        :style="{ filter: items.kuaishouEffiType == 1 ? 'grayscale(0%)' : 'grayscale(100%)' }"
                                        src="@/views/modules/material/kuaishou.jpg"
                                    />
                                </a-tooltip>
                                <a-tooltip placement="top">
                                    <template slot="title">
                                    <span>{{ items.toutiaoEffiType == 1 ? '抖音有效视频' : '已经同步到抖音平台' }}</span>
                                    </template>
                                    <img
                                        v-if="items.syncBytedance == 2 && items.toutiaoEffiType == 1"
                                        style="width: 30px; height: 30px; margin-left: 5px"
                                        src="@/views/modules/material/douyin.jpg"
                                        alt
                                    />
                                    <img
                                        v-else-if="items.syncBytedance == 2 && items.toutiaoEffiType == 0"
                                        style="width: 30px; height: 30px; margin-left: 5px"
                                        src="@/views/modules/material/douyinhui.jpg"
                                        alt
                                    />
                                </a-tooltip>
                                </div>
                                <a-icon
                                    type="fire"
                                    style="font-size: 20px; position: absolute; right: 0; bottom: 10px; z-index: 1000; color: red"
                                    v-if="items.whetherUnaudited"
                                />
                                <a-popover
                                    title="视频标签"
                                    @visibleChange="changeTag(items.code)"
                                    :overlayStyle="{ width: '400px' }"
                                >
                                    <template slot="content" v-if="videoTag.length > 0">
                                        <a-tag v-for="(item, index) of videoTag" :key="index" style="margin: 5px">{{ item }}</a-tag>
                                    </template>
                                    <template slot="content" v-else>
                                        <div style="width: 100%; text-align: center">加载中。。。</div>
                                    </template>
                                    <img
                                        :src="items.coverUrl"
                                        alt
                                        style="height: 200px; max-width: 100%; position: absolute; z-index: 10"
                                    />
                                </a-popover>
                            </div>
                            <div style="width: 100%; height: 1px; border-bottom: 1px solid #f2f2f2; margin-top: 5px"></div>
                            <div v-if="active == '2'" class="bh">驳回原因：{{ items.refuseReason }}</div>
                            <div
                                v-if="active == '1'"
                                class="bhShow"
                                style="display: flex; justify-content: space-between"
                                @click.stop="showData(items)"
                            >
                                <div class="show-data">
                                    <span>抖音</span>
                                    <span>消耗:{{ items.bytedanceCost || 0 }}</span>
                                    <span>广告语：{{ items.slogansCount || 0 }}</span>
                                    <span style="display: inline-block;text-align: left;width: 400px;">审核通过时间：{{ items.confirmTime || '-' }}</span>
                                </div>
                                <div class="show-data">
                                    <span>快手</span>
                                    <span>消耗:{{ items.cost || 0 }}</span>
                                    <span v-if="items.offlineFlag === 1" style="color: #f00;">状态：已下线</span>
                                </div>
                            </div>
                            <div
                                style="width: 100%; height: 1px; border-bottom: 1px solid #f2f2f2; margin-top: 5px"
                                v-if="active != '0'"
                            ></div>
                            <span
                                style="color: black; fontsize: 16px; padding-top: 10px; display: block; width: 100%"
                                @click.stop
                            >
                                <a-popconfirm
                                    @confirm="okEditShow(items, '2')"
                                    v-show="active != '2' && active != '3'"
                                    v-if="
                                        role.roleCode == 'operator' ||
                                        role.roleCode == 'kuaishouOperationManager' ||
                                        role.roleCode == 'admin' ||
                                        role.roleCode == 'operationAssistant' ||
                                        role.roleCode == 'touTiaoOperationManager'
                                    "
                                >
                                <div slot="title">
                                    <div>
                                        驳回原因:
                                        <a-textarea
                                            placeholder="请输入原因"
                                            v-model="refuseReason"
                                            :autosize="{ minRows: 3, maxRows: 10 }"
                                        />
                                    </div>
                                    <div>
                                        截图:
                                        <uploadFile v-if="refuseFile" :value.sync="refuseFile" :fileCount="15" uploadType="image" />
                                    </div>
                                </div>
                                <a href="javascript:;" style="margin-right: 20px">驳回</a>
                                </a-popconfirm>
                                <a
                                    href="javascript:;"
                                    style="margin-right: 20px"
                                    v-show="active != '1'"
                                    v-if="
                                        role.roleCode == 'operator' ||
                                        role.roleCode == 'kuaishouOperationManager' ||
                                        role.roleCode == 'admin' ||
                                        role.roleCode == 'operationAssistant' ||
                                        role.roleCode == 'touTiaoOperationManager'
                                    "
                                    @click="handleExamin(items)"
                                >
                                    通过审核
                                </a>
                                <a-dropdown style="margin-right: 20px">
                                    <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                                        更多操作
                                        <a-icon type="down" />
                                    </a>
                                    <a-menu slot="overlay">
                                        <a-menu-item key="0" v-show="active == '2'" v-if="items.userId == userInfo().id">
                                            <a href="javascript:;" style="margin-right: 20px" @click="edit(items, '2')">修改</a>
                                        </a-menu-item>
                                        <a-menu-item
                                            key="1"
                                            v-show="active != '3'"
                                            v-if="items.userId == userInfo().id || role.roleCode == 'designTeamLeader'"
                                        >
                                            <a href="javascript:;" style="margin-right: 20px" @click="personEdit(items, '2')">人员修改</a>
                                        </a-menu-item>
                                        <a-menu-item key="3" v-show="active != '3'">
                                            <a style="margin-right: 20px" @click="addImage(items)">添加封面</a>
                                        </a-menu-item>
                                        <a-menu-item key="4">
                                            <a style="margin-right: 20px" @click="showImage(items)">推荐封面</a>
                                        </a-menu-item>
                                        <a-menu-item key="5">
                                            <a href="javascript:;" style="margin-right: 20px" @click="editTagList(items)">修改标签</a>
                                        </a-menu-item>
                                    </a-menu>
                                </a-dropdown>
                                <a v-show="active === '1'" style="margin-right: 20px" @click="handleRecord(items)">同步记录</a>
                                <a-checkbox :value="items.id" style="float: right" v-show="active == '0' || active == '1'"></a-checkbox>
                                <br />
                                {{ items.createTime }}
                            </span>
                            </div>
                        </div>
                        </a-checkbox-group>
                        <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>
                    <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
                        <img
                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
                            alt
                            v-if="!loading"
                        />
                        <div v-else></div>
                    </div>
                </a-spin>
            </a-tab-pane>
        </a-tabs>
        <a-modal title="封面上传" @cancel="closeImage" @afterClose="closeImage" v-model="addImageVisible">
            <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 class="add-image-material">
                <uploadFile
                    v-if="addImageVisible"
                    :value.sync="urlListImage.url"
                    :checkFile="fileWater"
                    @overUpload="overUploadImage"
                    @removeUpload="deleteImage"
                    :fileCount="15"
                    uploadType="image"
                />
                <span
                    v-if="material.filter((item) => item == false).length > 0 && urlListImage.url.length > 0"
                    style="color: red"
                >
                    上传素材的尺寸不符,请修改(
                    <span v-for="(item, index) of material" :key="index" v-show="!item">第{{ index + 1 }}张</span>出错)
                </span>
                <span
                    v-else-if="urlListImage.url.length > 0 && material.filter((item) => item == false).length == 0"
                    style="color: green"
                    >上传成功</span
                >
            </a-form-item>
        </a-modal>
        <a-modal title="数据详情" v-model="showDataBool" :footer="null">
        <div class="bhShow" style="display: flex; justify-content: space-between; height: 400px">
            <div v-if="douyinData" class="show-data">
                <span style="color: black; font-size: 18px; text-align: center; width: 100%">抖音</span>
                <span>消耗:{{ douyinData.cost }}</span>
                <span>封面点击:{{ douyinData.click }}</span>
                <span>封面展示:{{ douyinData.showNum }}</span>
                <span>激活:{{ douyinData.active }}</span>
                <span>转化量:{{ douyinData.convertNum }}</span>
                <span>表单提交:{{ douyinData.form }}</span>
                <span>下载注册:{{ douyinData.register }}</span>
                <span>视频总播放:{{ douyinData.totalPlay }}</span>
                <span>视频有效播放:{{ douyinData.validPlay }}</span>
            </div>
            <div v-if="kuaishouData" class="show-data">
                <span style="color: black; font-size: 18px; text-align: center; width: 100%">快手</span>
                <span>消耗:{{ kuaishouData.charge }}</span>
                <span>封面点击:{{ kuaishouData.photoClick }}</span>
                <span>封面展示:{{ kuaishouData.photoShow }}</span>
                <span>素材曝光数:{{ kuaishouData.aclick }}</span>
                <span>激活数:{{ kuaishouData.activation }}</span>
                <span>行为数:{{ kuaishouData.bclick }}</span>
                <span>表单提交数:{{ kuaishouData.formCount }}</span>
            </div>
        </div>
        </a-modal>
        <a-modal
            :title="add ? '添加素材' : '修改素材'"
            v-model="visible"
            @cancel="close"
            @afterClose="close"
            :maskClosable="false"
            :width="800"
        >
            <template slot="footer">
                <a-button key="back" @click="close">取消</a-button>
                <a-button type="primary" :disabled="!confirmLoading" @click="handleOk" :loading="loadingElse">确定</a-button>
            </template>
            <a-form :form="form">
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="项目选择">
                <a-select
                    v-decorator="[
                        'projectId', // 给表单赋值或拉取表单时，该input对应的key
                        { rules: [{ required: true, message: '请选择项目!' }] },
                    ]"
                    @change="getProjectId"
                    @focus="getParticipateList"
                    showSearch
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    @search="getParticipateList"
                    :disabled="!add"
                >
                    <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
                        {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                            item.mediaId == '1'
                            ? '头条'
                            : item.mediaId == '2'
                            ? '快手'
                            : item.mediaId == '3'
                            ? '头条内广'
                            : '快手内广'
                        }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
                    </a-select-option>
                </a-select>
                </a-form-item>
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传" v-if="getData('projectId')">
                    <uploadFile
                        :checkFile="file"
                        :value.sync="urlList.url"
                        @overUpload="overUpload"
                        @removeUpload="removeUpload"
                        :fileCount="1"
                        uploadType="video"
                        :multiple="false"
                    />
                    <span v-if="repeat" style="color: red">此素材重复,请重新选择上传</span>
                    <span v-if="confirmLoading && urlList.url != ''" style="color: green">上传成功</span>
                </a-form-item>
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    label="封面上传"
                    class="add-image-material"
                    v-if="getData('projectId') && add && urlList.url != ''"
                >
                    <uploadFile
                        :value.sync="urlListImage.url"
                        :checkFile="fileWater"
                        @overUpload="overUploadImage"
                        @removeUpload="deleteImage"
                        :fileCount="15"
                        uploadType="image"
                    />
                    <span
                        v-if="material.filter((item) => item == false).length > 0 && urlListImage.url.length > 0"
                        style="color: red"
                    >
                        上传素材的尺寸不符,请修改(
                        <span v-for="(item, index) of material" :key="index" v-show="!item">第{{ index + 1 }}张</span>出错)
                    </span>
                    <span
                        v-else-if="urlListImage.url.length > 0 && material.filter((item) => item == false).length == 0"
                        style="color: green"
                    >
                        上传成功
                    </span>
                </a-form-item>
                <div v-if="add">
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
                    <a-select
                    v-decorator="[
                        'planId', // 给表单赋值或拉取表单时，该input对应的key
                        { rules: [{ required: true, message: '请选择策划!' }] },
                    ]"
                    showSearch
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    >
                    <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">{{
                        item.userName
                    }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
                    <a-select
                    v-decorator="[
                        'shotId', // 给表单赋值或拉取表单时，该input对应的key
                    ]"
                    showSearch
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    >
                    <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">{{
                        item.userName
                    }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
                    <a-select
                    v-decorator="[
                        'clipId', // 给表单赋值或拉取表单时，该input对应的key
                        { rules: [{ required: true, message: '请选择剪辑!' }] },
                    ]"
                    showSearch
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    >
                    <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">{{
                        item.userName
                    }}</a-select-option>
                    </a-select>
                </a-form-item>
                </div>
                <a-form-item
                    v-if="add && visible"
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 12 },
                    }"
                    label="形式标签"
                >
                    <el-cascader
                        placeholder="搜索你想要的形式标签"
                        :options="departTreeModality"
                        v-decorator="[
                            'modalityTagList', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择形式标签!' }] },
                        ]"
                        :props="{
                            multiple: true,
                            value: 'id',
                            label: 'tagName',
                            emitPath: false,
                            checkStrictly: true,
                            expandTrigger: 'hover',
                        }"
                        filterable
                        style="width: 100%"
                    >
                    </el-cascader>
                </a-form-item>
                <a-form-item
                    v-if="add && visible"
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 12 },
                    }"
                    label="场景标签"
                >
                    <el-cascader
                        placeholder="搜索你想要的场景标签"
                        :options="departTreeSence"
                        v-decorator="[
                            'senceTagList', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择场景标签!' }] },
                        ]"
                        :props="{
                            multiple: true,
                            value: 'id',
                            label: 'tagName',
                            emitPath: false,
                            checkStrictly: true,
                            expandTrigger: 'hover',
                        }"
                        filterable
                        style="width: 100%"
                    >
                    </el-cascader>
                </a-form-item>
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 12 },
                    }"
                    label="基调标签"
                    v-if="add && visible"
                >
                    <el-cascader
                        placeholder="搜索你想要的基调标签"
                        :options="departTreeMod"
                        v-decorator="[
                            'modTagList', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择基调标签!' }] },
                        ]"
                        :props="{
                            multiple: true,
                            value: 'id',
                            label: 'tagName',
                            emitPath: false,
                            checkStrictly: true,
                            expandTrigger: 'hover',
                        }"
                        filterable
                        style="width: 100%"
                    >
                    </el-cascader>
                </a-form-item>
                <a-form-item
                    v-if="add"
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 18 },
                    }"
                    label="其他"
                >
                    <template v-for="(tag, index) in tags">
                        <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                            <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                                {{ `${tag.slice(0, 20)}...`}}
                            </a-tag>
                        </a-tooltip>
                        <a-tag v-else :key="index" :closable="true" :afterClose="() => handleClose(tag)">{{ tag }}</a-tag>
                    </template>
                    <a-input
                        v-if="inputVisible"
                        ref="input"
                        type="text"
                        size="small"
                        :style="{ width: '78px' }"
                        :value="inputValue"
                        @change="handleInputChange"
                        @blur="handleInputConfirm"
                        @keyup.enter="handleInputConfirm"
                    />
                    <a-tag v-else @click="showInput" style="background: #fff; borderstyle: dashed">
                        <a-icon type="plus" />New Tag</a-tag>
                    </a-form-item>
                    <a-form-item
                        v-if="add"
                        :label-col="labelCol"
                        :wrapper-col="{
                            xs: { span: 24 },
                            sm: { span: 12 },
                        }"
                        label="描述"
                    >
                    <a-textarea
                        placeholder="请输入描述"
                        v-decorator="[
                            'materialDescribe', // 给表单赋值或拉取表单时，该input对应的key
                        ]"
                        :auto-size="{ minRows: 3, maxRows: 10 }"
                    />
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal style="overflow-y: auto;" title="素材详情" v-model="visibleDetail" @cancel="handleBudgetCancel" width="70%" :footer="null">
            <div style="width: 100%; height: 35px">
                <a-button type="primary" @click="setSuccess" style="float: right">
                    {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
                </a-button>
            </div>
            <div style="display: flex; height: 700px">
                <div
                    class="video-content"
                    style="
                        width: 50%;
                        padding: 10px;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: center;
                        border-right: 1px solid #f2f2f2;
                    "
                >
                    <video class="video" :src="showUrl" controls="controls" style="height: 50%" controlslist="nodownload">
                        您的浏览器不支持 video 标签。
                    </video>
                    <div class="downLoad" style="height: 50%; overflow: auto">
                        <a-button @click="onCheckAllImageChange" v-if="model.length > 0">
                            {{ checkAllImage ? '取消 ( ' + checkArrImage.length + ' )' : '全选' }}
                        </a-button>
                        <ul
                            class="actor-photo-list"
                            :style="{ width: model.length > 4 ? 25 * model.length + '%' : '100%' }"
                            v-if="model.length > 0"
                        >
                        <a-checkbox-group
                            v-model="checkArrImage"
                            style="width: 100%; display: flex; padding-left: 0"
                            @change="onChangeCheckImage"
                        >
                            <li v-for="(item, index) of model" :key="index">
                            <a-checkbox :value="item.id" style="position: absolute; z-index: 100"></a-checkbox>
                            <img class="video" :src="item.url" @click="coverPreviewShowModal(item, index)" />
                            <span
                                class="tag-video"
                                :style="{
                                backgroundColor:
                                    item.status == 0 ? 'rgba(0, 0, 0)' : item.status == 1 ? 'rgba(0, 180, 100)' : 'red',
                                }"
                                >{{ item.status == 0 ? '未审核' : item.status == 1 ? '已批准' : '已驳回' }}</span
                            >
                            </li>
                        </a-checkbox-group>
                        </ul>
                        <div v-else style="height: 100%; display: flex; justify-content: center; align-items: center">
                        <img
                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
                            alt
                        />
                        </div>
                    </div>
                </div>
                <a-modal title="图片预览" v-model="coverPreviewVisible" :footer="null">
                    <a-carousel arrows class="cover_carousel_con">
                        <div v-for="(item, index) in modelNew" :key="index" class="content">
                        <img :src="item.url" :width="300" />
                        <div style="margin-top: 10px">
                            <a-button type="primary" @click="editImage(item, '1')">通过审核</a-button>
                            <a-divider type="vertical" />
                            <a-popconfirm @confirm="editImage(item, '2')">
                            <div slot="title">
                                <div>
                                驳回原因:
                                <a-textarea
                                    placeholder="请输入原因"
                                    v-model="refuseReasonImage"
                                    :autosize="{ minRows: 3, maxRows: 10 }"
                                />
                                </div>
                            </div>
                            <a-button type="primary">驳回</a-button>
                            </a-popconfirm>
                        </div>
                        </div>
                        <a-icon
                            type="left-circle"
                            slot="prevArrow"
                            slot-scope
                            style="left: 10px; zindex: 9; font-size: 30px; color: black"
                        />
                        <a-icon
                            type="right-circle"
                            slot="nextArrow"
                            slot-scope
                            style="right: 10px; zindex: 9; font-size: 30px; color: black"
                        />
                    </a-carousel>
                </a-modal>
                <div style="flex: 3; padding: 10px; box-sizing: border-box; overflow-y: auto;">
                    <a-form v-if="detail" class="detail ant-advanced-search-form" layout="inline">
                        <div v-if="detail.parameter" style="display: flex">
                            <a-form-item label="视频时长" v-if="detail.parameter.second" style="flex: 1">
                                {{ detail.parameter.second }}秒
                            </a-form-item>
                            <a-form-item label="尺寸" style="flex: 1" v-if="detail.parameter.width">
                                {{ detail.parameter.width }}*{{ detail.parameter.height }}
                            </a-form-item>
                            <a-form-item label="大小" style="flex: 1" v-if="detail.parameter.size">
                                {{ detail.parameter.size}}
                            </a-form-item>
                        </div>
                        <div v-if="detail.ascription" style="display: flex">
                            <a-form-item label="策划" style="flex: 1">{{ detail.ascription.planName }}</a-form-item>
                            <a-form-item label="拍摄" style="flex: 1">{{ detail.ascription.shotName }}</a-form-item>
                            <a-form-item label="剪辑" v-if="detail.ascription.clipName" style="flex: 1">
                                {{ detail.ascription.clipName}}
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="标签" v-if="tagInfoList.length > 0">
                                <a-tag v-for="(item, index) of tagInfoList" :key="index">{{ item.tagName }}</a-tag>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="其他" v-if="detail.tag">
                                <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="无水印素材下载" v-if="name">
                                <a-button type="primary" @click="downloadByBlobShowUrl">下载</a-button>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="水印素材下载" v-if="name">
                                <a-button type="primary" @click="downloadByBlob" v-if="showUrlWater">下载</a-button>
                                <span v-else>水印素材生成中,请一分钟后刷新</span>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="水印素材链接" v-if="showUrlWater">
                                <a-input v-model="showUrlWater" type="text" read-only />
                            </a-form-item>
                        </div>
                        <div style="width: 100%" class="downLoad">
                            <a-form-item label="生成水印素材" style="width: 100%">
                                <a-select :defaultValue="4" v-model="size" style="width: 80%">
                                <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">
                                    {{ item.name }}
                                </a-select-option>
                                </a-select>
                                <a-button type="primary" @click="getWater" :loading="waterLoading">生成</a-button>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="审核人" v-if="active == '2' && detail.auditorName">
                                {{ detail.auditorName }}
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="驳回原因" v-if="active == '2'">
                                {{ refuseReason ? refuseReason : '无原因' }}</a-form-item>
                        </div>
                        <div>
                            <a-form-item label="截图" v-if="active == '2'">
                                <div v-if="refuseFile" style="width: 100%">
                                    <img
                                        style="width: 100px; height: auto; margin: 5px"
                                        @click="showBoHui(item)"
                                        :src="item"
                                        v-for="(item, index) in refuseFile"
                                        :key="index"
                                        alt
                                    />
                                </div>
                                <div v-else>无截图</div>
                            </a-form-item>
                        </div>
                        <div>
                        <a-form-item
                            label="视频审核"
                            v-if="
                            active != '2' &&
                            (role.roleCode == 'operator' ||
                                role.roleCode == 'kuaishouOperationManager' ||
                                role.roleCode == 'admin' ||
                                role.roleCode == 'operationAssistant' ||
                                role.roleCode == 'touTiaoOperationManager')
                            "
                        >
                            <a-popconfirm
                                @confirm="edit(null, '0', '1')"
                                v-show="active != '1'"
                                v-if="
                                    role.roleCode == 'operator' ||
                                    role.roleCode == 'kuaishouOperationManager' ||
                                    role.roleCode == 'admin' ||
                                    role.roleCode == 'operationAssistant' ||
                                    role.roleCode == 'touTiaoOperationManager'
                                "
                            >
                            <div slot="title">
                                <div>
                                    广告语:
                                    <a-textarea placeholder="请输入" v-model="refuseReason" :autosize="{ minRows: 3, maxRows: 10 }" />
                                </div>
                            </div>
                            <a-button type="primary" v-if="active == '0'" style="margin-right: 10px">通过审核</a-button>
                            </a-popconfirm>
                            <a-popconfirm @confirm="okEdit" v-show="active != '2'">
                                <div slot="title">
                                    <div>
                                        驳回原因:
                                        <a-textarea
                                            placeholder="请输入原因"
                                            v-model="refuseReason"
                                            :autosize="{ minRows: 3, maxRows: 10 }"
                                        />
                                    </div>
                                    <div>
                                        截图:
                                        <uploadFile v-if="refuseFile" :value.sync="refuseFile" :fileCount="15" uploadType="image" />
                                    </div>
                                </div>
                                <a-button type="primary" v-show="active != '2'">驳回</a-button>
                            </a-popconfirm>
                        </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="封面审核" style="width: 120%">
                                <a-button type="primary" :disabled="checkArrImage.length == 0" @click="editImageAll('1')"
                                >通过审核</a-button>
                                <a-popconfirm @confirm="editImageAll('2')" v-show="active != '2'">
                                    <div slot="title">
                                        <div>
                                            驳回原因:
                                            <a-textarea
                                                placeholder="请输入原因"
                                                v-model="refuseReasonImage"
                                                :autosize="{minRows: 3, maxRows: 10}"
                                            />
                                        </div>
                                    </div>
                                    <a-button type="primary" :disabled="checkArrImage.length != 1" style="margin-left: 10px">驳回</a-button>
                                </a-popconfirm>
                            </a-form-item>
                        </div>
                    </a-form>
                    <div class="solgan-whole-content">
                        <span class="solgan-title-header" style="display: inline-block;width: 60px;">广告语：</span>
                        <a-form v-if="slogansDetail.length" :form="solganForm" class="solgan-form-class">
                            <a-form-item
                                v-for="item in slogansDetail"
                                :key="item.id"
                                class="solgan-form-model"
                                :label-col="labelCol"
                                :wrapper-col="wrapperCol"
                                label=""
                            >
                                <div style="width: 430px;">
                                    <template v-if="item.name === defaultSolganTitle">
                                        <a-input
                                            v-decorator="[
                                                item.name,
                                                {
                                                    rules: [{validator: validatePass, trigger: 'blur'}],
                                                    initialValue: item.value
                                                }
                                            ]"
                                            class="examin-form-input"
                                            placeholder="请输入"
                                            @change="handleSloganSearchChange($event, item.name, item.id)"
                                        />
                                        <span class="examin-form-num">{{ item.lenSize }}/30</span>
                                        <a-icon class="examin-form-icon" type="check" @click="handleSolganCheck(item)"/>
                                    </template>
                                    <template v-else>
                                        <span class="default-value-class">{{ item.slogan }}</span>
                                        <a-icon class="examin-form-icon" type="edit" @click="handleSolganEdit(item)"/>
                                    </template>
                                    <a-icon class="examin-form-icon icon-delete" type="delete" @click="handleDelSolgan(item)"/>
                                </div>
                                <div v-if="item.name === defaultSolganTitle" class="ad-name-tags-class solgan-tags-change">
                                    <div v-if="item.tabStatus === 'alone'" class="name-tags-left">
                                        <a-tag
                                            v-for="val in item.updateTagsList"
                                            :key="val.id"
                                            color="#1890ff"
                                            @click="handleSloganAddTags(val.name, item.name, item.id)"
                                        >
                                            + {{ val.name }}
                                        </a-tag>
                                    </div>
                                    <div v-if="item.tabStatus === 'all'" class="name-tags-left">
                                        <a-tag
                                            v-for="val in item.defaultTagsList"
                                            :key="val.id"
                                            color="#1890ff"
                                            @click="handleSloganAddTags(val.name, item.name, item.id)"
                                        >
                                            + {{ val.name }}
                                        </a-tag>
                                    </div>
                                    <div v-if="item.tabStatus === 'alone'" class="solgan-icon-type"><a @click="handleExaminMoreList(item.id, 'more')">更多</a></div>
                                    <div v-if="item.tabStatus === 'all'" class="solgan-icon-type"><a @click="handleExaminMoreList(item.id, 'little')">收起</a></div>
                                </div>
                            </a-form-item>
                        </a-form>
                        <span v-else class="solgan-title-header">暂无</span>
                    </div>
                </div>
            </div>
        </a-modal>
        <a-modal title="查看截图" v-model="bohuiShow" :width="300" :footer="null">
        <img :src="bohui" alt style="width: 100%" />
        </a-modal>
        <a-modal title="人员修改" v-model="personVisible" @afterClose="closePerson">
            <template slot="footer">
                <a-button key="back" @click="closePerson">取消</a-button>
                <a-button key="submit" type="primary" :loading="loadingPerson" @click="handleOkPerson">确定</a-button>
            </template>
            <a-form :form="formPerson">
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
                    <a-select
                        v-decorator="[
                            'planId', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择策划!' }] },
                        ]"
                        showSearch
                        optionFilterProp="children"
                        :filterOption="filterOption"
                    >
                        <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">
                            {{ item.userName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item v-if="activeKey === 'video'" :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄">
                    <a-select
                        v-decorator="[
                            'shotId', // 给表单赋值或拉取表单时，该input对应的key
                        ]"
                        showSearch
                        optionFilterProp="children"
                        :filterOption="filterOption"
                    >
                        <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">
                            {{ item.userName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
                    <a-select
                        v-decorator="[
                            'clipId', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择剪辑!' }] },
                        ]"
                        showSearch
                        optionFilterProp="children"
                        :filterOption="filterOption"
                    >
                        <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">
                            {{ item.userName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal title="标签修改" v-model="tagInfoListVisible">
            <template slot="footer">
                <a-button
                key="back"
                @click="
                    tagInfoListVisible = false
                    departValueInfoModality = []
                    departValueInfoMod = []
                    departValueInfoContent = []
                    departValueInfoSence = []
                    tagCode = null
                "
                >
                    取消
                </a-button>
                <a-button key="submit" type="primary" :loading="loadingTag" @click="handleOkTag">确定</a-button>
            </template>
            <a-form-item
                :label-col="labelCol"
                :wrapper-col="{
                    xs: { span: 24 },
                    sm: { span: 12 },
                }"
                label="形式"
            >
                <el-cascader
                    placeholder="搜索你想要的形式标签"
                    :options="departTreeModality"
                    v-model="departValueInfoModality"
                    :props="{
                        multiple: true,
                        value: 'id',
                        label: 'tagName',
                        emitPath: false,
                        checkStrictly: true,
                        expandTrigger: 'hover',
                    }"
                    filterable
                    style="width: 100%"
                ></el-cascader>
            </a-form-item>
            <a-form-item
                :label-col="labelCol"
                :wrapper-col="{
                    xs: { span: 24 },
                    sm: { span: 12 },
                }"
                label="场景"
            >
                <el-cascader
                    placeholder="搜索你想要的场景标签"
                    :options="departTreeSence"
                    v-model="departValueInfoSence"
                    :props="{
                        multiple: true,
                        value: 'id',
                        label: 'tagName',
                        emitPath: false,
                        checkStrictly: true,
                        expandTrigger: 'hover',
                    }"
                    filterable
                    style="width: 100%"
                ></el-cascader>
            </a-form-item>
            <a-form-item
                :label-col="labelCol"
                :wrapper-col="{
                    xs: { span: 24 },
                    sm: { span: 12 },
                }"
                label="基调"
            >
                <el-cascader
                    placeholder="搜索你想要的基调标签"
                    :options="departTreeMod"
                    v-model="departValueInfoMod"
                    :props="{
                        multiple: true,
                        value: 'id',
                        label: 'tagName',
                        emitPath: false,
                        checkStrictly: true,
                        expandTrigger: 'hover',
                    }"
                    filterable
                    style="width: 100%"
                ></el-cascader>
            </a-form-item>
        </a-modal>
        <a-modal title="推荐封面" v-model="chouzhen" width="60%">
            <template slot="footer">
                <a-button key="back" @click="chouzhen = false">关闭</a-button>
            </template>
            <ul v-if="chouzhenList.length > 0" style="height: 600px; overflow: auto">
                <li v-for="(item, index) of chouzhenList" :key="index" class="chouzhen" :class="{ first: index === 0 }">
                    <img
                        :src="item.url"
                        alt
                        style="width: 100%"
                        @click="
                        showImageStr = item.url
                        showImageChouzhen = true
                        "
                    />
                </li>
            </ul>
            <div style="clear: both"></div>
            <a-modal title="图片预览" v-model="showImageChouzhen" :footer="null">
                <img :src="showImageStr" style="width: 100%" />
            </a-modal>
        </a-modal>
        <account-check ref="check" @synchro="implement"></account-check>
        <accountCheckBytedance ref="accountCheckBytedance" @synchro="implement" />
        <permission-modal ref="modalForm" @ok="modalFormOkElse"></permission-modal>
        <a-modal
            v-if="recommendVisible"
            :visible="recommendVisible"
            title="系统推荐标题"
            dialog-class="recommend-modal"
            @ok="handleRecommendSure"
            @cancel="handleRecommendCancel"
        >
            <div>
                <div class="recommend-modal-header">
                    <div style="margin-bottom:30px">
                        <span style="display:inline-block;width:40px">行业</span>
                        <a-cascader
                            style="margin-top: 1rem;width:200px"
                            :options="recSearchOptions"
                            :showSearch="{recomFilter}"
                            expandTrigger="hover"
                            @change="handleRecSelectChang"
                            placeholder="请选择行业"
                        >
                            <a-icon type="smile" slot="suffixIcon" class="test" />
                        </a-cascader>
                    </div>
                    <div style="margin-bottom:18px">
                        <span style="display:inline-block;width:60px;margin-left: 20px;">关键词</span>
                        <a-input placeholder="请输入关键词" v-model="keyWordRec" style="width: 150px"/>
                    </div>
                    <div style="margin-bottom:18px; margin-left: 20px;">
                        <a-button type="primary" @click="handleSearchTitle">生成</a-button>
                    </div>
                </div>
                <p>已选：{{ finallyCheckedResult && finallyCheckedResult.length || 0}} 个</p>
                <div class="recommend-modal-content">
                    <a-checkbox-group @change="handleCheckBoxChang">
                        <span
                            class="check-box-class"
                            v-for="(item, index) in titleResult"
                            :key="index"
                        >
                            <a-checkbox :value="item">{{ item }}</a-checkbox>
                        </span>
                    </a-checkbox-group>
                </div>
            </div>
        </a-modal>
        <a-modal
            v-if="causeVisible"
            title="审核通过"
            dialog-class="examin-modal"
            :visible="causeVisible"
            :confirm-loading="causeConfirmLoading"
            @ok="handleCauseSure"
            @cancel="handleCauseCancel"
        >
            <div>
                <div class="acount-title">
                    <div class="acount-title-left">素材名称</div>
                    <div class="acount-title-right">
                        <div class="only-title-mater">{{ currentPageOnlyList.materialName }}</div>
                    </div>
                </div>
                <div class="acount-title push-plate">
                    <div class="acount-title-left">创意标题</div>
                    <div class="acount-title-right">
                        <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
                        <!-- TODO 暂时功能隐藏 -->
                        <!-- <a-button class="examin-select-title" @click="handleSelectTitle">选标题</a-button> -->
                        <span style="margin-left: 20px;">已填：{{ titleFiledResult.length || 0 }}</span>
                    </div>
                </div>
                <div class="acount-title">
                    <div class="acount-title-left"></div>
                    <div class="acount-title-right">
                        <a-form :form="examinForm">
                            <a-form-item
                                v-for="item in defaultFormList"
                                :key="item.id"
                                class="examin-form-model"
                                :label-col="labelCol"
                                :wrapper-col="wrapperCol"
                                label=""
                            >
                                <a-input
                                    v-decorator="[
                                        item.name,
                                        {rules: [
                                            {validator: validatePass, trigger: 'blur'}
                                        ]}
                                    ]"
                                    class="examin-form-input"
                                    :id="item.name"
                                    placeholder="请输入"
                                    @change="handleFormInputChang($event, item.name, item.id)"
                                />
                                <span class="examin-form-num">{{ item.lenSize }}/30</span>
                                <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
                                <div class="ad-name-tags-class">
                                    <div v-if="item.tabStatus === 'alone'" class="name-tags-left">
                                        <a-tag
                                            v-for="val in item.updateTagsList"
                                            :key="val.id"
                                            color="#1890ff"
                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
                                        >
                                            + {{ val.name }}
                                        </a-tag>
                                    </div>
                                    <div v-if="item.tabStatus === 'all'" class="name-tags-left">
                                        <a-tag
                                            v-for="val in item.defaultTagsList"
                                            :key="val.id"
                                            color="#1890ff"
                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
                                        >
                                            + {{ val.name }}
                                        </a-tag>
                                    </div>
                                    <div v-if="item.tabStatus === 'alone'"><a @click="handleMoreTagsShow(item.id, 'more')">更多</a></div>
                                    <div v-if="item.tabStatus === 'all'"><a @click="handleMoreTagsShow(item.id, 'little')">收起</a></div>
                                </div>
                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </div>
        </a-modal>
        <a-modal
            v-if="batchVisible"
            title="审核通过"
            dialog-class="examin-modal"
            :visible="batchVisible"
            @ok="handleBatchSure"
            @cancel="handleBatchCancel"
        >
            <div>
                <div class="acount-title">
                    <div class="acount-title-left">素材名称</div>
                    <div class="acount-title-right" :style="accountMaster">
                        <div class="only-title-mater" v-for="item in modalShowBatchList" :key="item.id">
                            {{ item.materialName }}
                        </div>
                    </div>
                    <a-icon :type="materTitltStatus ? 'up' : 'down'" style="margin-top: 5px;margin-left: 15px;" @click="handleMaterTitleClick"/>
                </div>
                <div class="acount-title push-plate">
                    <div class="acount-title-left">创意标题</div>
                    <div class="acount-title-right">
                        <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
                        <!-- TODO 暂时功能隐藏 -->
                        <!-- <a-button class="examin-select-title" @click="handleSelectTitle">选标题</a-button> -->
                        <span style="margin-left: 20px;">已填：{{ titleFiledResult.length || 0 }}</span>
                    </div>
                </div>
                <div class="acount-title">
                    <div class="acount-title-left"></div>
                    <div class="acount-title-right">
                        <a-form :form="examinForm">
                            <a-form-item
                                v-for="item in defaultFormList"
                                :key="item.id"
                                class="examin-form-model"
                                :label-col="labelCol"
                                :wrapper-col="wrapperCol"
                                label=""
                            >
                                <a-input
                                    v-decorator="[
                                        item.name,
                                        { rules: [
                                            {validator: validatePass, trigger: 'blur'}
                                        ]}
                                    ]"
                                    class="examin-form-input"
                                    placeholder="请输入"
                                    @change="handleFormInputChang($event, item.name, item.id)"
                                />
                                <span class="examin-form-num">{{ item.lenSize }}/30</span>
                                <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
                                <div class="ad-name-tags-class">
                                    <div v-if="item.tabStatus === 'alone'" class="name-tags-left">
                                        <a-tag
                                            v-for="val in item.updateTagsList"
                                            :key="val.id"
                                            color="#1890ff"
                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
                                        >
                                            + {{ val.name }}
                                        </a-tag>
                                    </div>
                                    <div v-if="item.tabStatus === 'all'" class="name-tags-left">
                                        <a-tag
                                            v-for="val in item.defaultTagsList"
                                            :key="val.id"
                                            color="#1890ff"
                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
                                        >
                                            + {{ val.name }}
                                        </a-tag>
                                    </div>
                                    <div v-if="item.tabStatus === 'alone'"><a @click="handleMoreTagsShow(item.id, 'more')">更多</a></div>
                                    <div v-if="item.tabStatus === 'all'"><a @click="handleMoreTagsShow(item.id, 'little')">收起</a></div>
                                </div>
                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </div>
        </a-modal>
        <a-modal v-model="showDataListVisible" title="信息" :footer="null">
            <div v-if="showDataList">
                <p v-for="(item, index) in showDataList" :key="index">
                    素材:{{item.materialName}},{{item.message}};
                    <br/>
                    同步账户:{{item.ids.join()}}
                </p>
            </div>
            
        </a-modal>
        <a-modal
        v-if="recordDetailVisible"
        title="素材同步记录"
        :width="750"
        :visible="recordDetailVisible"
        dialog-class="usage-details-modal change-face-modal change-list-modal-show"
        :footer="null"
        @cancel="handleRecordCancel"
        >
            <div style="overflow: hidden;">	
                <a-table
                class="face-right-table"
                ref="table"
                size="middle"
                bordered
                :columns="recordColumns"
                :dataSource="recordData"
                :pagination="recordIpagination"
                :loading="toutiaoMateriaLoading"
                >
                    <span slot="createTime" slot-scope="text">
                        {{text}}
                    </span>
                </a-table>
            </div>
        </a-modal>
    </a-card>
</template>
<script>
import PermissionModal from '@/views/modules/material/modules/DepartModal';
import {JeecgListMixin} from '@/mixins/JeecgListMixin';
import JEllipsis from '@/components/jeecg/JEllipsis';
import UploadToAli from '@femessage/upload-to-ali';
import selectTable from '@/views/modules/material/comment/selectTable.vue';
import {fileCheck, fileEdit, fileEditAll, fileInsertV2, fileEditUpdate, fileEditUpdateBatch} from '@/api/actor';
import {deleteAction, getAction, postAction, putAction} from '@/api/manage';
import uploadFile from '@/components/uploadFile.vue';
import {closeAllVideoFun, stopOtherVideo} from '@/utils/videoControl';
import accountCheck from '@/views/modules/material/accountCheck';
import accountCheckBytedance from '@/views/modules/material/accountCheckBytedance';
import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue';
import {urlAcount} from '../account-config/account-config-server.js';

import qs from 'qs';
import {mapGetters} from 'vuex';
import moment from 'moment';
import BMF from 'browser-md5-file';
export default {
    name: 'creative-copywrit',
    mixins: [JeecgListMixin],
    components: {
        JEllipsis,
        UploadToAli,
        accountCheck,
        selectTable,
        uploadFile,
        PermissionModal,
        accountCheckBytedance,
        selectTableProject
    },
    data() {
        return {
            designList: [],
            adNameTags: [],
            materTitltStatus: false,
            accountMaster: {
                height: '35px',
                overflow: 'hidden'
            },
            batchVisible: false,
            showTabsTitle: '',
            taobaoSpecialOfferTitle: 'taobao',
            defaultSolganStatus: 'input',
            defaultSolganTitle: 'test',
            slogansDetail: [],
            titleFiledResult: [],
            applyTypeOption: [], // 最终的选择结果
            finallyCheckedResult: [], // 最终的选择结果
            titleResult: [],
            dataOne: [],
            recSearchOptions: [],
            keyWordRec: '',
            recommendVisible: false,
            labelCol: {span: 4},
            wrapperCol: {span: 14},
            solganForm: this.$form.createForm(this),
            examinForm: this.$form.createForm(this),
            defaultFormList: [],
            causeVisible: false,
            causeConfirmLoading: false,
            labelValue: [],
            options: [],
            departTree: [],
            departTreeModality: [],
            departTreeContent: [],
            departTreeSence: [],
            departTreeMod: [],
            departValue: [],
            departValueInfo: [],
            departValueInfoModality: [],
            departValueInfoContent: [],
            departValueInfoSence: [],
            departValueInfoMod: [],
            tagInfoList: [],
            tagInfoListVisible: false,
            tagCode: null,
            loadingTag: false,
            showImageChouzhen: false,
            showImageStr: null,
            coverPreviewVisible: false,
            chouzhen: false,
            chouzhenList: [],
            model: [],
            modelNew: [],
            goodsColumns: [
                {
                    title: '封面预览',
                    dataIndex: 'url',
                    align: 'center',
                    scopedSlots: {
                        customRender: 'url'
                    }
                },
                {
                    title: '审核',
                    align: 'center',
                    dataIndex: 'action',
                    width: 100,
                    scopedSlots: {
                        customRender: 'action'
                    }
                }
            ],
            addImageVisible: false,
            addImageData: null,
            projectId: '',
            inputVisible: false,
            inputValue: '',
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 12
                }
            },
            queryParam: {},
            dataElse: [],
            ascription: {
                clipId: [], // 剪辑人id
                shotId: [], // 拍摄人id
                planId: [], // 策划id
                planeId: [] // 平面id
            },
            show: true,
            visible: false,
            visibleDetail: false,
            personVisible: false,
            confirmLoading: false,
            loadingElse: false,
            loadingImage: false,
            loadingPerson: false,
            activeKey: 'video',
            active: '0',
            examinelList: [
                {
                    value: '0',
                    tab: '未审核'
                },
                {
                    value: '1',
                    tab: '已批准'
                },
                {
                    value: '2',
                    tab: '已驳回'
                }
            ],
            // 表头
            columns: [],
            urlList: {
                url: '',
                md5: '',
                name: ''
            },
            urlListImage: {
                url: [],
                md5: [],
                name: [],
                size: []
            },
            watermarkUrl: {
                url: '',
                md5: '',
                name: ''
            },
            url: {
                list: '/ctop/materialInfo/listV2'
            },
            form: this.$form.createForm(this),
            formPerson: this.$form.createForm(this),
            tags: [],
            refuseFile: [],
            refuseReason: '',
            refuseReasonImage: '',
            creativeCopywriter: '',
            customDomain: '',
            region: 'oss-cn-beijing',
            bucket: 'ctop-media',
            acceptVideo: 'video/mpeg,video/mp4',
            acceptImage: 'image/jpeg,image/jpg,image/png',
            accessKeyId: 'LTAIbNbqWzSOklQV',
            accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
            checkArr: [],
            checkAll: false,
            checkArrImage: [],
            showDataList:[],
            showDataListVisible: false,
            checkAllImage: false,
            showUrl: '',
            showUrlWater: '',
            materialName: '',
            materialDescribe: '',
            name: '',
            detail: null,
            add: true,
            id: '',
            role: {
                roleCode: '',
                roleName: ''
            },
            key: '0',
            mediaId: null,
            sizeType: [],
            size: null,
            repeat: false,
            excellent: 0,
            code: '',
            material: [],
            imageArrList: [],
            showDataBool: false,
            kuaishouData: null,
            douyinData: null,
            bohui: '',
            bohuiShow: false,
            waterLoading: false,
            videoTag: [],
            videoVisibleChange: '',
            modalShowBatchList: [],
            recordDetailVisible:false,
            recordSignature: null,
            toutiaoMateriaLoading:false,
            recordColumns:[
                {
                        title: '项目',
                        align: 'center',
                        dataIndex: 'projectName'
                    },
                    {
                        title: '账户Id',
                        align: 'center',
                        dataIndex: 'userId',
                customRender: function (text, records) {
                if(records.mediaId == '1' || records.mediaId == '3') {
                    return records.accountId
                }else if(records.mediaId == '2' || records.mediaId == '4') {
                    return records.userId
                }else {
                    return text
                }
                }
                    },
                    {
                        title: '媒体',
                        align: 'center',
                        dataIndex: 'mediaId',
                        customRender: function (text) {
                if (text == '1' || text == '3') {
                    return '头条'
                } else if (text == '2' || text == '4') {
                    return '快手'
                } else {
                    return text
                }
                }
                    },
                    {
                        title: '同步人',
                        align: 'center',
                        dataIndex: 'userName'
                    },
            {
                        title: '同步时间',
                        align: 'center',
                        dataIndex: 'createTime',
                scopedSlots: { customRender: 'createTime' },
                    },
                    {
                        title: '结果',
                        align: 'center',
                        dataIndex: 'remarks'
                    }
            ],
            recordData:[],
            recordIpagination: {
            current: 1,
            pageSize: 10,
            //   pageSizeOptions: ['10', '20', '30'],
            showTotal: (total, range) => {
                return range[0] + "-" + range[1] + " 共" + total + "条"
            },
            showQuickJumper: true,
            // showSizeChanger:true,
            // pageSizeOptions: ['10', '30', '50'],
            total: 0,
            onChange: (current, pageSize) => {
                // 切换分页时的回调，
                // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                this.recordIpagination.current = current;
                this.recordIpagination.pageSize= pageSize;
                this.handleGetRecordDetail(this.recordSignature)
            }
            },
        };
    },
    filters: {
        getDate(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? '0' + MM : MM;
            let d = date.getDate();
            d = d < 10 ? '0' + d : d;
            return y + '-' + MM + '-' + d;
        }
    },
    computed: {
        handleFilterName() {
            return val => {
                return this.examinForm.getFieldsValue()[val] ? this.examinForm.getFieldsValue()[val].length : 0;
            };
        },
        handleFilterSlogan() {
            return val => {
                return this.solganForm.getFieldsValue()[val] ? this.solganForm.getFieldsValue()[val].length : 0;
            };
        },
        dirImg() {
            let date = new Date();
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? '0' + MM : MM;
            let d = date.getDate();
            d = d < 10 ? '0' + d : d;
            return 'image/' + y + '-' + MM + '-' + d + '/';
        },
        dirVideo() {
            let date = new Date();
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? '0' + MM : MM;
            let d = date.getDate();
            d = d < 10 ? '0' + d : d;
            return 'video/' + y + '-' + MM + '-' + d + '/';
        }
    },
    created() {
        this.queryParam.type = 'VIDEO';
        this.queryParam.userId = this.userInfo().id;
        this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0';
        this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0';
        this.ipagination.pageSize = 8;
        this.getParticipateList(null);
        getAction('/sys/user/getRoleInfo', {
            userId: this.userInfo().id
        }).then(res => {
            this.role = res;
        });
        getAction('/ctop/videoWatermarkTemplate/list').then(res => {
            if (res.success) {
                this.sizeType = res.result.records;
            }
        });
        this.getTagListAll();
    },
    updated() {
        stopOtherVideo();
    },
    mounted() {
        setInterval(() => {
            document.querySelectorAll('.el-cascader-node__label').forEach(el => {
                el.onclick = function () {
                    if (this.previousElementSibling) {
                        this.previousElementSibling.click();
                    }
                };
            });
        }, 1000);
        getAction('/ctop/tagInfo/treeList', {
            pageSize: 10000
        }).then(res => {
            if (res.success) {
                this.options = res.result.records;
            }
            else {
                this.$message.error('数据请求失败！');
            }
        });
        this.getHangye();
        this.handleGetCreativeWord();
        this.handleGetDesignList();
    },
    watch: {
        $route(n, o) {
            if (n.path === '/modules/material/videoMaterial') {
                this.queryParam.userId = this.userInfo().id;
                this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0';
                this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0';
                this.loadData();
            }
        },
        'queryParam.productId': function (n, o) {
            if (n != '') {
                this.getList(n);
                this.checkArr = [];
                this.$refs.selectTableProject.keyValue = '';
                this.$refs.selectTableProject.getData(n);
            }
        },
        visibleDetail(n, o) {
            if (!n) {
                this.refuseFile = [];
                this.refuseReason = '';
                closeAllVideoFun();
            }
        },
        defaultFormList: {
            deep: true,
            handler(n, o) {
                const result = [];
                this.defaultFormList = n;
                this.$nextTick(() => {
                    this.defaultFormList.forEach(item => {
                        if (item.value) {
                            result.push(item.value);
                        }
                        this.examinForm.setFieldsValue({[item.name]: item.value});
                    });
                    this.titleFiledResult = result;
                });
            }
        },
        labelValue: {
            deep: true,
            handler(n, o) {
                if (n.length >= 1) {
                    this.queryParam.tagCode = n[n.length - 1];
                }
                else {
                    this.queryParam.tagCode = '';
                }
            }
        }
    },
    methods: {
        ...mapGetters(['nickname', 'avatar', 'userInfo']),
        handleRecordCancel(){
            this.recordDetailVisible = false;
        },
        handleRecord(data){
            this.recordIpagination.current = 1
            this.handleGetRecordDetail(data.code);
            this.recordSignature = data.code;
            this.recordDetailVisible = true;
            this.toutiaoMateriaLoading = true;
            this.kuaishouMateriaLoading = true;
        },
        handleGetRecordDetail(id) {
            // 测试code '7b676546bfb50f1b992d44bd479a1536'
            var params = {}
            params.signature = id
            params.pageNo = this.recordIpagination.current
            params.pageSize = this.recordIpagination.pageSize
            getAction('/ctop/materialUpload/uploadDetail', params).then(result => {
                if (result.success) {
                
                    // 头条处理数据
                    this.recordData = result.result.list || []
                    this.recordIpagination.total = result.result.total || 0
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            }).finally(() => {
                this.toutiaoMateriaLoading = false;
                this.kuaishouMateriaLoading = false;
            });
        },
        handleBudgetCancel() {
            this.defaultSolganTitle = 'test';
            this.defaultSolganStatus = 'input';
            this.visibleDetail = false;
        },
        // 获取设计人员
        handleGetDesignList() {
            postAction('/ctop/kuaishou/videoReport/getDesignList').then(result => {
                if (result.success) {
                    this.designList = result.result;
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleSubmit() {
            if (!this.queryParam.productId) {
                this.$refs.selectTableProject.keyValue = '';
                this.$refs.selectTableProject.getData();
            }
            this.searchQuery();
            this.checkArr = [];
        },
        handleExaminMoreList(val, type) {
            if (type === 'more') {
                this.slogansDetail.forEach(item => {
                    if (item.id === val) {
                        item.tabStatus = 'all';
                    }
                });
            }
            else if (type === 'little') {
                this.slogansDetail.forEach(item => {
                    if (item.id === val) {
                        item.tabStatus = 'alone';
                    }
                });
            }
        },
        handleMoreTagsShow(val, type) {
            if (type === 'more') {
                this.defaultFormList.forEach(item => {
                    if (item.id === val) {
                        item.tabStatus = 'all';
                    }
                });
            }
            else if (type === 'little') {
                this.defaultFormList.forEach(item => {
                    if (item.id === val) {
                        item.tabStatus = 'alone';
                    }
                });
            }
        },
        handleGetCreativeWord() {
            getAction('/ctop/ByteDanceCreativeWordPackage/list').then(result => {
                if (result.code === 0) {
                    this.adNameTags = result.result.records;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        validatePass(rule, value, callback) {
            this.$nextTick(() => {
                let finallyLenList = this.handleJudgeExec(value);
                let newOptionList = [];
                finallyLenList.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            newOptionList.push(val);
                        }
                    });
                });
                let updateFinallyResult = newOptionList.map(val => val.name);
                let resultSelectSize = 0;
                if (updateFinallyResult.length) {
                    const inputDefaultLen = this.handleExportRules(value);
                    let tagsLen = updateFinallyResult.length * 2;
                    let tagsSureLen = 0;
                    updateFinallyResult.forEach(item => {
                        this.adNameTags.forEach(val => {
                            if (item === val.name) {
                                tagsSureLen += val.maxWordLen;
                            }
                        });
                    });
                    updateFinallyResult.forEach(item => {
                        tagsLen += item.length;
                    });
                    resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + updateFinallyResult.length;
                }
                else {
                    resultSelectSize = this.handleExportRules(value);
                }
                if (resultSelectSize === 0) {
                    callback(new Error('请输入'));
                }
                else if (resultSelectSize > 30 || resultSelectSize < 5) {
                    callback(new Error('创意标题5-30个字'));
                }
                else if (updateFinallyResult.length > 2) {
                    callback(new Error('最多选择两个词包'));
                }
                else {
                    callback();
                }
            });
        },
        handleJudgeExec(item) {
            let re = /\{(.+?)\}/g;
            let array = [];
            let temp;
            while ((temp = re.exec(item))) {
                array.push(temp[1]);
            };
            return array;
        },
        handleSloganAddTags(item, field, formId) {
            let node = document.getElementById(field);
            let startPos = node.selectionStart; // input 第0个字符到选中的字符
            let endPos = node.selectionEnd; // 选中的字符到最后的字符
            let txt = node.value;
            this.$nextTick(() => {
                let finallyLenList = this.handleJudgeExec(txt);
                let updateFinallyResult = this.adNameTags.filter(item => finallyLenList.includes(item.name)).map(val => val.name);
                if (updateFinallyResult.length >= 2) {
                    this.$message.error('最多选择两个词包');
                    return;
                }
                if (startPos === 0 || endPos === 0) {
                    txt += '{' + item + '}';
                    this.solganForm.setFieldsValue({[field]: txt});
                }
                else {
                    this.solganForm.setFieldsValue({[field]: txt.substring(0, startPos) + '{' + item + '}' + txt.substring(endPos)});
                    node.selectionStart = startPos + item.length + 6;
                    node.selectionEnd = startPos + item.length + 6;
                }
                node.focus();
                node.blur();
            });
            this.$nextTick(() => {
                const dynamicWordPackIds = [];
                let changeData = this.handleJudgeExec(this.solganForm.getFieldsValue()[field]);
                let newOptionList = [];
                changeData.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            newOptionList.push(val);
                        }
                    });
                });
                let updateChangeData = newOptionList.map(val => val.name);
                const inputDefaultLen = this.handleExportRules(this.solganForm.getFieldsValue()[field]);
                let tagsLen = updateChangeData.length * 2;
                let tagsSureLen = 0;
                let resultSelectSize = 0;
                updateChangeData.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            tagsSureLen += val.maxWordLen;
                            dynamicWordPackIds.push(val.creativeWordId);
                        }
                    });
                });
                updateChangeData.forEach(item => {
                    tagsLen += item.length;
                });
                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + updateChangeData.length;
                this.slogansDetail.forEach(item => {
                    if (item.id === formId) {
                        item.lenSize = resultSelectSize;
                        item.value = this.solganForm.getFieldsValue()[field];
                        item.wordPackId = dynamicWordPackIds;
                    }
                });
            });
        },
        // 点击获取光标位置进行字段插入
        handleGetChangeAll(item, field, formId) {
            let node = document.getElementById(field);
            let startPos = node.selectionStart; // input 第0个字符到选中的字符
            let endPos = node.selectionEnd; // 选中的字符到最后的字符
            let txt = node.value;
            this.$nextTick(() => {
                let finallyLenList = this.handleJudgeExec(txt);
                let arr = [];
                finallyLenList.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            arr.push(val);
                        }
                    });
                });
                let updateFinallyResult = arr.map(val => val.name);
                if (updateFinallyResult.length >= 2) {
                    this.$message.error('最多选择两个词包');
                    return;
                }
                if (startPos === 0 || endPos === 0) {
                    txt += '{' + item + '}';
                    this.examinForm.setFieldsValue({[field]: txt});
                }
                else {
                    this.examinForm.setFieldsValue({[field]: txt.substring(0, startPos) + '{' + item + '}' + txt.substring(endPos)});
                    node.selectionStart = startPos + item.length + 6;
                    node.selectionEnd = startPos + item.length + 6;
                }
                node.focus();
                node.blur();
            });
            this.$nextTick(() => {
                const dynamicWordPackIds = [];
                let changeData = this.handleJudgeExec(this.examinForm.getFieldsValue()[field]);
                let newOptionList = [];
                changeData.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            newOptionList.push(val);
                        }
                    });
                });
                let updateChangeData = newOptionList.map(val => val.name);
                const inputDefaultLen = this.handleExportRules(this.examinForm.getFieldsValue()[field]);
                let tagsLen = updateChangeData.length * 2;
                let tagsSureLen = 0;
                let resultSelectSize = 0;
                updateChangeData.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            tagsSureLen += val.maxWordLen;
                            dynamicWordPackIds.push(val.creativeWordId);
                        }
                    });
                });
                updateChangeData.forEach(item => {
                    tagsLen += item.length;
                });
                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + updateChangeData.length;
                this.defaultFormList.forEach(item => {
                    if (item.id === formId) {
                        item.lenSize = resultSelectSize;
                        item.value = this.examinForm.getFieldsValue()[field];
                        item.wordPackId = dynamicWordPackIds;
                    }
                });
            });
        },
        handleMaterTitleClick() {
            this.materTitltStatus = !this.materTitltStatus;
            if (this.materTitltStatus) {
                this.accountMaster = {
                    height: 'auto'
                };
            }
            else {
                this.accountMaster = {
                    height: '35px',
                    overflow: 'hidden'
                };
            }
        },
        handleApprovedClick() {
            const batchList = [];
            this.defaultFormList = [];
            this.dataSource.forEach(item => {
                if (this.checkArr.includes(item.id)) {
                    batchList.push(item);
                }
            });
            this.modalShowBatchList = batchList;
            this.batchVisible = true;
            this.materTitltStatus = false;
            this.accountMaster = {
                height: '35px',
                overflow: 'hidden'
            };
            for (let i = 0; i < 3; i++) {
                const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
                this.defaultFormList.push({
                    id: randomNum,
                    name: 'username' + randomNum,
                    value: '',
                    lenSize: 0,
                    tabStatus: 'alone',
                    defaultTagsList: this.adNameTags,
                    updateTagsList: this.adNameTags.slice(0, 4)
                });
            }
        },
        handleBatchSure() {
            if (this.defaultFormList && this.defaultFormList.length < 3) {
                this.$message.error('请至少输入3条标题');
                return;
            }
            let changeSlogan = this.defaultFormList;
            changeSlogan.forEach(item => {
                item.title = item.value;
                item.creative_word_ids = item.wordPackId;
            });
            let params = {
                ids: this.modalShowBatchList.map(item => item.id) || [],
                auditorId: this.userInfo().id,
                status: 1,
                slogans: changeSlogan
            };
            this.examinForm.validateFields(err => {
                if (!err) {
                    fileEditUpdateBatch(params).then(res => {
                        if (res.code === 0) {
                            this.refuseReason = '';
                            this.batchVisible = false;
                            this.defaultFormList = [];
                            this.$message.success('审核成功');
                            this.loadData();
                        }
                        else {
                            this.$message.error(res.message);
                        }
                    });
                }
            });
        },
        handleBatchCancel() {
            this.batchVisible = false;
        },
        handleFodderWind() {
            if (this.checkArr.length > 8) {
                this.$message.error('最多可以支持同时选择8个视频');
                return;
            }
            const paramsData = {
                offlineFlag: 1,
                id: this.checkArr.join(','),
                userId: this.userInfo().id
            };
            let that = this;
            this.$confirm({
                title: '下线提示',
                content: '是否下线选中视频',
                onOk() {
                    getAction(urlAcount + '/bytedance-api/advertiser/materialInfoController/updMaterialOfflineById', paramsData).then(result => {
                        if (result.code === 0) {
                            that.searchQuery();
                            that.checkArr = [];
                            that.$message.success(result.message);
                        }
                        else {
                            that.$message.error(result.message);
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                    });
                }
            });
        },
        compareToFirstPassword(rule, value, callback) {
            if (value && value.length > 30 || value.length < 5) {
                callback('创意标题5-30个字');
            }
            else {
                callback();
            }
        },
        handleExportRules(value) {
            let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
            let length = 0;
            let strArr = value.split('');
            strArr.forEach(item => {
                if (cnReg.test(item)) {
                    length += 1;
                }
                else {
                    length += 0.5;
                }
            });
            return Math.ceil(length);
        },
        handleGetQueryById() {
            getAction('/ctop/materialInfo/queryById', {
                id: this.id
            }).then(res => {
                if (res.success) {
                    this.showUrlWater = res.result.watermarkUrl;
                    this.name = res.result.watermarkCode;
                    this.materialName = res.result.materialName;
                    res.result.slogans.forEach(item => {
                        let finallyLenList = this.handleJudgeExec(item.slogan);
                        let resultSelectSize = 0;
                        if (finallyLenList.length) {
                            const inputDefaultLen = this.handleExportRules(item.slogan);
                            let tagsLen = finallyLenList.length * 2;
                            let tagsSureLen = 0;
                            finallyLenList.forEach(item => {
                                this.adNameTags.forEach(val => {
                                    if (item === val.name) {
                                        tagsSureLen += val.maxWordLen;
                                    }
                                });
                            });
                            finallyLenList.forEach(item => {
                                tagsLen += item.length;
                            });
                            resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + finallyLenList.length;
                        }
                        else {
                            resultSelectSize = this.handleExportRules(item.slogan);
                        }
                        item.name = 'username' + item.id;
                        item.value = item.slogan;
                        item.lenSize = resultSelectSize;
                        item.tabStatus = 'alone';
                        item.defaultTagsList = this.adNameTags;
                        item.updateTagsList = this.adNameTags.slice(0, 4);
                    });
                    this.slogansDetail = res.result.slogans;
                }
                else {
                    this.showUrlWater = null;
                    this.name = null;
                }
            });
        },
        handleDelSolgan(data) {
            if (this.slogansDetail && this.slogansDetail.length <= 3) {
                this.$message.error('删除失败，广告语不能少于三条');
                return;
            }
            if (this.defaultSolganStatus === 'edit') {
                this.defaultSolganStatus = 'input';
            }
            let formdata = new FormData();
            formdata.append('id', data.id);
            postAction('/ctop/bytedanceVideoSlogenInfo/delete', formdata).then(res => {
                if (res.success) {
                    this.$message.success('删除成功');
                    this.handleGetQueryById();
                }
            });
        },
        handleSolganCheck(data) {
            let changeSlogan = this.slogansDetail;
            changeSlogan.forEach(item => {
                item.title = item.value;
                item.creative_word_ids = item.wordPackId;
            });
            this.solganForm.validateFields(err => {
                if (!err) {
                    postAction('/ctop/bytedanceVideoSlogenInfo/edit', {
                        id: data.id,
                        slogan: changeSlogan.filter(item => item.id === data.id)[0].title,
                        creativeWordIds: JSON.stringify(changeSlogan.filter(item => item.id === data.id)[0].creative_word_ids)
                    }).then(res => {
                        if (res.code === 0) {
                            this.defaultSolganStatus = 'input';
                            this.defaultSolganTitle = 'test';
                            this.$message.success('修改成功');
                            this.handleGetQueryById();
                        }
                        else {
                            this.$message.error(res.message);
                        }
                    });
                }
            });
        },
        handleSolganEdit(data) {
            if (this.defaultSolganStatus === 'edit') {
                this.$message.error('请先完成上一次的修改');
                return;
            }
            this.defaultSolganTitle = data.name;
            this.defaultSolganStatus = 'edit';
            this.$nextTick(() => {
                this.solganForm.setFieldsValue({[data.name]: data.slogan});
            });
        },
        handleSloganSearchChange(e, field, formId) {
            this.$nextTick(() => {
                const dynamicWordPackIds = [];
                let finallyLenList = this.handleJudgeExec(e.target.value);
                let newOptionList = [];
                finallyLenList.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            newOptionList.push(val);
                        }
                    });
                });
                let updateFinallyResult = newOptionList.map(val => val.name);
                const inputDefaultLen = this.handleExportRules(e.target.value);
                let tagsLen = updateFinallyResult.length * 2;
                let tagsSureLen = 0;
                let resultSelectSize = 0;
                updateFinallyResult.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            tagsSureLen += val.maxWordLen;
                            dynamicWordPackIds.push(val.creativeWordId);
                        }
                    });
                });
                updateFinallyResult.forEach(item => {
                    tagsLen += item.length;
                });
                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + updateFinallyResult.length;
                this.slogansDetail.forEach(item => {
                    if (item.id === formId) {
                        item.lenSize = resultSelectSize;
                        item.wordPackId = dynamicWordPackIds;
                        item.value = e.target.value;
                    }
                });
            });
        },
        handleFormInputChang(e, field, formId) {
            const changeFiled = [];
            this.defaultFormList.forEach(item => {
                if (item.id === formId) {
                    item.value = e.target.value;
                }
            });
            this.defaultFormList.forEach(item => {
                if (item.value) {
                    changeFiled.push(item.value);
                }
            });
            this.$nextTick(() => {
                const dynamicWordPackIds = [];
                let finallyLenList = this.handleJudgeExec(this.examinForm.getFieldsValue()[field]);
                let newOptionList = [];
                finallyLenList.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            newOptionList.push(val);
                        }
                    });
                });
                let updateFinallyResult = newOptionList.map(val => val.name);
                const inputDefaultLen = this.handleExportRules(this.defaultFormList.filter(item => item.id === formId)[0].value);
                let tagsLen = updateFinallyResult.length * 2;
                let tagsSureLen = 0;
                let resultSelectSize = 0;
                updateFinallyResult.forEach(item => {
                    this.adNameTags.forEach(val => {
                        if (item === val.name) {
                            tagsSureLen += val.maxWordLen;
                            dynamicWordPackIds.push(val.creativeWordId);
                        }
                    });
                });
                updateFinallyResult.forEach(item => {
                    tagsLen += item.length;
                });
                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + updateFinallyResult.length;
                this.defaultFormList.forEach(item => {
                    if (item.id === formId) {
                        item.lenSize = resultSelectSize;
                        item.wordPackId = dynamicWordPackIds;
                    }
                });
                this.titleFiledResult = changeFiled;
            });
        },
        handleCheckBoxChang(data) {
            this.applyTypeOption = data;
            this.finallyCheckedResult = data;
        },
        handleSearchTitle() {
            if (!this.keyWordRec) {
                this.$message.error('请输入关键词进行搜索！');
                return;
            }
            getAction('/ctop/creativeTitle/titleSearch', {
                firstCategory: this.dataOne[0],
                secondCategory: this.dataOne[1],
                keywords: this.keyWordRec
            }).then(res => {
                this.titleResult = res.result ? res.result : [];
            });
        },
        recomFilter(inputValue, path) {
            return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
        },
        getHangye() {
            getAction('/ctop/creativeTitle/getTitleLabel', '').then(res => {
                if (res.success) {
                    this.recSearchOptions = 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.recSearchOptions = [{label: '不限', value: 0}].concat(this.recSearchOptions);
                }
            });
        },
        handleRecSelectChang(value, selectedOptions) {
            this.dataOne = value;
            this.keyWordRec = '';
        },
        handleRecommendSure() {
            if (!this.applyTypeOption.length) {
                this.$message.error('请选择标题');
                return;
            }
            this.recommendVisible = false;
            this.keyWordRec = '';
            let formData = this.defaultFormList;
            this.defaultFormList = formData.filter(item => item.value !== '');
            this.applyTypeOption.forEach(item => {
                const dateTime = new Date().getTime() + Math.ceil(Math.random() * 1000);
                const name = 'username' + dateTime;
                this.defaultFormList.push({
                    id: dateTime,
                    name: name,
                    value: item,
                    tabStatus: 'alone',
                    defaultTagsList: this.adNameTags,
                    updateTagsList: this.adNameTags.slice(0, 4)
                });
            });
            this.titleResult = [];
            this.finallyCheckedResult = [];
            setTimeout(() => {
                this.applyTypeOption = [];
            }, 200);
        },
        handleRecommendCancel() {
            this.recommendVisible = false;
            this.keyWordRec = '';
            this.titleResult = [];
            this.finallyCheckedResult = [];
        },
        handleSelectTitle() {
            this.recommendVisible = true;
        },
        handleAddOrigin() {
            const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
            this.defaultFormList.push({
                id: randomNum,
                name: 'username' + randomNum,
                value: '',
                lenSize: 0,
                tabStatus: 'alone',
                defaultTagsList: this.adNameTags,
                updateTagsList: this.adNameTags.slice(0, 4)
            });
        },
        handleDelOrigin(list) {
            let formData = this.defaultFormList;
            this.defaultFormList = formData.filter(item => list.id !== item.id);
        },
        handleExamin(data) {
            this.defaultFormList = [];
            getAction('/ctop/materialInfo/queryById', {
                id: data.id
            }).then(res => {
                if (res.success) {
                    if (res.result.slogans.length) {
                        res.result.slogans.forEach(item => {
                            let finallyLenList = this.handleJudgeExec(item.slogan);
                            let newOptionList = [];
                            finallyLenList.forEach(item => {
                                this.adNameTags.forEach(val => {
                                    if (item === val.name) {
                                        newOptionList.push(val);
                                    }
                                });
                            });
                            let resultSelectSize = 0;
                            if (newOptionList.length) {
                                const inputDefaultLen = this.handleExportRules(item.slogan);
                                let tagsLen = newOptionList.length * 2;
                                let tagsSureLen = 0;
                                newOptionList.forEach(item => {
                                    this.adNameTags.forEach(val => {
                                        if (item.name === val.name) {
                                            tagsSureLen += val.maxWordLen;
                                        }
                                    });
                                });
                                finallyLenList.forEach(item => {
                                    tagsLen += item.length;
                                });
                                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + newOptionList.length;
                            }
                            else {
                                resultSelectSize = item.slogan.length;
                            }
                            item.name = 'username' + item.id;
                            item.value = item.slogan;
                            item.lenSize = resultSelectSize;
                            item.tabStatus = 'alone';
                            item.defaultTagsList = this.adNameTags;
                            item.updateTagsList = this.adNameTags.slice(0, 4);
                            item.wordPackId = item.creativeWordIds && JSON.parse(item.creativeWordIds);
                        });
                        this.defaultFormList = res.result.slogans;
                    }
                    else {
                        for (let i = 0; i < 3; i++) {
                            const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
                            this.defaultFormList.push({
                                id: randomNum,
                                name: 'username' + randomNum,
                                value: '',
                                lenSize: 0,
                                tabStatus: 'alone',
                                defaultTagsList: this.adNameTags,
                                updateTagsList: this.adNameTags.slice(0, 4)
                            });
                        }
                    }
                }
                else {
                    this.showUrlWater = null;
                    this.name = null;
                }
            });
            this.currentPageOnlyList = data;
            this.causeVisible = true;
            this.recommendVisible = false;
            this.titleResult = [];
            this.checkArr = [];
        },
        handleCauseCancel() {
            this.causeVisible = false;
            this.defaultFormList = [];
        },
        handleCauseSure() {
            if (this.defaultFormList && this.defaultFormList.length < 3) {
                this.$message.error('请至少输入3条标题');
                return;
            }
            let changeSlogan = this.defaultFormList;
            changeSlogan.forEach(item => {
                item.title = item.value;
                item.creative_word_ids = item.wordPackId;
            });
            let params = {
                id: this.currentPageOnlyList.id,
                auditorId: this.userInfo().id,
                status: 1,
                slogans: changeSlogan
            };
            this.examinForm.validateFields(err => {
                if (!err) {
                    fileEditUpdate(params).then(res => {
                        if (res.code === 0) {
                            this.refuseReason = '';
                            this.causeVisible = false;
                            this.defaultFormList = [];
                            this.$message.success('审核成功');
                            this.loadData();
                        }
                        else {
                            this.$message.error(res.message);
                        }
                    });
                }
            });
        },
        changeTag(visible) {
            if (this.videoVisibleChange !== visible) {
                this.videoVisibleChange = visible;
                this.videoTag = [];
                getAction('/ctop/materialTagInfo/list', {code: visible}).then(res => {
                    this.videoTag = res.result.records.map(item => {
                        return item.tagName;
                    });
                });
            }
            else {
                return;
            }
        },
        modalFormOkElse() {
            this.getTagListAll();
        },
        handleOkTag(e) {
            this.loadingTag = true;
            let data = [
                ...this.departValueInfoModality,
                ...this.departValueInfoMod,
                ...this.departValueInfoContent,
                ...this.departValueInfoSence
            ];
            postAction('/ctop/materialTagInfo/mark', {
                code: this.tagCode,
                tagList: data
            }).then(res => {
                if (res.success) {
                    this.departValueInfoModality = [];
                    this.departValueInfoMod = [];
                    this.departValueInfoContent = [];
                    this.departValueInfoSence = [];
                    this.loadingTag = false;
                    this.tagInfoListVisible = false;
                }
                else {
                    this.loadingTag = false;
                    this.$message.error(res.message);
                }
            });
        },
        editTagList(item) {
            this.tagInfoListVisible = true;
            this.getTagListInfo(item.code);
            this.tagCode = item.code;
        },
        getTagListAll() {
            this.departTree = [];
            this.departTreeModality = []; // 形式
            this.departTreeContent = []; // 内容
            this.departTreeSence = []; // 场景
            this.departTreeMod = []; // 基调
            this.getQueryTree(1, 'departTreeModality');
            this.getQueryTree(2, 'departTreeMod');
            this.getQueryTree(3, 'departTreeContent');
            this.getQueryTree(4, 'departTreeSence');
        },
        getQueryTree(type, arr) {
            getAction('/ctop/tagInfo/queryTreeList', {
                categoryId: type
            }).then(res => {
                if (res.success) {
                    if (res.result) {
                        this[arr] = this.getTreeData(res.result);
                    }
                }
            });
        },
        getTreeData(data) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].children) {
                    if (data[i].children.length < 1) {
                        // children若为空数组，则将children设为undefined
                        data[i].disabled = false;
                    }
                    else {
                        // children若不为空数组，则继续 递归调用 本方法
                        data[i].disabled = true;
                        this.getTreeData(data[i].children);
                    }
                }
                else {
                    data[i].disabled = false;
                }
            }
            return data;
        },
        showBoHui(item) {
            this.bohui = item;
            this.bohuiShow = true;
        },
        editImage(item, status) {
            let params = {};
            params.id = item.id;
            params.status = status;
            params.auditorId = this.userInfo().id;
            if (status === '1') {
            }
            else {
                params.refuseReason = this.refuseReasonImage;
            }
            let updateArr = [params];
            putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then(res => {
                if (res.success) {
                    getAction('/ctop/MaterialImageInfo/list', {
                        videoId: this.code
                    }).then(res => {
                        if (res.success) {
                            this.model = res.result.map((item, index) => {
                                return {
                                    ...item,
                                    key: index
                                };
                            });
                            this.modelNew = this.model.filter(item => {
                                return item.status === '0';
                            });
                            if (this.modelNew.length === 0) {
                                this.coverPreviewVisible = false;
                            }
                        }
                    });
                    this.loadData();
                }
                else {
                    this.$message.error(res.message);
                }
            });
        },
        editImageAll(status) {
            this.checkArrImage;
            let updateArr = [];
            if (status === '1') {
                updateArr = this.checkArrImage.map((item) => {
                    return {
                        id: item,
                        status: status
                    };
                });
            }
            else {
                updateArr = this.checkArrImage.map(item => {
                    return {
                        id: item,
                        status: status,
                        refuseReason: this.refuseReasonImage
                    };
                });
            }
            putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then(res => {
                if (res.success) {
                    getAction('/ctop/MaterialImageInfo/list', {
                        videoId: this.code
                    }).then(res => {
                        if (res.success) {
                            this.checkArrImage = [];
                            this.checkAllImage = false;
                            this.model = res.result.map((item, index) => {
                                return {
                                    ...item,
                                    key: index
                                };
                            });
                        }
                    });
                    this.loadData();
                }
                else {
                    this.$message.error(res.message);
                }
            });
        },
        showData(item) {
            if (item.byteDance || item.kuaiShou) {
                this.showDataBool = true;
                this.kuaishouData = item.kuaiShou;
                this.douyinData = item.byteDance;
            }
            else {
                this.$message.error('抖音和快手都无数据');
                return;
            }
        },
        setSuccess() {
            let params = {};
            params.id = this.code;
            params.excellent = this.excellent == 1 ? 0 : 1;
            getAction('/ctop/materialInfo/excellent/set', params).then(res => {
                if (res.success) {
                    this.excellent = this.excellent === 1 ? 0 : 1;
                    this.loadData(this.ipagination.current);
                }
            });
        },
        getData(className) {
            return this.form.getFieldValue(className);
        },
        deleteData(id) {
            deleteAction('/ctop/materialInfo/delete', {
                id: id
            }).then(res => {
                if (res.success) {
                    this.$message.success('删除成功');
                    this.loadData();
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
        moment,
        tongbu(value) {
            this.mediaId = value;
            this.$refs.check.getData('/ctop/userAllocation/getAccountListByUserIdAndProductId', {
                userId: this.userInfo().id,
                productId: this.queryParam.productId,
                mediaId: value
            });
        },
        implement(data) {
            let params = {};
            params.mediaId = this.mediaId;
            params.materialArray = JSON.stringify(this.checkArr);
            params.accountArray = JSON.stringify(data);
            params.loginId = this.userInfo().id
            params.userName = this.userInfo().realname
            params.isMultiagent = 1
            postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
                if (res.code === 0) {
                    this.checkArr = [];
                    this.checkAll = false;
                    if(res.data){
                        this.showDataList = res.data
                        this.showDataListVisible = true
                    }else{
                        this.$message.success(res.message)
                    }
                }
            });
        },
        downloadByBlobShowUrl() {
            fetch(this.showUrl)
                .then(res => res.blob())
                .then(blob => {
                    const a = document.createElement('a');
                    document.body.appendChild(a);
                    a.style.display = 'none';
                    // 使用获取到的blob对象创建的url
                    const url = window.URL.createObjectURL(blob);
                    a.href = url;
                    // 指定下载的文件名
                    a.download = this.materialName;
                    a.click();
                    document.body.removeChild(a);
                    // 移除blob对象的url
                    window.URL.revokeObjectURL(url);
                });
        },
        downloadByBlob() {
            fetch(this.showUrlWater)
                .then(res => res.blob())
                .then(blob => {
                    const a = document.createElement('a');
                    document.body.appendChild(a);
                    a.style.display = 'none';
                    // 使用获取到的blob对象创建的url
                    const url = window.URL.createObjectURL(blob);
                    a.href = url;
                    // 指定下载的文件名
                    a.download = this.name;
                    a.click();
                    document.body.removeChild(a);
                    // 移除blob对象的url
                    window.URL.revokeObjectURL(url);
                });
        },
        download(href, name) {
            let eleLink = document.createElement('a');
            eleLink.download = name;
            eleLink.href = href;
            eleLink.click();
            eleLink.remove();
        },
        onCheckAllChange() {
            if (this.checkAll) {
                this.checkArr = [];
            }
            else {
                this.checkArr = this.dataSource.map(item => {
                    return item.id;
                });
            }
            this.checkAll = !this.checkAll;
        },
        onCheckAllImageChange() {
            if (this.checkAllImage) {
                this.checkArrImage = [];
            }
            else {
                this.checkArrImage = this.model.map(item => {
                    return item.id;
                });
            }
            this.checkAllImage = !this.checkAllImage;
        },
        searchRe() {
            this.queryParam = {
                type: 'VIDEO',
                userId: this.userInfo().id,
                status: this.active,
                productId: ''
            };
            this.$refs.selectTable.keyValue = '';
            this.$refs.selectTable.getData();
            this.$refs.selectTableProject.keyValue = '';
            this.$refs.selectTableProject.getData();
            this.labelValue = [];
            this.loadData(1);
            this.checkArr = [];
        },
        getList(value) {
            this.loadData();
        },
        onChangeCheckImage(checkedList) {
            if (checkedList.length === 0) {
                this.checkAllImage = false;
            }
        },
        onChangeCheck(checkedList, data) {
            if (data.value === '0') {
                this.showTabsTitle = '0';
            }
            if (checkedList.length === 0) {
                this.checkAll = false;
            }
        },
        handleClose(removedTag) {
            const tags = this.tags.filter(tag => tag !== removedTag);
            this.tags = tags;
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
                this.$refs.input.focus();
            });
        },
        handleInputChange(e) {
            this.inputValue = e.target.value;
        },
        handleInputConfirm() {
            const inputValue = this.inputValue;
            let tags = this.tags;
            if (inputValue && tags.indexOf(inputValue) === -1) {
                tags = [...tags, inputValue];
            }
            Object.assign(this, {
                tags,
                inputVisible: false,
                inputValue: ''
            });
        },
        getWater() {
            this.waterLoading = true;
            let params = qs.stringify({
                id: this.id,
                userId: this.userInfo().id,
                watermarkTemplateId: this.size
            });
            postAction('/ctop/materialInfo/watermark', params).then(res => {
                if (res.success) {
                    this.$message.success('水印素材生成中');
                    this.visibleDetail = false;
                    this.refuseFile = [];
                    this.refuseReason = '';
                    closeAllVideoFun();
                    this.loadData();
                    this.waterLoading = false;
                }
            });
        },
        showDetail(item) {
            this.visibleDetail = true;
            this.showUrl = item.url;
            this.id = item.id;
            this.code = item.code;
            this.excellent = item.excellent;
            if (this.active === '2') {
                this.refuseReason = item.refuseReason;
                this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null;
            }
            else if (this.active === '1') {
                this.creativeCopywriter = item.creativeCopywriter;
                this.refuseReason = '';
                this.refuseFile = [];
            }
            else {
                this.refuseReason = '';
                this.refuseFile = [];
            }
            getAction('/ctop/materialInfo/getDetail', {
                materialId: item.id
            }).then(res => {
                this.detail = res;
                this.size
                = res.parameter.width === '1080' ? 3 : res.parameter.width === '1920' ? 1 : res.parameter.width === '1280' ? 2 : 4;
            });
            getAction('/ctop/materialInfo/queryById', {
                id: item.id
            }).then(res => {
                if (res.success) {
                    this.showUrlWater = res.result.watermarkUrl;
                    this.name = res.result.watermarkCode;
                    this.materialName = res.result.materialName;
                    res.result.slogans.forEach(item => {
                        let finallyLenList = this.handleJudgeExec(item.slogan);
                        let resultSelectSize = 0;
                        if (finallyLenList.length) {
                            const inputDefaultLen = this.handleExportRules(item.slogan);
                            let tagsLen = finallyLenList.length * 2;
                            let tagsSureLen = 0;
                            finallyLenList.forEach(item => {
                                this.adNameTags.forEach(val => {
                                    if (item === val.name) {
                                        tagsSureLen += val.maxWordLen;
                                    }
                                });
                            });
                            finallyLenList.forEach(item => {
                                tagsLen += item.length;
                            });
                            resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen + finallyLenList.length;
                        }
                        else {
                            resultSelectSize = this.handleExportRules(item.slogan);
                        }
                        item.name = 'username' + item.id;
                        item.value = item.slogan;
                        item.lenSize = resultSelectSize;
                        item.tabStatus = 'alone';
                        item.defaultTagsList = this.adNameTags;
                        item.updateTagsList = this.adNameTags.slice(0, 4);
                    });
                    this.slogansDetail = res.result.slogans;
                }
                else {
                    this.showUrlWater = null;
                    this.name = null;
                }
            });
            getAction('/ctop/MaterialImageInfo/list', {
                videoId: item.code
            }).then(res => {
                if (res.success) {
                    this.model = res.result.map((item, index) => {
                        return {
                            ...item,
                            key: index
                        };
                    });
                }
            });
            this.getTagListInfo(item.code);
        },
        getTagListInfo(md5) {
            this.departValueInfoModality = [];
            this.departValueInfoMod = [];
            this.departValueInfoContent = [];
            this.departValueInfoSence = [];
            getAction('/ctop/materialTagInfo/detail', {
                code: md5
            }).then(res => {
                if (res.success) {
                    this.tagInfoList = [...res.modalityTagList, ...res.senceTagList, ...res.modTagList];
                    if (this.tagInfoListVisible) {
                        this.departValueInfoModality = res.modalityTagList.map(item => {
                            return item.tagId;
                        });
                        this.departValueInfoMod = res.modTagList.map(item => {
                            return item.tagId;
                        });
                        this.departValueInfoSence = res.senceTagList.map(item => {
                            return item.tagId;
                        });
                    }
                }
            });
        },
        coverPreviewShowModal(item, index) {
            this.modelNew = this.model.filter(items => items.status === 0);
            if (this.modelNew.length > 0) {
                this.coverPreviewVisible = true;
            }
        },
        okEditShow(item, editStatus) {
            if (editStatus === '2') {
                let params = {};
                params.id = item.id;
                params.auditorId = this.userInfo().id;
                params.refuseReason = this.refuseReason;
                let data = this.refuseFile.map(item => {
                    return 'https:' + item;
                });
                params.refuseFile = JSON.stringify(data);
                params.status = editStatus;
                fileEdit(params).then(res => {
                    this.refuseFile = [];
                    this.refuseReason = '';
                    this.loadData();
                });
            }
            else if (editStatus === '1') {
                let params = {};
                params.id = item.id;
                params.auditorId = this.userInfo().id;
                params.creativeCopywriter = this.refuseReason;
                params.status = editStatus;
                fileEdit(params).then(res => {
                    this.refuseReason = '';
                    this.loadData();
                });
            }
        },
        okEdit(e) {
            this.edit(null, this.active, '2');
        },
        personEdit(item, status) {
            this.add = false;
            this.personVisible = true;
            this.getProjectId(item.projectId);
            getAction('/ctop/materialInfo/getDetail', {
                materialId: item.id
            }).then(res => {
                this.code = item.code;
                if (res.ascription) {
                    this.formPerson.setFieldsValue({
                        clipId: res.ascription.clipId,
                        planId: res.ascription.planId,
                        shotId: res.ascription.shotId
                    });
                }
            });
        },
        edit(item, status, editStatus) {
            if (status === '0' || status === '1') {
                if (editStatus === '2') {
                    let params = {};
                    params.id = this.id;
                    params.auditorId = this.userInfo().id;
                    params.refuseReason = this.refuseReason;
                    let data = this.refuseFile.map(item => {
                        return 'https:' + item;
                    });
                    params.refuseFile = JSON.stringify(data);
                    params.status = editStatus;
                    fileEdit(params).then(res => {
                        this.refuseFile = [];
                        this.refuseReason = '';
                        this.loadData();
                        this.visibleDetail = false;
                        closeAllVideoFun();
                    });
                }
                else {
                    fileEdit({
                        id: this.id,
                        status: editStatus,
                        auditorId: this.userInfo().id,
                        creativeCopywriter: this.refuseReason
                    }).then(res => {
                        this.refuseFile = [];
                        this.refuseReason = '';
                        this.loadData();
                        this.visibleDetail = false;
                        closeAllVideoFun();
                    });
                }
            } else {
                this.add = false;
                this.visible = true;
                this.getProjectId(item.projectId);
                getAction('/ctop/materialInfo/getDetail', {
                    materialId: item.id
                }).then(res => {
                    if (this.activeKey === 'image') {
                        this.form.setFieldsValue({
                            projectId: item.projectId,
                            clipId: res.ascription.clipId,
                            planeId: res.ascription.planeId,
                            materialDescribe: item.materialDescribe
                        });
                    }
                    else {
                        this.form.setFieldsValue({
                            projectId: item.projectId,
                            clipId: res.ascription.clipId,
                            planId: res.ascription.planId,
                            shotId: res.ascription.shotId,
                            materialDescribe: item.materialDescribe
                        });
                    }
                    this.tags = res.tag;
                    this.urlList.url = item.url;
                    this.urlList.md5 = item.code;
                    this.urlList.name = item.materialName;
                    this.watermarkUrl.url = item.watermarkUrl;
                    this.watermarkUrl.md5 = item.watermarkCode;
                    this.watermarkUrl.name = item.watermarkMaterialName;
                    this.id = item.id;
                });
            }
        },
        closePerson() {
            this.personVisible = false;
        },
        handleOkPerson() {
            this.loadingPerson = true;
            this.formPerson.validateFieldsAndScroll((err, values) => {
                if (err) {
                // 这里做逻辑处理
                } else {
                    let params = {
                        planId: values.planId,
                        shotId: values.shotId,
                        clipId: values.clipId,
                        materialId: this.code
                    }
                    fileEditAll(params).then(res => {
                        if (res.success) {
                            this.$message.success('修改成功');
                            this.loadingPerson = false;
                            this.closePerson();
                            this.loadData();
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                }
            })
        },
        handleOkImage() {
            let params = {};
            params.projectId = this.addImageData.projectId;
            params.videoId = this.addImageData.code;
            params.imageArr = this.imageArrList;
            this.loadingImage = true;
            postAction('/insertImage', params).then(res => {
                if (res.code === 0) {
                    this.urlListImage = {
                        url: [],
                        md5: [],
                        name: [],
                        size: []
                    };
                    this.imageArrList = [];
                    this.addImageVisible = false;
                    this.loadingImage = false;
                    this.loadData();
                }
                else {
                    this.loadingImage = false;
                }
            })
        },
        handleOk() {
            this.form.validateFieldsAndScroll((err, values) => {
                if (err) {
                    // 这里做逻辑处理
                }
                else {
                    this.loadingElse = true;
                    let params = {
                        ...values
                    };
                    let roleCode = {};
                    for (const key in this.role) {
                        if (key == 'roleCode') {
                            this.role[key] = this.role[key] + 'Id';
                            roleCode[this.role[key]] = this.userInfo().id;
                        }
                    }
                    params.id = this.add ? null : this.id;
                    params.code = this.urlList.md5;
                    params.url = this.urlList.url;
                    params.materialName = this.urlList.name;
                    params.watermarkCode = this.watermarkUrl.md5;
                    params.watermarkUrl = this.watermarkUrl.url;
                    params.watermarkMaterialName = this.watermarkUrl.name;
                    params.userId = this.userInfo().id;
                    params.projectId = values.projectId;
                    params.materialDescribe = values.materialDescribe;
                    params.type = 'VIDEO';
                    params.ascription =
                        this.activeKey == 'image'
                        ? roleCode
                        : {
                            planId: values.planId,
                            shotId: values.shotId,
                            clipId: values.clipId,
                            };
                    params.tag = this.tags;
                    params.imageArr = this.imageArrList;
                    if (this.add) {
                        fileInsertV2(params).then(res => {
                            if (res.success) {
                                this.form.resetFields();
                                this.urlList = {
                                    url: '',
                                    md5: '',
                                    name: ''
                                };
                                this.watermarkUrl = {
                                    url: '',
                                    md5: '',
                                    name: ''
                                };
                                this.urlListImage = {
                                    url: [],
                                    md5: [],
                                    name: [],
                                    size: []
                                };
                                this.imageArrList = [];
                                this.tags = [];
                                this.loadData();
                                this.visible = false;
                                this.add = true;
                                for (const key in this.role) {
                                    if (key == 'roleCode') {
                                        this.role[key] = this.role[key].substr(0, this.role[key].length - 2);
                                    }
                                }
                                this.$message.success('素材上传成功');
                                this.loadingElse = false;
                            }
                            else {
                                this.$message.error(res.message);
                                this.loadingElse = false;
                            }
                        });
                    }
                    else {
                        fileEdit({
                            ...params,
                            status: '0'
                        }).then(res => {
                            if (res.success) {
                                this.form.resetFields();
                                this.urlList = {
                                    url: '',
                                    md5: '',
                                    name: ''
                                };
                                this.watermarkUrl = {
                                    url: '',
                                    md5: '',
                                    name: ''
                                };
                                this.tags = []
                                this.loadData()
                                this.visible = false
                                this.add = true
                                this.loading = false
                                this.loadingElse = false
                                for (const key in this.role) {
                                    if (key === 'roleCode') {
                                        this.role[key] = this.role[key].substr(0, this.role[key].length - 2);
                                    }
                                }
                            }
                            else {
                                this.$message.error(res.message)
                                this.loading = false
                                this.loadingElse = false
                            }
                        });
                    }
                }
            });
        },
        close() {
            this.visible = false;
            this.dataElse = [];
            this.form.resetFields();
            this.urlList = {
                url: '',
                md5: '',
                name: ''
            };
            this.tags = [];
            this.urlListImage = {
                url: [],
                md5: [],
                name: [],
                size: []
            };
            this.imageArrList = [];
        },
        addImage(item) {
            this.addImageVisible = true;
            this.addImageData = item;
        },
        showImage(item) {
            this.chouzhen = true;
            this.chouzhenList = [];
            let params = {
                videoSignature: item.code,
                pageSize: 20,
                pageNo: 1
            };
            getAction('/cutFrame/material/list', params).then(res => {
                if (res.success) {
                    this.chouzhenList.push(...res.result.records);
                }
            });
        },
        closeImage() {
            this.addImageVisible = false;
            this.urlListImage = {
                url: [],
                md5: [],
                name: [],
                size: [],
            }
            this.imageArrList = [];
        },
        callbackTwo(key) {
            this.checkAll = false;
            this.checkArr = [];
            if (key === '3') {
                this.url.list = '/ctop/materialInfo/effiMaterialInfo';
                this.queryParam = {};
            }
            else {
                this.url.list = '/ctop/materialInfo/listV2';
                this.queryParam = {
                    type: 'VIDEO',
                    userId: this.userInfo().id,
                    status: key,
                    productId: this.queryParam.productId
                }
                if (this.labelValue.length >= 1) {
                    this.queryParam.tagCode = this.labelValue[this.labelValue.length - 1];
                }
                else {
                    this.queryParam.tagCode = '';
                }
                if (this.form.getFieldValue('productId')) {
                    this.form.setFieldsValue({
                        projectId: ''
                    });
                }
            }
            this.loadData(1);
        },
        removeUpload() {
            this.form.setFieldsValue({
                modalityTagList: null,
                modTagList: null,
                senceTagList: null
            });
        },
        overUpload(urlAll) {
            this.confirmLoading = true;
            this.repeat = false;
            this.urlList.url = urlAll[0].url;
            this.$message.success('上传成功');
            getAction('/ctop/materialTagInfo/detail', {
                code: this.urlList.md5
            }).then(res => {
                if (res.success) {
                    if (res.modalityTagList.length > 0) {
                        this.form.setFieldsValue({
                            modalityTagList: res.modalityTagList.map(item => {
                                return item.tagId;
                            }),
                            modTagList: res.modTagList.map(item => {
                                return item.tagId;
                            }),
                            senceTagList: res.senceTagList.map(item => {
                                return item.tagId;
                            })
                        });
                    }
                }
            });
        },
        deleteImage(url) {
            let index = this.imageArrList.findIndex(v => v.url === url);
            this.imageArrList.splice(index, 1);
        },
        overUploadImage(urlAll) {
            let that = this;
            that.material = [];
            that.imageArrList = [];
            let img;
            if (urlAll.length > 0) {
                for (let i = 0; i < urlAll.length; i++) {
                    that.imageArrList.push({
                        code: this.urlListImage.md5[i],
                        url: urlAll[i].url,
                        materialName: this.urlListImage.name[i]
                    })
                    img = new Image();
                    img.src = urlAll[i].url;
                }
            }
        },
        file(file) {
            let bmf = new BMF();
            let that = this;
            return new Promise(function (resolve, reject) {
                bmf.md5(file, (err, md5) => {
                    that.urlList.name = file.name;
                    that.urlList.md5 = md5;
                    fileCheck({
                        code: md5,
                        projectId: that.getData('projectId')
                    }).then((res) => {
                        if (res.code == 0) {
                            that.$message.error('此素材已经上传');
                            that.repeat = true;
                            reject()
                        }
                        else {
                            that.repeat = false
                            resolve()
                        }
                    });
                });
            });
        },
        fileWater(file) {
            let bmf = new BMF();
            let that = this;
            this.urlListImage = {
                url: [],
                md5: [],
                name: [],
                size: []
            };
            return new Promise(function (resolve, reject) {
                bmf.md5(file, (err, md5) => {
                    that.urlListImage.name.push(file.name);
                    that.urlListImage.md5.push(md5);
                    that.urlListImage.size.push(file.size);
                    resolve();
                });
            });
        },
        getParticipateList(value) {
            getAction('/ctop/projectMember/participateListV2', {
                userId: this.userInfo().id,
                pageSize: 50,
                pageNo: 1,
                projectName: value,
            }).then(res => {
                if (res.code == 0) {
                    let defaultData = res.result.records;
                    this.dataElse = defaultData;
                }
            });
        },
        getProjectId(items) {
            this.form.resetFields(['clipId', 'planId', 'shotId']);
            getAction('/ctop/projectMember/getMemberList', {
                projectId: items
            }).then(res => {
                if (res.code === 0) {
                    this.ascription.clipId = res.result.filter(item => {
                        if (
                            item.roleCode === 'clip'
                            || item.roleCode === 'plan'
                            || item.roleCode === 'designTeamLeader'
                            || item.roleCode === 'shot'
                            || item.roleCode === 'plane'
                            || item.roleCode === 'planeLeader'
                        ) {
                            return {
                                userId: item.userId,
                                userName: item.userName
                            };
                        }
                    });
                    this.ascription.shotId = res.result.filter(item => {
                        if (
                            item.roleCode === 'clip'
                            || item.roleCode === 'shot'
                            || item.roleCode === 'plan'
                            || item.roleCode === 'designTeamLeader'
                            || item.roleCode === 'plane'
                            || item.roleCode === 'planeLeader'
                        ) {
                            return {
                                userId: item.userId,
                                userName: item.userName
                            };
                        }
                    })
                    this.ascription.planId = res.result.filter(item => {
                        if (
                            item.roleCode === 'shot'
                            || item.roleCode === 'plan'
                            || item.roleCode === 'designTeamLeader'
                            || item.roleCode === 'clip'
                            || item.roleCode === 'plane'
                            || item.roleCode === 'planeLeader'
                        ) {
                            return {
                                userId: item.userId,
                                userName: item.userName
                            };
                        }
                    });
                    this.ascription.planeId = res.result.filter(item => {
                        if (item.roleCode === 'plane') {
                            return {
                                userId: item.userId,
                                userName: item.userName
                            };
                        }
                    });
                }
            });
        },
        getDataSource(page, pageSize) {
            this.ipagination.current = page;
            this.checkArr = [];
            this.checkAll = false;
            this.loadData();
        }
    }
};
</script>
<style lang="less" scoped>
    @import "creative-copywrit";
</style>