<!-- 轨迹测斜数据 -->
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="100px" class="search-form">
            <el-form-item label="区块名称" prop="qk">
                <el-select v-model="queryParams.qk" placeholder="请选择区块名称" clearable filterable>
                    <el-option v-for="item in blockOptions" :key="item.qk" :label="item.qk" :value="item.qk" />
                </el-select>
            </el-form-item>
            <el-form-item label="井号" prop="jh">
                <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="完井开始年份">
                </el-date-picker>
                -
                <el-date-picker v-model="queryParams.wjrqjs" type="date" value-format="yyyy-MM-dd" placeholder="完井结束年份">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</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:jskd:export']">导出</el-button>
            </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:jskd:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:jskd:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['system:jskd:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:jskd:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row> -->

        <el-table border v-loading="loading" :data="jskdList" @selection-change="handleSelectionChange"
            height="calc(100vh - 200px)" class="table-container">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="序号" align="center" prop="xh" min-width="60" show-overflow-tooltip />
            <el-table-column label="井号" align="center" prop="jh" min-width="100" show-overflow-tooltip />
            <el-table-column label="斜井深" align="center" prop="xjs" min-width="110" show-overflow-tooltip />
            <el-table-column label="段长" align="center" prop="dc" min-width="110" show-overflow-tooltip />
            <el-table-column label="井斜" align="center" prop="jx" min-width="110" show-overflow-tooltip />
            <el-table-column label="平均井斜" align="center" prop="pjjx" min-width="110" show-overflow-tooltip />
            <el-table-column label="方位" align="center" prop="fw" min-width="110" show-overflow-tooltip />
            <el-table-column label="平均方位" align="center" prop="pjfw" min-width="110" show-overflow-tooltip />
            <el-table-column label="全角变化率" align="center" prop="qjbhl" min-width="110" show-overflow-tooltip />
            <el-table-column label="垂直段长" align="center" prop="czdc" min-width="110" show-overflow-tooltip />
            <el-table-column label="累计垂直井深" align="center" prop="ljczjs" min-width="110" show-overflow-tooltip />
            <el-table-column label="分段水平位移" align="center" prop="fdspwy" min-width="110" show-overflow-tooltip />
            <!-- <el-table-column label="井底横坐标1" align="center" prop="jdhzb1" />
            <el-table-column label="井底横坐标2" align="center" prop="jdhzb2" />
            <el-table-column label="井底纵坐标1" align="center" prop="jdzzb1" />
            <el-table-column label="井底纵坐标2" align="center" prop="jdzzb2" />
            <el-table-column label="闭合方位" align="center" prop="bhfw" />
            <el-table-column label="闭合位移" align="center" prop="bhwy" />
            <el-table-column label="位移投影度" align="center" prop="wytyjd" />
            <el-table-column label="位移投影米" align="center" prop="wytyc" />
            <el-table-column label="测斜方式" align="center" prop="cxfs" />
            <el-table-column label="备注" align="center" prop="bz" /> -->
            <el-table-column label="操作" align="center" min-width="100" show-overflow-tooltip
                class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" :page-sizes="[20, 50, 80, 100]" @pagination="getList"
            class="pagination-fixed" />

        <!-- 添加或修改定向井测斜数据计算数据对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="井号" prop="jh">
                            <el-input v-model="form.jh" :readonly="isReadonly" placeholder="请输入井号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="序号" prop="xh">
                            <el-input v-model="form.xh" :readonly="isReadonly" placeholder="请输入序号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="斜井深" prop="xjs">
                            <el-input v-model="form.xjs" :readonly="isReadonly" placeholder="请输入斜井深" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="段长" prop="dc">
                            <el-input v-model="form.dc" :readonly="isReadonly" placeholder="请输入段长" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="井斜" prop="jx">
                            <el-input v-model="form.jx" :readonly="isReadonly" placeholder="请输入井斜" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="平均井斜" prop="pjjx">
                            <el-input v-model="form.pjjx" :readonly="isReadonly" placeholder="请输入平均井斜" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="方位" prop="fw">
                            <el-input v-model="form.fw" :readonly="isReadonly" placeholder="请输入方位" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="平均方位" prop="pjfw">
                            <el-input v-model="form.pjfw" :readonly="isReadonly" placeholder="请输入平均方位" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="全角变化率" prop="qjbhl">
                            <el-input v-model="form.qjbhl" :readonly="isReadonly" placeholder="请输入全角变化率" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="垂直段长" prop="czdc">
                            <el-input v-model="form.czdc" :readonly="isReadonly" placeholder="请输入垂直段长" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="累计垂直井深" prop="ljczjs">
                            <el-input v-model="form.ljczjs" :readonly="isReadonly" placeholder="请输入累计垂直井深" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="分段水平位移" prop="fdspwy">
                            <el-input v-model="form.fdspwy" :readonly="isReadonly" placeholder="请输入分段水平位移" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="井底横坐标1" prop="jdhzb1">
                            <el-input v-model="form.jdhzb1" :readonly="isReadonly" placeholder="请输入井底横坐标1" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="井底横坐标2" prop="jdhzb2">
                            <el-input v-model="form.jdhzb2" :readonly="isReadonly" placeholder="请输入井底横坐标2" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="井底纵坐标1" prop="jdzzb1">
                            <el-input v-model="form.jdzzb1" :readonly="isReadonly" placeholder="请输入井底纵坐标1" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="井底纵坐标2" prop="jdzzb2">
                            <el-input v-model="form.jdzzb2" :readonly="isReadonly" placeholder="请输入井底纵坐标2" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="闭合方位" prop="bhfw">
                            <el-input v-model="form.bhfw" :readonly="isReadonly" placeholder="请输入闭合方位" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="闭合位移" prop="bhwy">
                            <el-input v-model="form.bhwy" :readonly="isReadonly" placeholder="请输入闭合位移" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="位移投影度" prop="wytyjd">
                            <el-input v-model="form.wytyjd" :readonly="isReadonly" placeholder="请输入位移在设计方位线上投影度" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="位移投影米" prop="wytyc">
                            <el-input v-model="form.wytyc" :readonly="isReadonly" placeholder="请输入位移在设计方位线上投影米" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="测斜方式" prop="cxfs">
                            <el-input v-model="form.cxfs" :readonly="isReadonly" placeholder="请输入测斜方式" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备注" prop="bz">
                            <el-input v-model="form.bz" :readonly="isReadonly" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listJskd, getJskd, delJskd, addJskd, updateJskd } from "@/api/system/jskd";
