/**
 * 管理图片、选择图片
 */
Vue.component('template-select-image', {
    template: `<div v-cloak>
                        <el-tabs type="border-card">
                            <el-tab-pane label="图库图片">
                                <div class="select-image-top-select">
                                    <el-select v-if="selectTypeListC" @change="changeSelectTypeC($event)" 
                                               clearable filterable size="small"
                                               v-model="selectTypeC" placeholder="请选择文件类目">
                                        <el-option v-for="item in selectTypeListC"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <el-select v-if="selectTypeListD.length" filterable @change="refresh"
                                               clearable size="small"
                                               v-model="selectTypeD" placeholder="请选择文件类目">
                                        <el-option v-for="item in selectTypeListD"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <el-select size="small" v-model="fileType" placeholder="请选择文件类型" @change="refresh">
                                        <el-option label="图片" :value="1"></el-option>
                                        <el-option label="视频" :value="2"></el-option>
                                    </el-select>
                                    <div class="select-image-search-box">
                                        <el-input type="text" size="small" placeholder="搜索图片名称" clearable v-model="searchKey"></el-input>
                                    </div>
                                    <el-button type="primary" @click="refresh" size="small">查询</el-button>
                                    
                                    <template v-if="!isCheckDelete">
                                        <el-button type="primary" v-if="uploadFile" plain
                                         @click="toUpload" size="small" icon="el-icon-upload el-icon--right">上传图片</el-button>
                                        <el-button v-if="deleteMoreFile" @click="isCheckDelete=true"
                                                   size="small">批量删除
                                        </el-button>
                                    </template>
                                    <template v-else>
                                        <el-button @click="isCheckDelete=false" size="small">取消</el-button>
                                        <el-button type="primary" @click="toDeleteMore" :disabled="checkedLength>0?false:true" 
                                            size="small" icon="el-icon-delete">确认删除
                                        </el-button>
                                    </template>
                                </div>
                                <div class="select-image-flex">
                                    <template v-if="openType==1 && isCheckDelete">
                                        <div class="del-image-check-box" @click="checkAll">
                                            <div class="del-image-check-all"
                                                 :class="isCheckedAll?'select-image-isChecked':(checkedLength?'select-image-someChecked':'')"></div>
                                            <span>{{isCheckedAll?'取消多选':(checkedLength>0?'部分选中':'多选')}}<span
                                                    style="padding-left:5px;font-size: 12px;color: #666">{{checkedLength}}/{{can_select_num}}</span></span>
                                        </div>
                                    </template>
                                    <template v-if="openType==2">
                                        <span>可选<span style="padding-left:5px;font-size: 12px;color: #666">{{checkedLength}}/{{can_select_num}}</span></span>
                                        <span @click="getData" style="color: #409EFF;cursor: pointer">刷新</span>
                                    </template>
                                </div>
                                <el-scrollbar class="select-image-content" :style="'max-height:calc(100vh - '+(openType==1?'370':'380')+'px)'"
                                         v-loading="loading"
                                         element-loading-spinner="el-icon-loading">
                                    <div>
                                        <div class="select-image-list" v-for="(item,index) in allFileList" :class="item.checked?'select-image-list-check':''" :key="index" @click.stop="useIt(index)">
                                            <img v-if="item.type == 1" v-cloak class="select-image-list-img" :src="item.path">
                                            <video v-if="item.type == 2" :src="item.path"  class="select-image-list-img"></video>
                                            <div v-if="openType == 1 && isCheckDelete || openType == 2" class="select-image-check" :class="item.checked?'select-image-isChecked':''"></div>
                                            <el-button type="text" 
                                                size="mini"
                                                class="select-image-see-big el-icon-full-screen" 
                                                @click="seeBig(item)"></el-button>
                                        </div>
                                    </div>
                                </el-scrollbar>
                                <el-pagination
                                        @size-change="refresh"
                                        @current-change="getData"
                                        :current-page.sync="page"
                                        :page-sizes="[25,30,35,40,45,50,60,70,80,90,100]"
                                        :page-size.sync="limit"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="currentLen">
                                </el-pagination>
                                <div class="select-image-center" v-if="openType==2">
                                    <el-button type="primary" :disabled="isDisabled" @click="selectImage" size="medium">确定选择</el-button>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                        <el-dialog :title="bigImgName" :visible.sync="showBigImage" :append-to-body="true" :width="'80%'" :top="bigImgNameTop">
                            <div class="select-image-big-box" ref="bigFileBox">
                                <div class="select-image-original-name">原名：{{bigImgOriginalName}}</div>
                                <img v-if="bigType==1" class="select-image-big-image" :src="bigImg">
                                <video v-if="bigType == 2" :src="bigImg" 
                                       class="select-image-big-image" controls="controls"></video>
                            </div>
                        </el-dialog>
                        <el-dialog title="上传文件到服务器" :visible.sync="showUpload" :append-to-body="true"
                         :modal="false" :width="'600px'" :before-close="closeUpload">
                            <el-form label-width="170px" size="mini" style="margin-bottom: 10px">
                                <el-form-item label="上传目录">
                                    <el-select v-if="selectTypeListC" @change="changeUploadSelectTypeC($event)" 
                                               clearable filterable size="small"
                                               v-model="uploadSelectTypeC" placeholder="请选择文件类目">
                                        <el-option v-for="item in selectTypeListC"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <el-select v-if="selectUploadTypeListD.length" filterable
                                               clearable size="small"
                                               v-model="uploadSelectTypeD" placeholder="请选择文件类目">
                                        <el-option v-for="item in selectUploadTypeListD"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="文件类型">
                                    <el-select size="small" v-model="uploadFileType" placeholder="请选择文件类型">
                                        <el-option label="图片" :value="1"></el-option>
                                        <el-option label="视频" :value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: center">
                                <el-upload
                                        class="upload-demo"
                                        drag
                                        action="/index.php/Retail/Component/uploadFile"
                                        show-file-list
                                        :accept="uploadFileType==1?'image/jpeg,image/jpg,image/png,image/gif,image/image/vnd.microsoft.icon,image/x-icon':'video/*'"
                                        :on-progress="uploadFileIng"
                                        :on-success="uploadFileSuccess"
                                        :before-remove="beforeRemove"
                                        :before-upload="beforeFileUpload"
                                        :on-error="uploadFileError"
                                        :limit="100"
                                        :file-list="fileList"
                                        :data="getUploadPostData()"
                                        multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将图片拖到此处上传，或<em>点击选择上传</em></div>
                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif/ico及视频文件，每次最多选择100个</div>
                                    <div class="el-upload__tip" slot="tip">图片不得大于1MB，视频不得大于10MB</div>
                                </el-upload>
                            </div>
                        </el-dialog>
                    </div>`,
    props: {
        'canSelectNum': {
            type: Number
        },
        'lessHeight': {
            type: Number
        },
        'usedImageList': {
            type: Array
        },
        'selectFileType': {
            type: Number,
            default: 1,
        },
        'userType': {
            type: Number,
            default: 3,
        },
        'uploadFile': {
            type: Boolean,
            default: true,
        },
        'deleteMoreFile': {
            type: Boolean,
            default: false,
        },
        'openType': {
            type: Number,
            default: 2,
        },//1管理  2选择
    },
    data() {
        return {
            can_select_num: 0,
            selectTypeListC: [],
            selectTypeListD: [],
            selectUploadTypeListD: [],
            tempMerchantClass: [],
            tempStoreClass: [],
            showUpload: false,
            searchKey: '',
            selectTypeC: '',
            selectTypeD: '',
            selectUploadTypeD: '',
            fileType: 1,
            uploadSelectTypeC: '',
            uploadSelectTypeD: '',
            uploadFileType: 1,
            bigImgName: '图片名称',
            showBigImage: false,
            bigImg: '',
            bigType: 1,
            page: 1,
            limit: 25,
            currentLen: 0,
            checkedLength: 0,
            bigImgNameTop: '0px',
            allFileList: [],
            isDisabled: true,
            bigImgOriginalName: '',
            allSuccess: '',
            fileList: [],
            isUploading: false,
            loading: false,
            isCheckDelete: false,
            isCheckedAll: false,
            delUrl: {
                3: '/index.php/Retail/MerchantImage/deleteMoreFile',
                4: '/index.php/Retail/StoreImage/deleteMoreFile',
            }
        }
    },
    methods: {
        //批量删除
        toDeleteMore() {
            let allFileList = [...this.allFileList];
            let delData = [];
            let len = allFileList.length;
            for (let i = 0; i < len; i++) {
                if (allFileList[i].checked || this.isCheckedAll) {
                    delData.push(allFileList[i].id);
                }
            }
            if (delData.length) {
                this.$confirm('图片删除后将无法恢复，若该图片在使用中将导致显示错误，请谨慎操作！', '确认从图库服务器删除选中图片？', {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning '
                }).then(() => {
                    this.$loading({
                        lock: true,
                        text: '删除中，请等待',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255, 0.7)'
                    });
                    $.ajax({
                        url: this.delUrl[this.userType],
                        type: 'post',
                        data: {
                            id: delData.join(',')
                        },
                        success: (res) => {
                            if (res.status == 1) {
                                this.$message.success(res.msg);
                                this.isCheckedAll = false;
                                this.isCheckDelete = false;
                                this.checkedLength = 0;
                                this.$loading().close();
                                this.refresh();
                            } else {
                                this.$loading().close();
                                this.$message.error(res.msg);
                            }
                        },
                        error: (res) => {
                            console.log(res);
                            this.$message.error('请求发生错误，请稍后重试');
                            this.$loading().close();
                        }
                    })
                }).catch(() => {
                    this.$loading().close();
                });
            } else {
                this.$message.warning('未选择图片');
            }
        },
        //上传文件
        toUpload() {
            // if ((this.tempMerchantClass.length && !this.selectTypeD) || (!this.tempMerchantClass.length && !this.selectTypeC)) {
            //     this.$message({
            //         message: '请指定详细的上传类目',
            //         type: 'warning',
            //     });
            //     return;
            // }
            if (!this.uploadFileType) {
                this.$message({
                    message: '请指定上传文件类型',
                    type: 'warning',
                });
                return;
            }
            this.showUpload = true;
        },
        //获取上传文件携带的其他参数
        getUploadPostData() {
            return {
                selectTypeC: this.uploadSelectTypeC,
                selectTypeD: this.uploadSelectTypeD,
                fileType: this.uploadFileType,
            };
        },
        //上传文件前验证文件
        beforeFileUpload(file) {
            // console.log(file);
            if (this.uploadFileType == 1) {
                //上传图片
                let imgExt = ['image/jpeg', 'image/png', 'image/gif', 'image/vnd.microsoft.icon', 'image/x-icon'];
                if (imgExt.indexOf(file.type) == -1) {
                    this.$message.error('上传图片只能是 JPG、PNG、ico格式!');
                    return false;
                }
                if ((file.size / 1024 / 1024) > 1) {
                    this.$message.error('上传图片大小不能超过 1MB!');
                    return false;
                }
            } else {
                //视频
                if (file.type.split('/')[0] != 'video') {
                    this.$message.error('请上传视频文件');
                    return false;
                }
                if ((file.size / 1024 / 1024) > 10) {
                    this.$message.error('上传视频大小不能超过 10MB!');
                    return false;
                }
            }
            return true;
        },
        //上传中
        uploadFileIng(event, file, fileList) {
            this.isUploading = true;
        },
        //上传成功
        uploadFileSuccess(response, file, fileList) {
            this.isUploading = false;
            if (response.status == 1) {
                this.allSuccess++;
                if (this.allSuccess == Object.keys(fileList).length) {
                    this.$message({
                        type: 'success',
                        message: '上传成功'
                    });
                    this.page = 1;
                    this.limit = 25;
                    this.$nextTick(() => {
                        this.getData();
                    })
                }
            } else {
                this.$message({
                    message: response.msg,
                    type: 'error',
                    duration: 1500
                });
            }
        },
        //上传失败
        uploadFileError(event, file, fileList) {
            this.isUploading = false;
            this.$message({
                message: '上传失败，请重试',
                type: 'error',
                duration: 1500
            });
        },
        //移除文件前
        beforeRemove() {
            this.allSuccess--;
        },
        //关闭上传文件弹窗
        closeUpload() {
            if (!this.isUploading) {
                this.fileList = [];
                this.allSuccess = '';
                this.showUpload = false;
            } else {
                this.$message.warning('当前存在文件正在上传，不可关闭')
            }
        },
        //全选图片
        checkAll() {
            let allFileList = [...this.allFileList];
            this.isCheckedAll = !this.isCheckedAll;
            if (this.isCheckedAll) {
                this.checkedLength = allFileList.length;
            } else {
                this.checkedLength = 0;
            }
            let len = allFileList.length <= this.limit ? allFileList.length : this.limit;

            for (let i = 0; i < len; i++) {
                allFileList[i].checked = this.isCheckedAll;
            }
            this.allFileList = [];
            this.allFileList = allFileList;
        },
        //单选图片
        useIt(index) {
            if (this.openType == 1 && !this.isCheckDelete) return;
            let allFileList = [...this.allFileList];
            if (allFileList[index].checked) {
                allFileList[index].checked = false;
                this.checkedLength = this.checkedLength - 1;
                this.isCheckedAll = false;
            } else {
                if (this.checkedLength < this.can_select_num) {
                    allFileList[index].checked = true;
                    this.checkedLength = this.checkedLength + 1;
                }
            }
            if (this.checkedLength == allFileList.length && this.checkedLength == this.can_select_num) {
                this.isCheckedAll = true;
            }
            this.allFileList = [];
            this.allFileList = allFileList;
        },
        //确认选择图片并关闭弹框
        selectImage() {
            var item = [];
            // console.log(this.usedImageList);
            var allFileList = JSON.parse(JSON.stringify(this.allFileList));
            for (var i = 0; i < allFileList.length; i++) {
                if (allFileList[i].checked) {
                    if (typeof this.usedImageList == "object") {
                        if (this.usedImageList.indexOf(allFileList[i].id) == -1) {
                            item.push(JSON.parse(JSON.stringify(allFileList[i])));
                        }
                    } else {
                        item.push(JSON.parse(JSON.stringify(allFileList[i])));
                    }
                }
                allFileList[i].checked = false;
            }
            this.allFileList = [];
            this.allFileList = allFileList;
            this.checkindex = [];
            this.checkedLength = 0;
            this.isDataTable = false;
            this.$nextTick(() => {
                this.$emit('selectfile', item);
            })
        },
        //选择搜索的文件类型
        changeSelectTypeC(val) {
            if (val == -1 && this.tempMerchantClass.length) {
                this.selectTypeListD = [];
                this.selectTypeD = '';
                this.selectTypeListD = JSON.parse(JSON.stringify(this.tempMerchantClass));
            } else if (val > 0 && this.tempStoreClass.length) {
                this.selectTypeListD = [];
                this.selectTypeD = '';
                this.selectTypeListD = JSON.parse(JSON.stringify(this.tempStoreClass));
            } else {
                this.selectTypeListD = [];
                this.selectTypeD = '';
            }
            this.$nextTick(() => {
                this.refresh()
            })
        },
        //选择上传的的文件类型
        changeUploadSelectTypeC(val) {
            if (val == -1 && this.tempMerchantClass.length) {
                this.selectUploadTypeListD = [];
                this.selectUploadTypeD = '';
                this.selectUploadTypeListD = JSON.parse(JSON.stringify(this.tempMerchantClass));
            } else if (val > 0 && this.tempStoreClass.length) {
                this.selectUploadTypeListD = [];
                this.selectUploadTypeD = '';
                this.selectUploadTypeListD = JSON.parse(JSON.stringify(this.tempStoreClass));
            } else {
                this.selectUploadTypeListD = [];
                this.selectUploadTypeD = '';
            }
            this.$nextTick(() => {
                this.refresh()
            })
        },
        //查看大图
        seeBig(item) {
            this.showBigImage = true;
            this.bigImgName = item.name + '（大小：' + item.size + '）';
            this.bigImgOriginalName = item.original_name;
            this.bigImg = item.path;
            this.bigType = item.type;
            let height = document.body.clientHeight | document.documentElement.clientHeight;
            this.$nextTick(() => {
                setTimeout(() => {
                    // console.log(height, this.$refs.bigFileBox.offsetHeight);
                    let _height = (this.$refs.bigFileBox.offsetHeight + 130) / 2;
                    if (height > _height) {
                        this.bigImgNameTop = 'calc(50vh - ' + _height + 'px)';
                    } else {
                        this.bigImgNameTop = '0px';
                    }
                }, 100)
            })
        },
        //重载列表
        refresh() {
            this.page = 1;
            this.getData();
        },
        //获取列表数据
        getData() {
            this.loading = true;
            $.ajax({
                url: "/index.php/Retail/Component/getGalleryImages",
                type: 'post',
                data: {
                    page: this.page,
                    limit: this.limit,
                    selectTypeC: this.selectTypeC,
                    selectTypeD: this.selectTypeD,
                    key: this.searchKey,
                    fileType: this.fileType,
                },
                success: (res) => {
                    if (res.status == 1) {
                        this.allFileList = [];
                        this.allFileList = res.list;
                        this.currentLen = res.count;
                        this.isCheckedAll = false;
                        this.can_select_num = this.openType == 1 ? res.list.length : this.can_select_num;
                        this.checkedLength = 0;
                        this.$nextTick(() => {
                            this.loading = false;
                        })
                    } else {
                        this.$confirm(res.msg, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'error'
                        }).then(() => {
                            this.loading = false;
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                }
            })
        }
    },
    watch: {
        checkedLength() {
            if (this.checkedLength > 0) {
                this.isDisabled = false;
            } else {
                this.isDisabled = true;
            }
        },
        usedImageList() {
            this.checkedLength = 0;
            for (var i = 0; i < this.allFileList.length; i++) {
                if (this.usedImageList.indexOf(this.allFileList[i].id) != -1) {
                    this.allFileList[i].checked = true;
                    // this.checkedLength++;
                } else {
                    this.allFileList[i].checked = false;
                }
            }
        },
        selectFileType(n) {
            this.fileType = n;
            this.refresh();
        },
        canSelectNum(n) {
            this.can_select_num = n < this.limit ? n : this.limit
        },
        limit(n) {
            this.openType == 1 && (this.can_select_num = n)
        }
    },
    mounted() {
        this.can_select_num = this.openType == 2 ? this.canSelectNum : this.limit
    },
    created() {
        this.fileType = this.selectFileType;
        this.uploadFileType = this.selectFileType;
        $.ajax({
            url: "/index.php/Retail/Component/getSelectClass",
            type: 'post',
            data: {},
            success: res => {
                if (res.status == 1) {
                    this.selectTypeListC = res.from_class;
                    this.tempMerchantClass = res.merchant_class;
                    this.tempStoreClass = res.store_class;
                }
            }
        });
        this.getData();
    },
});

/**
 * 选择图片的样式
 */
Vue.component('choose-image', {
    template: `<div class="el-upload el-upload--picture-card el-upload-list--picture-card"
                    :class="'upload-img-'+size+'-auto'"
                    @click="selectImage()">
                    <i v-if="!imageUrl" class="el-icon-plus"></i>
                    <img v-else class="el-upload-list__item-thumbnail img-auto"
                         :src="imageUrl">
                </div>`,
    props: {
        'imageUrl': {
            type: String,
            default: '',
        },//图片地址
        'imageId': {
            type: String,
            default: '',
        },//图片ID
        'size': {
            type: String,
            default: 'small',
        },
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
    },
    data() {
        return {};
    },
    methods: {
        selectImage() {
            if (!this.isDisabled) this.$emit('choose');
        },
    },
    watch: {
        size(n) {
            if (['small', 'mini', 'micro', ''].indexOf(n) == -1) {
                this.size = 'small';
            }
        }
    }
})


/**
 * 选择一个文件
 */
Vue.component('choose-one-file', {
    template: `<div style="display: inline-block;vertical-align: top">
                    <choose-image :image-url="fileUrl" 
                                  :image-id="fileId" 
                                  :is-disabled="isDisabled" 
                                  :size="size" @choose="chooseFileBefore"></choose-image>
                    <el-dialog title="选择图片" :append-to-body="true" :visible.sync="showSelectFile"
                               custom-class="select-image-el-dialog" :top="'40px'" :close-on-click-modal="false">
                        <template-select-image :can-select-num="1" :used-image-list="usedFileList"
                            :select-file-type="selectFileType" @selectfile="selectFile"></template-select-image>
                    </el-dialog>
                </div>`,
    props: {
        'fileUrl': {
            type: String,
            default: '',
        },//图片地址
        'fileId': {
            type: String,
            default: '',
        },//图片ID
        'usedFileList': {
            type: Array,
            default() {
                return []
            }
        },//已选文件列表
        'selectFileType': {
            type: Number,
            default: 1
        },//选择文件类型 1图片 2视频
        'size': {
            type: String,
            default: 'small',
        },
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
    },
    data() {
        return {
            showSelectFile: false,
        };
    },
    methods: {
        chooseFileBefore() {
            if (!this.isDisabled) this.showSelectFile = true;
        },
        selectFile(data) {
            this.$emit('update:fileUrl', data[0] ? data[0].path : '');
            this.$emit('update:fileId', data[0] ? data[0].id : '');
            this.$emit('change', data);
            this.showSelectFile = false;
        },
    },
    watch: {
        size(n) {
            if (['small', 'mini', 'micro', ''].indexOf(n) == -1) {
                this.size = 'small';
            }
        }
    }
})