<!--工业管道定期检验明细表-->
<template>
  <div>
    <el-form style="height: 100px;" label-position="right" label-width="130px">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="备注" prop="mxbBeizhu">
            <el-input v-model="param.beizhu" type="textarea" :autosize="{ minRows: 2, maxRows: 2}" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="success" icon="el-icon-download" size="mini" style="margin-right: 10px;" @click="common.downloadTemplate('压力管道监督检验一览表.xlsx')">
      下载导入模板
    </el-button>
    <el-upload
      :show-file-list="false"
      :before-upload="uploadTableData"
      style="float: left; margin-right: 10px;"
      action=""
    >
      <el-button type="primary" size="mini" icon="el-icon-upload" :disabled="edit">
        导入数据
      </el-button>
    </el-upload>
    <el-button type="success" size="mini" icon="el-icon-circle-plus-outline" :disabled="edit" @click="tableJs.addRow($refs.tableData, { C1: true })">
      添加
    </el-button>
    <el-button type="danger" size="mini" icon="el-icon-remove-outline" :disabled="edit" @click="tableJs.delRow($refs.tableData)">
      删除
    </el-button>
    <el-table id="myTable" ref="tableData" v-adaptive="{bottomOffset: 50}" height="0" :data="tableData" :row-class-name="tableRowClassName" border stripe style="width:100%;margin-top: 5px;" @row-click="onRowClick">
      <el-table-column type="selection" width="40" />
      <el-table-column type="index" prop="C1" width="50" label="序号" align="center" />
      <el-table-column align="center" prop="C2" width="115px" label="管道名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C2" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C3" width="115px" label="管道编号">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C3" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C4" width="130px" label="起止点">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C4" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C5" width="130px" label="管道级别">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C5" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C6" width="130px" label="公称直径mm">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C6" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C7" width="130px" label="公称壁厚mm">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C7" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C8" width="130px" label="管道长度m">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C8" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C9" width="130px" label="管内介质">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C9" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C10" width="130px" label="设计压力MPa">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C10" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C11" width="130px" label="设计温度℃">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C11" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C12" width="130px" label="管道材质">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C12" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C13" width="130px" label="焊口数量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C13" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C14" width="130px" label="安全等级">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C14" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C15" width="130px" label="下次检验时间">
        <template slot-scope="scope">
          <el-input v-model="scope.row.C15" :disabled="edit" size="mini" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'GdZbgMxb',
  data() {
    return {
      ysjl: {},
      param: {},
      tableData: [],
      edit: false
    }
  },
  methods: {
    // 表格单击选中行
    onRowClick(row) {
      this.$refs.tableData.toggleRowSelection(row)
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    uploadTableData(file) {
      this.common.uploadTableData(file, this.tableData)
      return false
    },
    /**
     * 获取明细表数据
     * @param ysjlId 主原始记录Id
     */
    getMxbInfo(ysjlId) {
      this.api({
        url: '/fx/getFxByParentId',
        method: 'get',
        params: {
          parentId: ysjlId,
          jyxm: 'mxb'
        }
      }).then(data => {
        this.ysjl = data.ysjl
        this.ysjl.flowstatus = 4
        if (data.param) {
          this.param = data.param
          // 有无损原始报告参数
          this.tableData = this.param.fubiao ? JSON.parse(this.param.fubiao) : []
        } else {
          this.param.ysjlId = this.ysjl.id
        }
      })
    },
    /**
     * 创建明细表
     * @param ysjlId 主原始记录Id
     */
    createMxb(ysjlId, templateId) {
      this.api({
        url: '/ysjl/addJyfa',
        method: 'get',
        params: {
          bglx: '3',
          ysjlId: ysjlId,
          type: '工业管道明细表报告',
          jianyanxiangmu: 'mxb',
          userId: this.$store.getters.userId,
          templateId: templateId,
          defaultStatus: true
        }
      }).then(() => {
        this.getMxbInfo(ysjlId)
      })
    },
    /**
     * 保存明细表
     */
    saveMxb() {
      this.param.fubiao = this.tableData
      this.api({
         url: '/fx',
        method: 'put',
        data: {
          ysjl: this.ysjl,
          jyxm: 'mxb',
          fxObj: this.param
        }
      })
    }
  }
}
</script>
<style>
  #myTable .el-input__inner{
    padding: 0px 5px;
    text-align: center;
  }
</style>
