qimall/backend/modules/mall/views/attachment/index.php

<?php

?>
<style scoped>
    .com-attachment-list {
        /* padding: 5px; */
        min-width: 860px;
    }

    @media screen and (min-width:960px) {
        .com-attachment-list {
            min-width: 860px;
        }
    }

    @media screen and (min-width:1024px) {
        .com-attachment-list {
            min-width: 960px;
        }
    }

    @media screen and (min-width:1580px) {
        .com-attachment-list {
            min-width: 1160px;
        }
    }

    @media screen and (min-width: 1680px) {
        .com-attachment-list {
            min-width: 1360px;
        }
    }

    .com-attachment-list * {
        box-sizing: border-box;
    }

    .com-attachment-list:after {
        clear: both;
        display: block;
        content: " ";
    }

    .com-attachment-item {
        display: inline-block;
        /*box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);*/
        cursor: pointer;
        position: relative;
        width: 120px;
        height: 140px;
        margin: 7.5px;
        text-align: center;
        padding: 5px 5px 0;
    }

    .com-attachment-active-icon {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 28px;
        color: #409EFF;
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.75);
        opacity: 0;
    }

    .com-attachment-item.checked,
    .com-attachment-item.selected {
        box-shadow: 0 0 0 1px #1ed0ff;
        background: #daf5ff;
        border-radius: 5px;
    }

    .com-attachment-item.checked .com-attachment-active-icon,
    .com-attachment-item.selected .com-attachment-active-icon {
        opacity: 1;
    }

    .com-attachment-item .com-attachment-img {
        display: block;
    }

    .com-attachment-item .file-type-icon {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        background: #666;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
    }

    .com-attachment-upload {
        box-shadow: none;
        border: 1px dashed #b2b6bd;
        height: 110px;
        width: 110px;
        margin: 12px;
        padding: 0;
    }

    .com-attachment-upload i {
        font-size: 30px;
        color: #909399;
    }

    .com-attachment-upload:hover {
        box-shadow: none;
        border: 1px dashed #409EFF;
    }

    .com-attachment-upload:hover i {
        color: #409EFF;
    }

    .com-attachment-upload:active {
        border: 1px dashed #20669c;
    }

    .com-attachment-upload:active i {
        color: #20669c;
    }

    .com-attachment-dialog .group-menu {
        border-right: none;
        width: 230px;
    }

    .com-attachment-dialog .group-menu .el-menu-item {
        padding-left: 10px !important;
        padding-right: 10px;
    }

    .com-attachment-dialog .group-menu .el-menu-item .el-button {
        padding: 3px 0;
    }

    .del-com-attachment-dialog .group-menu .el-menu-item .el-button:hover {
        background: #e2e2e2;
    }

    .com-attachment-dialog .group-menu .el-menu-item .el-button i {
        margin-right: 0;
    }

    .com-attachment-simple-upload {
        width: 100% !important;
        height: 120px;
        border: 1px dashed #e3e3e3;
        cursor: pointer;
    }

    .com-attachment-simple-upload:hover {
        background: rgba(0, 0, 0, .05);
    }

    .com-attachment-simple-upload i {
        font-size: 32px;
    }

    .com-attachment-video-cover {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
    }

    .com-attachment-video-info {
        background: rgba(0, 0, 0, .35);
        color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 1px 3px;
        font-size: 14px;
    }

    .com-attachment-video-name {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .com-attachment-dialog .com-attachment-name {
        color: #333333;
        margin-top: 5px;
        font-size: 13px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .com-attachment-left {
        text-align: left;
    }

    .comattachment-copy {
        text-align: right;
    }

    .com-attachment-dialog .search {
        margin-top: 10px;
        margin-left: 20px;
        width: 300px;
    }

    .com-attachment-dialog .search .el-input__inner {
        border-right: 0;
    }

    .com-attachment-dialog .search .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .com-attachment-dialog .search .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .com-attachment-dialog .search .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .com-attachment-dialog .search .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .com-attachment-dialog .search .el-input-group__append .el-button {
        padding: 0;
    }

    .com-attachment-dialog .search .el-input-group__append .el-button {
        margin: 0;
    }

    .com-attachment-dialog .scrollbar {
        height: 100%;
    }

    .com-attachment-dialog .scrollbar .el-scrollbar__wrap {
        overflow-y: hidden;
    }

    .features_tree {
        display: flex;
        justify-content: center;
        padding: 0 1px;
    }

    .features_tree button {
        flex: 1;
    }

    .el-tree-node {
        margin-top: 10px;
    }
</style>
<div id="app" v-cloak>
    <div class="com-attachment">
        <div class="com-attachment-dialog">
            <el-tabs type="border-card" v-model="type">
                <el-tab-pane label="图片" name="images"></el-tab-pane>
                <el-tab-pane label="普通视频" name="videos"></el-tab-pane>
                <el-tab-pane label="大视频" name="bigVideos" v-if="videoConfigInfo.is_show_long_vide === 1"></el-tab-pane>

                <!-- <el-dialog class="com-attachment-dialog" :title="title ? title : '选择文件'" :visible.sync="dialogVisible" @opened="dialogOpened" :close-on-click-modal="false" :width="simple?'25%':'65%'" top="10vh" append-to-body> -->
                <template v-if="simple">
                    <com-upload-oss v-if="type == 'bigVideos'" class="com-attachment-simple-upload" :config="videoConfigInfo" v-loading="uploading" :disabled="uploading" @start="handleStart" @success="handleSuccessBig" :multiple="true" :max="1" :params="uploadParams" :fields="uploadFields" :accept="accept" flex="main:center cross:center">
                         <div v-if="uploading">{{uploadCompleteFilesNum}}/{{uploadFilesNum}}</div>
                         <i v-else class="el-icon-upload"></i>
                    </com-upload-oss>
                    <com-upload v-else class="com-attachment-simple-upload" v-loading="uploading" :disabled="uploading" @start="handleStart" @success="handleSuccess" @complete="handleComplete" :multiple="true" :max="10" :params="uploadParams" :fields="uploadFields" :accept="accept" flex="main:center cross:center">
                        <div v-if="uploading">{{uploadCompleteFilesNum}}/{{uploadFilesNum}}</div>
                        <i v-else class="el-icon-upload"></i>
                    </com-upload>
                </template>
                <template v-else>
                    <div style="height: 0;overflow: hidden;">
                        <canvas id="com-attachment-canvas" style="border: 1px solid #ccc;visibility: hidden;"></canvas>
                    </div>
                    <div flex="cross:center box:last" style="margin-bottom: 12px;">
                        <div></div>
                        <div flex="cross:center">
                            <el-button v-if="!showEditBlock" size="small" @click="showEditBlock=true">开启编辑</el-button>
                            <template v-if="showEditBlock">
                                <el-button size="small" @click="showEditBlock=false" style="margin-right: 12px">退出编辑模式</el-button>
                                <el-checkbox size="small" border v-model="selectAll" @change="selectAllChange" label="全选" style="margin-right: 12px;margin-bottom: 0"></el-checkbox>
                                <el-button size="small" :loading="deleteLoading" @click="deleteItems" type="danger" plain style="margin-right: 12px">删除
                                </el-button>
                                <el-dropdown size="small" v-loading="moveLoading" trigger="click" :split-button="true" @command="moveItems">
                                    <span>移动至</span>
                                    <el-dropdown-menu slot="dropdown" style="max-height: 500px;overflow-y: auto">
                                        <el-dropdown-item v-for="(item, index) in groupList" :command="index" :key="index">
                                            {{item.name}}
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </div>
                    </div>
                    <div flex="box:first" style="border: 1px solid #e3e3e3;margin-bottom: 10px;min-height: 300px">
                        <div style="border-right: 1px solid #e3e3e3;background-color:#fff">
                            <el-menu class="group-menu" mode="vertical" v-loading="groupListLoading">
                                <el-scrollbar style="height:450px;width:100%">
                                    <el-menu-item index="all" @click="switchGroup(-1)">
                                        <i class="el-icon-tickets"></i>
                                        <span>全部</span>
                                    </el-menu-item>
                                    <div class="features_tree">
                                        <!-- @click="addNode" -->
                                        <el-button type="text" v-if="!is_recycle" @click="addNode"><i class="el-icon-circle-plus"></i>添加</el-button>
                                        <el-button type="text" v-if="!is_recycle" @click="editNode"><i class="el-icon-edit"></i>编辑</el-button>
                                        <el-button type="text" v-if="is_recycle" @click="deleteGroups(is_recycle,2)"><i class="el-icon-refresh"></i>还原</el-button>
                                        <el-button type="text" @click="deleteGroups(is_recycle,is_recycle?3:1)"><i class="el-icon-delete"></i>删除</el-button>
                                    </div>
                                    <el-tree :data="data2" highlight-current @node-click="handleNodeClick" :props="defaultProps">
                                        <span slot-scope="{ node, data }">
                                            <i class="el-icon-tickets"></i>
                                            <span>{{ node.label }}</span>
                                        </span>
                                    </el-tree>

                                </el-scrollbar>
                            </el-menu>
                        </div>
                        <div v-loading="loading" flex="dir:top">
                            <el-scrollbar class="scrollbar">
                                <div class="search">
                                    <el-input size="small" placeholder="请输入名称搜索" v-model="p_keyword" @keyup.enter.native="picSearch" class="input-with-select">
                                        <el-button @click="picSearch" slot="append" icon="el-icon-search"></el-button>
                                    </el-input>
                                </div>

                                <div class="com-attachment-list">
                                    <div class="com-attachment-item com-attachment-upload" :style="{'width': (type == 'videos' || type === 'bigVideos') ? '180px' : ''}">
                                        <com-upload-oss v-if="type == 'bigVideos'" :config="videoConfigInfo" v-loading="uploading" :disabled="uploading" @start="handleStart" @success="handleSuccessBig" :multiple="true" :max="1" :params="uploadParams" :fields="uploadFields" :accept="accept" flex="main:center cross:center" style="width: 100%;height: 100px">
                                            <div v-if="uploading">{{uploadCompleteFilesNum}}/{{uploadFilesNum}}</div>
                                            <i v-else class="el-icon-upload"></i>
                                        </com-upload-oss>
                                        <com-upload v-else v-loading="uploading" :disabled="uploading" @start="handleStart" @success="handleSuccess" @complete="handleComplete" :multiple="true" :max="10" :params="uploadParams" :fields="uploadFields" :accept="accept" flex="main:center cross:center" style="width: 100%;height: 100px">
                                            <div v-if="uploading">{{uploadCompleteFilesNum}}/{{uploadFilesNum}}</div>
                                            <i v-else class="el-icon-upload"></i>
                                        </com-upload>
                                    </div>
                                    <template v-for="(item, index) in attachments">
                                        <el-tooltip class="item" effect="dark" :content="String(item.old_name)" placement="top" :open-delay="1">
                                            <div :key="index" :class="'com-attachment-item'+((item.checked&&!showEditBlock)?' checked':'')+(item.selected&&showEditBlock?' selected':'')" :style="{'width': (item.upload_type == 'videos' || item.upload_type == 'bigVideos') ? '190px' : ''}" @click="handleClick(item)">
                                                <!-- 图片 -->
                                                <img v-if="item.upload_type == 'images'" class="com-attachment-img" :src="item.url" style="width: 110px;height: 110px;">
                                                <!-- 视频 -->
                                                <div v-if="item.upload_type == 'videos' || item.upload_type == 'bigVideos'" class="com-attachment-img" style="width: 180px;height: 76px;position: relative" @click="playVideo(item)">
                                                    <div v-if="item.cover_pic_src" class="com-attachment-video-cover" :style="'background-image: url('+item.cover_pic_src+');'"></div>
                                                    <video style="width: 100%; height: 100%; object-fit: cover;" error="预览图加载失败" :id="'app_attachment_'+ _uid + '_' + index" :src="item.url">
                                                    </video>
                                                    <!--
                                                    <div class="com-attachment-video-info" style="margin-left: 24px;">
                                                        <i class="el-icon-video-play"></i>
                                                        <span>{{item.duration?item.duration:'--:--'}}</span>
                                                    </div>-->
                                                </div>
                                                <!-- 音频 -->
                                                <div v-if="item.upload_type == 'voices'" class="com-attachment-img" style="width: 100px;height: 100px;position: relative">
                                                    <!-- <div v-if="item.cover_pic_src"
											        class="com-attachment-video-cover"
											        :style="'background-image: url('+item.cover_pic_src+');'">
												 </div> -->
                                                    <span>{{item.old_name}}</span>
                                                </div>
                                                <!-- 文件 -->
                                                <div v-if="item.upload_type == 'files'" class="com-attachment-img" style="width: 100px;height: 100px;line-height: 100px;text-align: center">
                                                    <i class="file-type-icon el-icon-document"></i>
                                                </div>
                                                <div v-if="item.upload_type != 'voices'" class="com-attachment-name" :class="[item.upload_type == 'images' ? '' : 'com-attachment-left']">{{item.old_name}}</div>
                                                <i v-if="false" class="com-attachment-active-icon el-icon-circle-check"></i>
                                                <div v-if="item.upload_type == 'videos' || item.upload_type == 'bigVideos'">
                                                    <div style="fontSize: 12px; color: #666666; display: flex; justify-content: space-between;">
                                                        <span>{{ item.created_at|dateTimeFormat('Y-m-d H:i:s') }}</span>
                                                        <span>{{ (item.size/(1024*1024)).toFixed(2) }}M</span>
                                                    </div>
                                                    <div class="comattachment-copy">
                                                        <el-link class="copy_btn" style="fontSize: 12px;" type="primary" :underline="false" @click="copyLink(item.url)">复制链接</el-link>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-tooltip>
                                    </template>
                                </div>
                            </el-scrollbar>
                            <div style="padding: 5px;text-align: right;margin-top:auto">
                                <el-pagination v-if="pagination" background @size-change="handleLoadMore" @current-change="handleLoadMore" :current-page.sync="page" :page-size="pagination.pageSize" layout="prev, pager, next, jumper" :total="pagination.total_count">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: right">
                        <span v-if="showEditBlock" style="color: #909399">请先退出编辑模式</span>
                        <!-- <el-button @click="confirm" type="primary" :disabled="showEditBlock">选定</el-button> -->
                    </div>
                </template>
            </el-tabs>
            <!-- </el-dialog> -->
        </div>

        <el-dialog append-to-body title="分组管理" :visible.sync="addGroupVisible" :close-on-click-modal="false" width="25%">
            <el-form @submit.native.prevent label-width="80px" ref="groupForm" :model="groupForm" :rules="groupFormRule">
                <el-form-item label="分组名称" prop="name" style="margin-bottom: 22px;">
                    <el-input v-model="groupForm.name" maxlength="8" show-word-limit></el-input>
                </el-form-item>
                <el-form-item style="text-align: right">
                    <el-button size="small" type="primary" @click="groupFormSubmit('groupForm')" :loading="groupFormLoading">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog append-to-body title="添加目录" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form_dir" :rules="form_dir_rule">
                <el-form-item label="父级目录" :label-width="formLabelWidth">
                    <el-cascader expand-trigger="hover" :options="data2" v-model="selectedOptions2" :props="{ checkStrictly: true, value: 'id' }" clearable @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="目录名称" :label-width="formLabelWidth">
                    <el-input v-model="form_dir.name" auto-complete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="postNode('add')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog append-to-body title="编辑目录" :visible.sync="dialogFormVisibleEdit" :close-on-click-modal="false">
            <el-form :model="form_dir_s" :rules="form_dir_rules">
                <el-form-item label="父级目录" :label-width="formLabelWidth">
                    <el-cascader expand-trigger="hover" :options="getOptions()" v-model="selectedOptions3" :props="{ checkStrictly: true, value: 'id' }" clearable @change="handleChange2">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="目录名称" :label-width="formLabelWidth">
                    <el-input v-model="form_dir_s.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogFormVisibleEdit = false">取 消</el-button>
                <el-button size="small"  type="primary" @click="postNode('edit')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="videoPlayVisible" title="" @close="videoPlayVisible = false" width="42%">
            <video width="100%" height="460" :src="videoPlayUrl" autoplay controls></video>
        </el-dialog>
        <div style="line-height: normal;" @click="dialogVisible = !dialogVisible" :style="'display:'+(display?display:'inline-block')">
            <slot></slot>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                canvas: null,
                uploading: false,
                dialogVisible: true,
                loading: true,
                loadingMore: false,
                noMore: false,
                attachments: [],
                checkedAttachments: [],
                uploadParams: {},
                uploadFields: {
                    upload_type: this.type || 'images'
                },
                uploadCompleteFilesNum: 0,
                uploadFilesNum: 0,
                page: 0,
                addGroupVisible: false,
                noMall: true,
                groupList: [],
                groupItem: [],
                groupListLoading: false,
                groupForm: {
                    id: null,
                    name: '',
                },
                groupFormRule: {
                    name: [{
                        required: true,
                        message: '请填写分组名称。',
                    }],
                },
                groupFormLoading: false,
                showEditBlock: false,
                selectAll: false,
                deleteLoading: false,
                moveLoading: false,
                currentAttachmentGroupId: null,
                video: null,
                keyword: '',
                pagination: null,
                p_keyword: '',
                data2: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                dialogFormVisible: false,
                dialogFormVisibleEdit: false,
                videoPlayVisible: false,
                videoPlayUrl: '',
                form_dir: {
                    name: '',
                    parent_id: '',
                },
                form_dir_rule: {
                    name: [{
                        required: true,
                        message: '请填写名称',
                    }],
                },
                form_dir_s: {
                    id: '',
                    parent_id: '',
                    name: '',
                },
                form_dir_rules: {
                    name: [{
                        required: true,
                        message: '请填写名称',
                    }],
                },
                formLabelWidth: '120px',
                selectedOptions: [],
                selectedOptions2: [],
                select_name: '全部',
                is_recycle: 0,
                pppid: [],
                selectedOptions3: [],
                type: 'images',
                videoConfigInfo: {},
            }
        },
        mounted() {
            this.dialogOpened()
            this.uploadConfig()
        },
        watch: {
            type(newVal, oldVal) {
                this.type = newVal;
                this.uploadFields.upload_type = this.type;
                this.dialogOpened()
            },
            openDialog(newVal, oldVal) {
                this.dialogVisible = newVal;
            },
            dialogVisible(newVal, oldVal) {
                if (!newVal) {
                    this.$emit("closed");
                }
            },
            keyword(newVal, oldVal) {
                const groupList = this.groupList;
                let arr = [];
                groupList.map(v => {
                    if (v.label.indexOf(newVal) !== -1) {
                        arr.push(v);
                    }
                });
                this.groupItem = arr;
            }
        },
        computed: {
            accept: {
                get() {
                    if (this.type === 'images') {
                        return 'image/*';
                    }
                    if (this.type === 'videos' || this.type === 'bigVideos') {
                        return 'video/*';
                    }
                    return '*/*';
                },
            },

        },
        props: {
            display: String,
            title: String,
            multiple: Boolean,
            max: Number,
            params: Object,
            simple: {
                type: Boolean,
                value: false,
            },
            value: {
                type: String,
                default: '',
            },
            openDialog: {
                type: Boolean,
                default: false,
            },
        },
        methods: {
            getOptions() {
                let data = JSON.parse(JSON.stringify(this.data2))
                let id = this.form_dir_s.id
                let pid = this.form_dir_s.parent_id
                let self = this

                var dismap = function(v, i) {
                    if (v.children && v.children.length > 0) {
                        v.children.map(dismap)
                    }
                    if (v.id == id) {
                        v.disabled = true
                    }
                    if (v.id == pid) {
                        v.disabled = true
                    }
                    if (self.isChildrenId(v.id)) {
                        v.disabled = true
                    }
                    return v
                }
                return data.map(dismap)
            },
            /**
             * 作用是不能把当前元素选择到当前元素的子元素下面
             */
            isChildrenId(cid) {
                let id = this.form_dir_s.id
                let child = []
                let cids = []
                var getChildren = function(arr) {
                    arr.forEach(item => {
                        if (item.id == id) {
                            child = item.children
                        }
                        if (item.children && item.children.length > 0) {
                            getChildren(item.children)
                        }
                    })
                }
                var getChildrenId = function(arr) {
                    arr.forEach(item => {
                        if (item.id) {
                            cids.push(item.id)
                        }
                        if (item.children && item.children.length > 0) {
                            getChildrenId(item.children)
                        }
                    })
                }
                getChildren(this.data2)
                getChildrenId(child)
                return cids.find(function(ccc) {
                    return ccc == cid
                })
            },

            picSearch() {
                this.page = 1;
                this.loading = true;
                this.loadGroups();
                this.loadList({});
            },

            dialogOpened() {
                if (this.simple) {
                    return;
                }
                this.page = 1;
                this.loading = true;
                this.loadGroups();
                this.loadList({});
            },
            deleteItems() {
                const itemIds = [];
                for (let i in this.attachments) {
                    if (this.attachments[i].selected) {
                        itemIds.push(this.attachments[i].id);
                    }
                }
                if (!itemIds.length) {
                    this.$message.warning('请先选择需要删除的图片。');
                    return;
                }
                this.$confirm('确认删除所选的' + itemIds.length + '张图片？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.deleteLoading = true;
                    this.$request({
                        params: {
                            r: 'common/file/delete'
                        },
                        method: 'post',
                        data: {
                            ids: itemIds,
                        },
                    }).then(e => {
                        this.deleteLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            for (let i in itemIds) {
                                for (let j in this.attachments) {
                                    if (this.attachments[j].id == itemIds[i]) {
                                        this.attachments.splice(j, 1);
                                        break;
                                    }
                                }
                            }
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.deleteLoading = false;
                    });
                }).catch(() => {});
            },
            selectAllChange(value) {
                for (let i in this.attachments) {
                    this.attachments[i].selected = value;
                }
            },
            selectItem(item) {
                item.selected = item.selected ? false : true;
            },
            moveItems(index) {
                const itemIds = [];
                for (let i in this.attachments) {
                    if (this.attachments[i].selected) {
                        itemIds.push(this.attachments[i].id);
                    }
                }
                let itemIdsText = '请先选择需要移动的'+(this.type == 'images' ? '图片': '视频')+'。'
                if (!itemIds.length) {
                    this.$message.warning(itemIdsText);
                    return;
                }
                this.$confirm('确认移动所选的' + itemIds.length + ''+(this.type == 'images' ? '张图片': '个视频')+'？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.moveLoading = true;
                    this.$request({
                        params: {
                            r: 'common/file/move'
                        },
                        method: 'post',
                        data: {
                            ids: itemIds,
                            attachment_group_id: this.groupItem[index].id,
                        },
                    }).then(e => {
                        this.moveLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            this.switchGroup(index);
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.moveLoading = false;
                    });
                }).catch(() => {});
            },
            loadGroups() {
                this.groupListLoading = true;
                this.$request({
                    params: {
                        r: 'common/file/group-list',
                        is_recycle: 0,
                        type: this.type,
                    },
                }).then(e => {
                    this.groupListLoading = false;
                    if (e.data.code === 0) {
                        this.noMall = e.data.data.no_mall ? e.data.data.no_mall : false;
                        this.groupItem = e.data.data.list;
                        this.groupList = e.data.data.list;
                        this.data2 = e.data.data.arr;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.groupListLoading = false;
                });
            },
            groupFormSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.groupFormLoading = true;
                        this.$request({
                            params: {
                                r: 'common/attachment/group-update',
                            },
                            method: 'post',
                            data: Object.assign({}, this.groupForm, {
                                'type': this.type
                            }),
                        }).then(e => {
                            this.groupFormLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                this.addGroupVisible = false;
                                if (this.groupForm.edit_index > -1) {
                                    this.groupItem[this.groupForm.edit_index] = e.data.data;
                                } else {
                                    this.groupItem.push(e.data.data);
                                }
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.groupFormLoading = false;
                        });
                    }
                })
            },
            switchGroup(index) {
                this.attachments = [];
                this.page = 0;
                this.noMore = false;
                this.loading = true;
                this.uploadParams = {
                    attachment_group_id: index > -1 ? this.groupItem[index].id : null,
                };
                this.currentAttachmentGroupId = index > -1 ? this.groupItem[index].id : null;
                this.loadList({});
            },
            loadList(params) {
                this.noMore = false;
                this.selectAll = false;
                params['r'] = 'common/file/selector';
                params['page'] = this.page;
                params['attachment_group_id'] = this.currentAttachmentGroupId;
                params['upload_type'] = this.type;
                params['is_recycle'] = 0;
                params['keyword'] = this.p_keyword;
                this.$request({
                    params: params,
                }).then(e => {
                    if (e.data.code === 0) {
                        if (!e.data.data.list.length) {
                            this.noMore = true;
                        }
                        for (let i in e.data.data.list) {
                            e.data.data.list[i].checked = false;
                            e.data.data.list[i].selected = false;
                            e.data.data.list[i].duration = null;
                        }
                        //this.attachments = this.attachments.concat(e.data.data.list);
                        this.attachments = e.data.data.list;
                        this.pagination = e.data.data.pagination;
                        this.pagination.pageSize = e.data.data.page_size;
                        this.pagination.total_count = e.data.data.count;
                        this.checkedAttachments = [];
                        this.loading = false;
                        this.loadingMore = false;
                        this.updateVideo();

                    } else {
                        this.$message.error(e.data.msg);
                        this.dialogVisible = false;
                    }
                }).catch(e => {});
            },
            handleClick(item) {

                if (this.showEditBlock) {
                    this.selectItem(item);
                    return;
                }
                if (item.checked) {
                    item.checked = false;
                    for (let i in this.checkedAttachments) {
                        if (item.id === this.checkedAttachments[i].id) this.checkedAttachments.splice(i, 1);
                    }
                    return;
                }
                if (this.multiple) {
                    let checkedCount = 0;
                    for (let i in this.attachments)
                        if (this.attachments[i].checked) checkedCount++;
                    if (this.max && !item.checked && checkedCount >= this.max) return;
                    item.checked = true;
                    this.checkedAttachments.push(item);
                } else {
                    for (let i in this.attachments) this.attachments[i].checked = false;
                    item.checked = true;
                    this.checkedAttachments = [item];
                }
            },


            confirm() {
                this.$emit('selected', this.checkedAttachments, this.params);
                this.dialogVisible = false;
                const urls = [];
                for (let i in this.checkedAttachments) {
                    urls.push(this.checkedAttachments[i].url);
                }
                for (let i in this.attachments) {
                    this.attachments[i].checked = false;
                }
                this.checkedAttachments = [];
                if (!urls.length) {
                    return;
                }
                if (this.multiple) {
                    this.$emit('input', urls);
                } else {
                    this.$emit('input', urls[0]);
                }
            },
            // 上传开始
            handleStart(files) {
                this.uploading = true;
                this.uploadFilesNum = files.length;
                this.uploadCompleteFilesNum = 0;
            },
            // 成功上传
            handleSuccess(file) {
                console.log(file, 'file')
                if (file.response && file.response.data && file.response.data.code === 0) {
                    const newItem = {
                        checked: false,
                        selected: false,
                        created_at: file.response.data.data.created_at,
                        deleted_at: file.response.data.data.deleted_at,
                        id: `${file.response.data.data.id}`,
                        is_delete: file.response.data.data.is_delete,
                        mall_id: file.response.data.data.mall_id,
                        name: file.response.data.data.name,
                        old_name: file.response.data.data.old_name,
                        size: file.response.data.data.size,
                        storage_id: file.response.data.data.storage_id,
                        thumb_url: file.response.data.data.thumb_url,
                        type: file.response.data.data.type,
                        updated_at: file.response.data.data.updated_at,
                        url: file.response.data.data.url,
                        user_id: file.response.data.data.user_id,
                        duration: null,
                        cover_pic_src: null,
                        upload_type: file.response.data.data.upload_type
                    };
                    this.attachments.unshift(newItem);
                    this.uploadCompleteFilesNum++;
                    this.updateVideo();
                }
            },
            handleSuccessBig() {
                this.loadList({})
                this.uploading = false;
            },
            // 上传完毕
            handleComplete(files) {
                this.uploading = false;
                if (this.simple) {
                    let urls = [];
                    let attachments = [];
                    for (let i in files) {
                        if (files[i].response.data && files[i].response.data.code === 0) {
                            urls.push(files[i].response.data.data.url);
                            attachments.push(files[i].response.data.data);
                        }
                    }
                    if (!urls.length) {
                        return;
                    }
                    this.dialogVisible = false;
                    this.$emit('selected', attachments, this.params);
                    if (this.multiple) {
                        this.$emit('input', urls);
                    } else {
                        this.$emit('input', urls[0]);
                    }
                }
            },
            handleLoadMore(currentPage) {
                if (this.noMore) {
                    return;
                }
                this.page = currentPage;
                this.loading = true;
                this.loadingMore = true;
                this.loadList({});
            },
            updateVideo() {
                if (!this.canvas) {
                    this.canvas = document.getElementById('com-attachment-canvas');
                }
                for (let i in this.attachments) {
                    if (this.attachments[i].type == 2) {
                        if (this.attachments[i].duration) {
                            continue;
                        }
                        let times = 0;
                        let video = null;
                        const maxRetry = 10;
                        const id = 'app_attachment_' + this._uid + '_' + i;
                        const timer = setInterval(() => {
                            times++;
                            if (times >= maxRetry) {
                                clearInterval(timer);
                            }
                            if (!video) {
                                video = document.getElementById(id);
                            }
                            if (!video) {
                                return;
                            }
                            try {
                                const zoom = 0.15;
                                this.canvas.width = video.videoWidth * zoom;
                                this.canvas.height = video.videoHeight * zoom;
                                this.canvas.getContext('2d').drawImage(video, 0, 0, this.canvas.width, this.canvas.height);
                                this.attachments[i].cover_pic_src = this.canvas.toDataURL('image/jpg');
                            } catch (e) {
                                console.warn('获取视频封面异常: ', e);
                            }

                            if (video.duration && !isNaN(video.duration)) {
                                let m = Math.trunc(video.duration / 60);
                                let s = Math.trunc(video.duration) % 60;
                                m = m < 10 ? `0${m}` : `${m}`;
                                s = s < 10 ? `0${s}` : `${s}`;
                                this.attachments[i].duration = `${m}:${s}`;
                                clearInterval(timer);
                            }
                        }, 500);
                    }
                }
            },
            editNode() {
                if (this.form_dir_s.id == '') {
                    this.$message.error('请选择目录');
                    return false;
                }

                // 编辑时候自动选中当前的父级
                let data = JSON.parse(JSON.stringify(this.data2))
                let pid = 0
                let id = this.form_dir_s.id
                let pids = []
                let getPid = function(arr, id) {
                    arr.forEach(item => {
                        if (item.id == id) {
                            pid = item.parent_id
                            if (pid > 0) {
                                pids.push(pid)
                                getPid(data, pid)
                            }
                        }
                        if (item.children && item.children.length > 0) {
                            getPid(item.children, id)
                        }
                    })
                }
                getPid(data, id)
                pids.reverse()
                this.selectedOptions3 = pids
                this.dialogFormVisibleEdit = true;
            },
            handleChange(val) {
                this.form_dir.parent_id = val;
            },
            handleChange2(val) {
                this.form_dir_s.parent_id = val
            },
            postNode(type) {
                let parent_id = this.form_dir.parent_id[this.form_dir.parent_id.length - 1]
                let formData = {
                    name: type == 'add' ? this.form_dir.name : this.form_dir_s.name
                }
                if (type == 'add') {
                    formData.parent_id = parent_id
                } else {
                    formData.id = this.form_dir_s.id
                    formData.parent_id = this.form_dir_s.parent_id[this.form_dir_s.parent_id.length - 1]
                }
                Object.assign(formData, {type: 0})
                if(this.type == 'videos'){
                    formData.type = 1
                }
                this.$request({
                    params: {
                        r: 'common/file/save-group',
                    },
                    method: 'post',
                    data: formData,
                }).then(e => {
                    this.groupListLoading = false;
                    if (e.data.code === 0) {
                        this.dialogFormVisible = false;
                        this.dialogFormVisibleEdit = false;
                        this.groupListLoading = true;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.dialogOpened();
                }).catch(e => {
                    this.groupListLoading = false;
                });
            },
            handleNodeClick(data) {
                console.log(data);
                this.uploadParams = {
                    attachment_group_id: data.id,
                }
                this.currentAttachmentGroupId = data.id;
                this.form_dir_s.id = data.id;
                this.form_dir_s.name = data.label;
                this.select_name = data.label;
                this.loading = true;
                this.loadList({});
            },
            deleteGroups(is_recycle, type) { // 删除分组
                let title;
                let msg;
                switch (type) {
                    case 1:
                        // title = '是否确认将选中素材放入回收站中？删除的素材可通过回收站还原';
                        title = '目录删除后将无法恢复，您确认要彻底删除所选目录吗？';
                        msg = '请选择要删除的目录';
                        break;
                    case 2:
                        title = '确认还原选择素材？';
                        msg = '请选择要还原的目录';
                        break;
                    case 3:
                        title = '素材删除后将无法恢复，您确认要彻底删除所选素材吗？';
                        msg = '请选择要删除的目录';
                        break;
                    default:
                        title = '';
                        msg = '';
                        break;
                }
                if (this.form_dir_s.id == '') {
                    this.$message.error(msg);
                    return false;
                }
                this.$confirm(title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteLoading = true;
                    this.$request({
                        params: {
                            r: 'common/file/del-group'
                        },
                        method: 'POST',
                        data: {
                            id: this.form_dir_s,
                            //type 1回收 2还原 3删除
                            // type:type,
                        }
                    }).then(e => {
                        this.deleteLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            this.dialogOpened();
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.deleteLoading = false;
                    });
                }).catch(() => {});
            },
            addNode() {
                this.form_dir_s = {
                    id: '',
                    parent_id: '',
                    name: '',
                }
                this.dialogFormVisible = true
            },
            /* 获取上传大视频配置 */
            uploadConfig() {
                const params = {};
                params['r'] = 'mall/attachment/get-oss-config';
                this.$request({
                    headers: {'Content-Type': 'multipart/form-data'},
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 1) {
                        this.$message.error(e.data.msg);
                    }
                    this.videoConfigInfo = e.data.data
                }).catch(e => {
                    console.log(e)
                });
            },
            playVideo(item){
                console.log(item.url)
                this.videoPlayUrl = item.url
                this.videoPlayVisible = true
            },
            copyLink(url) { //复制链接
                var clipboard = new ClipboardJS('.copy_btn', {
                    text: function() {
                        return url;
                    }
                });
                clipboard.on('success', (e) => {
                    this.$message.success('复制成功!');
                    clipboard.destroy()
                });
                clipboard.on('error', (e) => {
                     his.$message.error('复制失败!');
                     clipboard.destroy()
                });
            }
        },
    })
</script>