<template>
  <div class="app-container">
    <el-card style="height: 850px">
      <div style="margin-top: 7px; margin-bottom: 7px">
        <el-input v-model="equipmentName" placeholder="设备名称" size="small" clearable style="width:200px;margin-left: 0px"/>
        <el-select v-model="equipmentType" placeholder="设备类型" filterable size="small" style="width:200px" clearable >
          <el-option
            v-for="item in basedatalx"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <!-- <el-input v-model="opName" placeholder="工位" size="small" clearable style="width:200px;margin-left: 0px"/> -->
        <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 20px" plain @click="pageSize = 20;pageCurrent = 1;searchTable()">查询</el-button>
        <el-tooltip effect="dark" content="添加新设备" placement="top">
          <el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" style="margin-left: 10px" @click="ADD()">设备</el-button>
        </el-tooltip>
      </div>
      <div>
        <el-table :data="tableData" border size="small" stripe highlight-current-row height="740px" style="width: 1048px">
          <el-table-column label="设备名称" prop="设备名称" align="center" width="150px" >
            <template slot-scope="scope">
              {{ scope.row.设备名称 }}
            </template>
          </el-table-column>
          <el-table-column label="设备型号" prop="设备型号" align="center" width="150px" >
            <template slot-scope="scope">
              {{ scope.row.设备型号 }}
            </template>
          </el-table-column>
          <el-table-column label="设备类型" prop="设备类型名称" align="center" width="150px" >
            <template slot-scope="scope">
              {{ scope.row.设备类型名称 }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="加工工艺" align="center" width="150px">
            <template slot-scope="scope">
              {{ scope.row.加工工艺 }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="工位" align="center" width="80px">
            <template slot-scope="scope">
              {{ scope.row.工位号 }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="工时单价(元/小时)" align="center" width="140px">
            <template slot-scope="scope">
              {{ scope.row.工时单价 }}
            </template>
          </el-table-column>
          <el-table-column label="月设备加工能力" align="center" width="140px">
            <template slot-scope="scope">
              {{ scope.row.月设备加工能力 }}
            </template>
          </el-table-column>
          <el-table-column label="点检类型名称" align="center" width="137px">
            <template slot-scope="scope">
              {{ scope.row.点检表类型名称 }}
            </template>
          </el-table-column> -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" icon="el-icon-edit" style="margin-right:10px" @click="handleEdit(scope.row)"/>
              <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"
        />
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center style="min-height: 300px" width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="设备名称" >
              <el-input v-model="form.设备名称" placeholder="设备名称" size="small" style="width:200px" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="设备型号" >
              <el-input v-model="form.设备型号" placeholder="设备型号" size="small" style="width:200px" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="设备类型" >
              <el-select v-model="form.设备类型" placeholder="设备类型" filterable size="small" style="width:200px" clearable >
                <el-option
                  v-for="item in basedatalx"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span = "12">
            <el-form-item label="加工工艺" prop="加工工艺" >
              <el-select v-model="form.加工工艺" placeholder="加工工艺" filterable size="small" style="width:200px" clearable >
                <el-option
                  v-for="item in process"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span = "12">
            <el-form-item label="工位号" prop="工位号" >
              <el-input v-model="form.工位号" placeholder="工位号" size="small" style="width:200px" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span = "12">
            <el-form-item label="工时单价" prop="工时单价" >
              <el-input v-positive="'float'" v-model="form.工时单价" class="工时单价" size="small" style="width:200px" placeholder="工时单价" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :span = "12">
            <el-form-item label="月设备加工能力" prop="月设备加工能力" >
              <el-input v-positive="'float'" v-model="form.月设备加工能力" class="工时单价" size="small" style="width:200px" placeholder="月设备加工能力" type="number"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span = "12">
            <el-form-item label="点检类型" prop="点检类型" >
              <el-select v-model="form.点检类型" placeholder="选择点检类型" filterable size="small" style="width:200px" clearable >
                <el-option
                  v-for="item in routineCheckType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff('form')">取消</el-button>
        <el-button v-show="title==='新增设备'" type="primary" @click="submitAdd('form')">确定</el-button>
        <el-button v-show="title==='编辑设备'" type="primary" @click="submitEdit('form')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      routineCheckType: [],
      dialogFormVisible: false,
      title: '',
      equipmentValue: '',
      equipmentName: '',
      equipmentType: '',
      opName: '',
      process: [],
      form: {
        设备名称: '',
        设备型号: '',
        设备类型: ''
        // 加工工艺: '',
        // 工位号: '',
        // 点检类型: '',
        // 工时单价: '',
        // 月设备加工能力: ''
      },
      basedatalx: [],
      rules: {
        设备名称: [{ required: true, message: '请输入设备名称' }],
        // 设备型号: [{ required: true, message: '请输入设备型号' }],
        // 加工工艺: [{ required: true, message: '请选择加工工艺' }],
        设备类型: [{ required: true, message: '请选择' }]
      },
      original: '',
      total: 0, // 分页总数
      tableData: [], // 设备信息表
      pageCurrent: 1, // 分页当前页
      pageSize: 20 // 分页每页显示条数
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.searchTable()
    this.getbasedata()
    // this.getRoutineCheckType()
  },
  methods: {
    // getRoutineCheckType() {
    //   var param = []
    //   var Data = this.CreateData('11', '点检类型_查询', param)
    //   this.ExecDatabase(Data).then(response => {
    //     for (let i = 0; i < response.data.length; i++) {
    //       this.routineCheckType.push({
    //         label: response.data[i].点检表类型名称,
    //         value: response.data[i].点检表类型流水号
    //       })
    //     }
    //   })
    // },
    // getProcess() {
    //   var param = []
    //   var Data = this.CreateData('11', '工艺名称_查询', param)
    //   this.ExecDatabase(Data).then(response => {
    //     for (let i = 0; i < response.data.length; i++) {
    //       this.process.push({
    //         label: response.data[i].工艺名称,
    //         value: response.data[i].工艺编号
    //       })
    //     }
    //   })
    // },
    getbasedata() {
      var Data = this.CreateData('11', '查询字典')
      this.ExecDatabase(Data).then(response => {
        response.data.forEach(element => {
          if (element.数据类别 == '设备类型') {
            this.basedatalx.push({
              name: element.词条名称,
              id: element.AID
            })
          }
        })
      })
    },
    searchTable() {
      let equipmentName_check, equipmentType_check
      this.equipmentName ? equipmentName_check = 1 : equipmentName_check = 0
      this.equipmentType ? equipmentType_check = 1 : equipmentType_check = 0
      // this.opName ? opName_check = 1 : opName_check = 0
      var param = []
      param[0] = ['设备名称_check', equipmentName_check]
      param[1] = ['设备名称', this.equipmentName]
      param[2] = ['设备类型', this.equipmentType]
      param[3] = ['设备类型_check', equipmentType_check]
      var Data = this.CreateData('11', '设备管理_设备信息_查询', param, this.pageSize, this.pageCurrent)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data.rows

        this.total = response.data.total
      })
    },
    ADD() {
      this.title = '新增设备'
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.form.设备名称 = ''
      this.form.设备型号 = ''
      this.form.设备类型 = ''
      // this.form.加工工艺 = ''
      // this.form.工位号 = ''
      // this.form.月设备加工能力 = ''
      // this.form.点检类型 = 1
      // this.form.工时单价 = ''
      this.dialogFormVisible = true
    },
    handleEdit(row) {
      this.title = '编辑设备'
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.equipmentValue = row.设备流水号
      this.form.设备名称 = row.设备名称
      this.form.设备型号 = row.设备型号
      console.log(this.basedatalx)
      this.form.设备类型 = parseInt(row.设备类型)
      // this.form.加工工艺 = Number(row.工艺编号)
      // this.form.工位号 = row.工位号
      // this.original = row.工位号
      // this.form.点检类型 = Number(row.点检表类型)
      // this.form.月设备加工能力 = row.月设备加工能力
      // this.form.工时单价 = row.工时单价
      this.dialogFormVisible = true
    },
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    submitAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // var param = []
          // param[0] = ['工位', this.form.工位号]
          // var Data = this.CreateData('11', '设备管理_设备信息_验证工位号是否重复', param)
          // this.ExecDatabase(Data).then(response => {
          //   if (Number(response.data[0].Column1) === 0) {
          var param = []
          param[0] = ['设备名称', this.form.设备名称]
          param[1] = ['设备型号', this.form.设备型号]
          param[2] = ['设备类型', this.form.设备类型]
          // param[2] = ['加工工艺', this.form.加工工艺]
          // param[3] = ['工位', this.form.工位号]
          // param[4] = ['工时单价', this.form.工时单价]
          // param[5] = ['月设备加工能力', this.form.月设备加工能力]
          // param[6] = ['点检类型', this.form.点检类型]
          var Data = this.CreateData('12', '设备管理_设备信息_增加', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('添加成功')
              this.searchTable()
              this.dialogFormVisible = false
            } else {
              this.$message.error('添加失败')
            }
          })
          //   } else {
          //     // this.$message.warning('工位号重复')
          //   }
          // })
        }
      })
    },
    submitEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.工位号 === this.original) {
            var param = []
            param[0] = ['设备名称', this.form.设备名称]
            param[1] = ['设备型号', this.form.设备型号]
            param[2] = ['设备流水号', this.equipmentValue]
            param[3] = ['设备类型', this.form.设备类型]
            // param[2] = ['加工工艺', this.form.加工工艺]
            // param[3] = ['工位', this.form.工位号]
            // param[4] = ['工时单价', this.form.工时单价]
            // param[5] = ['月设备加工能力', this.form.月设备加工能力]
            // param[6] = ['设备流水号', this.equipmentValue]
            // param[7] = ['原工位', this.original]
            // param[8] = ['点检类型', this.form.点检类型]
            var Data = this.CreateData('12', '设备管理_设备信息_编辑', param)
            this.ExecDatabase(Data).then(response => {
              if (response.data[0].result === '1') {
                this.$message.success('编辑成功')
                this.searchTable()
                this.dialogFormVisible = false
              } else {
                this.$message.error('编辑失败')
              }
            })
          } else {
            // var param1 = []
            // param1[0] = ['工位', this.form.工位号]
            // var Data1 = this.CreateData('11', '设备管理_设备信息_验证工位号是否重复', param1)
            // this.ExecDatabase(Data1).then(response => {
            //   if (Number(response.data[0].Column1) === 0) {
            var param = []
            param[0] = ['设备名称', this.form.设备名称]
            param[1] = ['设备型号', this.form.设备型号]
            param[2] = ['设备流水号', this.equipmentValue]
            param[3] = ['设备类型', this.form.设备类型]
            // param[2] = ['加工工艺', this.form.加工工艺]
            // param[3] = ['工位', this.form.工位号]
            // param[4] = ['工时单价', this.form.工时单价]
            // param[5] = ['月设备加工能力', this.form.月设备加工能力]
            // param[6] = ['设备流水号', this.equipmentValue]
            // param[7] = ['原工位', this.original]
            var Data = this.CreateData('12', '设备管理_设备信息_编辑', param)
            this.ExecDatabase(Data).then(response => {
              if (response.data[0].result === '1') {
                this.$message.success('编辑成功')
                this.searchTable()
                this.dialogFormVisible = false
              } else {
                this.$message.error('编辑失败')
              }
            })
            // } else {
            //   // this.$message.warning('工位号重复')
            // }
            // })
          }
        }
      })
    },
    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.pageCurrent = 1
            this.searchTable()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

