<!-- 邻井查询页面 -->
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="100px">
            <el-form-item label="井号" prop="jh" :rules="[{ required: true, message: '请输入井号', trigger: 'blur' }]">
                <el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="完井时间">
                <el-date-picker v-model="queryParams.wjrqks" type="date" value-format="yyyy-MM-dd" placeholder="开始日期"
                    style="width: 150px;">
                </el-date-picker>
                -
                <el-date-picker v-model="queryParams.wjrqjs" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"
                    style="width: 150px;">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="井口距离" prop="jkjl">
                <el-input v-model="queryParams.jkjl" placeholder="井口距离" style="width: 150px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                    :disabled="!queryParams.jh">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:jsaa:export']" :disabled="!queryParams.jh">导出</el-button> -->
            </el-form-item>
        </el-form>

        <el-table border :data="wellTableData" @selection-change="handleSelectionChange" height="calc(100vh - 200px)"
            class="table-container" v-loading="loading">
            <!-- <el-table-column type="selection" width="55" :selectable="checkSelectable" /> -->
            <el-table-column prop="jh" label="井号" align="center" show-overflow-tooltip />
            <el-table-column prop="jx" label="井型" align="center" show-overflow-tooltip />
            <el-table-column prop="wjjs" label="斜深" align="center" show-overflow-tooltip />
            <el-table-column prop="wjczjs" label="垂深" align="center" show-overflow-tooltip />
            <el-table-column prop="wzcw" label="完钻层位" align="center" show-overflow-tooltip />
            <!-- <el-table-column prop="kc" label="总开次" align="center" show-overflow-tooltip />
            <el-table-column prop="zjzq" label="钻井周期(天)" align="center" show-overflow-tooltip />
            <el-table-column prop="wjzq" label="钻完周期(天)" align="center" show-overflow-tooltip /> -->
            <el-table-column prop="jkjl" label="井口距离" align="center" show-overflow-tooltip />
            <!-- <el-table-column prop="jdjl" label="井底距离" align="center" show-overflow-tooltip /> -->
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" :page-sizes="[10, 20, 30, 50, 100]" @pagination="getList"
            layout="total, sizes, prev, pager, next, jumper" />
    </div>
</template>

<script>
import { listxzSj } from "@/api/system/jsaa";

export default {
    name: "AdjacentWell",
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 邻井表格数据
            wellTableData: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                jh: null,
                wjrqks: null,
                wjrqjs: null,
                jkjl: 10000
            }
        };
    },
    created() {
        this.initQueryParams();
    },
    methods: {

        /** 初始化查询参数 */
        initQueryParams() {
            const today = new Date();
            const fiveYearsAgo = new Date();
            fiveYearsAgo.setFullYear(today.getFullYear() - 5);

            this.queryParams = {
                pageNum: 1,
                pageSize: 20,
                jh: null,
                wjrqks: this.formatDate(fiveYearsAgo),
                wjrqjs: this.formatDate(today),
                jkjl: 10000
            };
        },

        /** 格式化日期 */
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },

        /** 查询邻井列表 */
        getList() {
            this.loading = true;
            listxzSj(this.queryParams).then(response => {
                this.wellTableData = response.rows || [];
                this.total = response.total || 0;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.$refs.queryForm.validate((valid) => {
                if (valid) {
                    this.queryParams.pageNum = 1;
                    this.getList();
                } else {
                    this.$message.warning('请输入井号');
                    return false;
                }
            });
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.initQueryParams();
            this.resetForm("queryForm");
            // 重置后清空表格数据
            this.wellTableData = [];
            this.total = 0;
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.jh)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },

        /** 检查是否可选择 */
        checkSelectable(row) {
            return true; // 可以根据需要添加选择限制逻辑
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download('system/jsaa/export', {
                ...this.queryParams
            }, `邻井查询${new Date().getTime()}.xlsx`)
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

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

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

::v-deep.pagination-container {
    padding: 5px !important;
    margin: 0;
}

::v-deep .el-form-item {
    margin-bottom: 10px !important;
}
</style>
