<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;
}
.video-metarial-table {
    .el-cascader .el-input {
        cursor: pointer;
        height: 100%;
    }
    .el-cascader .el-input .el-input__inner {
        text-overflow: ellipsis;
        height: 100%;
        position: relative;
        top: -4px;
    }
    .el-cascader .el-input .el-icon-arrow-down {
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        font-size: 14px;
        position: relative;
        top: -4px;
    }
    .el-cascader .el-input .el-icon-arrow-down.is-reverse {
        -webkit-transform: rotateZ(180deg);
        transform: rotateZ(180deg);
        position: relative;
        top: 2px;
    }
    .el-cascader .el-input .el-input__inner .el-input__icon.el-icon-arrow-down {
        text-overflow: ellipsis;
        height: 100%;
        position: relative;
        top: -4px;
    }
    .el-cascader .el-input .el-input__suffix .el-input__icon.el-icon-circle-close {
        text-overflow: ellipsis;
        height: 100%;
        position: relative;
        top: -4px;
    }
}
</style>
<style lang="scss" scoped>
.chouzhen {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(20% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
    float: left;
}

.content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;

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

.video-content {
    width: 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 video-metarial-table">
            <a-form layout="inline" :selfUpdate="true">
                <a-row :gutter="24">
                    <a-col :md="8" :sm="8">
                        <a-form-item label="素材名称">
                            <a-input placeholder="请输入素材名称" v-model="queryParam.materialName"></a-input>
                        </a-form-item>
                    </a-col>
                    <!--  -->
                    <a-col :md="8" :sm="8">
                        <a-form-item label="搜索时间">
                            <a-range-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <!--  -->
                    <a-col :md="8" :sm="8">
                        <a-form-item label="唯一标识">
                            <a-input placeholder="请输入素材唯一标识" v-model="queryParam.signature"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="素材类型">
                            <a-select v-model="queryParam.type" allowClear>
                                <a-select-option value="VIDEO"> 视频 </a-select-option>
                                <a-select-option value="SCRIPT"> 脚本 </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="8" :sm="8">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="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>
            <a-button
                @click="passTheAudit"
                :disabled="checkArr.length == 0"
                v-if="active == '0'"
                :loading="passTheAuditLoading"
                type="primary"
                >批量通过审核</a-button
            >
        </div>

        <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
            <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
                <a-spin :spinning="spinning">
                    <div v-if="dataSource.length > 0">
                        <a-checkbox-group @change="onChangeCheck" 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
                                    >
                                        <span
                                            style="
                                                color: #999;
                                                fontsize: 14px;
                                                padding-bottom: 10px;
                                                display: inline-block;
                                                width: 100%;
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            "
                                            :title="items.projectName"
                                            >{{
                                                (items.type == 'VIDEO' ? '视频' : '脚本') +
                                                (items.projectName ? '_' + items.projectName : '')
                                            }}</span
                                        >
                                        <span
                                            style="
                                                color: #999;
                                                fontsize: 14px;
                                                padding-bottom: 10px;
                                                display: inline-block;
                                                width: 100%;
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            "
                                            :title="items.materialName"
                                            >{{ items.materialName }}</span
                                        >

                                        <a-icon
                                            type="close-circle"
                                            @click="deleteData(items.id)"
                                            v-show="active == '0' || active == '6'"
                                            v-if="items.userId == userInfo().id"
                                        />
                                    </a-badge>
                                    <div
                                        style="
                                            display: flex;
                                            justify-content: center;
                                            width: 100%;
                                            height: 200px;
                                            position: relative;
                                        "
                                    >
                                        <!-- <img
                                            :src="items.coverUrl"
                                            alt
                                            style="height: 200px; max-width: 100%; position: absolute; z-index: 10"
                                        /> -->
                                        <video
                                            :src="items.url"
                                            style="height: 200px; max-width: 100%; position: absolute; z-index: 10"
                                        ></video>
                                    </div>
                                    <div
                                        style="
                                            width: 100%;
                                            height: 1px;
                                            border-bottom: 1px solid #f2f2f2;
                                            margin-top: 5px;
                                        "
                                    ></div>
                                    <!-- <div v-if="active == '6' || active == '4'" class="bh">
                                        驳回原因：{{ items.refuseReason }}
                                    </div> -->

                                    <div
                                        style="
                                            width: 100%;
                                            height: 1px;
                                            border-bottom: 1px solid #f2f2f2;
                                            margin-top: 5px;
                                        "
                                        v-if="active != '0'"
                                    ></div>
                                    <span
                                        style="
                                            color: black;
                                            fontsize: 16px;
                                            padding-top: 10px;
                                            display: block;
                                            width: 100%;
                                        "
                                        @click.stop
                                    >
                                        <a-popconfirm
                                            @confirm="okEditShow(items, '6')"
                                            @cancel="refuseReason = ''"
                                            v-show="active != '6' && active != '4' && active != '3' && active != '2'"
                                            v-if="
                                                role.roleCode == 'operator' ||
                                                role.roleCode == 'kuaishouOperationManager' ||
                                                role.roleCode == 'admin' ||
                                                role.roleCode == 'operationAssistant' ||
                                                role.roleCode == 'touTiaoOperationManager' ||
                                                role.roleCode == 'businessOperation'
                                            "
                                        >
                                            <div slot="title" style="width: 400px">
                                                <div>
                                                    驳回原因:
                                                    <!-- <a-textarea
                                                        placeholder="请输入原因"
                                                        v-model="refuseReason"
                                                        :autosize="{ minRows: 3, maxRows: 10 }"
                                                    /> -->
                                                    <j-code-editor
                                                        language="javascript"
                                                        v-model="refuseReason"
                                                        style="min-height: 100px"
                                                    />
                                                    <!-- {{ refuseReason }} -->
                                                </div>
                                            </div>
                                            <a href="javascript:;" style="margin-right: 20px">驳回</a>
                                        </a-popconfirm>
                                        <a-popconfirm
                                            @confirm="okEditShow(items, '1')"
                                            v-show="active != '1' && active != '3' && active != '4' && active != '2'"
                                            v-if="
                                                role.roleCode == 'operator' ||
                                                role.roleCode == 'kuaishouOperationManager' ||
                                                role.roleCode == 'admin' ||
                                                role.roleCode == 'operationAssistant' ||
                                                role.roleCode == 'touTiaoOperationManager' ||
                                                role.roleCode == 'businessOperation'
                                            "
                                        >
                                            <div slot="title">确认通过审核?</div>
                                            <a
                                                href="javascript:;"
                                                style="margin-right: 20px"
                                                v-show="
                                                    active != '1' && active != '3' && active != '4' && active != '2'
                                                "
                                                v-if="
                                                    role.roleCode == 'operator' ||
                                                    role.roleCode == 'kuaishouOperationManager' ||
                                                    role.roleCode == 'admin' ||
                                                    role.roleCode == 'operationAssistant' ||
                                                    role.roleCode == 'touTiaoOperationManager' ||
                                                    role.roleCode == 'businessOperation'
                                                "
                                                >通过审核</a
                                            >
                                        </a-popconfirm>

                                        <a
                                            href="javascript:;"
                                            style="margin-right: 20px"
                                            v-show="active == '6'"
                                            v-if="items.userId == userInfo().id"
                                            @click="edit(items, '6')"
                                            >修改</a
                                        >
                                        <a
                                            href="javascript:;"
                                            style="margin-right: 20px"
                                            v-show="active == '4'"
                                            @click="edit(items, '4')"
                                            >修改</a
                                        >
                                        <a-checkbox
                                            :value="items.id"
                                            style="float: right"
                                            v-show="active != '2'"
                                        ></a-checkbox>
                                        <br />
                                        {{ items.createTime }}
                                    </span>
                                </div>
                            </div>
                        </a-checkbox-group>
                        <a-pagination
                            size="small"
                            :showTotal="ipagination.showTotal"
                            style="float: right"
                            v-if="dataSource.length > 0"
                            showQuickJumper
                            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"
                    >
                        <img
                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
                            alt
                            v-if="!loading"
                        />
                        <div v-else></div>
                    </div>
                </a-spin>
            </a-tab-pane>
        </a-tabs>

        <a-modal
            title="批量上传素材"
            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 ref="name" label="项目选择" prop="projectId"> 度小满金融 </a-form-model-item>
                <a-form-item
                    label="素材类型"
                    :rules="{
                        required: true,
                        message: '素材类型必选',
                        trigger: 'blur',
                    }"
                >
                    <a-select v-model="ruleForm.type" @change="ruleForm.urlList = []">
                        <a-select-option value="SCRIPT"> 脚本 </a-select-option>
                        <a-select-option value="VIDEO"> 视频 </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-model-item label="视频上传" prop="videoList" v-if="ruleForm.type == 'VIDEO'">
                    <uploadFile
                        :checkFile="ruleFormFile"
                        :value.sync="ruleForm.urlList"
                        @overUpload="ruleFormOverUpload"
                        @removeUpload="ruleFormRemoveUpload"
                        :fileCount="20"
                        :sizeCheck="true"
                        uploadType="video"
                        :multiple="true"
                        v-if="batchUploadVisible"
                    />
                </a-form-model-item>
                <a-form-model-item label="脚本上传" prop="videoList" v-if="ruleForm.type == 'SCRIPT'">
                    <uploadFile
                        :checkFile="ruleFormFile"
                        :value.sync="ruleForm.urlList"
                        @overUpload="ruleFormOverUpload"
                        @removeUpload="ruleFormRemoveUpload"
                        :fileCount="20"
                        :sizeCheck="true"
                        uploadType="script"
                        :multiple="true"
                        v-if="batchUploadVisible"
                    />
                </a-form-model-item>

                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" v-if="ruleForm.type == 'VIDEO'">
                    <el-collapse v-model="activeCollapse" accordion v-if="ruleForm.urlList.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: 14 }"
                                v-if="ruleForm.type == 'VIDEO'"
                            >
                                <video :src="items.url" style="width: 150px"></video>
                            </a-form-model-item>
                            <a-form-model-item
                                label="视频"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 14 }"
                                v-if="ruleForm.type == 'SCRIPT'"
                            >
                                {{ items.url }}
                            </a-form-model-item>

                            <a-form-model-item
                                label="剪辑"
                                :key="index"
                                :prop="'urlListData.' + index + '.clipId'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 14 }"
                                :rules="{
                                    required: true,
                                    message: '剪辑必选',
                                    trigger: 'blur',
                                }"
                            >
                                <a-select
                                    v-model="items.clipId"
                                    showSearch
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                >
                                    <a-select-option
                                        :value="item.userId"
                                        v-for="item of ascription.clipId"
                                        :key="item.userId"
                                        >{{ item.userName }}</a-select-option
                                    >
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item
                                label="策划"
                                :prop="'urlListData.' + index + '.planId'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 14 }"
                                :rules="{
                                    required: true,
                                    message: '策划必选',
                                    trigger: 'blur',
                                }"
                            >
                                <a-select
                                    v-model="items.planId"
                                    showSearch
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                >
                                    <a-select-option
                                        :value="item.userId"
                                        v-for="item of ascription.planId"
                                        :key="item.userId"
                                        >{{ item.userName }}</a-select-option
                                    >
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item
                                label="拍摄"
                                :prop="'urlListData.' + index + '.shotId'"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 14 }"
                            >
                                <a-select
                                    v-model="items.shotId"
                                    showSearch
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                >
                                    <a-select-option
                                        :value="item.userId"
                                        v-for="item of ascription.shotId"
                                        :key="item.userId"
                                        >{{ item.userName }}</a-select-option
                                    >
                                </a-select>
                            </a-form-model-item>
                            <div v-if="ruleForm.type == 'VIDEO'">
                                <a-form-model-item
                                    label="形式标签"
                                    :prop="'urlListData.' + index + '.modalityTagList'"
                                    :label-col="{ span: 4 }"
                                    :wrapper-col="{ span: 14 }"
                                    :rules="{
                                        required: true,
                                        message: '形式标签必选',
                                        trigger: 'blur',
                                    }"
                                >
                                    <el-cascader
                                        placeholder="搜索你想要的形式标签"
                                        :options="departTreeModality"
                                        v-model="items.modalityTagList"
                                        :props="{
                                            multiple: true,
                                            value: 'id',
                                            label: 'tagName',
                                            emitPath: false,
                                            checkStrictly: true,
                                            expandTrigger: 'hover',
                                        }"
                                        filterable
                                        style="width: 100%"
                                    ></el-cascader>
                                </a-form-model-item>
                                <a-form-model-item
                                    label="场景标签"
                                    :prop="'urlListData.' + index + '.senceTagList'"
                                    :label-col="{ span: 4 }"
                                    :wrapper-col="{ span: 14 }"
                                    :rules="{
                                        required: true,
                                        message: '场景标签必选',
                                        trigger: 'blur',
                                    }"
                                    v-if="
                                        !items.modalityTagList.includes(60158) &&
                                        !items.modalityTagList.includes(60159) &&
                                        !items.modalityTagList.includes(101) &&
                                        !items.modalityTagList.includes(104) &&
                                        !items.modalityTagList.includes(112)
                                    "
                                >
                                    <el-cascader
                                        placeholder="搜索你想要的场景标签"
                                        :options="departTreeSence"
                                        v-model="items.senceTagList"
                                        :props="{
                                            multiple: true,
                                            value: 'id',
                                            label: 'tagName',
                                            emitPath: false,
                                            checkStrictly: true,
                                            expandTrigger: 'hover',
                                        }"
                                        filterable
                                        style="width: 100%"
                                    ></el-cascader>
                                </a-form-model-item>
                                <a-form-model-item
                                    label="基调标签"
                                    :prop="'urlListData.' + index + '.modTagList'"
                                    :label-col="{ span: 4 }"
                                    :wrapper-col="{ span: 14 }"
                                    :rules="{
                                        required: true,
                                        message: '基调标签必选',
                                        trigger: 'blur',
                                    }"
                                >
                                    <el-cascader
                                        placeholder="搜索你想要的基调标签"
                                        :options="departTreeMod"
                                        v-model="items.modTagList"
                                        :props="{
                                            multiple: true,
                                            value: 'id',
                                            label: 'tagName',
                                            emitPath: false,
                                            checkStrictly: true,
                                            expandTrigger: 'hover',
                                        }"
                                        filterable
                                        style="width: 100%"
                                    ></el-cascader>
                                </a-form-model-item>
                            </div>
                            <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="!confirmLoading" @click="handleOk" :loading="loadingElse"
                    >确定</a-button
                >
            </template>

            <a-form :form="form">
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="项目选择">
                    度小满金融
                    <!-- <a-select
                        v-decorator="[
                            'projectId', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择项目!' }] },
                        ]"
                        @change="getProjectId"
                        @focus="getParticipateList"
                        showSearch
                        optionFilterProp="children"
                        :filterOption="filterOption"
                        @search="getParticipateList"
                        :disabled="!add"
                    >
                        <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
                            {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                                item.mediaId == '1'
                                    ? '头条'
                                    : item.mediaId == '2'
                                    ? '快手'
                                    : item.mediaId == '3'
                                    ? '头条内广'
                                    : '快手内广'
                            }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
                        </a-select-option>
                    </a-select> -->
                </a-form-item>
                <a-form-item label="新增类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select
                        v-decorator="[
                            'type', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '请选择类型!' }] },
                        ]"
                        @change="urlList.url = ''"
                        :disabled="!add"
                    >
                        <a-select-option value="SCRIPT"> 脚本 </a-select-option>
                        <a-select-option value="VIDEO"> 视频 </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    label="视频素材上传"
                    v-if="getData('type') && getData('type') != 'SCRIPT'"
                >
                    <uploadFile
                        :checkFile="file"
                        :value.sync="urlList.url"
                        @overUpload="overUpload"
                        @removeUpload="removeUpload"
                        :fileCount="1"
                        uploadType="video"
                        :multiple="false"
                    />
                    <span v-if="repeat" style="color: red">此素材重复,请重新选择上传</span>
                    <span v-if="confirmLoading && urlList.url != ''" style="color: green">上传成功</span>
                </a-form-item>
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    label="脚本素材上传"
                    v-if="getData('type') && getData('type') != 'VIDEO'"
                >
                    <uploadFile
                        :checkFile="file"
                        :value.sync="urlList.url"
                        @overUpload="overUpload"
                        @removeUpload="removeUpload"
                        :fileCount="1"
                        uploadType="script"
                        :multiple="false"
                    />
                    <span v-if="repeat" style="color: red">此素材重复,请重新选择上传</span>
                    <span v-if="confirmLoading && urlList.url != ''" style="color: green">上传成功</span>
                </a-form-item>
                <div v-if="add && getData('type') != 'SCRIPT'">
                    <a-form-item
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        label="策划"
                        v-if="activeKey == 'video'"
                    >
                        <a-select
                            v-decorator="[
                                'planId', // 给表单赋值或拉取表单时，该input对应的key
                                { rules: [{ required: true, message: '请选择策划!' }] },
                            ]"
                            showSearch
                            optionFilterProp="children"
                            :filterOption="filterOption"
                        >
                            <a-select-option
                                :value="item.userId"
                                v-for="item of ascription.planId"
                                :key="item.userId"
                                >{{ item.userName }}</a-select-option
                            >
                        </a-select>
                    </a-form-item>
                    <a-form-item
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        label="拍摄"
                        v-if="activeKey == 'video'"
                    >
                        <a-select
                            v-decorator="[
                                'shotId', // 给表单赋值或拉取表单时，该input对应的key
                            ]"
                            showSearch
                            optionFilterProp="children"
                            :filterOption="filterOption"
                        >
                            <a-select-option
                                :value="item.userId"
                                v-for="item of ascription.shotId"
                                :key="item.userId"
                                >{{ item.userName }}</a-select-option
                            >
                        </a-select>
                    </a-form-item>
                    <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
                        <a-select
                            v-decorator="[
                                'clipId', // 给表单赋值或拉取表单时，该input对应的key
                                { rules: [{ required: true, message: '请选择剪辑!' }] },
                            ]"
                            showSearch
                            optionFilterProp="children"
                            :filterOption="filterOption"
                        >
                            <a-select-option
                                :value="item.userId"
                                v-for="item of ascription.clipId"
                                :key="item.userId"
                                >{{ item.userName }}</a-select-option
                            >
                        </a-select>
                    </a-form-item>
                </div>
                <div v-if="getData('type') != 'SCRIPT'">
                    <a-form-item
                        :label-col="labelCol"
                        :wrapper-col="{
                            xs: { span: 24 },
                            sm: { span: 12 },
                        }"
                        label="形式标签"
                        v-if="add && visible"
                    >
                        <el-cascader
                            placeholder="搜索你想要的形式标签"
                            :options="departTreeModality"
                            v-decorator="[
                                'modalityTagList', // 给表单赋值或拉取表单时，该input对应的key
                                { rules: [{ required: true, message: '请选择形式标签!' }], initialValue: [] },
                            ]"
                            :props="{
                                multiple: true,
                                value: 'id',
                                label: 'tagName',
                                emitPath: false,
                                checkStrictly: true,
                                expandTrigger: 'hover',
                            }"
                            filterable
                            style="width: 100%"
                        ></el-cascader>
                    </a-form-item>
                    <a-form-item
                        :label-col="labelCol"
                        :wrapper-col="{
                            xs: { span: 24 },
                            sm: { span: 12 },
                        }"
                        label="场景标签"
                        v-if="
                            add &&
                            visible &&
                            (!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="[
                                'senceTagList', // 给表单赋值或拉取表单时，该input对应的key
                                { rules: [{ required: true, message: '请选择场景标签!' }] },
                            ]"
                            :props="{
                                multiple: true,
                                value: 'id',
                                label: 'tagName',
                                emitPath: false,
                                checkStrictly: true,
                                expandTrigger: 'hover',
                            }"
                            filterable
                            style="width: 100%"
                        ></el-cascader>
                    </a-form-item>
                    <a-form-item
                        :label-col="labelCol"
                        :wrapper-col="{
                            xs: { span: 24 },
                            sm: { span: 12 },
                        }"
                        label="基调标签"
                        v-if="add && visible"
                    >
                        <el-cascader
                            placeholder="搜索你想要的基调标签"
                            :options="departTreeMod"
                            v-decorator="[
                                'modTagList', // 给表单赋值或拉取表单时，该input对应的key
                                { rules: [{ required: true, message: '请选择基调标签!' }] },
                            ]"
                            :props="{
                                multiple: true,
                                value: 'id',
                                label: 'tagName',
                                emitPath: false,
                                checkStrictly: true,
                                expandTrigger: 'hover',
                            }"
                            filterable
                            style="width: 100%"
                        ></el-cascader>
                    </a-form-item>
                </div>

                <!-- <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 12 },
                    }"
                    label="创新素材"
                    v-if="add && visible"
                >
                    <a-switch
                        v-decorator="[
                            'materialInnovate', // 给表单赋值或拉取表单时，该input对应的key
                            { rules: [{ required: true, message: '' }], initialValue: false },
                        ]"
                    />
                </a-form-item> -->
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 18 },
                    }"
                    label="其他"
                    v-if="add"
                >
                    <template v-for="(tag, index) in tags">
                        <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                            <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">{{
                                `${tag.slice(0, 20)}...`
                            }}</a-tag>
                        </a-tooltip>
                        <a-tag v-else :key="index" :closable="true" :afterClose="() => handleClose(tag)">{{ tag }}</a-tag>
                    </template>
                    <a-input
                        v-if="inputVisible"
                        ref="input"
                        type="text"
                        size="small"
                        :style="{ width: '78px' }"
                        :value="inputValue"
                        @change="handleInputChange"
                        @blur="handleInputConfirm"
                        @keyup.enter="handleInputConfirm"
                    />
                    <a-tag v-else @click="showInput" style="background: #fff; borderstyle: dashed">
                        <a-icon type="plus" />New Tag
                    </a-tag>
                </a-form-item>
                <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="{
                        xs: { span: 24 },
                        sm: { span: 12 },
                    }"
                    label="描述"
                    v-if="add"
                >
                    <a-textarea
                        placeholder="请输入描述"
                        v-decorator="[
                            'materialDescribe', // 给表单赋值或拉取表单时，该input对应的key
                        ]"
                        :auto-size="{ minRows: 3, maxRows: 10 }"
                    />
                </a-form-item>
            </a-form>
        </a-modal>

        <a-modal title="素材详情" v-model="visibleDetail" width="70%" :footer="null">
            <div style="display: flex; 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;
                    "
                    v-if="excellent == 'VIDEO'"
                >
                    <video
                        class="video"
                        :src="showUrl"
                        controls="controls"
                        style="height: 100%"
                        controlslist="nodownload"
                    >
                        您的浏览器不支持 video 标签。
                    </video>
                </div>
                <iframe id="iframeData" v-show="excellent == 'SCRIPT'" style="width: 50%; height: 500px"></iframe>

                <div style="flex: 3; padding: 10px; box-sizing: border-box; height: 500px; overflow: 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.signature }}</a-form-item>
                        </div>

                        <a-form-item label="链接">
                            <div style="width: 400px">
                                {{ allDetailData.url }}
                            </div>

                            <!-- <a-input v-model="allDetailData.url" type="text" read-only
                        /> -->
                        </a-form-item>
                        <br />
                        <a-form-item label="下载">
                            <a-button type="primary" @click="downloadByBlobShowUrl">下载</a-button>

                            <!-- <a-input v-model="allDetailData.url" type="text" read-only
                        /> -->
                        </a-form-item>
                        <div v-if="detailPerson" style="display: flex">
                            <a-form-item label="策划" style="flex: 1">{{ detailPerson.planName }}</a-form-item>
                            <a-form-item label="拍摄" style="flex: 1">{{ detailPerson.shotName }}</a-form-item>
                            <a-form-item label="剪辑" v-if="detailPerson.clipName" style="flex: 1">{{
                                detailPerson.clipName
                            }}</a-form-item>
                        </div>
                        <div v-if="active == '6'">
                            <a-form-item label="驳回原因">
                                <div v-html="refuseReasonImage" style="width: 100%"></div>
                            </a-form-item>
                        </div>
                        <div v-else-if="active == '4'">
                            <a-form-item label="驳回原因">
                                <div style="width: 450px">
                                    {{ refuseReasonImage }}
                                    <div>
                                        <img
                                            :src="item"
                                            v-for="(item, index) in refuseReasonImageShow"
                                            style="width: 100%; margin-bottom: 10px"
                                            alt=""
                                        />
                                    </div>
                                </div>
                            </a-form-item>
                        </div>
                    </a-form>
                    <span
                        style="color: black; fontsize: 16px; padding-top: 10px; display: block; width: 100%"
                        @click.stop
                    >
                        <a-popconfirm
                            @confirm="okEditShow({ id: id }, '6')"
                            @cancel="refuseReason = ''"
                            v-show="active != '6' && active != '4' && active != '3' && active != '2'"
                        >
                            <div slot="title" style="width: 400px">
                                <div>
                                    驳回原因:
                                    <!-- <a-textarea
                                                        placeholder="请输入原因"
                                                        v-model="refuseReason"
                                                        :autosize="{ minRows: 3, maxRows: 10 }"
                                                    /> -->
                                    <j-code-editor
                                        language="javascript"
                                        v-model="refuseReason"
                                        style="min-height: 100px"
                                    />
                                    <!-- {{ refuseReason }} -->
                                </div>
                            </div>
                            <a href="javascript:;" style="margin-right: 20px">驳回</a>
                        </a-popconfirm>
                        <a-popconfirm
                            @confirm="okEditShow({ id: id }, '1')"
                            v-show="active != '1' && active != '3' && active != '4' && active != '2'"
                        >
                            <div slot="title">确认通过审核?</div>
                            <a
                                href="javascript:;"
                                style="margin-right: 20px"
                                v-show="active != '1' && active != '3' && active != '4' && active != '2'"
                                >通过审核</a
                            >
                        </a-popconfirm>
                    </span>
                </div>
            </div>
        </a-modal>
        <a-modal title="查看截图" v-model="bohuiShow" :width="300" :footer="null">
            <img :src="bohui" alt style="width: 100%" />
        </a-modal>

        <account-check ref="check" @synchro="implement"></account-check>
        <accountCheckBytedance ref="accountCheckBytedance" @synchro="implement" />

        <a-modal
            v-if="recordDetailVisible"
            title="素材同步记录"
            :width="750"
            :visible="recordDetailVisible"
            dialog-class="usage-details-modal change-face-modal change-list-modal-show"
            :footer="null"
            @cancel="handleRecordCancel"
        >
            <div style="overflow: hidden">
                <a-table
                    class="face-right-table"
                    ref="table"
                    size="middle"
                    bordered
                    :columns="recordColumns"
                    :dataSource="recordData"
                    :pagination="recordIpagination"
                    :loading="toutiaoMateriaLoading"
                >
                    <span slot="createTime" slot-scope="text">
                        {{ text }}
                    </span>
                </a-table>
            </div>
        </a-modal>

        <a-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 { JeecgListMixin } from '@/mixins/videoMaterialMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import UploadToAli from '@femessage/upload-to-ali'
