<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <el-button type="distribution" size="small" icon="el-icon-edit" @click="editAll()">编辑全部内容</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :cell-class-name="tableRowClassName"
        height="770px"
        class="main"
        tooltip-effect="dark"
        style="width: 100%"
        border
        size="mini">
        <el-table-column type="index" width="60" label="序号" align="center"/>
        <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
        <el-table-column align="center" label="工位号">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工位名称">
          <template slot-scope="scope">
            {{ scope.row.工位名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="消息内容">
          <template slot-scope="scope">
            {{ scope.row.ScollNotice }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="最近更新时间">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="topOrder(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" title="MES消息维护" center style="min-height: 200px;" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="110px">
        <el-form-item label="工位号:" prop="stationNumber" style="display: inline-block">
          <div>{{ form.stationNumber }}</div>
        </el-form-item>
        <el-form-item label="工位名称:" prop="stationName" style="display: inline-block">
          <div>{{ form.stationName }}</div>
        </el-form-item>
        <el-form-item label="消息内容:" prop="scollNotice" style="display: inline-block">
          <el-input
            v-model="form.scollNotice"
            :rows="2"
            type="textarea"
            clearable
            size="small"
            placeholder="请输入消息内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff('form')">取消</el-button>
        <el-button type="primary" size="small" @click="submitUpdate('form')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible1" title="MES消息维护" center style="min-height: 200px;" width="400px">
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="right" label-width="110px">
        <el-form-item label="工位号:" prop="stationNumber" style="display: inline-block">
          <div>{{ form1.stationNumber }}</div>
        </el-form-item>
        <el-form-item label="工位名称:" prop="stationName" style="display: inline-block">
          <div>{{ form1.stationName }}</div>
        </el-form-item>
        <el-form-item label="消息内容:" prop="scollNotice" style="display: inline-block">
          <el-input
            v-model="form1.scollNotice"
            :rows="2"
            type="textarea"
            clearable
            size="small"
            placeholder="请输入消息内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff1('form')">取消</el-button>
        <el-button type="primary" size="small" @click="submitUpdate1('form1')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 总数据数组
      scollNotice: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      mid: '',
      form: {
        stationNumber: '',
        stationName: '',
        scollNotice: ''
      },
      rules: {
        scollNotice: [{ required: true, message: '请输入MES消息', trigger: 'blur' }]
      },
      form1: {
        stationNumber: '编辑所有工位内容',
        stationName: '本线所有工位',
        scollNotice: ''
      },
      rules1: {
        scollNotice: [{ required: true, message: '请输入MES消息', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.searchMesMessage()
  },
  methods: {
    // 表格颜色变化
    tableRowClassName({ row, rowIndex }) {
      // console.log(row, rowIndex)
      if (rowIndex % 2 === 0) {
        return 'black'
      } else {
        return 'red'
      }
    },
    // handleSelectionChange(val) {
    //   if (val.length > 0) {
    //     if (val.length > 1) {
    //       this.$refs.multipleTable.clearSelection()
    //       this.$refs.multipleTable.toggleRowSelection(val.pop())
    //     } else {
    //       this.mid = val.map((item) => item.ID)
    //       this.form.scollNotice = val.map((item) => item.ScollNotice)
    //       this.form.stationNumber = val.map((item) => item.工位号)
    //       this.form.stationName = val.map((item) => item.工位名称)
    //     }
    //   } else {
    //     this.mid = []
    //   }
    //   console.log(this.mid, 'this.mid')
    //   console.log(this.form.scollNotice, 'this.scollNotice')
    // },
    // @select 事件方法
    // selectable(selection, row) {
    //   return true
    // },
    // 查询MES消息
    searchMesMessage() {
      this.tableData = []
      var param = []
      var Data = this.CreateData('11', 'MES界面显示_消息滚动_初始化', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
      })
    },
    topOrder(row) {
      this.mid = row.ID
      this.form.scollNotice = row.ScollNotice
      this.form.stationNumber = row.工位号
      this.form.stationName = row.工位名称
      this.dialogFormVisible = true
    },
    callOff() {
      this.dialogFormVisible = false
      this.$refs['form'].resetFields()
    },
    // 编辑消息
    submitUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['ID', this.mid]
          param[1] = ['ScollNotice', this.form.scollNotice]
          console.log(param)
          var Data = this.CreateData('12', 'MES界面显示_消息滚动_修改', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              this.searchMesMessage()
            } else {
              this.$message.error('修改失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    editAll() {
      this.dialogFormVisible1 = true
    },
    callOff1() {
      this.dialogFormVisible1 = false
      this.$refs['form1'].resetFields()
    },
    submitUpdate1(formName1) {
      this.$refs[formName1].validate((valid1) => {
        if (valid1) {
          var param = []
          param[0] = ['ScollNotice', this.form1.scollNotice]
          console.log(param)
          var Data = this.CreateData('12', 'MES界面显示_消息滚动_修改全部', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogFormVisible1 = false
              this.searchMesMessage()
            } else {
              this.$message.error('修改失败！')
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .topCard{
    margin: 5px;
  }
  .topDiv{
    margin-bottom: 10px;
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    position: absolute;
    right: 6px;
    top: 80px;
    width: 300px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

