<template>
    <div class="icon_area_ctl_container">
        <div class="icon_sub_menu">

           <Col span="19">
               <!--图标子分类-->
               <icon-sub-type-bar :showWinFlag="showWinFlag" @selSubTypeQuery="selSubTypeQuery"></icon-sub-type-bar>
           </Col>
            <Col span="5" style="padding-top: 4px;">
                <!--按钮组合-->
                <go-btn-group class="pull-right" style="margin-right: 8px;"
                    @btnClick="clickQueryByShape"
                    :item="groupBtnItem"
                ></go-btn-group>
            </Col>
        </div>
        <div class="icon_area_ctl clearfix" style="height: calc(100% - 95px);overflow: auto;padding:5px;">
            <div
                class="icon_item clearfix"
                :key="index"
                v-for="(item, index) of items"
            >
                <div
                    class="icon_div clearfix"
                    @click="selItem(item)"
                    @mouseover="showOperation(item)"
                    @mouseleave="hideOperation(item)"
                >

                    <!--图片展示区域-->
                    <div class="icon_area font_area_border">
                        <div class="sub-type" v-show="subTypeFlag(item)">{{subTypeName(item)}}</div>
                        <i  :class="item.url"></i>
                        <!--图片文件名称区域-->
                        <div class="name_area">
                          <span v-show="!item.editorName">{{iconShapeItem(item)}}{{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 class="icon_choose" v-show="item.selFlag">
                        <span class="icon_bg"></span>
                        <span class="ivu-icon ivu-icon-md-checkmark icon_check_ok"></span>
                    </div>
                    <!--图片操作功能-->
                    <div
                        class="icon_operation"
                        style="background-color: #1F85EC"
                        @click.stop
                        @mouseover="showOperationMenu(item)"
                        @mouseleave="hideOperationMenu(item)"
                        v-show="operation && item.hoverFlag"
                    >
            <span class="operation_icon"
            ><Icon style="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 class="operate_item rename" @click="copyUrl(item, $event)">
                                <span>复制url</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Row class="icon_pagin_area">
            <div style="float: right;padding-right:30px;">
                <Page
                    show-total
                    @on-change="changePage"
                    :current="curPageNum"
                    :page-size="pageSizeProp"
                    :total="totalCount"
                    show-elevator
                />
            </div>
        </Row>
    </div>
</template>

<script>
    import {AssertUtils, ArrayUtils,GoingUtils} from "goingutils";
    import IconSubTypeBar from "./IconSubTypeBar";
    import IconShowObj from "../../../../jsCom/comCtl/IconShowObj";

    export default {
        name: "icon-show",
        props: {
            showWinFlag:{
                type:Boolean,
                default:false,
            },
            pageSizeProp: {
                type: Number,
                default: 28
            },
            //是否可以多选
            multi: {
                type: Boolean,
                default: true
            },
            //是否可以进行操作
            operation: {
                type: Boolean,
                default: true
            },
            treeTypeId: {
                type: String,
                default: "allIcon"
            },
            url: {
                type: String,
                default: ""
            },
            id: {
                type: String,
                default: ""
            }
        },
        data: function () {
            return {
                loadData:false,
                iconTypeId:this.treeTypeId,
                queryIconUrl:window.SysConfigUtils.go_eplat_adress + `${window.projectName.file}/iconInfo/queryIconsByPage`,
                $iconShowObj: null,
                iconShape: "",
                iconType: "",
                groupBtnItem: {
                    btns:[
                        {
                            text: "全部",
                            id: "allShape",
                            active: true,
                            class: "btn-circle",
                            imgType: "iviewIcon"
                        },
                        {
                            text: "线型",
                            id: "lineShape",
                            active: false,
                            class: "btn-circle",
                            imgType: "iviewIcon"
                        },
                        {
                            text: "面型",
                            id: "surfaceShape",
                            active: false,
                            class: "btn-circle",
                            imgType: "iviewIcon"
                        }
                    ]
                },
                totalCount: 0,
                curPageNum: 1,
                recordIds: [],
                items: []
            };
        },
        computed: {},
        methods: {
            subTypeFlag(item){
                if(AssertUtils.isNotEmpty(item.subTypeName)){
                    return true;
                }else{
                    return false;
                }
            },
            iconShapeItem(item){
                if(item["iconShape"]==='lineShape'){
                    return '[线]';
                }else if(item["surfaceShape"]==='lineShape'){
                    return '[面]';
                }else{
                    return '[面]';
                }
            },
            //子类别名称
            subTypeName(item){
                if(AssertUtils.isNotEmpty(item.subTypeName)){
                    return item.subTypeName.substring(0,1);
                }else{
                    return "";
                }
            },
            copyUrl(item){
                navigator.clipboard.writeText(item.url)
                    .then(() => {
                        GoingUtils.showMessage("复制成功");
                    })
                    .catch(err => {
                        console.log('Something went wrong', err);
                    });
            },
            //获取子类别名称
            getSubTypeName() {
                return this.$iconShowObj.getSubTypeName();
            },
            //获取图标型态
            getIconShape() {
                return this.$iconShowObj.getIconShape();
            },
            //刷新字体图标
            flushImgByUrl(jsonObj,flag) {
                this.$iconShowObj.flushImgByUrl(jsonObj,flag);
            },
            //重新加载数据
            reloadData() {
                this.$iconShowObj.reloadData();
            },
            //获取选中的记录集合
            getSelectedRowIds(relChar) {
                return this.$iconShowObj.getSelectedRowIds(relChar);
            },
            //获取对象
            getCtlObj() {
                return this.$iconShowObj;
            },
            //点击图标子分类进行查询
            selSubTypeQuery({subTypeName}) {
                //根据子类别查询
                this.$iconShowObj.flushImgByUrl({
                    url: this.queryIconUrl,
                    params: {
                        subTypeName: subTypeName,
                        typeId: this.iconTypeId,
                        iconShape: this.iconShape
                    }
                });
            },
            //点击根据形态进行查询
            clickQueryByShape(btnId) {
                this.iconShape = btnId;
                //根据子类别查询
                this.$iconShowObj.flushImgByUrl({
                    url: this.queryIconUrl,
                    params: {
                        subTypeName: this.subTypeName,
                        typeId: this.iconTypeId,
                        iconShape: this.iconShape
                    }
                },true);
            },
            //点击切换页面
            changePage(pageSize) {
                this.curPageNum = pageSize;
                this.$iconShowObj.reloadData();
            },
            //点击回车保存
            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();
                let vueObj = this;
                //如果不是多选 则需要清空以前选择的记录
                if (!this.multi) {
                    this.items.forEach(function (itemObj) {
                        itemObj.selFlag = false;
                        vueObj.recordIds = [];
                    });
                }
                //设置当前选项选中
                item.selFlag = !item.selFlag;
                if (item.selFlag) {
                    this.recordIds.push(item.id);
                } else {
                    ArrayUtils.removeByValue(this.recordIds, item.id);
                }
            },
            //删除
            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() {
            let iconShowObj = new IconShowObj(this);
            //缓存对象
            this.$iconShowObj = iconShowObj;
        },
        watch:{
            showWinFlag(newVal){
                //如果弹出窗口 并且未加载过数据 才执行
                if(newVal&&this.loadData===false){
                    if (AssertUtils.isNotEmpty(this.url)) {
                        this.$iconShowObj.flushImgByUrl({url: this.url});
                    }
                    this.loadData=true;
                }
            },
            //监听 如果类别id发生变化 则重新设置类别值
            treeTypeId(newVal){
                this.iconTypeId=newVal;
            }
        },
        beforeDestroy() {
            //如果对象存在 则销毁当前对象 以及对象里面的对象
            if (this.$iconShowObj != null) {
                this.$iconShowObj.destructor();
            }
            this.$iconShowObj = null;
        },
        components: {
            IconSubTypeBar
        }
    };
</script>
