<!--渗透检测-->
<template>
  <div class="app-container">
    <sticky v-if="state !== 'finish'" style="margin-bottom: 10px;">
      <div class="sub-navbar">
        <el-button v-if="state === 'create'" type="success" icon="el-icon-edit" size="medium" @click="saveYsjl('create')">
          保存
        </el-button>
        <el-button v-if="state === 'update'" type="success" icon="el-icon-edit" size="medium" @click="saveYsjl('update')">
          更新
        </el-button>
        <el-button v-if="state === 'update'" type="success" icon="el-icon-upload2" size="medium" @click="saveYsjl('build')">
          生成报告
        </el-button>
      </div>
    </sticky>
    <el-form ref="ysjl" :model="ysjl" class="el-form" label-position="right" label-width="130px">
      <fieldset>
        <legend>基本信息</legend>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="记录编号" prop="jilubianhao">
              <el-input v-model="ysjl.jilubianhao" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="管道名称" prop="shebeimingcheng">
              <el-input v-model="ysjl.shebeimingcheng" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="管道规格(外径mm×壁厚mm)" label-width="200px" prop="guandaoguige">
              <el-input v-model="param.guandaoguige" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="管道编号" prop="guandaobianhao">
              <el-input v-model="param.guandaobianhao" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="管道材质" prop="guandaocaizhi">
              <el-input v-model="param.guandaocaizhi" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="管道级别" prop="guandaojibie">
              <el-input v-model="param.guandaojibie" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="表面状况" prop="biaomianzhuangkuang">
              <el-input v-model="param.biaomianzhuangkuang" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="检测方法" prop="jiancefangfa">
              <el-input v-model="param.jiancefangfa" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="检测部位" prop="jiancebuwei">
              <el-input v-model="param.jiancebuwei" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="环境温度" prop="huanjingwendu">
              <el-input v-model="param.huanjingwendu" :disabled="edit">
                <template slot="append">
                  ℃
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="检测比例" prop="jiancebili">
              <el-input v-model="param.jiancebili" :disabled="edit">
                <template slot="prepend">
                  %
                </template><template slot="append">
                  mm
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="观察方式" prop="guanchafangshi">
              <el-input v-model="param.guanchafangshi" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="对比试块" prop="duibishikuai">
              <el-input v-model="param.duibishikuai" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="清洗剂型号" prop="qingxijixinghao">
              <el-input v-model="param.qingxijixinghao" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="渗透剂型号" prop="shentoujixinghao">
              <el-input v-model="param.shentoujixinghao" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="显像剂型号" prop="xianxiangjixinghao">
              <el-input v-model="param.xianxiangjixinghao" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="执行标准" prop="jiancebiaozhun">
              <el-input v-model="param.jiancebiaozhun" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
      <fieldset>
        <legend>检测结果评定表</legend>
        <el-button v-if="state !== 'bgView'" type="success" size="mini" icon="el-icon-circle-plus-outline" @click="addRow()">
          添加
        </el-button>
        <el-button v-if="state !== 'bgView'" type="danger" size="mini" icon="el-icon-remove-outline" @click="delRow()">
          删除
        </el-button>
        <el-table id="myTable" ref="tableData" :data="tableData" :row-class-name="tableRowClassName" border stripe style="width:100%;margin-top: 5px;" @row-click="onRowClick" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" />
          <el-table-column align="center" prop="C1" width="80px" label="序号">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C1" :disabled="edit" size="mini" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="C2" width="200px" 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="200px" label="缺陷长度(mm)">
            <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="80px" 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="200px" 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="200px" label="缺陷长度(mm)">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C6" :disabled="edit" size="mini" />
            </template>
          </el-table-column>
        </el-table>
      </fieldset>
      <fieldset>
        <legend>检验信息</legend>
        <el-row :gutter="20" style="height: 90px;">
          <el-col :span="18">
            <el-form-item label="说明" prop="beizhu">
              <el-input v-model="param.beizhu" :disabled="edit" type="textarea" rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="检验人员" prop="jianyanrenyuan">
              <el-input v-model="jianyanrenyuan" disabled />
              <el-input v-show="false" v-model="ysjl.jianyanrenyuan" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <sign-name :ysjl="ysjl" :jianyanrenyuan="jianyanrenyuan" @setSignValue="singNameValue" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="检验日期" prop="jianyankaishiriqi">
              <el-date-picker v-model="ysjl.jianyankaishiriqi" disabled type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
              至
              <el-date-picker v-model="ysjl.jianyanjieshuriqi" disabled type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
    </el-form>
  </div>