import { getBlockName, getQkxl } from "@/api/system/jsaa";

export default {
    name: "Jskd",
    data() {
        return {
            // 区块下拉选项
            blockOptions: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 定向井测斜数据计算数据表格数据
            jskdList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 是否只读
            isReadonly: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                qk: null,
                jh: null,
                wjrqks: null,
                wjrqjs: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                // jh: [
                //     { required: true, message: "井号不能为空", trigger: "blur" }
                // ],
                // xh: [
                //     { required: true, message: "序号不能为空", trigger: "blur" }
                // ],
            }
        };
    },
    created() {
        this.getList();
        this.getBlockOptions();
    },
    methods: {
        /** 获取区块下拉选项 */
        getBlockOptions() {
            getQkxl().then(response => {
                // 过滤掉无效的选项
                this.blockOptions = response.data.filter(item => item && item.qk);
            });
        },
        /** 查询定向井测斜数据计算数据列表 */
        getList() {
            this.loading = true;
            listJskd(this.queryParams).then(response => {
                this.jskdList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                jh: null,
                xh: null,
                xjs: null,
                dc: null,
                jx: null,
                pjjx: null,
                fw: null,
                pjfw: null,
                qjbhl: null,
                czdc: null,
                ljczjs: null,
                fdspwy: null,
                jdhzb1: null,
                jdhzb2: null,
                jdzzb1: null,
                jdzzb2: null,
                bhfw: null,
                bhwy: null,
                wytyjd: null,
                wytyc: null,
                cxfs: null,
                bz: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.wjrqks = '';
            this.queryParams.wjrqjs = '';
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.jh)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加定向井测斜数据计算数据";
            this.isReadonly = false;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const jh = row.jh || this.ids
            getJskd(jh).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改定向井测斜数据计算数据";
                this.isReadonly = false;
            });
        },
        /** 查看按钮操作 */
        handleView(row) {
            this.reset();
            this.form = { ...row };
            this.open = true;
            this.title = "查看定向井测斜数据";
            this.isReadonly = true;
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.jh != null) {
                        updateJskd(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addJskd(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const jhs = row.jh || this.ids;
            this.$modal.confirm('是否确认删除定向井测斜数据计算数据编号为"' + jhs + '"的数据项？').then(function () {
                return delJskd(jhs);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/jskd/export', {
                ...this.queryParams
            }, `jskd_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
    height: calc(100vh - 800px);
    padding: 10px;
}

// .search-form {
//     margin-bottom: 10px;
// }

// .table-container {
//     margin-bottom: 10px;
// }

// .pagination-fixed {
//     padding: 5px !important;
//     background: #fff;
//     position: fixed;
//     bottom: 0;
//     right: 0;
//     left: 210px;
//     z-index: 999;
// }

::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>