import { ref, computed } from "vue";
import summaryLayoutStore from '@/store/modules/summaryLayout'

type NeedRenderComponent = Common.IRender;

// 布局相关代码
export default function useSummaryLayout() {
    const {
        setSubjectTreeSize,
        setMainContentSize,
        setMainLeftSize,
        setMainRightSize,
        setMainLeftTopSize,
        setMainLeftBottomSize,
        setRightStdBillVisible,
        setRightLibRationVisible
    } = summaryLayoutStore

    const subjectTreeSize = computed({
        get: () => summaryLayoutStore.subjectTreeSize,
        set: val => setSubjectTreeSize(val),
    });

    const mainContentSize = computed({
        get: () => summaryLayoutStore.mainContentSize,
        set: val => setMainContentSize(val),
    });

    const mainLeftSize = computed({
        get: () => summaryLayoutStore.mainLeftSize,
        set: val => setMainLeftSize(val),
    });

    const mainRightSize = computed({
        get: () => summaryLayoutStore.mainRightSize,
        set: val => setMainRightSize(val),
    });

    const mainLeftTopSize = computed({
        get: () => summaryLayoutStore.mainLeftTopSize,
        set: val => setMainLeftTopSize(val),
    });

    const mainLeftBottomSize = computed({
        get: () => summaryLayoutStore.mainLeftBottomSize,
        set: val => setMainLeftBottomSize(val),
    });

    const rightStdBillVisible = computed({
        get: () => summaryLayoutStore.rightStdBillVisible,
        set: val => setRightStdBillVisible(val),
    });

    const rightLibRationVisible = computed({
        get: () => summaryLayoutStore.rightLibRationVisible,
        set: val => setRightLibRationVisible(val),
    });

    const costTableRef = ref<NeedRenderComponent>()
    const bottomTabsRef = ref<NeedRenderComponent>()
    const stdBillRef = ref<NeedRenderComponent>()
    const libRationRef = ref<NeedRenderComponent>()

    const handleSubjectTreeSize = (size: number) => {
        subjectTreeSize.value = size
    }

    const handleMainContentSize = (size: number) => {
        mainContentSize.value = size

        // 重新 render 各个子组件
        costTableRef.value && costTableRef.value.Render()
        bottomTabsRef.value && bottomTabsRef.value.Render()
        stdBillRef.value && stdBillRef.value.Render()
        libRationRef.value && libRationRef.value.Render()
    }

    const handleMainLeftSize = (size: number) => {
        mainLeftSize.value = size

        // 重新 render 各个子组件
        costTableRef.value && costTableRef.value.Render()
        bottomTabsRef.value && bottomTabsRef.value.Render()
    }

    const handleMainRightSize = (size: number) => {
        mainRightSize.value = size

        stdBillRef.value && stdBillRef.value.Render()
        libRationRef.value && libRationRef.value.Render()
    }

    const handleMainLeftTopSize = (size: number) => {
        mainLeftTopSize.value = size

        costTableRef.value && costTableRef.value.Render()
    }

    const handleMainLeftBottomSize = (size: number) => {
        mainLeftBottomSize.value = size

        bottomTabsRef.value && bottomTabsRef.value.Render()
    }

    return {
        subjectTreeSize,
        mainContentSize,
        mainLeftSize,
        mainRightSize,
        mainLeftTopSize,
        mainLeftBottomSize,
        rightStdBillVisible,
        rightLibRationVisible,

        costTableRef,
        bottomTabsRef,
        stdBillRef,
        libRationRef,

        handleSubjectTreeSize,
        handleMainContentSize,
        handleMainLeftSize,
        handleMainRightSize,
        handleMainLeftTopSize,
        handleMainLeftBottomSize,
    }
}