<template>
    <HcPageLayout id="hc-settle-node-target">
        <template #left>
            <div class="hc-layout-tree-box">
                <el-scrollbar>
                    <HcTreeData @nodeTap="treeNodeTap"/>
                </el-scrollbar>
            </div>
        </template>
        <HcCard>
            <template #header>
                <div class="w-32">
                    <el-select v-model="searchForm.projectType" block clearable placeholder="补偿类型" size="large">
                        <el-option label="征地补偿" value="选项1"/>
                        <el-option label="坟地补偿" value="选项2"/>
                        <el-option label="专项补偿" value="选项3"/>
                    </el-select>
                </div>
                <div class="w-32 ml-2">
                    <el-select v-model="searchForm.projectType" block clearable placeholder="计量期" size="large">
                        <el-option label="第一期" value="选项1"/>
                        <el-option label="第二期" value="选项2"/>
                        <el-option label="第三期" value="选项3"/>
                    </el-select>
                </div>
                <div class="w-52 ml-2">
                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
                </div>
                <div class="ml-4">
                    <el-button type="primary" @click="searchClick" size="large">
                        <HcIcon name="search-2"/>
                        <span>搜索</span>
                    </el-button>
                </div>
            </template>
            <template #extra>
                <el-button size="large" type="primary" hc-btn @click="addRowClick">新增结算</el-button>
                <el-button size="large" type="success" hc-btn @click="editingClick">编辑结算周期</el-button>
                <el-button size="large" type="warning" hc-btn @click="cycleClick">查看报表</el-button>
                <el-button size="large" type="danger" hc-btn>批量删除</el-button>
            </template>
            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
                <template #key3="{row,index}">
                    <span class="text-blue text-hover">{{row.key3}}</span>
                </template>
                <template #action="{row,index}">
                    <el-button size="small" type="primary" @click="editRowClick(row)">修改</el-button>
                    <el-button size="small" type="danger">删除</el-button>
                </template>
            </HcTable>
            <template #action>
                <HcPages :pages="searchForm" @change="pageChange"/>
            </template>
        </HcCard>

        <!--抽屉-->
        <HcDrawer :show="isDrawer" uis="hc-settle-drawer" to-id="hc-main-box" @close="drawerClose">
            <div class="hc-settle-drawer-box">
                <div class="settle-left-box">
                    <div class="settle-pdf">
                        <HcPdf src="http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230504/911982ba85e66cfa58fb02d5a738bb2b.pdf"/>
                    </div>
                </div>
                <div class="settle-right-box">
                    <div class="settle-right">
                        <div class="hc-settle-cycle">
                            <div class="title">结算周期</div>
                            <div class="cycle-box">
                                <el-scrollbar>
                                    <div class="item">第一期</div>
                                    <div class="item">第一期</div>
                                    <div class="item">第一期</div>
                                    <div class="item">第一期</div>
                                </el-scrollbar>
                            </div>
                        </div>
                        <div class="hc-settle-cycle of">
                            <div class="title">结算报表名称</div>
                            <div class="cycle-box">
                                <el-scrollbar>
                                    <div class="item">封面</div>
                                    <div class="item">补偿结算表</div>
                                    <div class="item">补偿明细表</div>
                                    <div class="item">面积统计明细表</div>
                                </el-scrollbar>
                            </div>
                        </div>
                        <div class="hc-settle-btn">
                            <el-button type="primary" hc-btn @click="drawerClose" size="large">取 消 查 阅</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </HcDrawer>

        <!--新增结算单-->
        <HcDialog isToBody bgColor="white" isTable widths="80%" title="新增结算单" :padding="false" :show="rowModal" @save="rowModalSave" @close="rowModalClose">
            <div class="hc-settle-dialog-box">
                <div class="hc-settle-dialog-tree" id="settle-dialog-tree">
                    <el-scrollbar>
                        <HcTreeData :isMenu="false" @nodeTap="treeNodeTap"/>
                    </el-scrollbar>
                </div>
                <div class="hc-settle-dialog-table" id="settle-dialog-table">
                    <div class="dialog-table-header">
                        <div class="w-32">
                            <el-select v-model="searchForm.projectType" block clearable placeholder="计量期" size="large">
                                <el-option label="第一期" value="选项1"/>
                                <el-option label="第二期" value="选项2"/>
                                <el-option label="第三期" value="选项3"/>
                            </el-select>
                        </div>
                        <div class="w-32 ml-2">
                            <el-select v-model="searchForm.projectType" block clearable placeholder="补偿类型" size="large">
                                <el-option label="征地补偿" value="选项1"/>
                                <el-option label="坟地补偿" value="选项2"/>
                                <el-option label="专项补偿" value="选项3"/>
                            </el-select>
                        </div>
                        <div class="w-52 ml-2">
                            <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
                        </div>
                        <div class="ml-4">
                            <el-button type="primary" @click="searchClick" size="large">
                                <HcIcon name="search-2"/>
                                <span>搜索</span>
                            </el-button>
                        </div>
                    </div>
                    <div class="dialog-table-body">
                        <HcTable :column="tableColumn1" :datas="tableData1" isCheck @selection-change="tableSelectionChange"/>
                    </div>
                </div>
            </div>
        </HcDialog>

        <!--结算周期编辑-->
        <HcDialog isToBody bgColor="white" isTable widths="80%" title="编辑结算周期" :show="editingModal" @save="editingModalSave" @close="editingModalClose">
            <div class="hc-settle-editing-dialog-box">
                <div class="editing-dialog-tip">
                    <div class="name">提示：</div>
                    <div class="content">
                        <div class="item truncate">1.日期不能为空</div>
                        <div class="item truncate">2.同一期的结束日期不能小于开始日期</div>
                        <div class="item truncate">3.连续的两期，上一期结束日期和下一期的开始日期必须连续，如：期号1的结束日期为2018-1-25，则期号2的开始日期必须是2018-1-26 ！</div>
                        <div class="item truncate text-orange">4.已经存在数据的结算周期不能进行删除以及修改结算类型！</div>
                    </div>
                    <div class="btn">
                        <el-button type="primary" size="large">
                            <HcIcon name="add"/>
                            <span>添加</span>
                        </el-button>
                    </div>
                </div>
                <div class="editing-dialog-table">
                    <HcTable :isIndex="false" :column="tableColumn2" :datas="tableData2">
                        <template #key1="{row,index}">
                            <el-input v-model="row.key1"/>
                        </template>
                        <template #key2="{row,index}">
                            <el-date-picker class="block" v-model="row.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                        </template>
                        <template #key3="{row,index}">
                            <el-date-picker class="block" v-model="row.key3" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                        </template>
                        <template #key4="{row,index}">
                            <el-date-picker class="block" v-model="row.key4" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                        </template>
                        <template #key5="{row,index}">
                            <el-input v-model="row.key5"/>
                        </template>
                        <template #action="{row,index}">
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </HcTable>
                </div>
            </div>
        </HcDialog>
    </HcPageLayout>
