<template>
    <Row class="h100b">
        <Col span="5" class="h100b">
            <div class="go-simple-tree h100b" style="border-right: 1px solid #dfdfdf">
                <go-simple-tree
                    @click="searchByType"
                    :items="iconTypes"
                    :operation="false"
                ></go-simple-tree>
            </div>
        </Col>

        <Col span="19">
            <go-icon-show
                :multi="false"
                :showWinFlag="showWinFlag"
                :treeTypeId="treeTypeId"
                :pageSizeProp="30"
                :operation="false"
                :url="loadIconRecordsUrl"
                ref="iconShowSelCtl"
                :style="imgShowStyle"
            ></go-icon-show>
        </Col>
    </Row>
</template>

<script>
    import GoIconShow from "./components/IconShow";
    import {GoingUtils,QueryCommand} from "goingutils";

    export default {
        name: "icon-sel-ctl",
        data: function () {
            return {
                loadData:false,
                iconTypes: [
                    { label: "全部图标", id: "allIcon", active: true, childrens: [] }
                ],
                treeTypeId: null,
                imgShowStyle: {height: "500px", overFlow: "auto"},
                loadIconRecordsUrl: window.SysConfigUtils.go_eplat_adress + `${window.projectName.file}/iconInfo/queryIconsByPage`,
                id: GoingUtils.getUUid(12),
                headerText:"图标选择"
            };
        },
        props:{
            showWinFlag:{
                type:Boolean,
                default:false,
            }
        },
        computed: {

        },
        methods: {
            getCtlObj(){
                return this.$refs.iconShowSelCtl.getCtlObj();
            },
            //根据类别进行查询
            searchByType({id}) {
                //查询操作
                this.$refs.iconShowSelCtl.flushImgByUrl(
                    {
                        url: window.SysConfigUtils.go_eplat_adress + `${window.projectName.file}/iconInfo/queryIconsByPage`,
                        params: {
                            typeId: id,
                            iconShape: this.$refs.iconShowSelCtl.getIconShape(),
                            subTypeName: this.$refs.iconShowSelCtl.getSubTypeName()
                        }
                    },
                    true
                );
            },
            //加载图标类别
            loadIconTypes(){
                let queryCommand = new QueryCommand({url:window.SysConfigUtils.go_eplat_adress + `${window.projectName.file}/iconType/getAllIconTypes`});
                queryCommand.executeQuery({successFun:(data)=>{
                    this.iconTypes[0].childrens = [...data];
                }});
            }
        },
        mounted() {
            // this.$nextTick(function () {
            //     this.loadIconTypes();
            // });
        },
        beforeDestroy() {
            this.iconTypes=null;
            this.imgShowStyle=null;
        },
        watch:{
            showWinFlag(newVal){
                //如果弹出窗口 并且未加载过数据 才执行
                if(newVal&&this.loadData===false){
                    this.loadIconTypes();
                    this.loadData=true;
                }
            }
        },
        components: {
            GoIconShow
        }
    };
</script>
