<!-- 井身结构 -->
<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="完井开始日期" prop="wjrqks">
        <el-date-picker v-model="queryParams.wjrqks" type="date" placeholder="选择完井开始年份" clearable
          value-format="yyyy-MM-dd" />
        -
        <el-date-picker v-model="queryParams.wjrqjs" type="date" placeholder="选择完井结束年份" clearable
          value-format="yyyy-MM-dd" />
      </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:jsdb: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:jsdb: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:jsdb: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:jsdb: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:jsdb:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->

    <el-table border v-loading="loading" :data="jsdbList" @selection-change="handleSelectionChange"
      height="calc(100vh - 210px)" class="table-container">
      <!-- <el-table-column type="selection" width="55" align="center" />  -->
      <el-table-column label="井号" align="center" prop="jh" min-width="125" show-overflow-tooltip fixed />
      <el-table-column label="套管层次" align="center" prop="tgcc" min-width="125" show-overflow-tooltip />
      <el-table-column label="钻头直径mm" align="center" prop="ztzj" min-width="125" show-overflow-tooltip />
      <el-table-column label="井深" align="center" prop="js" min-width="125" show-overflow-tooltip />
      <el-table-column label="套管外径" align="center" prop="tgwj" min-width="125" show-overflow-tooltip />
      <el-table-column label="套管顶部深度" align="center" prop="tgdbsd" min-width="135" show-overflow-tooltip />
      <el-table-column label="套管鞋深度" align="center" prop="tgxsd" min-width="125" show-overflow-tooltip />
      <el-table-column label="人工井底深度" align="center" prop="rgjdsd" min-width="145" show-overflow-tooltip />
      <el-table-column label="阻流环深度1" align="center" prop="zlhsd" min-width="145" show-overflow-tooltip />
      <el-table-column label="水泥外返深度" align="center" prop="snwfsd" min-width="145" show-overflow-tooltip />
      <!-- <el-table-column label="扶正器" align="center" prop="tgfzq" width="185" show-overflow-tooltip /> -->
      <!-- <el-table-column label="套管附件1" align="center" prop="tgfj1" />
      <el-table-column label="套管附件2" align="center" prop="tgfj2" />
      <el-table-column label="套管附件3" align="center" prop="tgfj3" />
      <el-table-column label="套管附件4" align="center" prop="tgfj4" />
      <el-table-column label="套管附件深度1" align="center" prop="tgfj1sd" />
      <el-table-column label="套管附件深度2" align="center" prop="tgfj2sd" />
      <el-table-column label="套管附件深度3" align="center" prop="tgfj3sd" />
      <el-table-column label="套管附件深度4" align="center" prop="tgfj4sd" />
      <el-table-column label="套补距" align="center" prop="tbj" />
      <el-table-column label="阻流环深度2" align="center" prop="zlhsd1" />
      <el-table-column label="阻流环深度3" align="center" prop="zlhsd2" />
      <el-table-column label="套管附件5" align="center" prop="tgfj5" />
      <el-table-column label="套管附件6" align="center" prop="tgfj6" />
      <el-table-column label="套管附件7" align="center" prop="tgfj7" />
      <el-table-column label="套管附件8" align="center" prop="tgfj8" />
      <el-table-column label="套管附件深度5" align="center" prop="tgfj5sd" />
      <el-table-column label="套管附件深度6" align="center" prop="tgfj6sd" />
      <el-table-column label="套管附件深度7" align="center" prop="tgfj7sd" />
      <el-table-column label="套管附件深度8" align="center" prop="tgfj8sd" /> -->
      <el-table-column label="操作" align="center" width="170" class-name="small-padding fixed-width" fixed="right">
        <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="[10, 20, 30, 50, 100]" @pagination="getList" />

    <!-- 查看井身结构数据对话框 -->
    <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="钻头直径mm" prop="ztzj">
              <el-input v-model="form.ztzj" :readonly="isReadonly" placeholder="请输入钻头直径mm" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="井深" prop="js">
              <el-input v-model="form.js" :readonly="isReadonly" placeholder="请输入井深" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管外径" prop="tgwj">
              <el-input v-model="form.tgwj" :readonly="isReadonly" placeholder="请输入套管外径" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管顶部深度" prop="tgdbsd">
              <el-input v-model="form.tgdbsd" :readonly="isReadonly" placeholder="请输入套管顶部深度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="套管鞋深度" prop="tgxsd">
              <el-input v-model="form.tgxsd" :readonly="isReadonly" placeholder="请输入套管鞋深度" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="人工井底深度" prop="rgjdsd">
              <el-input v-model="form.rgjdsd" :readonly="isReadonly" placeholder="请输入人工井底深度" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="阻流环深度1" prop="zlhsd">
              <el-input v-model="form.zlhsd" :readonly="isReadonly" placeholder="请输入阻流环深度1" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="水泥外返深度" prop="snwfsd">
              <el-input v-model="form.snwfsd" :readonly="isReadonly" placeholder="请输入水泥外返深度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="扶正器" prop="tgfzq">
              <el-input v-model="form.tgfzq" :readonly="isReadonly" placeholder="请输入扶正器" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件1" prop="tgfj1">
              <el-input v-model="form.tgfj1" :readonly="isReadonly" placeholder="请输入套管附件1" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件2" prop="tgfj2">
              <el-input v-model="form.tgfj2" :readonly="isReadonly" placeholder="请输入套管附件2" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件3" prop="tgfj3">
              <el-input v-model="form.tgfj3" :readonly="isReadonly" placeholder="请输入套管附件3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="套管附件4" prop="tgfj4">
              <el-input v-model="form.tgfj4" :readonly="isReadonly" placeholder="请输入套管附件4" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件深度1" prop="tgfj1sd">
              <el-input v-model="form.tgfj1sd" :readonly="isReadonly" placeholder="请输入套管附件深度1" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件深度2" prop="tgfj2sd">
              <el-input v-model="form.tgfj2sd" :readonly="isReadonly" placeholder="请输入套管附件深度2" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件深度3" prop="tgfj3sd">
              <el-input v-model="form.tgfj3sd" :readonly="isReadonly" placeholder="请输入套管附件深度3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="套管附件深度4" prop="tgfj4sd">
              <el-input v-model="form.tgfj4sd" :readonly="isReadonly" placeholder="请输入套管附件深度4" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套补距" prop="tbj">
              <el-input v-model="form.tbj" :readonly="isReadonly" placeholder="请输入套补距" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="阻流环深度2" prop="zlhsd1">
              <el-input v-model="form.zlhsd1" :readonly="isReadonly" placeholder="请输入阻流环深度2" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="阻流环深度3" prop="zlhsd2">
              <el-input v-model="form.zlhsd2" :readonly="isReadonly" placeholder="请输入阻流环深度3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="套管附件5" prop="tgfj5">
              <el-input v-model="form.tgfj5" :readonly="isReadonly" placeholder="请输入套管附件5" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件6" prop="tgfj6">
              <el-input v-model="form.tgfj6" :readonly="isReadonly" placeholder="请输入套管附件6" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件7" prop="tgfj7">
              <el-input v-model="form.tgfj7" :readonly="isReadonly" placeholder="请输入套管附件7" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件8" prop="tgfj8">
              <el-input v-model="form.tgfj8" :readonly="isReadonly" placeholder="请输入套管附件8" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="套管附件深度5" prop="tgfj5sd">
              <el-input v-model="form.tgfj5sd" :readonly="isReadonly" placeholder="请输入套管附件深度5" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件深度6" prop="tgfj6sd">
              <el-input v-model="form.tgfj6sd" :readonly="isReadonly" placeholder="请输入套管附件深度6" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件深度7" prop="tgfj7sd">
              <el-input v-model="form.tgfj7sd" :readonly="isReadonly" placeholder="请输入套管附件深度7" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套管附件深度8" prop="tgfj8sd">
              <el-input v-model="form.tgfj8sd" :readonly="isReadonly" placeholder="请输入套管附件深度8" />
            </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 { listJsdb, getJsdb, delJsdb, addJsdb, updateJsdb } from "@/api/system/jsdb";
