<template>
  <div class="app-container">
    <el-col :span="10">
      <div style="margin: 20px 20px 20px 120px;width: 600px;height: 810px">
        <div style="font-size: 24px; margin:20px 0 0 180px">检验信息维护</div>
        <el-form ref="form" :model="form" label-position="left" label-width="100px">
          <el-form-item label="厂址：" style="margin-top: 30px">
            <el-input v-model="form.siteFactory" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="网址：">
            <el-input v-model="form.siteWeb" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="电话：">
            <el-input v-model="form.contactNumber" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="传真：">
            <el-input v-model="form.fax" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="装配人员：">
            <el-input v-model="form.assemblPeople" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="检验人员：">
            <el-input v-model="form.testPeople" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="审核人员：">
            <el-input v-model="form.examinePeople" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="品管部门：">
            <el-input v-model="form.controlPart" style="width: 350px"/>
          </el-form-item>
          <el-button type="primary" style="margin-top: 20px;margin-left:0px;width: 100px" @click="modifyCompanyInformation()">修改</el-button>
        </el-form>
      </div>
    </el-col>
    <el-col style="width: 751px;margin-left: 10px;margin-top: 75px">
      <div>
        <el-table :data="tableData" :header-cell-style="{background: '#2283D4',color: 'white'}" highlight-current-row border stripe size="small" height="440" style="width: 751px">
          <el-table-column width="120px" label="编号" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.编号" style="width:95%;margin-right:3px" clearable size="mini" />
              </template>
              <span v-else>{{ scope.row.编号 }}</span>
            </template>
          </el-table-column>
          <el-table-column width="340px" label="检测项目" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.检测项目" style="width:97%;margin-right:3px" clearable size="mini" />
              </template>
              <span v-else>{{ scope.row.检测项目 }}</span>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="允许值" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.允许值" style="width:95%;margin-right:3px" clearable size="mini" />
              </template>
              <span v-else>{{ scope.row.允许值 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
              <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
              <el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"/>
              <el-button v-if="!scope.row.edit" type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <el-button icon="el-icon-circle-plus-outline" size="mini" @click="createProductInformation"/>
      </div>
    </el-col>
    <el-dialog v-el-drag-dialog :title="title" :visible.sync="dialogFormVisible" center width="350px">
      <el-form ref="form" :model="form1" label-position="left" label-width="100px" class="demo-ruleForm" style="margin: auto">
        <el-form-item label="编号:" prop="编号">
          <el-input v-model="form1.编号" clearable size="small" style="width:200px" placeholder="请输入编号"/>
        </el-form-item>
        <el-form-item label="检测项目:" prop="检测项目">
          <el-input v-model="form1.检测项目" clearable size="small" style="width:200px" placeholder="请输入检测项目"/>
        </el-form-item>
        <el-form-item label="允许值:" prop="允许值">
          <el-input v-model="form1.允许值" clearable size="small" style="width:200px" placeholder="请输入允许值"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff()">取消</el-button>
        <el-button type="distribution" size="small" @click="addProductInformation('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      form: {
        siteFactory: '',
        siteWeb: '',
        contactNumber: '',
        fax: '',
        assemblPeople: '',
        testPeople: '',
        examinePeople: '',
        controlPart: ''
      },
      form1: {
        编号: '',
        检测项目: '',
        允许值: ''
      },
      tableData: [],
      title: '新增',
      dialogFormVisible: false
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.searchCompanyInformation()
    this.searchTable()
  },
  methods: {
    searchCompanyInformation() {
      var param = []
      var Data = this.CreateData('11', '基础表_检验信息维护表_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.form.siteFactory = response.data[0].厂址
        this.form.siteWeb = response.data[0].网址
        this.form.contactNumber = response.data[0].电话
        this.form.fax = response.data[0].传真
        this.form.assemblPeople = response.data[0].装配人员
        this.form.testPeople = response.data[0].检验人员
        this.form.examinePeople = response.data[0].审核人员
        this.form.controlPart = response.data[0].品管部门
      })
    },
    modifyCompanyInformation() {
      this.$confirm('是否确认修改检验信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['厂址', this.form.siteFactory]
        param[1] = ['网址', this.form.siteWeb]
        param[2] = ['电话', this.form.contactNumber]
        param[3] = ['传真', this.form.fax]
        param[4] = ['装配人员', this.form.assemblPeople]
        param[5] = ['检验人员', this.form.testPeople]
        param[6] = ['审核人员', this.form.examinePeople]
        param[7] = ['品管部门', this.form.controlPart]
        var Data = this.CreateData('12', '基础表_检验信息维护表_修改', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('修改成功')
            this.searchCompanyInformation()
          } else {
            this.$message.error('修改失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    searchTable() {
      this.tableData = []
      var param = []
      var Data = this.CreateData('11', '检测项目_基础表_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.tableData.push({
              检测项目流水号: response.data[i].检测项目流水号,
              编号: response.data[i].编号,
              检测项目: response.data[i].检测项目,
              允许值: response.data[i].允许值,
              检测项目流水号_before: response.data[i].检测项目流水号,
              编号_before: response.data[i].编号,
              检测项目_before: response.data[i].检测项目,
              允许值_before: response.data[i].允许值,
              edit: false
            })
          }
        }
      })
    },
    createProductInformation() {
      this.form1 = {}
      if (this.$refs['form1'] !== undefined) {
        this.$refs['form1'].resetFields()
      }
      this.dialogFormVisible = true
    },
    addProductInformation(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['编号', this.form1.编号]
          param[1] = ['检测项目', this.form1.检测项目]
          param[2] = ['允许值', this.form1.允许值]
          var Data = this.CreateData('11', '检测项目_基础表_增加数据', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].结果 === 1) {
              this.$message({
                message: '信息增加成功',
                type: 'success'
              })
              this.searchTable()
            } else {
              this.$message.error('信息增加失败')
            }
          })
          this.dialogFormVisible = false
        } else {
          return false
        }
      })
    },
    callOff() {
      this.dialogFormVisible = false
      this.$message.error('已取消')
    },
    confirmEdit(row) {
      var param = []
      param[0] = ['检测项目流水号', row.检测项目流水号]
      param[1] = ['编号', row.编号]
      param[2] = ['检测项目', row.检测项目]
      param[3] = ['允许值', row.允许值]
      var Data = this.CreateData('12', '检测项目_基础表_修改数据', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息编辑成功',
            type: 'success'
          })
          this.searchTable()
          row.edit = false
        } else {
          this.$message.error('信息编辑失败')
        }
      })
    },
    cancelEdit(index, row) {
      row.edit = false
      row.编号 = this.tableData[index].编号_before
      row.检测项目 = this.tableData[index].检测项目_before
      row.允许值 = this.tableData[index].允许值_before
      this.$message('取消修改')
    },
    handleDelete(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['检测项目流水号', row.检测项目流水号]
        var Data = this.CreateData('12', '检测项目_基础表_删除数据', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchTable()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
   /deep/ .el-input__inner{
    border-radius: 0px;
    text-align: center;
  }
  /deep/.el-button--primary {
    color: #409EFF;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
</style>
