<template>
  <el-container style="height: 100%;background-color: rgb(19, 71, 98);">
    <el-header style="display:flex;justify-content:center;align-items:center;height: 20%">
      <span style="font-size: 40px;color: white">
        {{ form.device_name }}
      </span>
    </el-header>
    <el-main style="height: 60%">
      <el-row style="height: 23%;border-bottom: solid black 1px">
        <el-col :span="12" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="6" :offset="6">
              <span style="font-size: 30px;color: white">
                产品：
              </span>
            </el-col>
            <el-col :span="12">
              <span style="font-size: 30px;color: white">
                {{ form.material_code }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="6" :offset="6">
              <span style="font-size: 30px;color: white">
                批次：
              </span>
            </el-col>
            <el-col :span="12">
              <span style="font-size: 30px;color: white">
                {{ form.pcsn }}
              </span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="height: 23%;border-bottom: solid black 1px">
        <el-col :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="6" :offset="6">
              <span style="font-size: 30px;color: white">
                当前物料：
              </span>
            </el-col>
            <el-col :span="12">
              <span style="font-size: 30px;color: red">
                {{ form.now_seq_no }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="16" :offset="8">
              <span style="font-size: 30px;color: red">
                {{ form.now_material }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="16" :offset="8">
              <span style="font-size: 30px;color: red">
                {{ form.now_formula_qty }}
              </span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="height: 23%;border-bottom: solid black 1px">
        <el-col v-if="form.flag === '0'" :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="6" :offset="6">
              <span style="font-size: 30px;color: white">
                当前需出：
              </span>
            </el-col>
            <el-col :span="12">
              <span style="font-size: 30px;color: white">
                {{ form.needout_qty }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-if="form.flag === '0'" :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="6" :offset="6">
              <span style="font-size: 30px;color: white">
                称重重量：
              </span>
            </el-col>
            <el-col :span="12">
              <span style="font-size: 30px;color: white">
                {{ form.putfit_qty }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-if="form.flag === '1'" :span="16" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :offset="3">
              <span style="font-size: 30px;color: white">
                错误信息：{{ form.msg }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7" :offset="1" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="18" :offset="6">
              <div v-if="form.flag === '1'" style="width: 50px;height: 50px;background-color: red;border-radius: 50%" />
              <div v-if="form.flag === '0'" style="width: 50px;height: 50px;background-color: green;border-radius: 50%" />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="height: 23%;border-bottom: solid black 1px">
        <el-col :span="6" style="height: 100%;display:flex;justify-content:center;align-items:center;">
          <span style="font-size: 30px;color: white">
            物料进度：
          </span>
        </el-col>
        <el-col :span="18" style="height: 100%;display: table">
          <el-progress
            :text-inside="true"
            :stroke-width="40"
            :percentage="form.rate"
            status="exception"
            style="display:table-cell; vertical-align:middle;"
          />
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="height: 20%;">
      <el-row style="height: 25%;">
        <el-col :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="6" :offset="6">
              <span style="font-size: 30px;color: white">
                下一物料：
              </span>
            </el-col>
            <el-col :span="12">
              <span style="font-size: 30px;color: white">
                {{ form.next_seq_no }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="16" :offset="8">
              <span style="font-size: 30px;color: white">
                {{ form.next_material }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <el-row style="height: 100%;display:flex;justify-content:center;align-items:center;">
            <el-col :span="16" :offset="8">
              <span style="font-size: 30px;color: white">
                {{ form.next_formula_qty }}
              </span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      form: {
        device_code: '',
        device_name: '',
        material_code: '',
        pcsn: '',
        now_seq_no: '',
        now_material: '',
        now_formula_qty: '',
        needout_qty: '',
        putfit_qty: '',
        flag: '',
        rate: '',
        msg: '',
        next_material: '',
        next_seq_no: '',
        next_formula_qty: ''
      }

    }
  },
  created() {
    debugger
    if (navigator.presentation.receiver) {
      navigator.presentation.receiver.connectionList.then(list => {
        list.connections.map(connection => this.addConnection(connection))
        list.addEventListener('connectionavailable', function(event) {
          this.addConnection(event.connection)
        })
      })
    }
  },
  methods: {
    addConnection(connection) {
      debugger
      console.log(console.log('test---------' + connection.toString()))
      const _this = this
      connection.addEventListener('message', function(event) {
        debugger
        const data = JSON.parse(event.data)
        _this.form = data.message
      })
    }
  }
}

</script>
