<template>
    <div :id="cardId">
        <Card :style="cardStyle" :padding="padding">
            <div
                v-if="title.length > 0"
                style="padding:5px 10px;"
                class="card-title pull-left clearfix"
                slot="title"
            >
                {{ title }}
            </div>
            <slot></slot>
        </Card>
    </div>
</template>

<script>
    import {GoingUtils,AssertUtils} from "goingutils";
    import GoSingleQueryCtl from "../../jsCom/comCtl/GoSingleQueryCtl";
    import MoreQueryCtl from "../../jsCom/comCtl/GoMoreQueryCtl";

    export default {
        name: "go-card",
        data: function () {
            return {
                cardId: GoingUtils.getUUid(12)
            };
        },
        props: {
            searchFieldAry: {
                type: Array,
                default: () => []
            },
            width: {
                type: [Number, String],
                default: "100%"
            },
            height: {
                type: [Number, String],
                default: "100%"
            },
            hasSearch: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ""
            },
            padding: {
                type: Number,
                default: 0
            }
        },
        computed: {
            cardStyle() {
                let h = this.height;
                if (AssertUtils.isNumber(this.height)) {
                    h = h + "px";
                }
                let w = this.width;
                if (
                    AssertUtils.isNotEmpty(this.width) &&
                    AssertUtils.isNumber(this.width)
                ) {
                    w = w + "px";
                }
                return {height: h, with: w};
            }
        },
        methods: {
            resizeCtl(){

            }
        },
        mounted() {
            let vueObj = this;
            //判断是否需要查询
            if (this.hasSearch) {
                let rightBarDivId = GoingUtils.getUUid(12);
                $(`<div class="pull-right"  id="${rightBarDivId}"></div>`).appendTo(
                    `#${this.cardId} .ivu-card-head`
                );
                let singleQueryCtl = new GoSingleQueryCtl(
                    rightBarDivId,
                    this.searchFieldAry,
                    vueObj
                );
                let moreQueryCtl = new MoreQueryCtl(
                    rightBarDivId,
                    this.searchFieldAry,
                    vueObj
                );
            }
        },
        watch: {
            height: function () {
                this.changeSize = true;
            }
        },
        updated() {
            let vueObj = this;
            if (this.changeSize) {
                this.$nextTick(
                    function () {
                        this.resizeCtl(vueObj);
                    }.bind(this)
                );
                this.changeSize = false;
            }
        }
    };
</script>
