Vue.component('template-select-image', {
    template: `<div v-cloak>
                    <el-container>
                        <el-aside width="150px" style="background-color: #e9eef3">
                            <el-menu background-color="#e9eef3"
                                    text-color="#666"
                                    :default-active="String(actMenuIndex)"
                                     @select="selectMenu"
                                    active-text-color="#333">
                                <template v-for="(item,index) in selectTypeListC">
                                    <el-menu-item :index="item.id">{{item.name}}</el-menu-item>
                                </template>
                            </el-menu>
                        </el-aside>
  
                        <el-container>
                            <div style="width: 100%;box-sizing: border-box;padding-left: 20px;border-left: 1px solid #e9eef3">
                                <div>
                                    <el-radio-group v-model="fileType" 
                                            style="margin-top: 10px"
                                            size="small" @change="doSearch">
                                        <el-radio-button :label="1">图片</el-radio-button>
                                        <el-radio-button :label="2">视频</el-radio-button>
                                    </el-radio-group>
                                    <div class="select-image-search-box">
                                        <el-input type="text" size="small" placeholder="搜索名称" clearable v-model="searchKey"></el-input>
                                    
                                        <el-button type="primary" @click="doSearch" size="small">查询</el-button>
                                        <el-button type="primary" plain @click="toUpload" size="small" icon="el-icon-upload el-icon--right">上传图片</el-button>
                                    </div>
                                </div>
                                <span>可选<span style="padding-left:5px;font-size: 12px;color: #666">{{checkedLength}}/{{canSelectNum}}</span></span>
                                <div class="select-image-content"
                                         v-loading="loading"
                                         element-loading-spinner="el-icon-loading"
                                         :style="'height: calc(100vh - '+((lessHeight?lessHeight:0)+340)+'px);'">
                                    <div class="select-image-list-box">
                                        <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 class="select-image-check el-icon-check" v-if="item.checked"></div>
                                            <el-button type="text" 
                                                size="mini"
                                                class="select-image-see-big el-icon-full-screen" 
                                                @click="seeBig(item)"></el-button>
                                        </div>
                                    </div>
                                    <el-pagination layout="total, prev, pager, next, jumper"
                                                   @current-change="handleCurrentChange"
                                                   :current-page.sync="page"
                                                   :page-size="limit"
                                                   :total="imgTotal">
                                    </el-pagination>
                                    <div v-if="showGetMore&&canLoad" class="select-image-tip select-image-cursor" @click="getData">获取更多</div>
                                </div>
                                <div class="select-image-center">
                                    <el-button type="primary" :disabled="isDisabled" @click="selectImage" size="medium">确定选择</el-button>
                                </div>
                            
                            </div>
                        </el-container>
                    </el-container>
                        
                    <el-dialog :title="bigImgName" :visible.sync="showBigImage" :width="'80%'" :top="bigImgNameTop" :modal="false">
                        <div class="select-image-big-box" ref="bigImgName">
                            <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" :modal="false" :width="'600px'" :before-close="closeUpload">
                        <div style="text-align: center">
                            <el-upload
                                    class="upload-demo"
                                    drag
                                    action="/index.php/Retail/Component/uploadFile"
                                    show-file-list
                                    :accept="fileType==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,
        },
    },
    data() {
        return {
            selectTypeListC: [],
            selectTypeListD: [],
            tempMerchantClass: [],
            tempStoreClass: [],
            showUpload: false,
            searchKey: '',
            selectTypeC: '',
            selectTypeD: '',
            fileType: 1,
            bigImgName: '图片名称',
            showBigImage: false,
            bigImg: '',
            bigType: 1,
            page: 1,
            limit: 15,
            imgTotal: 0,
            canLoad: true,
            checkedLength: 0,
            bigImgNameTop: '0px',
            allFileList: [],
            isDisabled: true,
            bigImgOriginalName: '',
            showGetMore: false,
            allSuccess: '',
            fileList: [],
            isUploading: false,
            loading: false,
            actMenuIndex: 1,
        }
    },
    methods: {
        toUpload() {
            if (!this.fileType) {
                this.$message({
                    message: '请指定上传文件类型',
                    type: 'warning',
                });
                return;
            }
            this.showUpload = true;
        },
        getUploadPostData() {
            return {
                selectTypeC: this.selectTypeC,
                selectTypeD: this.selectTypeD,
                fileType: this.fileType,
            };
        },
        beforeFileUpload(file) {
            console.log(file);
            if (this.fileType == 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.canLoad = true;
                        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;
            }
        },
        //选择图片
        useIt(index) {
            var allFileList = JSON.parse(JSON.stringify(this.allFileList));
            if (allFileList[index].checked) {
                allFileList[index].checked = false;
                this.checkedLength = this.checkedLength - 1;
            } else {
                if (this.checkedLength < this.canSelectNum) {
                    allFileList[index].checked = true;
                    this.checkedLength = this.checkedLength + 1;
                }
            }
            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);
            })
        },
        //搜索图片
        doSearch() {
            this.page = 1;
            this.canLoad = true;
            this.$nextTick(() => {
                this.getData();
            });
        },
        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 = '';
            }
        },
        //查看大图
        seeBig(item) {
            this.bigImgName = item.name + '（大小：' + item.size + '）';
            this.bigImgOriginalName = item.original_name;
            this.bigImg = item.path;
            this.bigType = item.type;
            this.showBigImage = true;
            var height = document.body.clientHeight | document.documentElement.clientHeight;
            this.$nextTick(() => {
                // console.log(height, this.$refs.bigImgName.offsetHeight)
                var _height = (this.$refs.bigImgName.offsetHeight + 130) / 2;
                console.log(_height, height)
                if (height > _height) {
                    this.bigImgNameTop = 'calc(50vh - ' + _height + 'px)';
                } else {
                    this.bigImgNameTop = '0px';
                }
            })
        },
        //修改页数
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
        getData() {
            if (!this.canLoad) {
                return;
            }
            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;
                        if (this.page == 1) {
                            this.imgTotal = res.count;
                        }
                        this.$nextTick(() => {
                            this.loading = false;
                            this.canLoad = true;
                        })
                    } 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.doSearch();
        }
    },
    mounted() {
    },
    created() {
        $.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();
    },
});