<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <el-button type="primary" plain size="small" icon="el-icon-refresh" @click="searchOrder()">刷新</el-button>
        <el-button type="warning" plain size="small" icon="el-icon-refresh" @click="clearCar('OP1010',1)">清空50小车物料</el-button>
        <el-button type="warning" plain size="small" icon="el-icon-refresh" @click="clearCar('OP2010',1)">清空80小车物料</el-button>
        <el-button type="warning" plain size="small" icon="el-icon-refresh" @click="clearCar('OP1010',2)">清空50抓取与扫码位置</el-button>
        <el-button type="warning" plain size="small" icon="el-icon-refresh" @click="clearCar('OP2010',2)">清空80抓取与扫码位置</el-button>
        <el-button type="warning" plain size="small" icon="el-icon-refresh" @click="editCar(50)">设置50小车抓取与扫码位置</el-button>
        <el-button type="warning" plain size="small" icon="el-icon-refresh" @click="editCar(80)">设置80小车抓取与扫码位置</el-button>
        <el-button type="warning" plain size="small" icon="el-icon-refresh" @click="editclareModel(true)">清料模式设置</el-button>
        <!--颜色块-->
        <div class="colorBox" style="display: flex;font-size: 12px;line-height: 14px;float: right;margin-top: 20px">
          <div class="d1" style="display: flex;"><div style="height: 15px;width: 15px;background-color: #00ff7f;"/>扫码库位</div>
          <div class="d2" style="display: flex; margin: 0 10px;"><div style="height: 15px;width: 15px;background-color: #ffaa00;"/>夹取库位</div>
        </div>
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :cell-class-name="tableRowClassName"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        class="main"
        tooltip-effect="dark"
        height="720px"
        style="width: 100%;"
        border
        size="mini">
        <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.条码 }}
          </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.发动机号 }}
          </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.机型代码 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否有件">
          <template slot-scope="scope">
            {{ scope.row.是否有件 == 0 ? "无" : "有" }}
            <!-- 不允许随意修改工件是否有件 -->
            <!-- <el-select v-model="scope.row.是否有件" filterable size="small" style="width: 90%;"
              @change="ModifyData(scope.row)">
              <el-option v-for="item in stationNumber" :key="item.value" :label="item.label" :value="item.value"
                size="mini" />
            </el-select> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作时间">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="isShowEditCarVisible" :append-to-body="true" :title="editCarForm.title + '工位设置抓取位置与扫码位置'" center width="500px" style="text-align: center">
      <div style="text-align: center">
        <el-form
          ref="faultStartFormRef"
          :model="editCarForm"
          label-position="left"
          label-width="100px"
          style="width: 100%;margin: auto"
        >
          <el-form-item label="机器人抓取位置" prop="engineTypeValue" style="display: inline-block">
            <el-select v-model="editCarForm.catchCar" placeholder="请选择机器人抓取位置" size="small">
              <el-option
                v-for="index in 6"
                :key="index"
                :label="index"
                :value="index"
                size="mini"/>
            </el-select>
          </el-form-item>
          <el-form-item label="PDA扫描位置" prop="engineTypeValue" style="display: inline-block">
            <el-select v-model="editCarForm.scanCar" placeholder="请选择PDA扫描位置" size="small">
              <el-option
                v-for="index in 6"
                :key="index"
                :label="index"
                :value="index"
                size="mini"/>
            </el-select>
          </el-form-item>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px">
            <el-button class="el-icon-check" type="primary" @click="editCarFormSubmit()">确定</el-button>
            <el-button class="el-icon-close" style="margin-left: 50px" @click="isShowEditCarVisible = false">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isShowEditClearModelVisible" :append-to-body="true" title="A10 B10清料模式设置" center width="500px" style="text-align: center">
      <div style="text-align: center">
        <el-form
          ref="faultStartFormRef"
          :model="editClearModelForm"
          label-position="left"
          label-width="100px"
          style="width: 100%;margin: auto"
        >
          <el-form-item label="工位号" prop="engineTypeValue" style="display: inline-block">
            <el-select v-model="editClearModelForm.opName" placeholder="请选择清料工位号" size="small">
              <el-option
                label="A10"
                value="OP1010"
                size="mini"/>
              <el-option
                label="B10"
                value="OP2010"
                size="mini"/>
            </el-select>
          </el-form-item>
          <el-form-item label="是否清料" prop="engineTypeValue" style="display: inline-block">
            <el-select v-model="editClearModelForm.isClare" placeholder="请选择是否清料" size="small">
              <el-option
                label="清料"
                value="true"
                size="mini"/>
              <el-option
                label="不清料"
                value="false"
                size="mini"/>
            </el-select>
          </el-form-item>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px">
            <el-button class="el-icon-check" type="primary" @click="editClearModelSubmit()">确定</el-button>
            <el-button class="el-icon-close" style="margin-left: 50px" @click="isShowEditClearModelVisible = false">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<!--<script src="../../../utils/setMethods.js"></script>-->
