<template>
  <div class="app-container">
    <sticky style="margin-bottom: 10px;">
      <btn ref="btn" />
    </sticky>
    <el-form ref="ysjl" :model="ysjl" />
    <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 v-if="state !== 'bgView'" type="success" size="mini" icon="el-icon-circle-plus-outline" :disabled="edit" @click="tableJs.addRow($refs.tableData)">
      添加
    </el-button>
    <el-button v-if="state !== 'bgView'" type="danger" size="mini" icon="el-icon-remove-outline" :disabled="edit" @click="tableJs.delRow($refs.tableData)">
      删除
    </el-button>
    <el-table ref="tableData" :data="tableData" border stripe style="margin-top: 10px" @row-click="onRowClick">
      <el-table-column type="selection" width="40" />
      <el-table-column align="center" prop="C1" label="序号" type="index" :index="indexMethod" width="60" />
      <el-table-column align="center" prop="C2" label="元件名称">
        <template slot-scope="{ row }">
          <el-input v-model="row.C2" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C3" label="规格型号">
        <template slot-scope="{ row }">
          <el-input v-model="row.C3" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C4" label="数量(米/件)">
        <template slot-scope="{ row }">
          <el-input v-model="row.C4" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C5" label="材质">
        <template slot-scope="{ row }">
          <el-input v-model="row.C5" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C6" label="制造单位资质">
        <template slot-scope="{ row }">
          <el-input v-model="row.C6" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C7" label="质量证明书">
        <template slot-scope="{ row }">
          <el-input v-model="row.C7" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C8" label="复验报告">
        <template slot-scope="{ row }">
          <el-input v-model="row.C8" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="C9" label="审查结果">
        <template slot-scope="{ row }">
          <el-input v-model="row.C9" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import btn from '@/views/common/FxButton'

export default {
  name: 'GdJjCzsc',
  components: { Sticky, btn },
  data() {
    return {
      ysjl: {},
      param: {},
      tableData: [],
      state: '',
      edit: false
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.api({
        url: '/fx',
        method: 'get',
        params: {
          ysjlId: this.$route.query.id,
          jyxm: this.$route.query.jyxm
        }
      }).then(data => {
        this.ysjl = data.ysjl
        if (data.param) {
          // 有无损原始记录参数
          this.state = 'update'
          this.param = data.param
          this.tableData = JSON.parse(data.param.fubiao) === null ? JSON.parse('[]') : JSON.parse(data.param.fubiao)
        } else {
          this.state = 'create'
          // 默认值
        }
        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, false, true)
      })
    },
    uploadTableData(file) {
      this.common.uploadTableData(file, this.tableData)
    },
    indexMethod(index) {
      this.tableData[index].index = index
      this.tableData[index].C1 = index + 1
      return this.tableData[index].C1
    },
    // 表格单击选中行
    onRowClick(row) {
      this.$refs.tableData.toggleRowSelection(row)
    },
    beforeSaveBuildData() {
      // 保存前构建数据
    }
  }
}
</script>

<style scoped>

</style>
