<template>
    <div class="pic_area_ctl_container">
        <div class="pic_area_ctl clearfix">
            <div class="pic_item clearfix" :key="index" v-for="(item, index) of items">
                <div class="img_div clearfix" @click="selItem(item)" @mouseover="showOperation(item)"
                     @mouseleave="hideOperation(item)">
                    <!--放大镜 点击进行图片预览-->
                    <span v-preview="imgUrl(item)"  :alt="item.name"  preview-title-enable="true" preview-nav-enable="true" style="background-color: #1F85EC" v-show="item.hoverFlag" class="query_icon">
                        <Icon style="color: #fff;" type="md-search"/>
                      </span>
                    <!--图片展示区域-->
                    <div class="img_area">
                        <!--:src="imgUrl(item)"-->
                        <img  v-lazy="imgUrl(item)" class="lazy-img-fadein" :style="{width:100}"/>
                    </div>
                    <!--图片选中的样式-->
                    <div class="img_choose" v-show="item.selFlag" style="z-index: 1">
                        <span class="icon_bg"></span>
                        <span class="ivu-icon ivu-icon-md-checkmark icon_check_ok"></span>
                    </div>
                    <!--图片操作功能-->
                    <div class="img_operation" style="background-color: #1F85EC;right: 20px;" @click.stop
                         @mouseover="showOperationMenu(item)" @mouseleave="hideOperationMenu(item)"
                         v-show="operation&&item.hoverFlag">
                        <span class="operation_icon">
                            <Icon style="color:#fff;font-size: 18px"  type="ios-more"/>
                        </span>
                        <div class="operates" @click.stop @mouseover="showOperationMenu(item)"
                             @mouseleave="hideOperationMenu(item)" v-show="item.showSubMenu">
                            <div class="operate_item rename" @click="reName(item, $event)">
                                <span>重命名</span>
                            </div>
                            <div class="operate_item move" @click="moveToDialog(item)">
                                <span>移动</span>
                            </div>
                            <div class="operate_item delete" @click="deleteImage(item)">
                                <span>删除</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--图片文件名称区域-->
                <div class="name_area" @dblclick="reName(item, $event)" @click.stop>
                    <span v-show="!item.editorName">{{ item.name.split(".")[0] }}</span>
                    <input
                        v-show="item.editorName"
                        style="height: 25px;width: 95%"
                        class="form-control"
                        @keyup.enter="nameOnKeyup(item, $event)"
                        @blur="nameOnKeyup(item, $event)"
                        type="text"
                        :value="item.name.split('.')[0]"
                    />
                </div>
            </div>
        </div>
        <Row class="pic_pagin_area">
            <div style="float: right;padding-right:30px;">
                <Page
                    @on-change="changePage"
                    :current="curPageNum"
                    :page-size="pageSize"
                    :total="totalCount"
                    show-elevator
                />
            </div>
        </Row>
    </div>
</template>

<script>
    import {AssertUtils, ArrayUtils} from "goingutils";
    import ImgShowObj from '../../../../jsCom/comCtl/ImgShowObj';

    export default {
        name: "img-show",
        props: {
            showWinFlag:{
                type:Boolean,
                default:false,
            },
            //是否可以进行操作
            operation: {
                type: Boolean,
                default: true
            },
            pageSizeProp: {
                type: Number,
                default: 28
            },
            multiple: {
                type: Boolean,
                default: true
            },
            url: {
                type: String,
                default: ""
            },
            id: {
                type: String,
                default: ""
            }
        },
        data: function () {
            return {
                loadData:false,//加载数据的标志
                $imgShowObj: null,
                totalCount: 0,
                curPageNum: 1,
                pageSize: this.pageSizeProp, //每页的记录数
                items: []
            };
        },
        computed: {},
        methods: {
            //回调设置数据
            flushImgByUrl(jsonObj,flag) {
                this.$imgShowObj.recordIds = [];
                this.$imgShowObj.flushImgByUrl(jsonObj,flag);
            },
            //重新加载数据
            reloadData() {
                this.$imgShowObj.recordIds = [];
                //回调设置数据
                let successFun =(items) => {
                    this.items = items;
                };
                this.$imgShowObj.reloadData(successFun);
            },
            //获取选中的记录集合
            getSelectedRowIds(type) {
                return this.$imgShowObj.getSelectedRowIds(type);
            },
            //获取图片显示对象
            getCtlObj() {
                return this.$imgShowObj;
            },
            //点击切换页面
            changePage(pageSize) {
                this.curPageNum = pageSize;
                //回调设置数据
                let successFun =(items) => {
                    this.items = items;
                };
                this.$imgShowObj.reloadData(successFun);
            },
            imgUrl({url}) {
                return `${window.SysConfigUtils.go_eplat_adress}${window.projectName.file}/attachment/showImg/`+url;
            },
            //点击回车保存
            nameOnKeyup(item, event) {
                //重新命名
                item.name = $(event.target).val();
                item.editorName = false;
                this.$emit("updateImgName", {val: $(event.target).val(), item});
            },
            //将所有编辑状态还原
            clearItemEditor(){
                this.items.forEach(function (item) {
                    item.editorName = false;
                });
            },
            //选中某个图片项
            selItem(item) {
                this.clearItemEditor();
                //默认是多选 如果不是多选 则需要修改其他记录的选中状态
                if (!this.multiple) {
                    this.$imgShowObj.recordIds = [];
                    //循环记录集合 设置未选择记录
                    this.items.forEach(function (itemObj) {
                        itemObj.selFlag = false;
                    });
                }

                item.selFlag = !item.selFlag;
                if (item.selFlag) {
                    this.$imgShowObj.recordIds.push(item.id);
                } else {
                    ArrayUtils.removeByValue(this.$imgShowObj.recordIds, item.id);
                }
                this.$emit("selItem", {ids:this.$imgShowObj.recordIds});
            },
            //删除
            deleteImage(item) {
                this.$emit("delImg", item);
            },
            //移动
            moveToDialog(item) {
                this.$emit("moveImg", item);
            },
            //重命名
            reName(item) {
                item.editorName = true;
            },
            //显示图片操作按钮
            showOperation(item) {
                item.hoverFlag = true;
            },
            //隐藏图片操作按钮
            hideOperation(item) {
                item.hoverFlag = false;
            },
            //显示子菜单
            hideOperationMenu(item) {
                item.showSubMenu = false;
            },
            //显示当前项的子菜单
            showOperationMenu(item) {
                item.showSubMenu = true;
            }
        },
        mounted() {
            this.$imgShowObj = new ImgShowObj(this);
        },
        watch:{
            showWinFlag(newVal){
                //如果弹出窗口 并且未加载过数据 才执行
                if(newVal&&this.loadData===false){
                    if (AssertUtils.isNotEmpty(this.url)) {
                        this.$imgShowObj.flushImgByUrl({
                            url: this.url
                        },true);
                    }
                    this.loadData=true;
                }
            }
        },
        beforeDestroy() {
            //如果对象存在 则销毁当前对象 以及对象里面的对象
            if (this.$imgShowObj != null) {
                this.$imgShowObj.destructor();
            }
            this.$imgShowObj = null;
        },
        components: {}
    };
</script>