<script>
export default {
  data() {
    return {
      loading: true,
      tableData: [], // 总数据数组
      stationNumber: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      isShowEditCarVisible: false,
      editCarForm: {
        catchCar: 0,
        scanCar: 0,
        title: ''
      },
      isShowEditClearModelVisible: false,
      editClearModelForm: {
        opName: 'OP1010',
        isClare: 'false'
      }
    }
  },
  created() {
    this.searchOrder()
  },
  mounted() {
  },
  methods: {
    // 表格颜色变化
    tableRowClassName({ row, rowIndex }) {
      // console.log(row, rowIndex)
      console.log(row)
      if (Number(row.上线库位) === 1) {
        return 'is-catch'
      }
      if (Number(row.夹取库位) === 1) {
        return 'is-goOnline'
      }
      return 'is-Null'
    },
    // 查询订单
    searchOrder() {
      this.loading = true
      this.tableData = []
      var param = []
      var Data = this.CreateData('11', '思源库位管理_管理软件查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
        this.loading = false
      })
    },
    // 遍历表格结果发送plc是否清料信号
    foreachTableDateSentPlc() {
      console.log('调用plc方法')
      let OP1010IsNull = true
      let OP2010IsNull = true
      for (const item of this.tableData) {
        if (item.工位号 === '1010') {
          item.是否扫描 === 1 && item.是否有件 === 1 ? OP1010IsNull = false : ''
          item.订单号 != null ? OP1010IsNull = false : ''
          console.log(item.订单号)
        } else if (item.工位号 === '2010') {
          item.是否扫描 === 1 && item.是否有件 === 1 ? OP2010IsNull = false : ''
          item.订单号 != null ? OP2010IsNull = false : ''
        }
      }
      this.WritePlC_TagTypeCodeID('1010', OP1010IsNull)
      this.WritePlC_TagTypeCodeID('2010', OP2010IsNull)
    },

    // 更改plc方法 传工位号和是否有件
    WritePlC_TagTypeCodeID(opName, isNull) {
      const url = '/WritePlC_TagTypeCodeID'
      const params = {
        tagValue: { 'TagValue': isNull, 'ValueType': 'bool' },
        TagTypeCodeID: '52',
        opName: 'OP' + opName
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('写入plc结果', res.data)
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    // 清空物料小车
    clearCar(opName, type) {
      this.$confirm('此操作会影响库位内数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['工位号', opName]
        param[1] = ['type', type]
        var Data = this.CreateData('12', '思源库位管理_清空所有库位数据', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '状态修改成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '清空物料失败请重试',
              type: 'success'
            })
          }
          this.searchOrder()
        })
      }).catch(() => {
      })
    },
    // 点击修改物料小车
    editCar(carId) {
      if (carId === 80) {
        this.editCarForm.title = '80'
        this.isShowEditCarVisible = true
      } else {
        this.editCarForm.title = '50'
        this.isShowEditCarVisible = true
      }
      this.editCarForm.catchCar = 0
      this.editCarForm.scanCar = 0
    },
    // 修改清料模式
    editclareModel() {
      this.isShowEditClearModelVisible = true
    },
    // 提交清料模式
    editClearModelSubmit() {
      const url = '/WritePlC_TagTypeCodeID'
      const params = {
        tagValue: { 'TagValue': this.editClearModelForm.isClare !== 'false', 'ValueType': 'bool' },
        TagTypeCodeID: '52',
        opName: this.editClearModelForm.opName
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('写入plc结果', res.data)
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    // 修改物料小车抓取位置
    editCarFormSubmit() {
      let opName = ''
      if (this.editCarForm.title == '80') {
        opName = 'OP2010'
      } else {
        opName = 'OP1010'
      }
      var param = []
      param[0] = ['工位号', opName]
      param[1] = ['抓取位置', this.editCarForm.catchCar]
      param[2] = ['扫码位置', this.editCarForm.scanCar]
      var Data = this.CreateData('12', '思源库位管理_扫码抓取位置_修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '状态修改成功',
            type: 'success'
          })
          this.isShowEditCarVisible = false
          this.searchOrder()
        } else {
          this.$message.error('状态修改失败！')
        }
      })
    },
    ModifyData(row) {
      var param = []
      param[0] = ['ID', row.ID]
      param[1] = ['是否有件', row.是否有件]
      console.log(param, '思源库位管理_管理软件修改param')
      var Data = this.CreateData('12', '思源库位管理_管理软件修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '状态修改成功',
            type: 'success'
          })
        } else {
          this.$message.error('状态修改失败！')
        }
      })
    }
  }
}
</script>

<style scoped>
.topCard {
  margin: 5px;
}

/deep/.el-table .el-table__body .is-catch {
  background: #00ff7f !important;
}

/deep/.el-table .el-table__body .is-goOnline {
  background: #ffaa00 !important;
}

.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>

