<template>
  <div class="app-container">
    <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="18">
            <el-form-item label="报检单位" prop="baojiandanwei">
              <el-input v-model="param.baojiandanwei" :disabled="edit" />
            </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="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="产品编号" prop="chanpinbianhao">
              <el-input v-model="ysjl.chanpinbianhao" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="结论" prop="jianyanjielun">
              <el-input v-model="ysjl.jianyanjielun" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
      <el-table ref="tableData" :data="tableData" border style="margin-top: 10px;width:90%">
        <el-table-column align="center" prop="C1" label="检查项目" />
        <el-table-column align="center" prop="C2" label="检验内容">
          <template slot-scope="scope">
            <el-input v-model="scope.row.C2" :disabled="edit" placeholder="请输入内容" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="C3" label="检查结果">
          <template slot-scope="scope">
            <el-input v-model="scope.row.C3" :disabled="edit" placeholder="请输入内容" />
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
import Sticky from '@/components/Sticky'
import btn from '@/views/common/FxButton'
export default {
  name: 'RqZbgTbl',
  components: { Sticky, btn },
  data() {
    return {
      ysjl: {},
      param: {},
      tableData: [],
      edit: false,
      state: ''
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.api({
        url: '/fx/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.tableData = JSON.parse(data.param.fubiao) ? JSON.parse(data.param.fubiao) : JSON.parse('[]')
        } else {
          // TODO
        }
        if (this.ysjl.flowstatus === 4) {
          this.state = 'finish'
          this.edit = true
        }
        this.$refs.btn.getParentInfo(this.ysjl, this.param, null, this.tableData, this.state, this.$route.query.jyxm, true, false)
        if (this.state === 'create') {
          this.getJyxm(1)
        }
      })
    },
    // 查询检验项目
    getJyxm(sort) {
      this.api({
        url: '/jyxm/getCyJyxm',
        method: 'get',
        params: {
          templateId: this.ysjl.modelId,
          order: sort
        }
      }).then(data => {
        this.tableData = []
        data.forEach(row => {
          this.tableData.push({
            C1: row.jianyanxiang,
            C2: row.jianyanneirong,
            C3: row.jianyanjieguo
          })
        })
        this.$refs.btn.getParentInfo(this.ysjl, this.param, null, this.tableData, this.state, this.$route.query.jyxm, true, false)
      })
    },
    beforeSaveBuildData() {
      // TODO
    }
  }
}
</script>