</template>
<script>
import Sticky from '@/components/Sticky'
import SignName from '@/views/common/SignName'
import Utils from '../../../../../utils/contact.js'
export default {
  name: 'GdZbgStjc',
  components: { SignName, Sticky },
  data() {
    return {
      checkedTab: 'first',
      ysjl: {},
      param: {},
      tableData: [],
      delRowIndex: [],
      state: '',
      edit: false,
      fileList: [],
      departmentId: this.$route.query.departmentId,
      jianyanrenyuan: '',
      ysjlId: this.$route.query.id,
      info: {
        ysjlId: this.$route.query.id,
        jyxm: this.$route.query.jyxm
      }
    }
  },
  watch: {
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 签名方法
    singNameValue(data) {
      this.jianyanrenyuan = data.name
      this.ysjl.jianyanrenyuan = data.id
      if (this.state !== 'create') {
        this.common.signName(this.ysjl.id, this.ysjl.jianyanrenyuan)
        Utils.$emit('ysjl-list')
      }
    },
    getInfo() {
      this.api({
        url: '/wusun/getWsByYsjlId',
        method: 'get',
        params: {
          ysjlId: this.$route.query.id,
          jyxm: this.$route.query.jyxm
        }
      }).then(data => {
        this.ysjl = data.ysjl
        this.state = 'create'
        if (this.ysjl.jianyanrenyuan !== null && this.ysjl.jianyanrenyuan.length > 0) {
          this.jianyanrenyuan = this.common.convertCnName(this.ysjl.jianyanrenyuan)
        }
        if (data.param !== null && data.param !== undefined) {
          // 有无损原始记录参数
          this.state = 'update'
          this.param = data.param
          this.tableData = this.param.fubiao ? JSON.parse(this.param.fubiao) : []
        }
        if (this.ysjl.flowstatus !== null) {
          this.state = 'finish'
          this.edit = true
        }
      })
    },
    addRow: function() {
      const d = {}
      this.tableData.push(d)
      setTimeout(() => {
        this.$refs.tableData.setCurrentRow(d)
      }, 10) // 用于延时渲染后选中这行
    },
    delRow: function() {
      if (this.delRowIndex.length === 0) {
        this.$message({
          type: 'error',
          message: '请选中需要删除的数据！'
        })
        return false
      } else {
        for (let i = 0; i < this.delRowIndex.length; i++) {
          this.tableData.splice(this.delRowIndex[i], 1)
        }
        this.$refs.tableData.clearSelection()
        this.delRowIndex = []
      }
    },
    // 表格单击选中行
    onRowClick(row) {
      this.$refs.tableData.toggleRowSelection(row)
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    handleSelectionChange(val) {
      this.delRowIndex = []
      for (let i = 0; i < val.length; i++) {
        this.delRowIndex.push(val[i].index)
      }
    },
    saveYsjl(state) {
      let url = ''
      if (state === 'build' && (this.ysjl.jianyanrenyuan === null || this.ysjl.jianyanrenyuan === '')) {
        this.$message({ message: '请先签名再生成报告！', type: 'error' })
        return false
      }
      url = '/wusun/saveWs'
      this.$refs['ysjl'].validate(valid => {
        const ysjl = { id: this.$route.query.id }
        this.param.ysjlId = this.$route.query.id
        this.param.fubiao = this.tableData
        if (valid) {
          this.api({
            url: url,
            method: 'post',
            data: {
              ysjl: ysjl,
              jyxm: this.$route.query.jyxm,
              wsObj: this.param,
              state: state
            }
          }).then(data => {
            Utils.$emit('ysjl-list')
            Utils.$emit('modifyMajorInspectionItemBySub')
            this.state = 'update'
            if (state === 'create') {
              this.$message({ message: '保存成功', type: 'success' })
            } else if (state === 'update') {
              this.$message({ message: '更新成功', type: 'success' })
            } else {
              Utils.$emit('bggl-daiban-list')
              this.$message({ message: '生成报告成功', type: 'success' })
              this.$store.dispatch('delCurrentViews', {
                view: this.$route,
                $router: this.$router
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style>
  #myTable .el-input__inner{
    padding: 0px 5px;
    text-align: center;
  }
</style>
