<template>
    <HcPageLayout>
        <template #left>
            <div class="hc-layout-tree-box">
                <el-scrollbar>
                    <HcTreeData @nodeTap="treeNodeTap"/>
                </el-scrollbar>
            </div>
        </template>
        <HcCard>
            <template #header>
                <div class="w-52">
                    <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">
                    <HcIcon name="add"/>
                    <span>新增</span>
                </el-button>
                <el-button size="large" type="warning" hc-btn>
                    <HcIcon name="add"/>
                    <span>打印</span>
                </el-button>
                <el-button size="large" type="danger" hc-btn>
                    <HcIcon name="delete-bin"/>
                    <span>删除</span>
                </el-button>
            </template>
            <div class="agree-special-card" :class="isTableRow?'info':''">
                <div class="special-table-box">
                    <div class="special-table">
                        <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck
                                 @selection-change="tableSelectionChange" @row-click="tableRowClick"
                        >
                            <template #action="{row,index}">
                                <el-button size="small" type="primary" @click="editRowClick(row)">修改</el-button>
                                <el-button size="small" type="warning">查看</el-button>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </HcTable>
                    </div>
                    <div class="special-page">
                        <HcPages :pages="searchForm" @change="pageChange"/>
                    </div>
                </div>
                <div class="special-table-info">
                    <HcCardItem title="已填写的专项设施信息详情" scrollbar>
                        <HcTable :column="tableColumn1" :datas="tableData1"/>
                    </HcCardItem>
                </div>
            </div>
        </HcCard>
    </HcPageLayout>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()

//树节点被点击
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: '协议编号', width: 200},
    {key: 'key2', name: '协议书名称', minWidth: 200},
    {key: 'key3', name: '补偿总金额(万元)', width: 200},
    {key: 'key4', name: '拆迁单位', width: 200},
    {key: 'key5', name: '拆迁日期', width: 200},
    {key: 'key6', name: '施工单位', minWidth: 200},
    {key: 'key7', name: '甲方', minWidth: 200},
    {key: 'key8', name: '乙方', minWidth: 200},
    {key: 'key9', name: '丙方', minWidth: 200},
    {key: 'action', name: '操作', width: '190', align: 'center', fixed: 'right'},
]
const tableData = ref([
    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
])
const getTableData = () => {

}

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

//详情
const tableColumn1 = [
    {key: 'key1', name: '拆迁桩号'},
    {key: 'key2', name: '拆迁长度(公里)'},
    {key: 'key3', name: '拆迁类型'},
    {key: 'key4', name: '补偿标准(万元/公里)'},
    {key: 'key5', name: '补偿金额(万元)'},
    {key: 'key6', name: '备注'},
]
const tableData1 = ref([
    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
])

const isTableRow = ref(false)
const tableRowClick = () => {
    isTableRow.value = true
}


//新增
const addRowClick = () => {
    router.push({
        name: 'lar-agree-special-form'
    })
}

//编辑
const editRowClick = (row) => {
    router.push({
        name: 'lar-agree-special-form'
    })
}
</script>

<style lang="scss" scoped>
.hc-layout-tree-box {
    position: relative;
    height: 100%;
    padding: 18px;
}
.agree-special-card {
    position: relative;
    height: 100%;
    .special-table-box {
        position: relative;
        height: 100%;
        .special-table {
            position: relative;
            height: calc(100% - 52px);
        }
        .special-page {
            position: relative;
            margin-top: 20px;
        }
    }
    .special-table-info {
        position: relative;
        margin-top: 0;
        height: 0;
        display: none;
    }
    &.info {
        .special-table-box {
            height: calc(100% - 335px);
        }
        .special-table-info {
            margin-top: 34px;
            height: 300px;
            display: block;
        }
    }
}
</style>
