<template>
  <div>
    <el-card style="width: 450px">
      <div style="padding: 10px;background-color:#F5F5F5; width: 400px">
        <el-button style="margin-left: 85%;font-size: 30px" type="text" icon="el-icon-circle-plus-outline" @click="addItem('form')"/>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="tableHeader"
        :cell-style="tableCell"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        tooltip-effect="dark"
        style="width: 400px">
        <el-table-column align="center" label="故障名称" min-width="300px" show-overflow-tooltip>
          <template slot-scope="scope">
            <template>
              <span >{{ scope.row.故障名称 }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="编辑" min-width="100px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" size="mini" @click="editItem(scope.row)"/>
            <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="addDialogFormVisible" :title="addTitle" width="300px">
        <el-form ref="form" :model="form" label-position="top" label-width="120px" style="width: 100%;">
          <el-form-item label="故障名称" prop="faultName" style="margin-left: 20px">
            <el-input v-model="form.faultName" style="height:50px;width: 90%" class="input12" placeholder="" @input="addAble"/>
          </el-form-item>
          <el-form-item style="margin-left: 65px;margin-top: 40px;">
            <el-button class="button12" @click="addCallOff('form')">取消</el-button>
            <el-button :disabled="addDisable" class="button11" @click="addSubmit('form')">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="editDialogFormVisible" :title="editTitle" width="300px">
        <el-form ref="form1" :model="form1" label-position="top" label-width="120px" style="width: 100%;">
          <el-form-item label="故障名称" prop="faultName" style="margin-left: 20px">
            <el-input v-model="form1.faultName" style="height:50px;width: 90%" class="input12" placeholder="" @input="submitAble"/>
          </el-form-item>
          <el-form-item style="margin-left: 65px;margin-top: 40px;">
            <el-button class="button12" @click="editCallOff('form1')">取消</el-button>
            <el-button :disabled="submitDisable" class="button11" @click="editSubmit('form1')">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="DeleteDialogFormVisible" width="300px">
        <div style="margin-top:-90px;margin-left: 75px;margin-bottom: 40px;">
          <img :src="img" style="height: 75px;width: 100px;">
        </div>
        <span style="font-size: 30px;font-weight: 400;margin-left: 20px;">确实要删除吗？</span>
        <el-button class="button11" style="margin-top: 80px;margin-left:100px;" @click="deletesubmit()">是</el-button>
        <el-button class="button12" @click="deletecalloff">否</el-button>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import img from '@/assets/404_images/20.png'
import { ExecDatabase } from '@/main'
export default {
  data() {
    return {
      img,
      tableData: [],
      loading: false,
      addDialogFormVisible: false,
      addTitle: '',
      addDisable: true,
      form: {
        faultName: ''
      },
      editTitle: '',
      editDialogFormVisible: false,
      form1: {
        faultName: '',
        faultNum: ''
      },
      submitDisable: false,
      DeleteDialogFormVisible: false,
      faultNum: ''
    }
  },
  created() {
    this.searchTable()
  },
  methods: {
    // 查询
    searchTable() {
      this.loading = true
      this.tableData = []
      var Data = this.CreateData('11', '基础数据_设备故障_查询')
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.tableData.push({
            故障名称: v.故障名称,
            故障代码: v.故障代码
          })
        })
      })
      this.loading = false
    },
    // 修改table的样式
    tableHeader() {
      return 'background-color: rgb(250, 250, 250);' +
        'border-bottom: 3px rgb(170, 170, 170) solid;' +
        'color: rgb(35, 35, 35);' +
        'font-weight: 5000;' +
        'padding: 15px 10px'
    },
    tableCell() {
      return 'border-color: #E8E8E8;padding: 0px'
    },
    // 增加
    addItem() {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.addDialogFormVisible = true
      this.addTitle = '设备故障管理'
      this.form.faultName = ''
      this.addDisable = true
    },
    // 增加输入
    addAble() {
      if (this.form.faultName) {
        this.addDisable = false
      } else {
        this.addDisable = true
      }
    },
    // 增加确定
    addSubmit() {
      var param = []
      param[0] = ['故障名称', this.form.faultName]
      var Data = this.CreateData('12', '基础数据_设备故障_增加', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息增加成功',
            type: 'success'
          })
          this.searchTable()
        } else {
          this.$message.error('信息增加失败')
        }
      })
      this.addDialogFormVisible = false
    },
    // 增加取消
    addCallOff(formName) {
      this.addDialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 编辑
    editItem(row) {
      if (this.$refs['form1'] !== undefined) {
        this.$refs['form1'].resetFields()
      }
      this.editDialogFormVisible = true
      this.editTitle = '设备故障管理'
      this.form1.faultName = row.故障名称
      this.form1.faultNum = row.故障代码
      this.submitAble()
    },
    // 编辑输入
    submitAble() {
      if (this.form1.faultName) {
        this.submitDisable = false
      } else {
        this.submitDisable = true
      }
    },
    // 修改确定
    editSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['故障代码', this.form1.faultNum]
          param[1] = ['故障名称', this.form1.faultName]
          var Data = this.CreateData('12', '基础数据_设备故障_修改', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息修改成功',
                type: 'success'
              })
              this.searchTable()
            } else {
              this.$message.error('信息修改失败')
            }
          })
          this.editDialogFormVisible = false
        }
      })
    },
    // 修改取消
    editCallOff(formName) {
      this.editDialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 删除
    handleDelete(row) {
      this.DeleteDialogFormVisible = true
      this.faultNum = row.故障代码
    },
    // 删除确定
    deletesubmit() {
      var param = []
      param[0] = ['故障代码', this.faultNum]
      var Data = this.CreateData('12', '基础数据_设备故障_删除', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.searchTable()
        } else {
          this.$message.error('删除失败')
        }
      })
      this.DeleteDialogFormVisible = false
    },
    // 删除取消
    deletecalloff() {
      this.DeleteDialogFormVisible = false
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    }
  }
}
</script>
<style scoped>
  >>>.el-dialog__header {
    padding-left: 50px;
  }
</style>
