<template>
  <div class="app-container" style="margin-top: -15px;">
    <sticky style="margin-bottom: 10px;">
      <btn ref="btn" />
    </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="shejiyali">
              <el-input v-model="param.shejiyali" :disabled="edit">
                <template slot="append">
                  MPa
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="允许/监控使用压力" prop="shiyongyali">
              <el-input v-model="param.shiyongyali" :disabled="edit">
                <template slot="append">
                  MPa
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="试验压力" prop="shiyanyali">
              <el-input v-model="param.shiyanyali" :disabled="edit">
                <template slot="append">
                  MPa
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="管道材质" prop="zhuticaizhi">
              <el-input v-model="param.zhuticaizhi" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="试验介质" prop="shiyanjiezhi">
              <el-input v-model="param.shiyanjiezhi" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="介质温度" prop="jiezhiwendu">
              <el-input v-model="param.jiezhiwendu" :disabled="edit">
                <template slot="append">
                  ℃
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="试压部位" prop="shiyabuwei">
              <el-input v-model="param.shiyabuwei" :disabled="edit" />
            </el-form-item>
          </el-col>
          <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-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="压力表量程" prop="yalibiaoliangcheng">
              <el-input v-model="param.yalibiaoliangcheng" :disabled="edit">
                <template slot="append">
                  MPa
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="精度" prop="yalibiaojingdu">
              <el-input v-model="param.yalibiaojingdu" :disabled="edit">
                <template slot="append">
                  级
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="压力源" prop="yaliyuan">
              <el-input v-model="param.yaliyuan" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="执行标准" prop="zhixingbiaozhun">
              <el-input v-model="param.zhixingbiaozhun" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
      <fieldset>
        <legend>实际试验曲线</legend>
        <span v-if="state === 'create'" style="color: red;font-size: 26px;">请在原始记录保存后上传检测部位图</span>
        <pictureUpload ref="picture" :info="info" @changed="changed" />
      </fieldset>
      <fieldset>
        <legend>检验信息</legend>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="检验日期" label-width="135px" prop="jianyanjieshuriqi">
              <el-date-picker v-model="ysjl.jianyanjieshuriqi" :disabled="edit" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="耐压试验结论" prop="shiyanjielun">
          <el-input v-model="param.shiyanjielun" :disabled="edit" type="textarea" rows="4" style="width: 800px;" />
        </el-form-item>
        <el-form-item label="" prop="jianyanrenyuan" style="display: none;">
          <el-input v-model="ysjl.jianyanrenyuan" type="text" />
        </el-form-item>
      </fieldset>
    </el-form>
  </div>
</template>
<script>
import Sticky from '@/components/Sticky'
import btn from '@/views/common/FxButton'
import pictureUpload from '@/components/Upload'
export default {
  name: 'GdZbgNysy',
  components: { Sticky, btn, pictureUpload },
  data() {
    return {
      ysjl: {},
      param: {},
      dialogVisible: false,
      edit: false,
      fileList: [],
      state: '',
      info: {
        ysjlId: this.$route.query.id,
        jyxm: this.$route.query.jyxm
      }
    }
  },
  watch: {
    state: function(val) {
      this.$refs.picture.stateChange(val)
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.api({
        url: '/fenxiang/getFxByYsjlId',
        method: 'get',
        params: {
          ysjlId: this.$route.query.id,
          jyxm: this.$route.query.jyxm
        }
      }).then(data => {
        this.ysjl = data.ysjl
        this.state = 'create'
        if (data.param !== null && data.param !== undefined) {
          // 有无损原始记录参数
          this.state = 'update'
          this.param = data.param
          this.fileList = JSON.parse(data.param.imagePath) === null ? JSON.parse('[]') : JSON.parse(data.param.imagePath)
          if (this.fileList.length > 0) {
            for (let i = 0; i < this.fileList.length; i++) {
              this.fileList[i].url = process.env.VUE_APP_IMG_URL + '8000/nysy/' + this.fileList[i].name
            }
          }
        } else {
          this.ysjl.jianyanjieshuriqi = this.ysjl.jianyankaishiriqi
        }
        if (this.ysjl.flowstatus === 4) {
          this.state = 'finish'
          this.edit = true
        }
        this.$refs.btn.getParentInfo(this.ysjl, this.param, null, null, this.state, this.$route.query.jyxm)
        this.$refs.picture.getChange(this.ysjl.shebeizhongleidaima, this.state, this.fileList, 1)
      })
    },
    changed(item) {
      this.param.imagePath = item
    }
  }
}
</script>

