<template>
  <div style="width: 100%; height: 100%;">
    <el-row style="width: 100%;">
      <div style="display: flex">
        <div
            v-if="onlineStatus"
            style="margin: 0 2px;width: 100%;height: 70px;color: white;background-color: #00893d;display: flex;flex-wrap: wrap;align-content: center;justify-content: center;"
        >
          <span style="font-size: 28px;font-weight: bolder">
            MES在线
          </span>
        </div>
        <div v-if="!onlineStatus"
             style="margin: 0 2px;width: 100%;height: 70px;color: white;background-color: #ff2b2b;display: flex;flex-wrap: wrap;align-content: center;justify-content: center;">
          <span style="font-size: 28px;font-weight: bolder">
            MES离线
          </span>
        </div>
        <div v-if="!onlineStatus_PLC"
             style="margin: 0 2px;width: 100%;height: 70px;color: white;background-color: #00893d;display: flex;flex-wrap: wrap;align-content: center;justify-content: center;">
          <span style="font-size: 28px;font-weight: bolder">
            正常循环
          </span>
        </div>
        <div v-if="onlineStatus_PLC"
             style="margin: 0 2px;width: 100%;height: 70px;color: white;background-color: #ff2b2b;display: flex;flex-wrap: wrap;align-content: center;justify-content: center;">
          <span style="font-size: 28px;font-weight: bolder">
            强制放行
          </span>
        </div>
        <!--      <div style="width: 100%;height: 70px;font-size: 22px;color: white;background-color: #005bac;display: flex;flex-wrap: wrap">-->
        <!--        <div style="padding: 5px 10px 3px 10px;">{{(this.hour) + ':'+ (this.minute) + ':'+(this.second)}}</div>-->
        <!--        <br>-->
        <!--        <div style="padding: 0 0 0 9px;">{{year}}/{{month}}/{{day}}({{week}})</div>-->
        <!--      </div>-->
      </div>
      <div
          style="border: 1px solid #9e9b9b; background-color: white;width:99%; height: 193px;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: center;margin-top: 1px">
        <div
            v-for="(item, index) in statusBarInformation"
            :id="item.id"
            :key="index"
            style="float: left;width: 153px; height: 35px;margin: 2px 0 0 2px; background-color: #d7dee6"
        >
          <div
              :id="item.id + 'status'"
              class="station"
              style="background: #F0FFFF;border:1px solid #000; margin-left: 20px;margin-top: 8px; float: left; "
          />
          <div style="margin-top: 5px">
            <span style="margin-left: 10px; font-size: 22px;font-weight: bolder;">{{ item.label }}</span>
          </div>
        </div>
      </div>
      <div
          style="background-color: white;width: 99%; height: 140px; margin-top: 2px; border: 1px solid #9e9b9b;font-weight: bolder;">
        <el-row style="width: 100%; height: 24%;">
          <el-col class="datacs">
            计划产量
          </el-col>
          <el-col class="datacs">
            在线产量
          </el-col>
        </el-row>
        <el-row style="width: 100%; height: 24%;">
          <el-col class="datacs">
            {{ outputBeatInformation.工位产量 }}
          </el-col>
          <el-col class="datacs">
            {{ outputBeatInformation.在线产量 }}
          </el-col>
        </el-row>
        <el-row style="width: 100%; height: 24%;">
          <el-col class="datacs">
            计划节拍
          </el-col>
          <el-col class="datacs">
            在线节拍
          </el-col>
        </el-row>
        <el-row style="width: 100%; height: 24%;">
          <el-col class="datacs">
            {{ outputBeatInformation.工位节拍 }}
          </el-col>
          <el-col class="datacs">
            {{ outputBeatInformation.在线节拍 }}
          </el-col>
        </el-row>
      </div>
      <div style="background-color: #e4e4e4;width: 100%; height: 405px">
        <el-table
            :data="qualityData"
            :row-class-name="tableRowClassName"
            border
            max-height="405px"
            size="small"
            style="width: 100%; height: 100%; font-size: 22px; color: #000; border: 1px solid #9e9b9b"
        >
          <el-table-column label="测量项" align="center" prop="名称" width="130"/>
          <el-table-column label="类型" align="center" prop="测量项目1" style="font-size: 30px"
                           width="90"/>
          <el-table-column label="测量值" align="center" prop="测量项目2" style="font-size: 30px"/>
        </el-table>
      </div>
      <div style="background-color: #d6dde5;width: 100%; padding-top: 5px;height: 115px">
        <el-button style="font-size: 18px" @click="scanBarcode()">
          扫描条码
        </el-button>
        <el-input v-model="barcodeValue" :rows="2" placeholder="" style="width: 99%;margin: 2px 0 0 0;font-size: 18px"
                  type="textarea"/>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'LeftSidebar',
  props: {
    outputBeatInformation: {
      type: Object,
      default: function() {
        return {}
      }
    },
    statusBarInformation: {
      type: Array,
      default: function() {
        return []
      }
    },
    qualityData: {
      type: Array,
      default: function() {
        return []
      }
    },
    qualityDataHeader: {
      type: Object,
      default: function() {
        return {}
      }
    },
    onlineStatus: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    onlineStatus_PLC: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  data() {
    return {
      onLine: true,
      cycleStart: true,
      barcodeValue: '',
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      textarea: '',
      timer: null,
      year: '',
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: '',
      statisticsData: {
        planCount: 280,
        nowCount: 318,
        planBeat: 85,
        nowBeat: 69
      }
      // statusBarInformation: [{
      //   id: 'communicationStatus',
      //   label: '通讯状态',
      //   status: 0
      // }, {
      //   id: 'cycleStart',
      //   label: '循环开始',
      //   status: 0
      // }, {
      //   id: 'workpieceInPlace',
      //   label: '工件到位',
      //   status: 0
      // }, {
      //   id: 'transferModel',
      //   label: '传递机型',
      //   status: 0
      // }, {
      //   id: 'allowSaving',
      //   label: '允许保存',
      //   status: 0
      // }, {
      //   id: 'saveComplete',
      //   label: '保存完成',
      //   status: 0
      // }, {
      //   id: 'allowWork',
      //   label: '允许工作',
      //   status: 0
      // }, {
      //   id: 'completionJobs',
      //   label: '工作完成',
      //   status: 0
      // }, {
      //   id: 'repairMark',
      //   label: '返修标志',
      //   status: 0
      // }, {
      //   id: 'conformityMark',
      //   label: '合格标志',
      //   status: 0
      // }]
    }
  },
  watch: {
    statusBarInformation: {
      handler(newValue, oldName) {
        this.changeColor(newValue)
      },
      immediate: true,
      deep: true
    },
    'statusBarInformation.5.status': {
      handler(newValue, oldName) {
        console.log('新的工作完成信号！', newValue)
        this.getNowCountData()
      },
      immediate: true,
      deep: true
    }

  },
  created() {

  },
  mounted() {
    window.vueaaa = this
    this.timer = setInterval(() => {
      this.year = new Date().getFullYear()
      this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.week = '日一二三四五六'.charAt(new Date().getDay())
    }, 1000)
  },
  destroyed() {
  },
  methods: {
    getNowCountData() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', '工位产量节拍统计_查询', param)
      this.ExecDatabase(Data).then(response => {
        const data = response.data[0]
        this.statisticsData.planCount = data['计划产量']
        this.statisticsData.planBeat = data['计划节拍']
        this.statisticsData.nowCount = data['在线产量']
        this.statisticsData.nowBeat = data['在线节拍']
      })
    },
    tableRowClassName({ row }) {
      if (row.合格标志 === 1) {
        return 'green'
      } else {
        return 'red'
      }
    },
    scanBarcode() {
      if (this.barcodeValue) {
        this.publication.topic = window.g.mqttPublishTopic
        this.publication.payload = 'WEB|Barcode|' + this.$store.state.station.stationName + '|' + this.barcodeValue
        const result = window.g.mqttClient.doPublish(this.publication)
        if (result === true) {
          this.$notify.success({
            title: '提示',
            message: '条码发送成功！',
            position: 'bottom-right',
            duration: 2000,
            offset: 170
          })
          this.barcodeValue = ''
        } else {
          this.$notify.error({
            title: '提示',
            message: '条码发送失败！',
            position: 'bottom-right',
            duration: 2000,
            offset: 170
          })
        }
      } else {
        this.$notify.error({
          title: '提示',
          message: '请填写条码再发送！',
          position: 'bottom-right',
          duration: 2000,
          offset: 170
        })
      }
    },
    changeColor(newValue) {
      setTimeout(() => {
        for (let i = 0; i < newValue.length; i++) {
          const newValueStatus = Number(newValue[i].status)
          if (newValueStatus === 1) {
            document.getElementById(newValue[i].id + 'status').style.background = 'green'
          } else if (newValueStatus === 2) {
            document.getElementById(newValue[i].id + 'status').style.background = 'red'
          } else {
            document.getElementById(newValue[i].id + 'status').style.background = '#F0FFFF'
          }
        }
      }, (100))
    }
  }
}
</script>

<style scoped>
.station {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

::v-deep.el-table .green {
  background: rgba(0, 128, 0, 0.7) !important;
}

::v-deep.el-table .red {
  background: rgba(255, 0, 0, 0.7) !important;
}

::v-deep.datacs {
  border: 1px solid #d7dee6;
  height: 97%;
  width: 152px;
  margin-top: 2px;
  background-color: #d7dee6;
  margin-left: 3px;
  text-align: center;
  line-height: 30px;
  font-size: 22px;
}

::v-deep.el-table th.el-table__cell > .cell {
  font-size: 22px;
  color: #2f2f2f;
}

::v-deep.el-table tbody tr:hover > td {
  background-color: transparent !important;
  color: #FFFFFF;
}

::v-deep.el-table--scrollable-y .el-table__body-wrapper {
  max-height: 342px !important;
}
</style>
