<template>
    <div class="formation-table-data">
        <!-- 查询条件区域 -->
        <div class="query-section">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="深度区间" prop="jh">
                    <el-input v-model="queryParams.ksjs" placeholder="开始深度" style="width: 150px; margin-right: 10px;" />
                    <span>-</span>
                    <el-input v-model="queryParams.jsjs" placeholder="结束深度" style="width: 150px; margin-left: 10px;" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="getList">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="success" size="mini" @click="handleCalculate">计算</el-button>
                    <!-- <el-button type="warning" plain icon="el-icon-download" size="mini"
                        @click="handleDownload">导出</el-button> -->
                </el-form-item>
            </el-form>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
            <el-table :data="tableData" border stripe style="width: 100%" height="calc(100vh - 340px)">
                <!-- <el-table-column prop="sequence" label="序号" width="80" align="center" /> -->
                <el-table-column prop="dept" label="井深(m)" min-width="90" align="center" />
                <el-table-column prop="kjqd" label="抗剪强度(Mpa)" min-width="100" align="center" />
                <el-table-column prop="dzky" label="抗压强度(Mpa)" min-width="100" align="center" />
                <el-table-column prop="nmcj" label="内摩擦角(°)" min-width="100" align="center" />
                <el-table-column prop="vsh" label="泥质含量(%)" min-width="100" align="center" />
                <el-table-column prop="yskzxjz" label="可钻性(PDC)" min-width="100" align="center" />
            </el-table>
        </div>

        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            style="margin-top: 10px; text-align: right;" />
    </div>
</template>

<script>
import { listSjCjlasYsqdfx, getSjCjlasYsqdfx, delSjCjlasYsqdfx, addSjCjlasYsqdfx, updateSjCjlasYsqdfx, listjs } from "@/api/system/sjCjlasYsqdfx";

export default {
    props: {
        jh: {
            type: String,
            required: true,
        },
    },
    name: 'FormationTableData',
    data() {
        return {
            tableData: [
                {

                }
            ],
            queryParams: {
                ksjs: '',  // 开始深度默认值1500
                jsjs: ''
            }, // 查询参数对象
            pagination: {
                pageNum: 1,
                pageSize: 20,
                total: 0
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询设计-测井数据-岩石强度分析列表 */
        getList() {
            this.loading = true;
            // 添加传入的jh参数到查询参数中
            const params = {
                ...this.queryParams,
                jh: this.jh, // 使用传入的井号参数
                pageNum: this.pagination.pageNum,
                pageSize: this.pagination.pageSize
            };
            console.log(params, 'params');
            listSjCjlasYsqdfx(params).then(response => {
                this.tableData = response.rows;
                this.pagination.total = response.total;
                this.loading = false;
                // 搜索后通知父组件更新曲线图数据
                this.$emit('search', {
                    jh: this.jh,
                    ksjs: this.queryParams.ksjs,
                    jsjs: this.queryParams.jsjs
                });
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                ksjs: '',  // 重置时恢复默认值1500
                jsjs: ''
            }
            this.getList();
        },
        handleQuery() {
            // 查询逻辑
            console.log('查询条件:', this.queryForm)
            // 这里可以调用API获取数据
        },
        handleCalculate() {
            const params = {
                jh: this.jh,

            }
            listjs(params).then(response => {
                console.log(response, 'response')
            })

        },
        handleDownload() {
            this.download('system/sjCjlasYsqdfx/export', {
                ...this.queryParams
            }, `地层岩石数据强度分析_${new Date().getTime()}.xlsx`)
        },
        handleSizeChange(size) {
            this.pagination.pageSize = size;
            this.pagination.pageNum = 1;
            this.getList();
        },
        handleCurrentChange(page) {
            this.pagination.pageNum = page;
            this.getList();
        }

    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
    flex: 1;
}

::v-deep .el-table__body-wrapper {
    overflow-y: auto;
}

::v-deep .el-table__cell>.cell {
    font-weight: normal;
}

::v-deep .el-table--medium .el-table__cell {
    padding: 5px 0 !important;
}

.formation-table-data {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .query-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 4px;
        flex-shrink: 0;

        .query-item {
            display: flex;
            align-items: center;

            label {
                margin-right: 10px;
                font-weight: bold;
                color: #333;
            }
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }
    }

    .table-section {
        flex: 1;
        overflow: hidden;

        .el-table {
            height: 100%;

            .el-table__header {
                background-color: #f5f7fa;
            }
        }
    }
}
</style>
