<style lang="scss">
::v-deep .usage-details-modal {
    width: 750px !important;
}
.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;
    //   height: 160px;
    //   line-height: 160px;
    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>
::v-deep .radio-cascader{
    height:32px !important;
}
::v-deep .radio-cascader .el-input .el-input__inner{
   height:32px !important;
}
.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: 50%;
    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;
    }
}

/*>=1024的设备*/

// @media (min-width: 1100px) {
//     .checkbox_item_container {
//         width:70%
//     }
// } /*>=1100的设备*/
@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;
    }
}

/*>=1280的设备*/

// @media (min-width: 1366px) {
// }

// @media (min-width: 1440px) {
// }

// @media (min-width: 1680px) {

// }
// @media (min-width: 1920px) {
//   .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;
//     cursor: pointer;
//   }
// }

.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">
                        <a-form-item label="素材名称" style="width: 100%">
                            <a-input
                                placeholder="请输入素材名称"
                                style="width: 100%"
                                v-model="queryParam.materialName"
                            ></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="媒体">
                            <a-select v-model="queryParam.mediaType" allowClear style="width: 100%">
                                <a-select-option :value="''"> 不限 </a-select-option>
                                <a-select-option :value="1"> 头条 </a-select-option>
                                <a-select-option :value="2"> 快手 </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <!--  -->
                    <a-col :md="8" :sm="8">
                        <a-form-item label="上传时间">
                            <a-range-picker
                                v-model="queryParam.createTimeDate"
                                format="YYYY-MM-DD"
                                style="width: 100%"
                            />
                        </a-form-item>
                    </a-col>
                    <!--  -->

                    <a-col :md="8" :sm="8">
                        <a-form-item label="来源">
                            <a-select v-model="queryParam.materialSource" allowClear style="width: 100%">
                                <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">
                        <a-form-item label="行业">
                            <j-tree-select
                                v-model="queryParam.industry"
                                ref="treeSelect"
                                placeholder="请选择行业"
                                dict="sys_category,name,id"
                                pidField="pid"
                                pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
                                style="width: 100%"
                            ></j-tree-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="版位">
                            <a-select v-model="queryParam.platePosition" style="width: 100%" allowClear placeholder="请选择版位">
                                <a-select-option value="优选广告位"> 优选广告位 </a-select-option>
                                <a-select-option value="上下滑大屏"> 上下滑大屏 </a-select-option>
                                <a-select-option value="激励视频广告"> 激励视频广告 </a-select-option>
                                <a-select-option value="联盟广告"> 联盟广告 </a-select-option>
                                <a-select-option value="系统优选广告位"> 系统优选广告位 </a-select-option>
                                <a-select-option value="今日头条"> 今日头条 </a-select-option>
                                <a-select-option value="西瓜视频"> 西瓜视频 </a-select-option>
                                <a-select-option value="抖音火山版"> 抖音火山版 </a-select-option>
                                <a-select-option value="抖音短视频"> 抖音短视频 </a-select-option>
                                <a-select-option value="穿山甲"> 穿山甲 </a-select-option>
                                <a-select-option value="ohayoo精品游戏"> ohayoo精品游戏 </a-select-option>
                                <a-select-option value="番茄小说"> 番茄小说 </a-select-option>
                                <a-select-option value="通投智选"> 通投智选 </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="场景标签">
                            <el-cascader
                                clearable
                                class="radio-cascader"
                                placeholder="搜索你想要的场景标签"
                                :options="departTreeSence"
                                v-model="queryParam.sceneTag"
                                :props="{
                                    multiple: false,
                                    value: 'tagCode',
                                    label: 'tagName',
                                    emitPath: false,
                                    checkStrictly: true,
                                    expandTrigger: 'hover',
                                }"
                                filterable
                                style="width: 100%"
                            ></el-cascader>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="形式标签">
                            <el-cascader
                                 class="radio-cascader"
                                 clearable
                                placeholder="搜索你想要的形式标签"
                                :options="departTreeModality"
                                v-model="queryParam.modalityTag"
                                :props="{
                                    multiple: false,
                                    value: 'tagCode',
                                    label: 'tagName',
                                    emitPath: false,
                                    checkStrictly: true,
                                    expandTrigger: 'hover',
                                }"
                                filterable
                                style="width: 100%"
                            ></el-cascader>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="基调标签">
                            <el-cascader
                                class="radio-cascader"
                                clearable
                                placeholder="搜索你想要的基调标签"
                                :options="departTreeMod"
                                v-model="queryParam.daTag"
                                :props="{
                                    multiple: false,
                                    value: 'tagCode',
                                    label: 'tagName',
                                    emitPath: false,
                                    checkStrictly: true,
                                    expandTrigger: 'hover',
                                }"
                                filterable
                                style="width: 100%"
                            ></el-cascader>
                        </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="searchQuery" 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>

        <!-- table区域-begin -->
        <!-- <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="batchUploadVisible = true" type="primary" icon="plus">批量上传</a-button>
        </div>
        <a-spin :spinning="spinning">
            <div v-if="dataSource.length > 0">
                <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
                    <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
                        <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
                            >
                                <a-tooltip placement="top">
                                    <template slot="title">
                                        <span>{{ items.materialName }}</span>
                                    </template>
                                    <span
                                        style="
                                            color: #999;
                                            fontsize: 14px;
                                            padding-bottom: 10px;
                                            display: inline-block;
                                            width: 100%;
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        "
                                        >{{ items.materialName }}</span
                                    >
                                </a-tooltip>
                                <a-tooltip placement="top">
                                    <template slot="title">
                                        <span>{{ items.materialDescribe }}</span>
                                    </template>
                                    <span
                                        style="
                                            color: #999;
                                            fontsize: 14px;
                                            padding-bottom: 10px;
                                            display: inline-block;
                                            width: 100%;
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        "
                                        >{{ items.materialDescribe }}</span
                                    >
                                </a-tooltip>
                            </a-badge>
                            <div
                                style="
                                    display: flex;
                                    justify-content: center;
                                    width: 100%;
                                    height: 200px;
                                    position: relative;
                                "
                            >
                                <!-- <video
                    :src="items.url"
                    @canplay="a(items)"
                    style="height:200px;max-width:100%;position:absolute;z-index:10;"
                    />-->
                                <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="./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="./douyin.jpg"
                                            alt
                                        />
                                        <img
                                            v-else-if="items.syncBytedance == 2 && items.toutiaoEffiType == 0"
                                            style="width: 30px; height: 30px; margin-left: 5px"
                                            src="./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.md5, items.mediaType)"
                                    :overlayStyle="{ width: '400px' }"
                                >
                                    <template slot="content" v-if="videoTag && videoTag.length > 0">
                                        <!-- {{ videoTag.join(',') }} -->
                                        <!-- <br v-if="index%3"/> -->
                                        <a-tag v-for="(item, index) of videoTag" :key="index" style="margin: 5px">{{
                                            item
                                        }}</a-tag>
                                    </template>
                                    <template slot="content" v-else-if="videoTag == null">
                                        <div style="width: 100%; text-align: center">暂无标签</div>
                                    </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>
                                <!-- <img
                    src="./timg.gif"
                    v-if="!items.showVideo"
                    alt=""
                    style="height:200px;max-width:100%;position:absolute;z-index:11;"
                    @click.stop
                    />-->
                            </div>
                            <div
                                style="width: 100%; height: 1px; border-bottom: 1px solid #f2f2f2; margin-top: 5px"
                            ></div>
                            <span
                                style="color: black; fontsize: 16px; padding-top: 10px; display: block; width: 100%"
                                @click.stop
                            >
                                <span>{{ items.materialSource | materialSource }}</span>
                                <a-tooltip placement="top">
                                    <template slot="title">
                                        <span>{{
                                            items.platePosition
                                                ? items.platePosition[0] == '['
                                                    ? JSON.parse(items.platePosition).join()
                                                    : items.platePosition
                                                : ''
                                        }}</span>
                                    </template>
                                    <span style="margin: 0px 10px">{{
                                        items.platePosition
                                            ? items.platePosition[0] == '['
                                                ? JSON.parse(items.platePosition)[0]
                                                : items.platePosition
                                            : ''
                                    }}</span>
                                </a-tooltip>

                                <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="1">
                                            <a
                                                href="javascript:;"
                                                style="margin-right: 20px"
                                                @click="editTagList(items)"
                                                >修改标签</a
                                            >
                                        </a-menu-item>
                                    </a-menu>
                                </a-dropdown>
                                <a-checkbox :value="items.id" style="float: right" v-show="active != '2'"></a-checkbox>
                                <br />
                                {{ items.statDate }}
                            </span>
                        </div>
                    </div>
                </a-checkbox-group>
                <a-pagination
                    size="small"
                    :showTotal="ipagination.showTotal"
                    style="float: right"
                    v-if="dataSource.length > 0"
                    showQuickJumper
                    showSizeChanger
                    :pageSize.sync="ipagination.pageSize"
                    :total="ipagination.total"
                    v-model="ipagination.current"
                    :pageSizeOptions="ipagination.pageSizeOptions"
                    @change="getDataSource"
                    @showSizeChange="getDataSourceSize"
                />
            </div>
            <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
                <a-empty />
            </div>
        </a-spin>

        <a-modal
            title="批量上传素材"
            v-model="batchUploadVisible"
            v-if="batchUploadVisible"
            :maskClosable="false"
            :width="1200"
        >
            <template slot="footer">
                <a-button type="primary" @click="handleOkBatch" :loading="loadingBatch">确定</a-button>
            </template>
            <a-form-model ref="ruleForm" :model="ruleForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                <a-form-model-item label="媒体">
                    <a-radio-group button-style="solid" v-model="ruleForm.mediaType">
                        <a-radio-button :value="2">快手</a-radio-button>
                        <a-radio-button :value="1">头条</a-radio-button>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="素材形式">
                    <a-radio-group
                        button-style="solid"
                        v-model="ruleForm.materialType"
                        @change="
                            ruleForm.urlListData = []
                            ruleForm.urlList = []
                            ruleForm.externalUrl = ''
                            ruleForm.materialSource = ''
                        "
                    >
                        <a-radio-button :value="1">视频</a-radio-button>
                        <a-radio-button :value="2">链接</a-radio-button>
                        <a-radio-button :value="3">批量导入链接</a-radio-button>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="视频上传" prop="videoList" v-if="ruleForm.materialType == 1">
                    <uploadFile
                        :checkFile="ruleFormFile"
                        :value.sync="ruleForm.urlList"
                        @overUpload="ruleFormOverUpload"
                        @removeUpload="ruleFormRemoveUpload"
                        :fileCount="10"
                        :sizeCheck="true"
                        uploadType="video"
                        :multiple="true"
                        v-if="batchUploadVisible"
                    />
                </a-form-model-item>
                <a-form-model-item
                    label="链接"
                    prop="externalUrl"
                    v-if="ruleForm.materialType == 2"
                    :rules="{
                        message: '链接不能为空且开头为http://或https://，并且长度小于10000',
                        trigger: 'change',
                        validator: handleConfirmValue,
                    }"
                >
                    <a-input
                        placeholder="请填写链接，回车添加"
                        @keyup.enter.native="okWord"
                        v-model="ruleForm.externalUrl"
                    />
                </a-form-model-item>
                <div v-if="ruleForm.materialType == 3">
                    <a-form-model-item label="" :wrapper-col="{ span: 14, offset: 4 }" prop="videoList">
                        <a-button @click="exportTemplate" type="primary">导出模板</a-button>
                    </a-form-model-item>
                    <a-form-model-item label="上传文件" prop="videoList" class="fileUpload" id="fileUpload">
                        <!-- <uploadFile
                            :checkFile="ruleFormFile"
                            :value.sync="ruleForm.urlList"
                            @overUpload="ruleFormOverUpload"
                            @removeUpload="ruleFormRemoveUpload"
                            :fileCount="10"
                            :sizeCheck="true"
                            uploadType="video"
                            :multiple="true"
                            v-if="batchUploadVisible"
                        /> -->
                        <a-upload
                            name="file"
                            :multiple="false"
                            :headers="tokenHeader"
                            :file-list="fileList"
                            :showUploadList="false"
                            :beforeUpload="beforeUpload"
                            @change="handleChangeUpload"
                            style="margin-right: 20px"
                        >
                            <a-button>
                                <a-icon type="upload" />
                                {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
                            </a-button>
                        </a-upload>
                        <span>支持扩展名：xlsx、xls</span>
                    </a-form-model-item>
                    <a-form-model-item
                        label="来源"
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }"
                        prop="materialSource"
                        :rules="{
                            required: true,
                            message: '来源必选',
                            trigger: 'blur',
                        }"
                        style="display: flex"
                    >
                        <a-select
                            v-model="ruleForm.materialSource"
                            style="width: 50%"
                            allowClear
                            placeholder="请选择来源"
                        >
                            <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-model-item>
                </div>

                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <el-collapse v-model="activeCollapse" accordion v-if="ruleForm.urlListData.length > 0">
                        <el-collapse-item
                            :title="'视频' + (index + 1)"
                            :name="index"
                            v-for="(items, index) of ruleForm.urlListData"
                            :key="index"
                        >
                            <a-form-model-item
                                label="视频"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                                v-if="items.url"
                            >
                                <video :src="items.url" style="width: 150px"></video>
                            </a-form-model-item>

                            <a-form-model-item
                                label="视频链接"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                                v-if="items.externalUrl"
                            >
                                <a-tooltip placement="top">
                                    <template slot="title">
                                        <span>{{ items.externalUrl }}</span>
                                    </template>
                                    <span
                                        style="
                                            color: #999;
                                            fontsize: 14px;
                                            padding-bottom: 10px;
                                            display: inline-block;
                                            width: 100%;
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        "
                                        >{{ items.externalUrl }}</span
                                    >
                                </a-tooltip>
                            </a-form-model-item>
                            <a-form-model-item
                                label="来源"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                                :prop="'urlListData.' + index + '.materialSource'"
                                :rules="{
                                    required: true,
                                    message: '来源必选',
                                    trigger: 'blur',
                                }"
                                style="display: flex"
                            >
                                <a-select
                                    v-model="items.materialSource"
                                    style="width: 80%"
                                    allowClear
                                    placeholder="请选择来源"
                                >
                                    <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 style="margin-left: 5px" @click="syncDesign(1)" v-if="index == 0"> 同步来源</a>
                            </a-form-model-item>
                            <a-form-model-item
                                label="行业"
                                :prop="'urlListData.' + index + '.industry'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                                :rules="{
                                    required: true,
                                    message: '行业必选',
                                    trigger: 'change',
                                }"
                            >
                                <j-tree-select
                                    style="width: 80%"
                                    v-model="items.industry"
                                    ref="treeSelect"
                                    placeholder="请选择行业"
                                    dict="sys_category,name,id"
                                    pidField="pid"
                                    pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
                                ></j-tree-select>
                                <a style="margin-left: 5px" @click="syncDesign(2)" v-if="index == 0"> 同步行业</a>
                            </a-form-model-item>
                            <a-form-model-item
                                label="形式标签"
                                :prop="'urlListData.' + index + '.modalityTag'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                                :rules="{
                                    required: true,
                                    message: '形式标签必选',
                                    trigger: 'change',
                                }"
                            >
                                <el-cascader
                                    placeholder="搜索你想要的形式标签"
                                    :options="departTreeModality"
                                    v-model="items.modalityTag"
                                    :props="{
                                        multiple: true,
                                        value: 'tagCode',
                                        label: 'tagName',
                                        emitPath: false,
                                        checkStrictly: true,
                                        expandTrigger: 'hover',
                                    }"
                                    filterable
                                    style="width: 80%"
                                ></el-cascader>
                                <a style="margin-left: 5px" @click="syncDesign(3)" v-if="index == 0"> 同步形式标签</a>
                            </a-form-model-item>
                            <a-form-model-item
                                label="场景标签"
                                :prop="'urlListData.' + index + '.sceneTag'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                                :rules="{
                                    required: true,
                                    message: '场景标签必选',
                                    trigger: 'change',
                                }"
                                v-if="
                                    !items.modalityTag.includes(60158) &&
                                    !items.modalityTag.includes(60159) &&
                                    !items.modalityTag.includes(101) &&
                                    !items.modalityTag.includes(104) &&
                                    !items.modalityTag.includes(112)
                                "
                            >
                                <el-cascader
                                    placeholder="搜索你想要的场景标签"
                                    :options="departTreeSence"
                                    v-model="items.sceneTag"
                                    :props="{
                                        multiple: true,
                                        value: 'tagCode',
                                        label: 'tagName',
                                        emitPath: false,
                                        checkStrictly: true,
                                        expandTrigger: 'hover',
                                    }"
                                    filterable
                                    style="width: 80%"
                                ></el-cascader>
                                <a style="margin-left: 5px" @click="syncDesign(4)" v-if="index == 0"> 同步场景标签</a>
                            </a-form-model-item>
                            <a-form-model-item
                                label="基调标签"
                                :prop="'urlListData.' + index + '.daTag'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                                :rules="{
                                    required: true,
                                    message: '基调标签必选',
                                    trigger: 'change',
                                }"
                            >
                                <el-cascader
                                    placeholder="搜索你想要的基调标签"
                                    :options="departTreeMod"
                                    v-model="items.daTag"
                                    :props="{
                                        multiple: true,
                                        value: 'tagCode',
                                        label: 'tagName',
                                        emitPath: false,
                                        checkStrictly: true,
                                        expandTrigger: 'hover',
                                    }"
                                    filterable
                                    style="width: 80%"
                                ></el-cascader>
                                <a style="margin-left: 5px" @click="syncDesign(5)" v-if="index == 0"> 同步基调标签</a>
                            </a-form-model-item>
                            <a-form-model-item
                                label="版位"
                                v-if="ruleForm.mediaType != 1"
                                :prop="'urlListData.' + index + '.platePosition'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                            >
                                <a-select
                                    v-model="items.platePosition"
                                    allowClear
                                    mode="multiple"
                                    placeholder="请选择版位"
                                    style="width: 80%"
                                >
                                    <a-select-option value="优选广告位"> 优选广告位 </a-select-option>
                                    <a-select-option value="上下滑大屏"> 上下滑大屏 </a-select-option>
                                    <a-select-option value="激励视频广告"> 激励视频广告 </a-select-option>
                                    <a-select-option value="联盟广告"> 联盟广告 </a-select-option>
                                </a-select>
                                <a style="margin-left: 5px" @click="syncDesign(6)" v-if="index == 0"> 同步版位</a>
                            </a-form-model-item>
                            <a-form-model-item
                                label="版位"
                                v-else
                                :prop="'urlListData.' + index + '.platePosition'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                            >
                                <a-select
                                    v-model="items.platePosition"
                                    allowClear
                                    mode="multiple"
                                    style="width: 80%"
                                    placeholder="请选择版位"
                                >
                                    <a-select-option value="系统优选广告位"> 系统优选广告位 </a-select-option>
                                    <a-select-option value="今日头条"> 今日头条 </a-select-option>
                                    <a-select-option value="西瓜视频"> 西瓜视频 </a-select-option>
                                    <a-select-option value="抖音火山版"> 抖音火山版 </a-select-option>
                                    <a-select-option value="抖音短视频"> 抖音短视频 </a-select-option>
                                    <a-select-option value="穿山甲"> 穿山甲 </a-select-option>
                                    <a-select-option value="ohayoo精品游戏"> ohayoo精品游戏 </a-select-option>
                                    <a-select-option value="番茄小说"> 番茄小说 </a-select-option>
                                    <a-select-option value="通投智选"> 通投智选 </a-select-option>
                                </a-select>
                                <a style="margin-left: 5px" @click="syncDesign(6)" v-if="index == 0"> 同步版位</a>
                            </a-form-model-item>

                            <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="描述">
                                <a-textarea
                                    placeholder="请输入10字之内的描述"
                                    v-model="items.materialDescribe"
                                    :auto-size="{ minRows: 3, maxRows: 10 }"
                                    style="width: 80%"
                                    :max-length="10"
                                />
                            </a-form-model-item>
                            <!-- <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" v-if="index == 0">
                                <a-button type="primary" @click="syncDesign">剩余素材同步设计人员</a-button>
                            </a-form-model-item> -->
                        </el-collapse-item>
                    </el-collapse>
                </a-form-model-item>
            </a-form-model>
        </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="getData('materialType') != 2 && !confirmLoading"
                    @click="handleOk"
                    :loading="loadingElse"
                    >确定</a-button
                >
            </template>

            <a-form layout="horizontal" v-bind:label-col="labelCol" v-bind:wrapper-col="wrapperCol" :form="form">
                <a-form-item label="媒体">
                    <a-radio-group
                        button-style="solid"
                        v-decorator="[
                            'mediaType',
                            {
                                rules: [{ required: true, message: '媒体必选' }],
                                initialValue: 2,
                            },
                        ]"
                        @change="form.setFieldsValue({ platePosition: undefined })"
                    >
                        <a-radio-button :value="2">快手</a-radio-button>
                        <a-radio-button :value="1">头条</a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="素材形式">
                    <a-radio-group
                        button-style="solid"
                        v-decorator="[
                            'materialType',
                            {
                                initialValue: 1,
                            },
                        ]"
                    >
                        <a-radio-button :value="1">视频</a-radio-button>
                        <a-radio-button :value="2">链接</a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    label="视频素材上传"
                    v-if="getData('materialType') != 2"
                >
                    <uploadFile
                        :checkFile="file"
                        :value.sync="urlList.url"
                        @overUpload="overUpload"
                        @removeUpload="removeUpload"
                        :fileCount="1"
                        uploadType="video"
                        :multiple="false"
                        v-if="getData('materialType') != 2"
                    />
                    <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="填写链接" v-else>
                    <a-input
                        placeholder="请填写视频链接"
                        v-decorator="[
                            'externalUrl', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请填写视频链接!' }] },
                        ]"
                    />
                </a-form-item>
                <a-form-item label="来源">
                    <a-select
                        v-decorator="[
                            'materialSource', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择来源!' }] },
                        ]"
                        allowClear
                        placeholder="请选择来源"
                    >
                        <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-form-item label="行业">
                    <j-tree-select
                        v-decorator="[
                            'industry', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择行业!' }] },
                        ]"
                        ref="treeSelect"
                        placeholder="请选择行业"
                        dict="sys_category,name,id"
                        pidField="pid"
                        pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
                    ></j-tree-select>
                </a-form-item>
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 12 },
                    }"
                    label="形式标签"
                >
                    <el-cascader
                        placeholder="搜索你想要的形式标签"
                        :options="departTreeModality"
                        v-decorator="[
                            'modalityTag', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择形式标签!' }], initialValue: [] },
                        ]"
                        :props="{
                            multiple: true,
                            value: 'tagCode',
                            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="
                        !getData('modalityTagList') ||
                        (!getData('modalityTagList').includes(60158) &&
                            !getData('modalityTagList').includes(60159) &&
                            !getData('modalityTagList').includes(101) &&
                            !getData('modalityTagList').includes(104) &&
                            !getData('modalityTagList').includes(112))
                    "
                >
                    <el-cascader
                        placeholder="搜索你想要的场景标签"
                        :options="departTreeSence"
                        v-decorator="[
                            'sceneTag', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择场景标签!' }] },
                        ]"
                        :props="{
                            multiple: true,
                            value: 'tagCode',
                            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-decorator="[
                            'daTag', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择基调标签!' }] },
                        ]"
                        :props="{
                            multiple: true,
                            value: 'tagCode',
                            label: 'tagName',
                            emitPath: false,
                            checkStrictly: true,
                            expandTrigger: 'hover',
                        }"
                        filterable
                        style="width: 100%"
                    ></el-cascader>
                </a-form-item>
                <a-form-item label="版位" v-if="getData('mediaType') != 1">
                    <a-select v-decorator="['platePosition']" allowClear mode="multiple" placeholder="请选择版位">
                        <a-select-option value="优选广告位"> 优选广告位 </a-select-option>
                        <a-select-option value="上下滑大屏"> 上下滑大屏 </a-select-option>
                        <a-select-option value="激励视频广告"> 激励视频广告 </a-select-option>
                        <a-select-option value="联盟广告"> 联盟广告 </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="版位" v-else>
                    <a-select v-decorator="['platePosition']" allowClear mode="multiple" placeholder="请选择版位">
                        <a-select-option value="系统优选广告位"> 系统优选广告位 </a-select-option>
                        <a-select-option value="今日头条"> 今日头条 </a-select-option>
                        <a-select-option value="西瓜视频"> 西瓜视频 </a-select-option>
                        <a-select-option value="抖音火山版"> 抖音火山版 </a-select-option>
                        <a-select-option value="抖音短视频"> 抖音短视频 </a-select-option>
                        <a-select-option value="穿山甲"> 穿山甲 </a-select-option>
                        <a-select-option value="ohayoo精品游戏"> ohayoo精品游戏 </a-select-option>
                        <a-select-option value="番茄小说"> 番茄小说 </a-select-option>
                        <a-select-option value="通投智选"> 通投智选 </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 12 },
                    }"
                    label="描述"
                    v-if="add"
                >
                    <a-textarea
                        placeholder="请输入10字之内的描述"
                        v-decorator="[
                            'materialDescribe', // 给表单赋值或拉取表单时，该input对应的key
                        ]"
                        :auto-size="{ minRows: 3, maxRows: 10 }"
                        :max-length="10"
                    />
                </a-form-item>
            </a-form>
        </a-modal>

        <a-modal title="素材详情" v-model="visibleDetail" width="70%" :footer="null">
            <div style="display: flex; max-height: 500px">
                <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>
                <div style="flex: 3; padding: 10px; box-sizing: border-box; height: 500px; overflow-y: auto">
                    <a-form v-if="allDetailData" class="detail ant-advanced-search-form" layout="inline">
                        <div>
                            <a-form-item label="视频名称">{{ allDetailData.materialName }}</a-form-item>
                        </div>
                        <div>
                            <a-form-item label="唯一编码">{{ allDetailData.md5 }}</a-form-item>
                        </div>

                        <a-form-item label="视频链接" style="margin-bottom: -10px !important">
                            <a-tooltip placement="top">
                                <template slot="title">
                                    <span>{{ allDetailData.url }}</span>
                                </template>
                                <span
                                    style="
                                        color: #999;
                                        fontsize: 14px;
                                        display: inline-block;
                                        width: 480px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    "
                                    >{{ allDetailData.url }}</span
                                >
                            </a-tooltip>
                        </a-form-item>
                        <div style="display: flex">
                            <a-form-item label="视频时长" style="flex: 1">{{ allDetailData.second }}秒</a-form-item>
                            <a-form-item label="尺寸" style="flex: 1"
                                >{{ allDetailData.width }}*{{ allDetailData.height }}</a-form-item
                            >
                            <a-form-item label="大小" style="flex: 1">{{ allDetailData.size }}</a-form-item>
                        </div>
                        <div>
                            <a-form-item label="行业" v-if="allDetailData.industry && allDetailData.industry != ''">
                                <!-- {{ allDetailData.industry ? allDetailData.industry : '-' }} -->
                                <j-tree-select
                                    v-model="allDetailData.industry"
                                    ref="treeSelect"
                                    placeholder="请选择行业"
                                    dict="sys_category,name,id"
                                    pidField="pid"
                                    pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
                                    style="width: 300px"
                                    disabled
                                ></j-tree-select>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="标签">
                                <div v-if="tagInfoList.length > 0">
                                    <a-tag v-for="(item, index) of tagInfoList" :key="index">{{ item.tagName }}</a-tag>
                                </div>
                                <span v-else> - </span>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item label="版位">
                                {{
                                    allDetailData.platePosition
                                        ? allDetailData.platePosition[0] == '['
                                            ? JSON.parse(allDetailData.platePosition).join()
                                            : allDetailData.platePosition
                                        : '-'
                                }}
                            </a-form-item>
                        </div>

                        <div>
                            <a-form-item label="素材描述">
                                {{ allDetailData.materialDescribe ? allDetailData.materialDescribe : '-' }}</a-form-item
                            >
                        </div>
                    </a-form>
                </div>
            </div>
        </a-modal>
        <a-modal title="标签修改" v-model="tagInfoListVisible">
            <template slot="footer">
                <a-button
                    key="back"
                    @click="
                        tagInfoListVisible = false
                        departValueInfoModality = []
                        departValueInfoMod = []
                        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="行业"
            >
                <j-tree-select
                    v-model="industryId"
                    ref="treeSelect"
                    placeholder="请选择行业"
                    dict="sys_category,name,id"
                    pidField="pid"
                    pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
                    style="width: 300px"
                ></j-tree-select>
            </a-form-item>
            <a-form-item
                :label-col="labelCol"
                :wrapper-col="{
                    xs: { span: 24 },
                    sm: { span: 12 },
                }"
                label="形式"
            >
                <el-cascader
                    placeholder="搜索你想要的形式标签"
                    :options="departTreeModality"
                    v-model="departValueInfoModality"
                    @change="clearChangjing"
                    :props="{
                        multiple: true,
                        value: 'tagCode',
                        label: 'tagName',
                        emitPath: false,
                        checkStrictly: true,
                        expandTrigger: 'hover',
                    }"
                    filterable
                    style="width: 100%"
                    v-if="tagInfoListVisible"
                ></el-cascader>
            </a-form-item>
            <!-- <a-form-item
        :label-col="labelCol"
        :wrapper-col="{
          xs: { span: 24 },
          sm: { span: 12 },
        }"
        label="内容"
      >
        <el-cascader
          placeholder="搜索你想要的内容标签"
          :options="departTreeContent"
          v-model="departValueInfoContent"
          :props="{ multiple: true, value: 'tagCode', label: 'tagName', emitPath: false }"
          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="
                    !departValueInfoModality.includes(60158) &&
                    !departValueInfoModality.includes(60159) &&
                    !departValueInfoModality.includes(101) &&
                    !departValueInfoModality.includes(104) &&
                    !departValueInfoModality.includes(112)
                "
            >
                <el-cascader
                    placeholder="搜索你想要的场景标签"
                    :options="departTreeSence"
                    v-model="departValueInfoSence"
                    :props="{
                        multiple: true,
                        value: 'tagCode',
                        label: 'tagName',
                        emitPath: false,
                        checkStrictly: true,
                        expandTrigger: 'hover',
                    }"
                    filterable
                    style="width: 100%"
                    v-if="tagInfoListVisible"
                ></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: 'tagCode',
                        label: 'tagName',
                        emitPath: false,
                        checkStrictly: true,
                        expandTrigger: 'hover',
                    }"
                    filterable
                    style="width: 100%"
                    v-if="tagInfoListVisible"
                ></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>
        <permission-modal ref="modalForm" @ok="modalFormOkElse"></permission-modal>
        <!-- 换脸模块 -->
        <change-face
            :status="faceTypeStatus"
            :defaultList="faceChangeList"
            @closeface="handleFaceCloseModal"
            @sureface="handleFaceSureModal"
        >
        </change-face>

        <a-modal
            v-if="rejectReasonStatus"
            title="审核拒绝原因"
            :width="750"
            :visible="rejectReasonStatus"
            :footer="null"
            @cancel="handleRejectReasonCancel"
        >
            <div>
                <p v-for="(item, index) in rejectReasonList" :key="index + 1">{{ index + 1 }}：{{ item }}</p>
            </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-card>
