<template>
    <Card ref="card" :bordered="false" :padding="0" dis-hover>
        <!-- 如果myConfig.modetype为1，则显示 -->
        <template v-if="myConfig.modetype === '1'">
            <!-- 如果showTitle为true，则显示 -->
            <p v-if="showTitle" @click="toggle" style="cursor: pointer">
                <Row
                    type="flex"
                    justify="start"
                    align="middle"
                    style="margin-top: 14px; margin-bottom: 14px"
                >
                    <!-- 如果showGrid为true，则显示icon-custom-pack，否则显示icon-custom-spread -->
                    <Icon
                        custom="iconfont icon-custom-pack"
                        color="#f3b352"
                        v-show="showGrid"
                        size="14"
                    />
                    <Icon
                        v-show="!showGrid"
                        color="#f3b352"
                        custom="iconfont icon-custom-spread"
                        size="14"
                    />
                    <!-- 显示myConfig.title -->
                    <span
                        style="
                            margin-left: 10px;
                            font-size: 14px;
                            font-weight: bold;
                        "
                        v-text="myConfig.title"
                    />
                </Row>
            </p>
            <!-- 显示分割线 -->
            <Divider
                style="margin-left: 24px; margin-top: 0px; margin-bottom: 10px"
            />
        </template>

        <!-- 如果myConfig.modetype为2，则显示 -->
        <template v-if="myConfig.modetype === '2'">
            <div v-if="showTitle" style="margin-bottom: 10px">
                <span class="efuture-title-verticalline" /><span
                    style="font-size: 14px; font-weight: bold"
                    v-text="myConfig.title"
                />
            </div>
        </template>

        <!-- 插槽相关面板 -->
        <div v-show="showGrid">
            <slot
                v-if="$slots[myConfig.slot]"
                :name="myConfig.slot"
                :config="config"
                :dictData="dictData"
                :doAction="doAction"
                :dataInfo="dataInfo"
                :readOnly="readOnly"
            ></slot>
        </div>
    </Card>
</template>
<script>
export default {
    name: "BillInfoPanelSlotPanel",
    components: {},
    props: {
        config: {
            type: Object,
            default: () => {
                return {};
            },
        },
        dictData: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            myConfig: {
                modetype: "1",
            },
            showGrid: true,
            showTitle: true,
            dataInfo: {},
            readOnly: false,
        };
    },
    computed: {},
    methods: {
        init() {
            this.myConfig = Object.assign({}, this.config);
        },
        toggle() {
            this.showGrid = !this.showGrid;
        },

        /**
         * 设置数据
         */
        setData(data = [], flag = "set") {
            // console.log("🚀 ~ setData ~ data:", data);
            this.dataInfo = { ...data };
            // switch (flag) {
            //     case "set":
            //         // console.log("初始化表格数据触发");
            //         // this.dataList = [...data];
            //         break;

            //     case "I":
            //         // console.log("手工全量编辑触发");
            //         break;

            //     default:
            //         break;
            // }
        },
        getData() {
            return this.dataInfo;
        },
        getChangeData() {
            return this.dataInfo;
        },
        valueChanged(obj) {
            // console.log("🚀 ~ valueChanged ~ obj:", obj)
            return true;
        },
        clearData() {},
        setReadOnly(value) {
            // console.log("🚀 ~ setReadOnly ~ value:", value)
            this.readOnly = value;
        },
        doAction(params) {
            this.$emit("doAction", params);
        },
    },
    mounted() {
        // console.log("我继承覆写了999999");
    },
    created() {
        this.init();
    },
};
</script>

<style lang="scss" scoped></style>
