<!-- 安全附件分项页面 -->
<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="9">
            <el-form-item label="数量" prop="aqfshuliang">
              <el-input v-model="param.aqfshuliang" :disabled="edit || editAqf" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="是否在校验有效期内" label-width="170px" prop="aqfyouxiaoqi">
              <el-select v-model="param.aqfyouxiaoqi" filterable allow-create default-first-option placeholder="请选择" :disabled="edit || editAqf">
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
                <el-option label="无此项" value="无此项" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item prop="aqfexist">
              <el-checkbox v-model="param.aqfexist" label="设备本体无安全阀" true-label="设备本体无安全阀" border @change="changeAqf" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="检验日期" label-width="135px" prop="aqfjianyanriqi">
              <el-input v-model="param.aqfjianyanriqi" :disabled="edit || editAqf" />
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
      <fieldset>
        <legend>爆破片装置</legend>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="数量" prop="bppshuliang">
              <el-input v-model="param.bppshuliang" :disabled="edit || editBpp" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="是否按期更换" prop="bppgenghuanzhouqiyaoqiu">
              <el-select v-model="param.bppgenghuanzhouqiyaoqiu" filterable allow-create default-first-option placeholder="请选择" :disabled="edit || editBpp">
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
                <el-option label="无此项" value="无此项" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item prop="bppexist">
              <el-checkbox v-model="param.bppexist" label="设备本体无爆破片装置" true-label="设备本体无爆破片装置" border @change="changeBpp" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="检验日期" label-width="135px" prop="bppjianyanriqi">
              <el-input v-model="param.bppjianyanriqi" :disabled="edit || editBpp" />
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
      <fieldset>
        <legend>安全联锁装置</legend>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="是否满足设计文件规定的使用技术要求" label-width="270px" prop="shifoumanzu">
              <el-select v-model="param.shifoumanzu" filterable allow-create default-first-option placeholder="请选择" :disabled="edit || editAqls">
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
                <el-option label="无此项" value="无此项" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item prop="aqlsexist">
              <el-checkbox v-model="param.aqlsexist" label="设备本体无安全联锁装置" true-label="设备本体无安全联锁装置" border @change="changeAqls" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="检验日期" label-width="135px" prop="aqlsjianyanriqi">
              <el-input v-model="param.aqlsjianyanriqi" :disabled="edit || editAqls" />
            </el-form-item>
          </el-col>
        </el-row>
      </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="jiancejieguo">
          <el-input v-model="param.jiancejieguo" :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'
export default {
  name: 'RqZbgAqfj2100',
  components: { Sticky, btn },
  data() {
    return {
      ysjl: {},
      param: {
        ywjwucha: '±',
        ylbjiandingriqi: '年 月 日',
        bppgenghuariqi: '年 月 日',
        qitajianyan: '未见异常',
        kuaikaimenjianyanjieguo: true
      },
      state: '',
      edit: false,
      editAqf: false,
      editBpp: false,
      editAqls: false,
      ysjlId: this.$route.query.id,
      info: {
        ysjlId: this.$route.query.id,
        ysjl: this.ysjl,
        param: this.param,
        jyxm: this.$route.query.jyxm,
        state: this.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.changeAqf(this.param.aqfexist)
          this.changeBpp(this.param.bppexist)
          this.changeAqls(this.param.aqlsexist)
        } else {
          this.param = {
            aqfjianyanriqi: this.ysjl.jianyanjieshuriqi,
            bppjianyanriqi: this.ysjl.jianyanjieshuriqi,
            aqlsjianyanriqi: this.ysjl.jianyanjieshuriqi
          }
        }
        if (this.ysjl.flowstatus === 4) {
          this.state = 'finish'
          this.edit = true
        }
        if (this.param.kuaikaimenjianyanjieguo === '☑满足设计文件规定的使用要求') {
          this.param.kuaikaimenjianyanjieguo = true
        } else {
          this.param.kuaikaimenjianyanjieguo = false
        }
        this.$refs.btn.getParentInfo(this.ysjl, this.param, null, null, this.state, this.$route.query.jyxm, true, false)
      })
    },
    // 表格单击选中行
    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)
      }
    },
    changeAqf(val) {
      if (val) {
        this.editAqf = true
        this.param.aqfshuliang = '无此项'
        this.param.aqfyouxiaoqi = '无此项'
        this.param.aqfjianyanriqi = '无此项'
      } else {
        this.editAqf = false
        if (this.param.aqfshuliang === '无此项') {
          this.param.aqfshuliang = ''
        }
        if (this.param.aqfyouxiaoqi === '无此项') {
          this.param.aqfyouxiaoqi = ''
        }
        if (this.param.aqfjianyanriqi === '无此项') {
          this.param.aqfjianyanriqi = this.ysjl.jianyanjieshuriqi
        }
      }
    },
    changeBpp(val) {
      if (val) {
        this.editBpp = true
        this.param.bppshuliang = '无此项'
        this.param.bppgenghuanzhouqiyaoqiu = '无此项'
        this.param.bppjianyanriqi = '无此项'
      } else {
        this.editBpp = false
        if (this.param.bppshuliang === '无此项') {
          this.param.bppshuliang = ''
        }
        if (this.param.bppgenghuanzhouqiyaoqiu === '无此项') {
          this.param.bppgenghuanzhouqiyaoqiu = ''
        }
        if (this.param.bppjianyanriqi === '无此项') {
          this.param.bppjianyanriqi = this.ysjl.jianyanjieshuriqi
        }
      }
    },
    changeAqls(val) {
      if (val) {
        this.editAqls = true
        this.param.shifoumanzu = '无此项'
        this.param.aqlsjianyanriqi = '无此项'
      } else {
        this.editAqls = false
        if (this.param.shifoumanzu === '无此项') {
          this.param.shifoumanzu = ''
        }
        if (this.param.aqlsjianyanriqi === '无此项') {
          this.param.aqlsjianyanriqi = this.ysjl.jianyanjieshuriqi
        }
      }
    },
    beforeSaveBuildData() {
      // TODO
    }
  }
}
</script>