</template>

<script>
import changeFace from '@/views/modules/Statistics/change-face/change-face'
import PermissionModal from './modules/DepartModal'
import { JeecgListMixin } from '@/mixins/videoMaterialMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import { fileCheck, fileEdit, fileEditAll, fileInsertV2 } from '@/api/actor'
import { deleteAction, getAction, postAction, putAction, downFile } from '@/api/manage'
import qs from 'qs'
import { mapGetters } from 'vuex'
import moment from 'moment'

import JTreeSelect from '@/components/jeecg/JTreeSelect'
import selectTable from './comment/selectTable.vue'
import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue'
import BMF from 'browser-md5-file'
import uploadFile from './comment/uploadFilePopilar.vue'
import { closeAllVideoFun, stopOtherVideo } from '@/utils/videoControl'
import accountCheck from './accountCheck'
import accountCheckBytedance from './accountCheckBytedance'
let md5Arr = []
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import $ from 'jquery'
export default {
    name: 'video-material',
    mixins: [JeecgListMixin],
    components: {
        JTreeSelect,
        JEllipsis,
        accountCheck,
        selectTable,
        uploadFile,
        PermissionModal,
        accountCheckBytedance,
        selectTableProject,
        changeFace,
    },
    data() {
        return {
            tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
            fileList: [],
            loadDisabled: false,
            rejectReasonStatus: false,
            dataFile: null,
            defaultCurrentKuaishou: 1,
            materiaDataTotalKuaishou: 0,
            kuaishouMateriaLoading: false,
            materiaDataKuaishou: [],
            materiaColumnsKuaishou: [
                {
                    title: '账户ID',
                    align: 'center',
                    dataIndex: 'accountId',
                },
                {
                    title: '账户所属人',
                    align: 'center',
                    dataIndex: 'userName',
                },
                {
                    title: '账户状态',
                    align: 'center',
                    dataIndex: 'accountStatus',
                    scopedSlots: { customRender: 'accountStatus' },
                },
                {
                    title: '视频ID',
                    align: 'center',
                    dataIndex: 'photoId',
                },
                {
                    title: '关联创意总数（自定义创意）',
                    align: 'center',
                    dataIndex: 'relationCount',
                },
                {
                    title: '审核拒绝创意数',
                    align: 'center',
                    dataIndex: 'refuseCount',
                    scopedSlots: { customRender: 'refuseCount' },
                },
                {
                    title: '审核拒绝原因',
                    align: 'center',
                    dataIndex: 'refuseDetail',
                    scopedSlots: { customRender: 'refuseDetail' },
                },
            ],
            passTheAuditLoading: false,
            toutiaoMateriaLoading: false,
            defaultCurrentToutiao: 1,
            materiaDataTotalToutiao: 0,
            materiaDataToutiao: [],
            materiaColumnsToutiao: [
                {
                    title: '账户ID',
                    align: 'center',
                    dataIndex: 'accountId',
                },
                {
                    title: '账户归属人',
                    align: 'center',
                    dataIndex: 'userName',
                },
                {
                    title: '账户状态',
                    align: 'center',
                    dataIndex: 'accountStatus',
                    scopedSlots: { customRender: 'accountStatus' },
                },
                {
                    title: '素材ID',
                    align: 'center',
                    dataIndex: 'materialId',
                },
                {
                    title: '素材关联创意数',
                    align: 'center',
                    dataIndex: 'relationCount',
                },
            ],
            materiaModalType: '2',
            materialUseDetailList: {},
            usageDetailsStatus: false,
            recordDetailVisible: false,
            recordSignature: null,
            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',
                },
            ],
            ruleForm: {
                urlList: [],
                externalUrl: '',
                urlListData: [],
                mediaType: 2,
                materialType: 1,
                materialSource: '',
            },
            loadingBatch: false,
            batchUploadVisible: false,
            controlLoading: false,
            defaultCurrent: 1,
            settlementColumns: [
                {
                    title: '原视频',
                    dataIndex: 'input_video_url',
                    align: 'center',
                    width: 150,
                    scopedSlots: { customRender: 'input_video_url' },
                },
                {
                    title: '人脸',
                    dataIndex: 'input_image_url',
                    align: 'center',
                    width: 150,
                    scopedSlots: { customRender: 'input_image_url' },
                },
                {
                    title: '更换后视频',
                    dataIndex: 'output_video_url',
                    align: 'center',
                    width: 150,
                    scopedSlots: { customRender: 'output_video_url' },
                },
                {
                    title: '状态',
                    align: 'center',
                    dataIndex: 'status',
                    width: 100,
                },
                {
                    title: '创建时间',
                    align: 'center',
                    dataIndex: 'create_time',
                    width: 160,
                },
                {
                    title: '操作',
                    align: 'center',
                    dataIndex: 'actions',
                    width: 130,
                    scopedSlots: { customRender: 'actions' },
                },
            ],
            faceShowStatus: false,
            faceTypeStatus: false,
            faceChangeList: {},
            designList: [],
            // 标签的数据
            labelValue: [],
            options: [],
            departTree: [],
            departTreeModality: [],
            departTreeContent: [],
            departTreeSence: [],
            departTreeMod: [],
            departValue: [],
            departValueInfo: [],
            materialInnovate: false,
            industryId: '',
            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: 'coverUrl',
                    //   key: 'coverUrl',
                    dataIndex: 'url',
                    align: 'center',
                    scopedSlots: {
                        customRender: 'url',
                    },
                },
                {
                    title: '审核',
                    align: 'center',
                    dataIndex: 'action',
                    width: 100,
                    scopedSlots: {
                        customRender: 'action',
                    },
                },
            ],
            editMaterialVisible: false,
            editMaterialId: '',
            loadingEdit: false,
            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: '已驳回',
                },
                // {
                //   value: '3',
                //   tab: '有效视频',
                // },
            ],
            // 表头
            columns: [],
            urlList: {
                url: '',
                md5: '',
                name: '',
            },
            urlListImage: {
                url: [],
                md5: [],
                name: [],
                size: [],
            },
            watermarkUrl: {
                url: '',
                md5: '',
                name: '',
            },
            url: {
                list: '/external/materialCollection/list',
            },
            detail: false,
            form: this.$form.createForm(this),
            formPerson: this.$form.createForm(this),
            editMaterialform: 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',
            showDataList: null,
            showDataListVisible: false,
            checkArr: [],
            checkAll: false,
            checkArrImage: [],
            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: '',
            videoVisibleMediaType: '',
            allDetailData: null,
            dataAllList: [],
            dataSourceFace: [],
            totalAll: 0,
            activeCollapse: 0,
        }
    },
    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
        },
        materialSource(value) {
            let data = {
                1: '巨量创意',
                2: '开眼快创',
                3: '头条提供',
                4: '快手提供',
                5: '头条自产',
                6: '快手自产',
            }
            return data[value] ? data[value] : value
        },
    },
    computed: {
        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.queryParam.status = key
        this.queryParam.mediaType = ''
        this.ipagination.pageSize = 8
        // /sys/user/getRoleInfo
        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(function () {
            document.querySelectorAll('.el-cascader-node__label').forEach((el) => {
                el.onclick = function () {
                    if (this.previousElementSibling) this.previousElementSibling.click()
                }
            })
        }, 1000)
        this.getDesignList()
        getAction('/ctop/tagInfo/treeList', {
            pageSize: 10000,
        }).then((res) => {
            console.log(res)
            if (res.success) {
                this.options = res.result.records
            } else {
                this.$message.error('数据请求失败！')
            }
        })
    },
    watch: {
        tagInfoListVisible(n, o) {
            if (!n) {
                this.departValueInfoModality = []
                this.departValueInfoMod = []
                this.departValueInfoSence = []
            }
        },
        $route: function (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: function (n, o) {
            if (!n) {
                this.refuseFile = []
                this.refuseReason = ''
                closeAllVideoFun()
            }
        },

        labelValue: {
            deep: true,
            handler(n, o) {
                if (n.length >= 1) {
                    this.queryParam.tagCode = n[n.length - 1]
                } else {
                    this.queryParam.tagCode = ''
                }
                // this.loadData()
            },
        },
        batchUploadVisible: function (n, o) {
            if (!n) {
                md5Arr = []
                this.ruleForm = {
                    urlList: [],
                    urlListData: [],
                    mediaType: 2,
                    materialType: 1,
                    externalUrl: '',
                    materialSource: '',
                }
            }
        },
    },
    methods: {
        beforeUpload(file) {
            const fileSuffix = ['xlsx', 'xls', 'zip']
            this.dataFile = $('.fileUpload').eq(0).find('input')[0].files[0]
            this.loadDisabled = true
            const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
            const fileName = file.name
            const fileStrArr = fileName.split('.')
            const suffix = fileStrArr[fileStrArr.length - 1]

            let result = fileSuffix.some((item) => {
                return item === suffix
            })

            if (!result) {
                this.$message.error('不支持该文件类型')
                this.loadDisabled = false
                return Promise.reject()
            }
        },
        handleChangeUpload() {
            this.loadDisabled = false
            this.$message.success('文件导入成功')
        },
        handleMateriaTabsChange(e) {
            const defaultData = this.materialUseDetailList
            this.defaultCurrentToutiao = 1
            this.materiaDataToutiao = defaultData['byteDance'] ? defaultData['byteDance'].slice(0, 10) : []
            this.defaultCurrentKuaishou = 1
            this.materiaDataKuaishou = defaultData['kuaishou'] ? defaultData['kuaishou'].slice(0, 10) : []
        },
        handleRejectReasonCancel() {
            this.rejectReasonStatus = false
        },
        handleRejectReason(data) {
            this.rejectReasonList = data.refuseInfo.refuseDetail.split('@#')
            this.rejectReasonStatus = true
        },
        materiaDataSizeChange(current, pageSize) {
            this.materiaDataToutiao = []
            this.defaultCurrentToutiao = current
            const defaultData = this.materialUseDetailList['byteDance']
            this.materiaDataToutiao = [...defaultData.slice(10 * current - 10, 10 * current)]
        },
        ruleFormFile(file) {
            var bmf = new BMF()
            var that = this
            return new Promise(function (resolve, reject) {
                bmf.md5(file, (err, md5) => {
                    let videoInfo = { name: file.name, md5: md5 }
                    if (md5Arr.findIndex((item) => item == md5) > -1) {
                        reject()
                        that.$message.error('素材' + file.name + '已经上传')
                        return
                    } else {
                        md5Arr.push(md5)
                    }

                    // that.ruleForm.urlList = []
                    that.getAction('/external/materialCollection/checkMaterialByMd5', {
                        md5: md5,
                    }).then((res) => {
                        if (res.code == 0) {
                            that.$message.error('素材' + file.name + '已经上传')
                            reject()
                        } else {
                            that.repeat = false
                            resolve()
                            //   reject()
                        }
                    })
                })
            })
        },
        handleConfirmValue(rule, value, callback) {
            if ((/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) || value == '') {
                callback()
            } else {
                callback('链接不能为空且开头为http://或https://，并且长度小于10000')
            }
        },
        okWord() {
            this.$refs.ruleForm.validateField('externalUrl', (valid) => {
                if (valid == '链接不能为空且开头为http://或https://，并且长度小于10000') {
                    this.$message.error('请填写正确链接')
                } else {
                    if (this.ruleForm.externalUrl != '') {
                        this.ruleForm.urlListData.push({
                            externalUrl: this.ruleForm.externalUrl,
                            daTag: [],
                            modalityTag: [],
                            sceneTag: [],
                            materialSource: undefined,
                            industry: undefined,
                            platePosition: undefined,
                            materialDescribe: undefined,
                        })
                        this.ruleForm.externalUrl = ''
                    } else {
                        this.$message.error('请填写正确链接')
                    }
                }
            })
        },
        exportTemplate() {
            downFile('/external/materialCollection/exportTemplate').then((res) => {
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spre1adsheetml.sheet',
                })
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = '导入链接模板.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },
        ruleFormOverUpload(urlAll) {
            if (this.ruleForm.urlListData.length == 0) {
                this.ruleForm.urlListData = urlAll.map((item) => {
                    return {
                        url: item.url,
                        daTag: [],
                        modalityTag: [],
                        sceneTag: [],
                        materialSource: undefined,
                        industry: undefined,
                        platePosition: undefined,
                        materialDescribe: undefined,
                    }
                })
            } else {
                var data = JSON.parse(JSON.stringify(urlAll))
                data.splice(0, this.ruleForm.urlListData.length)
                this.ruleForm.urlListData.push(
                    ...data.map((item) => {
                        return {
                            url: item.url,
                            daTag: [],
                            modalityTag: [],
                            sceneTag: [],
                            materialSource: undefined,
                            industry: undefined,
                            platePosition: undefined,
                            materialDescribe: undefined,
                        }
                    })
                )
                // for (let i = 0; i < this.ruleForm.urlListData.length; i++) {
                //     for (let j = 0; j < urlAll.length; j++) {
                //         if (this.ruleForm.urlListData[i].url == urlAll[j].url) {
                //         } else {
                //             this.ruleForm.urlListData.push({
                //                 url: urlAll[j].url,
                //                 daTag: [],
                //                 modalityTag: [],
                //                 sceneTag: [],
                //                 materialSource: undefined,
                //                 industry: undefined,
                //                 platePosition: undefined,
                //                 materialDescribe: undefined,
                //             })
                //         }
                //     }
                // }
            }
            console.log(urlAll, this.ruleForm.urlListData)
        },
        ruleFormRemoveUpload(file) {
            //media-1301855440.cos.ap-chongqing.myqcloud.com/video/2021-08-16/03-1629102879421.mp4
            let index = this.ruleForm.urlListData.findIndex((item) => item.url == file.url)
            md5Arr = []
            if (index > -1) {
                this.ruleForm.urlListData.splice(index, 1)
            }
        },
        handleOkBatch() {
            if (this.ruleForm.materialType == 3) {
                this.loadingBatch = true
                if (this.dataFile) {
                    let formData = new FormData()
                    formData.append('file', this.dataFile)
                    formData.append('materialSource', this.ruleForm.materialSource)
                    formData.append('userId', this.userInfo().id)
                    formData.append('mediaType', this.ruleForm.mediaType)

                    postAction('/external/materialCollection/addMoreVideosByExcel', formData).then((res) => {
                        this.loadingBatch = false
                        if (res.code === 200) {
                            this.$message.success(res.message)
                            this.dataFile = null
                            this.batchUploadVisible = false
                            this.loadData(1)
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    this.$message.error('请上传文件')
                }
            } else {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (this.ruleForm.urlListData.length == 0) {
                            this.$message.error('请上传视频素材或填写链接')
                            return
                        }
                        this.loadingBatch = true
                        let params = {}
                        params.videoArray = this.ruleForm.urlListData.map((item) => {
                            return {
                                ...item,
                                mediaType: this.ruleForm.mediaType,
                                userId: this.userInfo().id,
                            }
                        })
                        if (this.ruleForm.materialType == 1) {
                            postAction('/external/materialCollection/addMoreVideos', params.videoArray).then((res) => {
                                this.loadingBatch = false
                                if (res.success) {
                                    md5Arr = []
                                    this.$message.success('上传成功')
                                    this.batchUploadVisible = false
                                    this.loadData(1)
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                        } else if (this.ruleForm.materialType == 2) {
                            postAction('/external/materialCollection/addMoreVideosByUrl', params.videoArray).then(
                                (res) => {
                                    this.loadingBatch = false
                                    if (res.success) {
                                        md5Arr = []
                                        this.$message.success('上传成功')
                                        this.batchUploadVisible = false
                                        this.loadData(1)
                                    } else {
                                        this.$message.error(res.message)
                                    }
                                }
                            )
                        }
                    } else {
                        this.$message.error('有必填项未填')
                    }
                })
            }
        },
        syncDesign(value) {
            // let clipId = this.ruleForm.urlListData[0].clipId
            // let planId = this.ruleForm.urlListData[0].planId
            // let shotId = this.ruleForm.urlListData[0].shotId
            switch (value) {
                case 1:
                    let materialSource = this.ruleForm.urlListData[0].materialSource
                    this.ruleForm.urlListData = this.ruleForm.urlListData.map((item) => {
                        return {
                            ...item,
                            materialSource,
                        }
                    })
                    break
                case 2:
                    let industry = this.ruleForm.urlListData[0].industry
                    this.ruleForm.urlListData = this.ruleForm.urlListData.map((item) => {
                        return {
                            ...item,
                            industry,
                        }
                    })
                    break
                case 3:
                    let modalityTag = this.ruleForm.urlListData[0].modalityTag
                    this.ruleForm.urlListData = this.ruleForm.urlListData.map((item) => {
                        return {
                            ...item,
                            modalityTag,
                        }
                    })
                    break
                case 4:
                    let sceneTag = this.ruleForm.urlListData[0].sceneTag
                    this.ruleForm.urlListData = this.ruleForm.urlListData.map((item) => {
                        return {
                            ...item,
                            sceneTag,
                        }
                    })
                    break
                case 5:
                    let daTag = this.ruleForm.urlListData[0].daTag
                    this.ruleForm.urlListData = this.ruleForm.urlListData.map((item) => {
                        return {
                            ...item,
                            daTag,
                        }
                    })
                    break
                case 6:
                    let platePosition = this.ruleForm.urlListData[0].platePosition
                    this.ruleForm.urlListData = this.ruleForm.urlListData.map((item) => {
                        return {
                            ...item,
                            platePosition,
                        }
                    })
                    break
            }
        },
        editMaterialName(item) {
            this.editMaterialVisible = true
            this.editMaterialId = item.id
            this.$nextTick(() => {
                this.editMaterialform.setFieldsValue({ name: item.materialName })
            })
        },
        onShowSizeChange(current, pageSize) {
            this.dataSourceFace = []
            this.defaultCurrent = current
            const defaultData = [...this.dataAllList]
            this.dataSourceFace = [...defaultData.slice(2 * current - 2, 2 * current)]
        },
        handlePolicyOperationSure() {
            this.defaultCurrent = 1
            this.faceShowStatus = false
        },
        handlePolicyOperationCancel() {
            this.defaultCurrent = 1
            this.faceShowStatus = false
        },
        handleAllChangeFace() {
            this.faceShowStatus = true
            this.controlLoading = true
            this.dataSourceFace = []
            postAction('http://faceswap.tjyourong.com.cn/jeecg-boot/task/query', {})
                .then((result) => {
                    if (result.code === 0) {
                        const defaultData = result.data
                        defaultData.forEach((item) => {
                            item.create_time = item.create_time ? item.create_time.replace('T', ' ') : '-'
                        })
                        this.dataAllList = defaultData
                        this.dataSourceFace = defaultData.slice(0, 2)
                        this.totalAll = defaultData.length ? defaultData.length : 0
                    } else {
                        this.dataAllList = []
                        this.dataSourceFace = []
                        this.totalAll = 0
                        this.$message.error(result.message)
                    }
                })
                .catch((error) => {
                    console.log(error, 'eeee')
                })
                .finally(() => {
                    this.controlLoading = false
                })
        },
        handleChangeFace(data) {
            this.faceTypeStatus = true
            this.faceChangeList = data
        },
        handleFaceCloseModal() {
            this.faceTypeStatus = false
        },
        handleFaceSureModal() {
            this.searchQuery()
        },
        // 获取设计人员
        getDesignList() {
            postAction('/ctop/kuaishou/videoReport/getDesignList').then((res) => {
                if (res.success) {
                    this.designList = res.result
                }
            })
        },
        changeTag(visible,mediaType) {
            if (this.videoVisibleChange != visible||this.videoVisibleMediaType != mediaType) {
                this.videoVisibleChange = visible
                this.videoVisibleMediaType = mediaType
                this.videoTag = []
                getAction('/external/materialCollection/getTagDetail', { md5: visible,mediaType:mediaType }).then((res) => {
                    if (res.success) {
                        this.videoTag = [
                            ...res.result.modTagList,
                            ...res.result.modalityTagList,
                            ...res.result.sceneTagList,
                        ].map((item) => {
                            return item.tagName
                        })
                        if (this.videoTag.length == 0) {
                            this.videoTag = null
                        }
                    }
                })
            } else {
                return
            }
        },
        modalFormOkElse() {
            this.getTagListAll()
        },
        clearChangjing(data) {
            if (
                data.includes(60158) ||
                data.includes(60159) ||
                data.includes(101) ||
                data.includes(104) ||
                data.includes(112)
            ) {
                this.departValueInfoSence = []
            }
        },
        handleOkTag(e) {
            this.loadingTag = true
            if (
                this.departValueInfoModality.includes(60158) ||
                this.departValueInfoModality.includes(60159) ||
                this.departValueInfoModality.includes(101) ||
                this.departValueInfoModality.includes(104) ||
                this.departValueInfoModality.includes(112)
            ) {
                this.departValueInfoSence = []
            }

            if (
                this.departValueInfoModality.length == 0 ||
                this.departValueInfoMod.length == 0 ||
                this.departValueInfoSence.length == 0 ||
                this.industryId == ''
            ) {
                this.$message.error('标签和行业不可为空')
                this.loadingTag = false
                return
            }

            var data = [
                ...this.departValueInfoModality,
                ...this.departValueInfoMod,
                ...this.departValueInfoContent,
                ...this.departValueInfoSence,
            ]
            var params = {}
            params.id = this.id
            // fileEdit({
            //     ...params,
            //     industry:this.industryId
            // }).then((res) => {})
            postAction('/external/materialCollection/edit', {
                id: this.id,
                sceneTag: JSON.stringify(this.departValueInfoSence),
                modalityTag: JSON.stringify(this.departValueInfoModality),
                daTag: JSON.stringify(this.departValueInfoMod),
                industry: this.industryId,
            }).then((res) => {
                if (res.success) {
                    this.departValueInfoModality = []
                    this.departValueInfoMod = []
                    this.departValueInfoContent = []
                    this.departValueInfoSence = []
                    this.materialInnovate = false
                    this.loadingTag = false
                    this.tagInfoListVisible = false
                    this.loadData()
                } else {
                    this.loadingTag = false
                    this.$message.error(res.message)
                }
            })
        },

        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 (var 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) {
            var params = {}
            params.id = item.id
            params.status = status
            params.auditorId = this.userInfo().id
            if (status == '1') {
            } else {
                params.refuseReason = this.refuseReasonImage
            }
            var updateArr = [params]
            putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then((res) => {
                console.log(res)
                if (res.success) {
                    //   this.coverPreviewVisible = false
                    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, index) => {
                                return item.status == '0'
                            })
                            if (this.modelNew.length == 0) {
                                this.coverPreviewVisible = false
                            }
                        }
                    })
                    this.loadData()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        editImageAll(status) {
            this.checkArrImage
            //   var params = {}
            //   params.id = item.id
            //   params.status = status
            var 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) {
                    //   this.coverPreviewVisible = false
                    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() {
            var 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,
        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()
        },
        ...mapGetters(['nickname', 'avatar', 'userInfo']),
        passTheAudit() {
            if (this.checkArr.length == 0) {
                this.$message.error('请选择素材')
            } else {
                this.passTheAuditLoading = true
                this.postDataAction('/ctop/materialInfo/batchEditStatus', { ids: this.checkArr, status: '1' }).then(
                    (res) => {
                        this.passTheAuditLoading = false
                        if (res.success) {
                            this.$message.success(res.message)
                            this.checkArr = []
                            this.searchQuery()
                        } else {
                            this.$message.error(res.message)
                        }
                    }
                )
            }
        },
        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 = {
                mediaType: '',
            }
            this.loadData(1)
        },
        getList(value) {
            // if (value) {
            //   // this.mediaId = this.dataElse.filter(item => {
            //   //   if (value == item.projectId) {
            //   //     return item
            //   //   }
            //   // })[0].mediaId
            //   getAction('/ctop/product/getUserProductList', {
            //     userId: this.userInfo().id,
            //     productId: value,
            //   }).then((res) => {
            //     if (res.code == 0) {
            //       this.mediaId = res.result.records[0].mediaId
            //     }
            //   })
            // }
            this.loadData()
        },
        onChangeCheckImage(checkedList) {
            if (checkedList.length == 0) {
                this.checkAllImage = false
            }
        },
        onChangeCheck(checkedList) {
            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(function () {
                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
            var params = qs.stringify({
                id: this.id,
                userId: this.userInfo().id,
                watermarkTemplateId: this.size,
            })
            postAction('/ctop/materialInfo/watermark', params).then((res) => {
                if (res.success) {
                    // getAction("/ctop/videoWatermarkTask/list").then(res=>{
                    //     console.log(res)
                    // })
                    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
            // this.allDetailData = item
            // 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('/external/materialCollection/queryById', {
                id: item.id,
            }).then((res) => {
                this.allDetailData = res.result
                // this.size =
                //     res.parameter.width == '1080'
                //         ? 3
                //         : res.parameter.width == '1920'
                //         ? 1
                //         : res.parameter.width == '1280'
                //         ? 2
                //         : 4
            })
            getAction('/external/materialCollection/getTagDetail', { md5: item.md5,mediaType:item.mediaType }).then((res) => {
                if (res.success) {
                    this.tagInfoList = [
                        ...res.result.modTagList,
                        ...res.result.modalityTagList,
                        ...res.result.sceneTagList,
                    ]
                }
            })
        },
        editTagList(item) {
            this.tagInfoListVisible = true
            this.industryId = item.industry
            getAction('/external/materialCollection/getTagDetail', { md5: item.md5,mediaType:item.mediaType }).then((res) => {
                if (res.success) {
                    // this.tagInfoList = [
                    //     ...res.result.modTagList,
                    //     ...res.result.modalityTagList,
                    //     ...res.result.sceneTagList,
                    // ]
                    this.departValueInfoModality = res.result.modalityTagList.map((item) => {
                        return item.tagCode
                    })
                    this.departValueInfoMod = res.result.modTagList.map((item) => {
                        return item.tagCode
                    })
                    this.departValueInfoSence = res.result.sceneTagList.map((item) => {
                        return item.tagCode
                    })
                }
            })
            this.tagCode = item.md5
            this.id = item.id
        },
        coverPreviewShowModal(item, index) {
            console.log(this.model)
            this.modelNew = this.model.filter((items) => {
                return items.status == 0
            })
            if (this.modelNew.length > 0) {
                this.coverPreviewVisible = true
            }
        },
        handleSearch(value) {},
        handleOk() {
            this.form.validateFieldsAndScroll((err, values) => {
                if (err) {
                    // 这里做逻辑处理
                } else {
                    this.loadingElse = true
                    var params = {
                        ...values,
                    }
                    var 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.userId = this.userInfo().id

                    params.materialDescribe = values.materialDescribe
                    console.log(values)
                    if (values.materialType == 1) {
                        params.url = this.urlList.url
                        params.md5 = this.urlList.md5
                        this.postDataAction('/external/materialCollection/addByVideo', params).then((res) => {
                            if (res.success) {
                                this.form.resetFields()
                                this.urlList = {
                                    url: '',
                                    md5: '',
                                    name: '',
                                }
                                this.loadData()
                                this.visible = false
                                this.add = true
                                this.$message.success('素材上传成功')
                                this.loadingElse = false
                            } else {
                                this.$message.error(res.message)
                                this.loadingElse = false
                            }
                        })
                    } else {
                        this.postDataAction('/external/materialCollection/addByUrl', params).then((res) => {
                            if (res.success) {
                                this.form.resetFields()
                                this.urlList = {
                                    url: '',
                                    md5: '',
                                    name: '',
                                }
                                this.loadData()
                                this.visible = false
                                this.add = true
                                this.$message.success('素材上传成功')
                                this.loadingElse = false
                            } else {
                                this.$message.error(res.message)
                                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 = []
        },
        showImage(item) {
            this.chouzhen = true
            this.chouzhenList = []
            var params = {
                videoSignature: item.code,
                pageSize: 20,
                pageNo: 1,
            }
            getAction('/cutFrame/material/list', params).then((res) => {
                console.log(res)
                if (res.success) {
                    this.chouzhenList.push(...res.result.records)
                }
            })
        },
        removeUpload() {
            this.form.setFieldsValue({
                // contentTagList: null,
                modalityTag: null,
                daTag: null,
                sceneTag: null,
            })
        },
        overUpload(urlAll) {
            this.confirmLoading = true
            this.repeat = false
            this.urlList.url = urlAll[0].url
            this.$message.success('上传成功')
        },
        file(file) {
            var bmf = new BMF()
            var that = this
            return new Promise(function (resolve, reject) {
                bmf.md5(file, (err, md5) => {
                    that.urlList.name = file.name
                    that.urlList.md5 = md5
                    that.getAction('/external/materialCollection/checkMaterialByMd5', {
                        md5: md5,
                    }).then((res) => {
                        if (res.code == 0) {
                            that.$message.error('此素材已经上传')
                            that.repeat = true
                            reject()
                        } else {
                            that.repeat = false
                            resolve()
                            //   reject()
                        }
                    })
                })
            })
        },
        getDataSource(page, pageSize) {
            this.ipagination.current = page
            this.ipagination.pageSize = pageSize
            this.checkArr = []
            this.checkAll = false
            this.loadData()
        },
        getDataSourceSize(page, pageSize) {
            this.ipagination.current = 1
            this.ipagination.pageSize = pageSize
            this.checkArr = []
            this.checkAll = false
            this.loadData()
        },
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