import { getBlockName, getQkxl } from "@/api/system/jsaa";

export default {
  name: "Jsdb",
  data() {
    return {
      // 区块下拉选项
      blockOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 井身结构数据表格数据
      jsdbList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否只读
      isReadonly: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        qk: null,
        jh: null,
        wjrqks: null,
        wjrqjs: null,
        ztzj: null,
        js: null,
        tgwj: null,
        tgdbsd: null,
        tgxsd: null,
        rgjdsd: null,
        zlhsd: null,
        snwfsd: null,
        tgfzq: null,
        tgfj1: null,
        tgfj2: null,
        tgfj3: null,
        tgfj4: null,
        tgfj1sd: null,
        tgfj2sd: null,
        tgfj3sd: null,
        tgfj4sd: null,
        tbj: null,
        zlhsd1: null,
        zlhsd2: null,
        tgfj5: null,
        tgfj6: null,
        tgfj7: null,
        tgfj8: null,
        tgfj5sd: null,
        tgfj6sd: null,
        tgfj7sd: null,
        tgfj8sd: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getBlockOptions();
  },
  methods: {
    /** 获取区块下拉选项 */
    getBlockOptions() {
      getQkxl().then(response => {
        // 过滤掉无效的选项
        this.blockOptions = response.data.filter(item => item && item.qk);
      });
    },
    /** 查询井身结构数据列表 */
    getList() {
      this.loading = true;
      listJsdb(this.queryParams).then(response => {
        this.jsdbList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        jh: null,
        tgcc: null,
        ztzj: null,
        js: null,
        tgwj: null,
        tgdbsd: null,
        tgxsd: null,
        rgjdsd: null,
        zlhsd: null,
        snwfsd: null,
        tgfzq: null,
        tgfj1: null,
        tgfj2: null,
        tgfj3: null,
        tgfj4: null,
        tgfj1sd: null,
        tgfj2sd: null,
        tgfj3sd: null,
        tgfj4sd: null,
        tbj: null,
        zlhsd1: null,
        zlhsd2: null,
        tgfj5: null,
        tgfj6: null,
        tgfj7: null,
        tgfj8: null,
        tgfj5sd: null,
        tgfj6sd: null,
        tgfj7sd: null,
        tgfj8sd: 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
      getJsdb(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) {
            updateJsdb(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addJsdb(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 delJsdb(jhs);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/jsdb/export', {
        ...this.queryParams
      }, `jsdb_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 100px);
  padding: 10px;
}

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



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