import { fileCheck, fileCheckImage, fileEdit, fileEditAll, fileInsertV2 } from '@/api/actor'
import { deleteAction, getAction, postAction, putAction } from '@/api/manage'
import qs from 'qs'
import { mapGetters } from 'vuex'
import moment from 'moment'

import selectTable from './comment/selectTable.vue'
import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue'
import BMF from 'browser-md5-file'
import uploadFile from '@/components/uploadFile.vue'
import { closeAllVideoFun, stopOtherVideo } from '@/utils/videoControl'
import accountCheck from './accountCheck'
import accountCheckBytedance from './accountCheckBytedance'
import JCodeEditor from '@/components/jeecg/JEditor'
let md5Arr = []
export default {
    name: 'video-material',
    mixins: [JeecgListMixin],
    components: {
        JEllipsis,
        UploadToAli,
        accountCheck,
        selectTable,
        uploadFile,
        accountCheckBytedance,
        selectTableProject,
        JCodeEditor,
    },
    data() {
        return {
            editorValue: undefined,
            passTheAuditLoading: false,
            toutiaoMateriaLoading: false,
            defaultCurrentToutiao: 1,
            materiaModalType: '2',
            materialUseDetailList: {},
            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',
                },
            ],
            recordData: [],
            recordIpagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger:true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.recordIpagination.current = current
                    this.recordIpagination.pageSize = pageSize
                    this.handleGetRecordDetail(this.recordSignature)
                },
            },
            ruleForm: {
                projectId: 2400956,
                urlList: [],
                urlListData: [],
                type: 'VIDEO',
            },
            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' },
                },
            ],
            // 标签的数据
            labelValue: [],
            departTree: [],
            departTreeModality: [],
            departTreeContent: [],
            departTreeSence: [],
            departTreeMod: [],
            departValue: [],
            departValueInfo: [],
            materialInnovate: false,
            departValueInfoModality: [],
            departValueInfoContent: [],
            departValueInfoSence: [],
            departValueInfoMod: [],
            tagCode: null,
            loadingTag: false,
            chouzhen: false,
            chouzhenList: [],
            modelNew: [],
            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,
            confirmLoading: false,
            loadingElse: false,
            loadingImage: false,
            activeKey: 'video',
            active: '0',
            examinelList: [
                {
                    value: '0',
                    tab: '未审核',
                },
                {
                    value: '1',
                    tab: '待审核',
                },
                {
                    value: '2',
                    tab: '审核中',
                },
                {
                    value: '3',
                    tab: '客户审核通过',
                },
                {
                    value: '6',
                    tab: '助手已驳回',
                },
                {
                    value: '4',
                    tab: '客户已驳回',
                },
                // {
                //   value: '3',
                //   tab: '有效视频',
                // },
            ],
            // 表头
            columns: [],
            urlList: {
                url: '',
                md5: '',
                name: '',
            },
            urlListImage: {
                url: [],
                md5: [],
                name: [],
                size: [],
            },
            watermarkUrl: {
                url: '',
                md5: '',
                name: '',
            },
            url: {
                list: '/duxiaoman/materialInfo/list',
            },
            detail: false,
            form: this.$form.createForm(this),
            formPerson: this.$form.createForm(this),
            editMaterialform: this.$form.createForm(this),
            tags: [],
            refuseFile: [],
            refuseReason: '',
            refuseReasonImage: null,
            refuseReasonImageShow: null,
            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: [],
            showUrl: '',
            materialName: '',
            materialDescribe: '',
            name: '',
            detailPerson: null,
            add: true,
            id: '',
            role: {
                roleCode: '',
                roleName: '',
            },
            key: '0',
            mediaId: null,
            sizeType: [],
            size: null,
            repeat: false,
            excellent: 0,
            code: '',
            material: [],
            imageArrList: [],
            bohui: '',
            bohuiShow: false,
            waterLoading: false,
            videoTag: [],
            videoVisibleChange: '',
            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
        },
    },
    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.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.ipagination.pageSize = 8
        this.getParticipateList(null)
        // /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.getProjectId(2400956)
    },
    watch: {
        $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 = {
                    projectId: '',
                    urlList: [],
                    urlListData: [],
                }
            }
        },
    },
    methods: {
        downloadByBlobShowUrl() {
            // var that = this
            // var x = new XMLHttpRequest()
            // x.open('GET', this.allDetailData.url, true)
            // x.responseType = 'blob'
            // x.onload = function (e) {
            //     //会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
            //     var url = window.URL.createObjectURL(x.response)
            //     var a = document.createElement('a')
            //     a.href = url
            //     a.download = that.allDetailData.materialName
            //     a.click()
            // }
            // x.send()

            fetch(this.allDetailData.url)
                .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.allDetailData.materialName
                    a.click()
                    document.body.removeChild(a)
                    // 移除blob对象的url
                    window.URL.revokeObjectURL(url)
                })
        },
        handleRecordCancel() {
            this.recordDetailVisible = false
        },

        /** 批量上传素材方法 */
        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 = []
                    fileCheck({
                        code: md5,
                        projectId: 2400956,
                    }).then((res) => {
                        if (res.code == 0) {
                            that.$message.error('素材' + file.name + '已经上传')

                            reject()
                        } else {
                            resolve()
                            //   reject()
                        }
                    })
                })
            })
        },
        ruleFormOverUpload(urlAll) {
            this.ruleForm.urlListData = urlAll.map((item) => {
                return {
                    url: item.url,
                    planId: undefined,
                    clipId: undefined,
                    shotId: undefined,
                    modTagList: [],
                    modalityTagList: [],
                    senceTagList: [],
                    materialName: item.name,
                    materialInnovate: false,
                }
            })
        },
        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() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    if (this.ruleForm.urlListData.length == 0) {
                        this.$message.error('请上传视频素材')
                        return
                    }
                    this.loadingBatch = true
                    let params = {}
                    params.projectId = 2400956
                    if (this.ruleForm.type == 'SCRIPT') {
                        params.videoArray = this.ruleForm.urlListData.map((item) => {
                            return {
                                ...item,
                                userId: this.userInfo().id,
                                type: this.ruleForm.type,
                                // materialInnovate: item.materialInnovate ? 2 : 1,
                            }
                        })
                    } else {
                        params.videoArray = this.ruleForm.urlListData.map((item) => {
                            return {
                                ...item,
                                ascription: {
                                    planId: item.planId,
                                    clipId: item.clipId,
                                    shotId: item.shotId,
                                },
                                userId: this.userInfo().id,
                                type: this.ruleForm.type,
                                // materialInnovate: item.materialInnovate ? 2 : 1,
                            }
                        })
                    }

                    postAction('/duxiaoman/materialInfo/addMore', params).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() {
            let clipId = this.ruleForm.urlListData[0].clipId
            let planId = this.ruleForm.urlListData[0].planId
            let shotId = this.ruleForm.urlListData[0].shotId
            this.ruleForm.urlListData = this.ruleForm.urlListData.map((item) => {
                return {
                    ...item,
                    clipId,
                    planId,
                    shotId,
                }
            })
        },
        /** 批量上传素材方法结束 */

        /** 获取标签方法 */
        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
        },

        /** 表单值获取 */
        getData(className) {
            return this.form.getFieldValue(className)
        },

        /** 删除素材 */
        deleteData(id) {
            getAction('/duxiaoman/materialInfo/deleteById', {
                id: id,
            }).then((res) => {
                if (res.success) {
                    this.$message.success('删除成功')
                    this.loadData()
                } else {
                    this.$message.error(res.message)
                }
            })
        },

        /** 搜索公用方法 */
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        moment,
        /** 同步素材方法 */
        tongbu(value) {
            this.mediaId = value
            if (value == '1' || value == '3') {
                this.$refs.check.getData('/ctop/userAllocation/getAccountListByUserIdAndProductId', {
                    userId: this.userInfo().id,
                    productId: this.queryParam.productId,
                    mediaId: value,
                })
            } else if (value == '2' || value == '4') {
                this.$refs.accountCheckBytedance.getParticipateList(this.queryParam.productId)
            }
        },
        implement(data) {
            // {treeData:data,shieldBackwardSwitch:this.shieldBackwardSwitch}
            var params = {}
            params.mediaId = this.mediaId
            params.materialArray = JSON.stringify(this.checkArr)

            params.loginId = this.userInfo().id
            params.userName = this.userInfo().realname
            if (this.mediaId == '2') {
                params.shieldBackwardSwitch = data.shieldBackwardSwitch ? 1 : 2
                params.isMultiagent = !data.isMultiagent ? 1 : 2
            } else {
                params.isMultiagent = 1
            }

            params.accountArray = data.treeData ? JSON.stringify(data.treeData) : JSON.stringify(data)

            console.log(params)
            postAction('/ctop/materialUpload/uploadAccount', params).then((res) => {
                if (res.code == 0) {
                    this.checkArr = []
                    this.checkAll = false
                    if (res.data) {
                        this.showDataList = res.data
                        this.showDataListVisible = true
                    } else {
                        this.$message.success(res.message)
                    }
                }
            })
            //   /ctop/materialUpload/uploadAccount
        },
        /** 同步素材方法结束 */

        ...mapGetters(['nickname', 'avatar', 'userInfo']),

        /** 批量通过审核 */
        passTheAudit() {
            if (this.checkArr.length == 0) {
                this.$message.error('请选择素材')
            } else {
                this.passTheAuditLoading = true
                var params = {}
                params.array = this.checkArr.map((item) => {
                    return {
                        id: item,
                        status: '1',
                    }
                })
                this.postDataAction('/duxiaoman/materialInfo/editMore', params).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
        },

        /** 重置方法 */
        searchRe() {
            this.queryParam = {
                type: 'VIDEO',
                userId: this.userInfo().id,
                status: this.active,
                productId: '',
            }
            this.$refs.selectTable.keyValue = ''
            this.$refs.selectTable.getData()
            this.$refs.selectTableProject.keyValue = ''
            this.$refs.selectTableProject.getData()

            this.labelValue = []

            this.loadData(1)
        },
        getList(value) {
            this.loadData()
        },

        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: '',
            })
        },
        openWps(url, token, type) {
            let _this = this
            console.log(url)
            const wps = WebOfficeSDK.config({
                mode: _this.simpleMode ? 'simple' : 'normal',
                mount: document.querySelector('#iframeData'),
                wpsUrl: url,
                commonOptions: {
                    isShowTopArea: false, // 隐藏顶部区域(头部和工具栏)
                },
            })
            //   2：pdf
            //   3：ppt
            wps.setToken({
                token: token,
            })
            wps.PDFApplication
            wps.iframe.height = '800px'
        },
        /** 查看素材详情 */
        showDetail(item) {
            this.visibleDetail = true
            this.showUrl = item.url
            this.id = item.id
            this.code = item.code
            this.excellent = item.type
            this.allDetailData = item
            getAction('/duxiaoman/materialInfo/queryById', {
                id: item.id,
            }).then((res) => {
                this.detailPerson = res.result.ascription
                if (this.active == '4') {
                    getAction('/duxiaoman/materialInfo/materialBos', {
                        id: res.result.info.auditImagesId,
                    }).then((img) => {
                        this.refuseReasonImage = res.result.info.refuseReason
                        this.refuseReasonImageShow = img.result
                    })
                } else {
                    this.refuseReasonImage = res.result.info.refuseReason
                }
            })
            if (item.type == 'SCRIPT') {
                this.$nextTick(() => {
                    // getAction('/v1/api/file/getViewUrlDbPath', {
                    //     fileUrl: decodeURI(item.url),
                    // }).then((resF) => {
                    //     let r = resF.data
                    //     sessionStorage.wpsUrl = r.wpsUrl
                    //     sessionStorage.token = r.token
                    //     this.openWps(r.wpsUrl, r.token, 'pdf')
                    // })
                    document.querySelector('#iframeData').src = item.url
                })
            }
        },

        okEditShow(item, editStatus) {
            if (editStatus == '6') {
                var params = {}
                params.id = item.id
                params.auditorId = this.userInfo().id
                params.refuseReason = this.refuseReason
                var data = this.refuseFile.map((item) => {
                    return 'https:' + item
                })
                params.refuseFile = JSON.stringify(data)
                params.status = editStatus
                postAction('/duxiaoman/materialInfo/edit', params).then((res) => {
                    this.refuseFile = []
                    this.refuseReason = ''
                    this.loadData()
                    this.visibleDetail = false
                })
            } else if (editStatus == '1') {
                var params = {}
                params.id = item.id
                params.auditorId = this.userInfo().id
                params.creativeCopywriter = this.refuseReason
                params.status = editStatus
                postAction('/duxiaoman/materialInfo/edit', params).then((res) => {
                    this.refuseReason = ''
                    this.loadData()
                    this.visibleDetail = false
                })
            }
        },
        okEdit(e) {
            this.edit(null, this.active, '2')
        },

        edit(item, status, editStatus) {
            if (status == '0' || status == '1') {
                if (editStatus == '2') {
                    var params = {}
                    params.id = this.id
                    params.auditorId = this.userInfo().id
                    params.refuseReason = this.refuseReason
                    var data = this.refuseFile.map((item) => {
                        return 'https:' + item
                    })
                    params.refuseFile = JSON.stringify(data)
                    params.status = editStatus
                    fileEdit(params).then((res) => {
                        this.refuseFile = []
                        this.refuseReason = ''
                        this.loadData()
                        this.visibleDetail = false
                        closeAllVideoFun()
                    })
                } else {
                    fileEdit({
                        id: this.id,
                        status: editStatus,
                        auditorId: this.userInfo().id,
                        creativeCopywriter: this.refuseReason,
                    }).then((res) => {
                        this.refuseFile = []
                        this.refuseReason = ''
                        this.loadData()
                        this.visibleDetail = false
                        closeAllVideoFun()
                    })
                }
            } else {
                this.add = false
                this.visible = true
                this.getProjectId(2400956)
                getAction('/duxiaoman/materialInfo/queryById', {
                    id: item.id,
                }).then((res) => {
                    if (this.activeKey == 'image') {
                    } else {
                        if (res.result.ascription) {
                            this.form.setFieldsValue({
                                projectId: 2400956,
                                clipId: res.result.ascription.clipId,
                                planId: res.result.ascription.planId,
                                shotId: res.result.ascription.shotId,
                                materialDescribe: item.materialDescribe,
                                type: item.type,
                            })
                        } else {
                            this.form.setFieldsValue({
                                projectId: 2400956,
                                materialDescribe: item.materialDescribe,
                                type: item.type,
                            })
                        }
                    }
                    this.tags = res.tag
                    this.urlList.url = item.url
                    this.urlList.md5 = item.code
                    this.urlList.name = item.materialName
                    this.watermarkUrl.url = item.watermarkUrl
                    this.watermarkUrl.md5 = item.watermarkCode
                    this.watermarkUrl.name = item.watermarkMaterialName
                    this.id = item.id
                })
            }
        },

        /** 新增素材 */
        handleOk() {
            this.form.validateFieldsAndScroll((err, values) => {
                if (err) {
                    // 这里做逻辑处理
                } else {
                    this.loadingElse = true
                    var params = {
                        ...values,
                    }

                    params.id = this.add ? null : this.id
                    params.signature = this.urlList.md5
                    params.url = this.urlList.url
                    params.materialName = this.urlList.name
                    params.watermarkCode = this.watermarkUrl.md5
                    params.watermarkUrl = this.watermarkUrl.url
                    params.watermarkMaterialName = this.watermarkUrl.name
                    params.userId = this.userInfo().id
                    params.projectId = 2400956
                    params.materialDescribe = values.materialDescribe
                    params.type = values.type
                    //   params.tagList = values.tagList
                    if (values.type == 'VIDEO') {
                        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.ascription =
                            this.activeKey == 'image'
                                ? roleCode
                                : {
                                      planId: values.planId,
                                      shotId: values.shotId,
                                      clipId: values.clipId,
                                  }
                    }
                    params.tag = this.tags
                    // params.imageArr = this.imageArrList
                    // params.materialInnovate = values.materialInnovate ? 2 : 1
                    if (this.add) {
                        postAction('/duxiaoman/materialInfo/add', params).then((res) => {
                            if (res.success) {
                                this.form.resetFields()
                                this.urlList = {
                                    url: '',
                                    md5: '',
                                    name: '',
                                }
                                this.watermarkUrl = {
                                    url: '',
                                    md5: '',
                                    name: '',
                                }
                                this.urlListImage = {
                                    url: [],
                                    md5: [],
                                    name: [],
                                    size: [],
                                }
                                this.imageArrList = []
                                this.tags = []
                                this.loadData()
                                this.visible = false
                                this.add = true
                                for (const key in this.role) {
                                    if (key == 'roleCode') {
                                        this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                                    }
                                }
                                this.$message.success('素材上传成功')
                                this.loadingElse = false
                                //   this.departValue = []
                            } else {
                                this.$message.error(res.message)
                                this.loadingElse = false
                            }
                        })
                    } else {
                        postAction('/duxiaoman/materialInfo/edit', {
                            ...params,
                            status: '0',
                        }).then((res) => {
                            if (res.success) {
                                this.form.resetFields()
                                this.urlList = {
                                    url: '',
                                    md5: '',
                                    name: '',
                                }
                                this.watermarkUrl = {
                                    url: '',
                                    md5: '',
                                    name: '',
                                }
                                this.tags = []
                                this.loadData()
                                this.visible = false
                                this.add = true
                                this.loading = false
                                this.loadingElse = false
                                for (const key in this.role) {
                                    if (key == 'roleCode') {
                                        this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                                    }
                                }
                            } else {
                                this.$message.error(res.message)
                                this.loading = false
                                this.loadingElse = false
                            }
                        })
                    }
                }
            })
        },
        close() {
            this.visible = false
            this.dataElse = []
            this.form.resetFields()
            this.urlList = {
                url: '',
                md5: '',
                name: '',
            }
            this.tags = []
            this.urlListImage = {
                url: [],
                md5: [],
                name: [],
                size: [],
            }
            this.imageArrList = []
        },

        callbackTwo(key) {
            this.checkAll = false
            this.checkArr = []

            this.queryParam = {
                ...this.queryParam,
                status: key,
            }
            // if (this.labelValue.length >= 1) {
            //     this.queryParam.tagCode = this.labelValue[this.labelValue.length - 1]
            // } else {
            //     this.queryParam.tagCode = ''
            // }
            // if (this.form.getFieldValue('projectId')) {
            //     this.form.setFieldsValue({
            //         projectId: '',
            //     })
            // }

            //   if (this.form.getFieldValue('projectId')) {
            //     this.form.setFieldsValue({
            //       projectId: ''
            //     })
            //   }
            //   this.queryParam.status = key
            this.loadData(1)
        },
        removeUpload() {
            this.form.setFieldsValue({
                // contentTagList: null,
                modalityTagList: null,
                modTagList: null,
                senceTagList: null,
            })
        },
        overUpload(urlAll) {
            console.log(urlAll)
            this.confirmLoading = true
            this.repeat = false
            this.urlList.url = urlAll[0].url
            this.$message.success('上传成功')

            getAction('/ctop/materialTagInfo/detail', {
                code: this.urlList.md5,
            }).then((res) => {
                if (res.success) {
                    if (res.modalityTagList.length > 0) {
                        this.form.setFieldsValue({
                            // contentTagList: res.contentTagList.map((item) => {
                            //   return item.tagId
                            // }),
                            modalityTagList: res.modalityTagList.map((item) => {
                                return item.tagId
                            }),
                            modTagList: res.modTagList.map((item) => {
                                return item.tagId
                            }),
                            senceTagList: res.senceTagList.map((item) => {
                                return item.tagId
                            }),
                        })
                    }
                }
            })
        },
        deleteImage(url) {
            console.log(url, this.urlListImage.url)
            var index = this.imageArrList.findIndex((v) => v.url === url)
            this.imageArrList.splice(index, 1)
            console.log(index)
        },
        overUploadImage(urlAll) {
            //   var index = this.urlList.url.findIndex(item => item === urlAll[0])
            //   var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
            //   this.imageArr.push(data)
            var that = this
            that.material = []
            that.imageArrList = []
            var img
            if (urlAll.length > 0) {
                for (var i = 0; i < urlAll.length; i++) {
                    that.imageArrList.push({
                        // width: img.width,
                        // height: img.height,
                        // size: this.urlListImage.size[i],
                        code: this.urlListImage.md5[i],
                        url: urlAll[i].url,
                        materialName: this.urlListImage.name[i],
                    })
                    img = new Image()
                    img.src = urlAll[i].url
                }
            } else {
            }
        },
        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
                    fileCheck({
                        code: md5,
                        projectId: 2400956,
                    }).then((res) => {
                        if (res.code == 0) {
                            that.$message.error('此素材已经上传')
                            that.repeat = true
                            reject()
                        } else {
                            that.repeat = false
                            resolve()
                            //   reject()
                        }
                    })
                })
            })
        },

        getParticipateList(value) {
            getAction('/ctop/projectMember/participateListV2', {
                userId: this.userInfo().id,
                pageSize: 50,
                pageNo: 1,
                projectName: value,
            }).then((res) => {
                if (res.code == 0) {
                    this.dataElse = res.result.records
                }
            })
        },
        getProjectId(items) {
            this.form.resetFields(['clipId', 'planId', 'shotId'])
            getAction('/ctop/projectMember/getMemberList', {
                projectId: 2400956,
            }).then((res) => {
                if (res.code == 0) {
                    this.ascription.clipId = res.result.filter((item) => {
                        if (
                            item.roleCode == 'clip' ||
                            item.roleCode == 'plan' ||
                            item.roleCode == 'designTeamLeader' ||
                            item.roleCode == 'shot' ||
                            item.roleCode == 'plane' ||
                            item.roleCode == 'planeLeader' ||
                            item.roleCode == 'externalClip'
                        ) {
                            return {
                                userId: item.userId,
                                userName: item.userName,
                            }
                        }
                    })
                    this.ascription.shotId = res.result.filter((item) => {
                        if (
                            item.roleCode == 'clip' ||
                            item.roleCode == 'shot' ||
                            item.roleCode == 'plan' ||
                            item.roleCode == 'designTeamLeader' ||
                            item.roleCode == 'plane' ||
                            item.roleCode == 'planeLeader' ||
                            item.roleCode == 'externalClip'
                        ) {
                            return {
                                userId: item.userId,
                                userName: item.userName,
                            }
                        }
                    })
                    this.ascription.planId = res.result.filter((item) => {
                        if (
                            item.roleCode == 'shot' ||
                            item.roleCode == 'plan' ||
                            item.roleCode == 'designTeamLeader' ||
                            item.roleCode == 'clip' ||
                            item.roleCode == 'plane' ||
                            item.roleCode == 'planeLeader' ||
                            item.roleCode == 'externalClip'
                        ) {
                            return {
                                userId: item.userId,
                                userName: item.userName,
                            }
                        }
                    })
                    this.ascription.planeId = res.result.filter((item) => {
                        if (item.roleCode == 'plane') {
                            return {
                                userId: item.userId,
                                userName: item.userName,
                            }
                        }
                    })
                }
            })
        },
        getDataSource(page, pageSize) {
            this.ipagination.current = page
            this.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>
