<template>
  <div style="width: 100%; height: 100%;">
    <el-row style="width: 100%;">
      <div style="width: 100%;height: 73px;font-size: 22px;color: white;background-color: #005bac">
        <div style="padding: 5px 10px 3px 10px;">
          时间：{{ (hour) + ':'+ (minute) + ':'+(second) }}&nbsp;&nbsp;星期{{ week }}
        </div>
        <div style="padding: 0 0 0 9px;">
          日期：{{ year }}-{{ month }}-{{ day }}
        </div>
      </div>
      <div style="border: 1px solid #9e9b9b;background-color: white;width: 99%; height: 325px">
        <div style="width: 100%;text-align: center;padding-top: 10px">
          <span style="font-size: x-large; font-weight: bolder;">总 装 线</span>
        </div>
        <div style="height: 190px">
          <div v-for="(item, index) in statusBarInformation" :id="item.id" :key="index" style="float: left;width: 153px; height: 30px;margin-left: 2px;margin-top: 2px; background-color: #d7dee6">
            <div :id="item.id + 'status'" class="station" style="background: #af8f79;margin-left: 20px;margin-top: 5px; float: left; " />
            <div style="margin-top: 3px">
              <span style="margin-left: 15px; font-size: larger;font-weight: bolder;">{{ item.label }}</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 5px">
          <span style="font-size: x-large; font-weight: bolder;">部 装 线</span>
        </div>
        <div style="height: 190px">
          <div v-for="(item, index) in partStatusBarInformation" :id="item.id" :key="index" style="float: left;width: 153px; height: 30px;margin-left: 2px;margin-top: 2px; background-color: #d7dee6">
            <div :id="item.id + 'status'" class="station" style="background: #af8f79;margin-left: 20px;margin-top: 5px; float: left; " />
            <div style="margin-top: 3px">
              <span style="margin-left: 15px; font-size: larger;font-weight: bolder;">{{ item.label }}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="background-color: white;width: 99%; height: 140px; margin-top: 2px; border: 1px solid #9e9b9b">
        <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: 99%; height: 24%;">
          <el-col class="datacs">
            {{ outputBeatInformation.工位产量 }}
          </el-col>
          <el-col class="datacs">
            {{ outputBeatInformation.在线产量 }}
          </el-col>
        </el-row>
        <el-row style="width: 99%; height: 24%;">
          <el-col class="datacs">
            计划节拍
          </el-col>
          <el-col class="datacs">
            在线节拍
          </el-col>
        </el-row>
        <el-row style="width: 99%; 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: 250px">
        <el-table
          :data="qualityData"
          border
          highlight-current-row
          size="small"
          :row-class-name="tableRowClassName"
          style="width: 100%; height: 100%; font-size: 16px"
        >
          <el-table-column
            prop="名称"
            :label="qualityDataHeader[7]"
            align="center"
            width="120"
          />
          <el-table-column
            prop="测量项目1"
            :label="qualityDataHeader[8]"
            align="center"
            width="100"
          />
          <el-table-column
            prop="测量项目2"
            align="center"
            :label="qualityDataHeader[9]"
          />
        </el-table>
      </div>
      <div style="background-color: #d6dde5;width: 100%; padding-top: 10px;height: 115px">
        <el-button @click="scanBarcode()">
          扫描条码
        </el-button>
        <el-input
          v-model="barcodeValue"
          type="textarea"
          :rows="2"
          placeholder=""
          style="width: 93%;margin: 10px 0 0 0"
        />
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'LeftSidebar',
  props: {
    outputBeatInformation: {
      type: Object,
      default: function() {
        return {}
      }
    },
    statusBarInformation: {
      type: Array,
      default: function() {
        return []
      }
    },
    partStatusBarInformation: {
      type: Array,
      default: function() {
        return []
      }
    },
    qualityData: {
      type: Array,
      default: function() {
        return []
      }
    },
    qualityDataHeader: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      barcodeValue: '',
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      textarea: '',
      timer: null,
      year: '',
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: ''
      // 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
    },
    partStatusBarInformation: {
      handler(newValue, oldName) {
        this.changeColor(newValue)
      },
      immediate: true,
      deep: true
    }

  },
  created() {
  },
  mounted() {
    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: {
    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 = '#af8f79'
          }
        }
      }, (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: 25px;
  font-size: larger;
  font-weight: bolder;
}
</style>
