<template>
    <div style="height: 535px; border: 1px solid #ccc;">
        <pro-layout3 direction="horizontal" :initialRatio=0.21 :firstTitle="'机构树面板'">
            <!-- <template #first-title>
                <div>nihao</div>
            </template> -->
            <template #first>
                <div style="background-color: #e0e0e0; padding: 0px; white-space: nowrap;">
                    <DepartPanel v-model:brNos="formData.brNos" v-model:relationNo="formData.relationNo"
                        @getNodes="getBrNodes">
                    </DepartPanel>
                </div>
            </template>
            <template #second>
                <pro-layout3 direction="vertical" :initialRatio=0.615 :firstTitle="'报表查询'">
                    <!-- <template #first-title>
                        <div>报表查询</div>
                    </template> -->
                    <template #first>
                        <div style="background-color: #fff; padding: 5px;">
                            <pro-form label-width="80px">
                                <pro-form-grid colNum="2" :style="{ width: '900px' }">
                                    <!-- :style="{ width: '300px' }" -->

                                    <pro-date-picker :formItemProps="{ label: '制表日期1', prop: 'rptDate' }"
                                        v-model:value="formData.rptDate" placeholder="请选择制表日期" :allowClear="true">
                                    </pro-date-picker>
                                    <pro-select3 :formItemProps="{ label: '周期类型', prop: 'cycType' }"
                                        v-model:value="formData.cycType" @onSelect="onSelectCycType"
                                        placeholder="请选择周期类型" :allowClear="true" selectType="periodic">
                                    </pro-select3>
                                    <pro-select3 :formItemProps="{ label: '币种', prop: 'curNo' }"
                                        v-model:value="formData.curNo" @onSelect="onSelectCur" placeholder="请选择币种级别"
                                        :allowClear="true" selectType="curr">
                                    </pro-select3>
                                    <pro-select-tree3 :formItemProps="{ label: '账套', prop: 'sobNo' }" treeType="sobTree"
                                        v-model:value="formData.sobNo" v-model:stddNo="formData.stddNo"
                                        :brNos="formData.brNos" :showCheckbox="false" :multiple="false" mode="default">
                                    </pro-select-tree3>
                                    <pro-select3 :formItemProps="{ label: '损益上划', prop: 'shFlag' }"
                                        v-model:value="formData.shFlag" @onSelect="onSelectShFlag"
                                        placeholder="请选择损益上划类型" :allowClear="true" tableName="gl_rpt_def"
                                        colName="sh_flag">
                                    </pro-select3>
                                    <pro-select3 :formItemProps="{ label: '报表调整类型', prop: 'adjType' }"
                                        v-model:value="formData.adjType" @onSelect="onSelectAdjType"
                                        placeholder="请选择报表调整类型" :allowClear="true" tableName="gls_rpt_def"
                                        colName="adj_type">
                                    </pro-select3>
                                    <pro-select3 :formItemProps="{ label: '科目级别', prop: 'accLvl' }"
                                        v-model:value="formData.accLvl" placeholder="请选择科目级别" :allowClear="true"
                                        selectType="accLvl" :sobNo="formData.sobNo">
                                    </pro-select3>
                                    <pro-select3 :formItemProps="{ label: '零余额是否打印', prop: 'zeroPrintYn' }"
                                        v-model:value="formData.zeroPrintYn" placeholder="请选择零余额是否打印" :allowClear="true"
                                        tableName="gl_rpt_def" colName="zero_print_yn">
                                    </pro-select3>
                                    <pro-select3 v-show="false" :formItemProps="{ label: '汇率类型', prop: 'exrateType' }"
                                        v-model:value="formData.exrateType" placeholder="请选择汇率类型" :allowClear="true"
                                        tableName="exchange_rate_info" colName="exrate_type">
                                    </pro-select3>
                                    <pro-form-item>
                                        <pro-button id="queryBtn" @click="search2"
                                            :icon="h(SearchOutlined)">查询</pro-button>
                                    </pro-form-item>
                                </pro-form-grid>
                            </pro-form>
                        </div>
                    </template>
                    <template #second>
                        <div style="background-color: #e0e0e0; padding: 0px;">
                            <!-- 结果区 -->
                            <ResultPanel ref="resultPanel"></ResultPanel>
                        </div>
                    </template>
                </pro-layout3>
            </template>
        </pro-layout3>
    </div>
