<template>
    <Row class="h100b">
        <Col span="4" class="h100b">
            <!--系统默认类别树-->
            <go-simple-tree style="border-right: 1px solid #dfdfdf;" :style="treeSty"
                :operation="false"
                @click="searchSysByType"
                :items="imgDefTypes"
                ref="sysDefTree"
                height="auto"
                rootIcon="goingicon go-ai-img-list"
                subIcon="goingicon go-tupian"
            ></go-simple-tree>

            <go-simple-tree class="h100b" style="border-right: 1px solid #dfdfdf;"
                            :operation="false"
                            ref="userDefTree"
                @click="searchByType"
                :items="imgTypes"
                            rootIcon="goingicon go-ai-img-list"
            ></go-simple-tree>
        </Col>

        <Col span="20" class="h100b">
            <go-img-show
                :showWinFlag="showWinFlag"
                :multiple="multiple"
                :treeTypeId="treeTypeId"
                :pageSizeProp="20"
                :operation="false"
                :url="loadImgRecordsUrl"
                ref="imgShowCtlBySel"
            ></go-img-show>
        </Col>
    </Row>
</template>

<script>

    import {GoingUtils, QueryCommand, AssertUtils} from "goingutils";
    import imgDefTypes from './data/imgDefTypes';

    export default {
        name: "img-sel-ctl",
        props:{
            height:{
                type:[Number,String],
                default:0,
            },
            showWinFlag:{
                type:Boolean,
                default:false,
            },
            multiple:{
                type:Boolean,
                default:false
            },
            flushData:{
                type:Boolean,
                default:false
            }
        },
        data: function () {
            return {
                loadData:false,
                imgDefTypes: imgDefTypes,
                treeTypeId: null,
                loadImgRecordsUrl:  `/api/pe-portal/imgInfo/queryImgsByPage`,
                id: GoingUtils.getUUid(12),
                headerText: "图片选择",
                imgTypes: [
                    { label: "创建分类", id: "allImg", active: false, childrens: [] }
                ],
            };
        },
        computed: {
            treeSty(){
                let sty={};
                if(parseInt(this.height)>0){
                    sty["height"]=this.height+"px";
                }
                return sty;
            }
        },
        methods: {
            getCtlObj() {
                return this.$refs.imgShowCtlBySel.getCtlObj();
            },
            searchSysByType({id}) {
                this.$refs.userDefTree.clearSelect();
                this.treeTypeId = id;
                this.$refs.imgShowCtlBySel.getCtlObj().flushImgByUrl({
                    url: this.loadImgRecordsUrl,
                    params: {typeId: id}
                });
            },
            //根据图片类型 获取该类型下的图片信息
            searchByType({id}) {
                this.$refs.sysDefTree.clearSelect();
                this.treeTypeId = id;
                this.$refs.imgShowCtlBySel.getCtlObj().flushImgByUrl({
                    url: this.loadImgRecordsUrl,
                    params: {typeId: id}
                });
            },
            //加载图片类型集合
            loadImgTypes() {
                //加载图类别信息
                let queryCommand = new QueryCommand(window.SysConfigUtils.go_eplat_adress + `${window.projectName.file}/imgType/getAllImgTypes`);
                queryCommand.executeQuery({successFun:(backData) => {
                    if (AssertUtils.isNotNull(backData)) {
                        backData.forEach(function(item) {
                            if (item.recordType === "sys") {
                                item.operation = false;
                            } else {
                                item.operation = true;
                            }
                        });
                        this.imgTypes[0].childrens = [...backData];
                    }
                }});
            },
        },
        mounted() {

        },
        watch: {
            showWinFlag(newVal){
                //如果弹出窗口 并且未加载过数据 才执行
                if(newVal&&this.loadData===false){
                    this.loadImgTypes();
                    this.loadData=true;
                }
            },
            flushData(val) {
                if (val) {
                    //加载图片类型集合
                    this.loadImgTypes();
                }
            }
        },
        components: {}
    };
</script>