</template>

<script setup>
import {ref, onUnmounted, nextTick} from "vue";
import split from "split.js";

//树节点被点击
const treeNodeTap = ({node, data}) => {

}

//搜索表单
const searchForm = ref({
    projectType: null, queryValue: null, startTime: null, endTime: null,
    current: 1, size: 20, total: 0
})

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'key1', name: '计量期'},
    {key: 'key2', name: '结算协议书名称'},
    {key: 'key3', name: '协议书类型'},
    {key: 'key4', name: '协议书金额'},
    {key: 'action', name: '操作', width: '130', align: 'center'},
]
const tableData = ref([
    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
])
const getTableData = () => {

}

//多选事件
const tableSelectionChange = (rows) => {
    console.log(rows)
}


//结算周期
const isDrawer = ref(false)
const cycleClick = () => {
    isDrawer.value = true
}
const drawerClose = () => {
    isDrawer.value = false
}


//弹窗
const rowModal = ref(false)
const formModel = ref({})

// 初始化设置拖动分割线
const splitvar = ref(null);
const setSplitDom = () => {
    try {
        //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
        splitvar.value = split([
            '#settle-dialog-tree',
            '#settle-dialog-table'
        ], {
            sizes: [20, 80],
            minSize: [200, 900],
        });
    } catch (e) {
        setTimeout(() => {
            setSplitDom()
        }, 500)
    }
}

const tableColumn1 = [
    {key: 'key1', name: '协议书编号'},
    {key: 'key2', name: '结算协议书名称'},
    {key: 'key3', name: '协议书补偿金额(元)'}
]
const tableData1 = ref([
    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
])

//新增
const addRowClick = () => {
    formModel.value = {}
    rowModal.value = true
    nextTick(() => {
        setSplitDom()
    })
}

//编辑
const editRowClick = (row) => {
    formModel.value = {}
    rowModal.value = true
    nextTick(() => {
        setSplitDom()
    })
}

//保存
const rowModalSave = () => {

}

//关闭弹窗
const rowModalClose = () => {
    rowModal.value = false
    formModel.value = {}
}


const editingModal = ref(false)
const tableColumn2 = [
    {key: 'key1', name: '期号'},
    {key: 'key2', name: '开始日期'},
    {key: 'key3', name: '结束日期'},
    {key: 'key4', name: '报表打印日期'},
    {key: 'key5', name: '备注'},
    {key: 'action', name: '操作', width: '90', align: 'center'},
]
const tableData2 = ref([
    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
])

//编辑结算周期
const editingClick = () => {
    editingModal.value = true
}

const editingModalSave = () => {
    editingModal.value = false
}

const editingModalClose = () => {
    editingModal.value = false
}


//销毁
onUnmounted(() => {
    if (splitvar.value) {
        splitvar.value.destroy()
    }
})
</script>

<style lang="scss" scoped>
@import "~src/styles/settle/index.scoped.scss";
</style>

<style lang="scss">
@import "~src/styles/settle/index.scss";
</style>