</template>

<!-- <template>
    <div style="height: 496px; border: 1px solid #ccc;">
        <pro-layout3 direction="horizontal" :initialRatio="initialRatio">
            <template #first>
                <pro-layout3 direction="vertical" :initialRatio="initialRatio" firstTitle="'第一个面板标题'"
                    secondTitle="'第二个面板标题'">
                    <template #first>
                        <div style="background-color: #e0e0e0; padding: 20px;">
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                        </div>
                    </template>
                    <template #second>
                        <div style="background-color: #d0d0d0; padding: 20px;">
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                            右侧下半区域<br>
                        </div>
                    </template>
                </pro-layout3>
            </template>
            <template #second>
                <pro-layout3 direction="vertical" :initialRatio="initialRatio" firstTitle="'第一个面板标题'"
                    secondTitle="'第二个面板标题'">
                    <template #first>
                        <div style="background-color: #e0e0e0; padding: 20px;">
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>
                            右侧上半区域<br>

                        </div>
                    </template>
                    <template #second>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                        右侧下半区域<br>
                    </template>
                </pro-layout3>
            </template>
        </pro-layout3>
    </div>
</template> -->

<script setup lang="jsx">
import { message } from "ant-design-vue";
import { ref, reactive, nextTick, onMounted, onUnmounted, h, } from 'vue';
import { SearchOutlined, RedoOutlined, PlusOutlined, EditOutlined } from "@ant-design/icons-vue";
import DepartPanel from '@/components/ProReport/DepartPanel.vue';
import ResultPanel from '@/components/ProReport/ResultPanel.vue';
const initialRatio = ref(0.5);
const resultPanel = ref(null);

const formData = ref({
    relationNo: '',
    brNos: [],
    brName: '',
    rptDate: '',
    cycType: '',
    cycTypeName: '',
    curNo: '',
    curName: '',
    stddNo: '',
    sobNo: '',
    shFlag: '',
    shFlagName: '',
    adjType: '',
    adjTypeName: '',
    accLvl: '',
    zeroPrintYn: '',
    exrateType: '',
    isGather: 'N',
    telNo: '',

    ptabName: ['v_gl_sub_coll_day'],
    tabName: ["gls_gl_sub_tmp_sh_adj_q", "gls_gl_sub_tmp_sh_adj", "gls_gl_sub_tmp_sh_adj_h"],
    reportType: '1',
    rptType: '',

});

const onSelectCycType = (value, option) => {
    formData.value.cycTypeName = option.item_name;
}
const onSelectCur = (value, option) => {
    formData.value.curName = option.item_name;
}
const onSelectAdjType = (value, option) => {
    formData.value.adjTypeName = option.item_name;
}
const onSelectShFlag = (value, option) => {
    formData.value.shFlagName = option.item_name;
}

const getBrNodes = (value, nodes) => {
    console.log('getBrNodes', value, nodes);
    if (nodes.length === 1) {
        formData.value.brName = nodes[0].name;
    } else {
        formData.value.brName = '多机构汇总';
    }
}

function search () {
    if (resultPanel.value) {
        resultPanel.value.search();
    }
}

const search2 = () => {
    // 1.机构及汇总关系校验
    if (formData.value.relationNo === '') {
        message.error('请选择汇总关系');
        return;
    }
    if (formData.value.brNos.length === 0) {
        message.error('请选择机构');
        return;
    }

    // 2.表单校验
    if (formData.value.adjType === '1') {
        //调整前
        ptabName = ['gls_gl_sub_day'];
    } else if (formData.value.adjType === '2') {
        //调整
        ptabName = ['v_gl_sub_adj_day'];
    }

    if (resultPanel.value) {
        resultPanel.value.search2(formData);
    }
}

// 查询报表
</script>
