<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-48">
                    <el-select v-model="searchForm.projectType" block clearable placeholder="请选择土地性质" size="large">
                        <el-option label="选项1" value="选项1"/>
                        <el-option label="选项2" value="选项2"/>
                    </el-select>
                </div>
                <div class="w-64 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">
                    <HcIcon name="add"/>
                    <span>新增</span>
                </el-button>
                <el-button size="large" type="danger" hc-btn>
                    <HcIcon name="delete-bin"/>
                    <span>删除</span>
                </el-button>
            </template>
            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
                <template #action="{row,index}">
                    <el-button size="small" type="warning" @click="viewRowClick(row)">查看</el-button>
                    <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>

        <!--新增/编辑-->
        <HcDialog isToBody bgColor="white" :show="rowModal" isTable widths="80%" :padding="false"
                  :title="formModel.id?'编辑':'新增'" @save="rowModalSave" @close="rowModalClose"
        >
            <HcCard>
                <template #header>
                    <el-form ref="formRef" inline :model="formModel" :rules="formRules" size="large">
                        <el-form-item label="名称：" prop="key1">
                            <el-input v-model="formModel.key1"/>
                        </el-form-item>
                        <el-form-item label="补偿性质：">
                            <el-select block v-model="formModel.key2">
                                <el-option label="选项1" value="选项1"/>
                                <el-option label="选项2" value="选项2"/>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </template>
                <template #extra>
                    <el-button size="large" type="success" hc-btn>
                        <HcIcon name="add"/>
                        <span>新增</span>
                    </el-button>
                </template>
                <HcTable :column="tableColumn1" :datas="tableData1">
                    <template #key1="{row,index}">
                        <el-input v-model="row.key1"/>
                    </template>
                    <template #key2="{row,index}">
                        <el-input v-model="row.key2"/>
                    </template>
                    <template #key3="{row,index}">
                        <el-input v-model="row.key3"/>
                    </template>
                    <template #key4="{row,index}">
                        <el-input v-model="row.key4"/>
                    </template>
                    <template #action="{row,index}">
                        <el-button size="small" type="danger">
                            <HcIcon name="delete-bin"/>
                            <span>删除</span>
                        </el-button>
                    </template>
                </HcTable>
            </HcCard>
        </HcDialog>

        <!--查看-->
        <HcDialog isToBody bgColor="white" :footer="false" :show="rowViewModal" isTable widths="80%" :padding="false" title="查看" @close="rowViewModalClose">
            <HcCard>
                <template #header>
                    <el-form inline :model="formModel" size="large" disabled>
                        <el-form-item label="名称：" prop="key1">
                            <el-input v-model="formModel.key1"/>
                        </el-form-item>
                        <el-form-item label="补偿性质：">
                            <el-select block v-model="formModel.key2">
                                <el-option label="选项1" value="选项1"/>
                                <el-option label="选项2" value="选项2"/>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </template>
                <HcTable :column="tableColumn1" :datas="tableData1"/>
            </HcCard>
        </HcDialog>

    </HcPageLayout>
</template>

<script setup>
import {ref} from "vue";

//树节点被点击
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: 'action', name: '操作', width: '190', align: 'center'},
]
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 rowModal = ref(false)
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    key1: [{required: true, message: '请输入名称', trigger: 'blur'}],
}

//表格表单数据
const tableColumn1 = [
    {key: 'key1', name: '规格名称'},
    {key: 'key2', name: '单位名称'},
    {key: 'key3', name: '政府补偿标准'},
    {key: 'key4', name: '两方协议补偿标准'},
    {key: 'action', name: '操作', width: '100', align: 'center'},
]
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 addRowClick = () => {
    formModel.value = {}
    rowModal.value = true
}

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

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

}

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

//查看
const rowViewModal = ref(false)
const viewRowClick = (row) => {
    rowViewModal.value = true
}
const rowViewModalClose = () => {
    rowViewModal.value = false
}
</script>

<style lang="scss" scoped>
.hc-layout-tree-box {
    position: relative;
    height: 100%;
    padding: 18px;
}
</style>
