<template>
  <div class="login" :style="'background-image:url('+ Background +');'">
    <div style="font-size: 42px; color: #f4f4f5; text-align: center; background-color: transparent;padding-top: 20px;">
      {{ $t('task.screen.title') }}
    </div>
    <div>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
          <h2 style="font-size: 50px; color: #f4f4f5;margin-left: 100px;padding-top: 10px;">
            {{ $t('task.screen.task_screen') }}</h2></div>
          <div class="grid-content bg-purple-light">
          <el-form
            :inline="true"
            label-position="right"
            label-suffix=":"
          >
            <el-form-item class="custom-label" :label="$t('task.screen.device')" style="margin-left: 100px;">
              <el-select
                v-model="device"
                clearable
                filterable
                size="small"
                :placeholder="$t('common.please')"
                id="item-size"
                @change="changeDevice">
                <el-option
                  v-for="item in ledList"
                  :key="item.device_code"
                  :label="item.device_name"
                  :value="item.device_code"
                />
              </el-select>
            </el-form-item>
          </el-form>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <h2 style="font-size: 50px; color: #f4f4f5;text-align:right;margin-right: 140px;">{{ getTime }}</h2>
          </div>
          <div class="grid-content bg-purple-light">
            <p style="font-size: 50px; color: #f4f4f5;text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-form
      v-if="device!=''"
      style="margin-top: 50px;padding-top: 10px" ref="form" :model="form" :rules="rules"
      size="small" label-width="200px">
      <el-row>
        <el-col :span="12" style="padding-left: 100px">
          <el-form-item class="custom-label" style="padding-bottom: 50px" prop="task_code" :label="$t('task.screen.task_code')">
            <el-input v-model="form.task_code" class="cpp"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.inst_code')" prop="inst_code">
            <el-input class="cpp" v-model="form.inst_code"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.start')" prop="start_device_code">
            <el-input class="cpp" v-model="form.start_device_code"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.end')" prop="next_device_code">
            <el-input class="cpp" v-model="form.next_device_code"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.material')" prop="material_type">
            <el-input class="cpp" v-model="form.material_type"/>
            <span style="color: #f4f4f5;margin-left: 10px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="padding-left: 100px">
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.material_num')" prop="quantity">
            <el-input class="cpp" v-model="form.quantity"/>
            <span style="color: #f4f4f5;margin-left: 10px;"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.vehicle_code')" prop="vehicle_code">
            <el-input class="cpp" v-model="form.vehicle_code"/>
            <span style="color: #f4f4f5;margin-left: 10px;"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.bar')" prop="instruction_status">
            <el-input class="cpp" v-model="form.instruction_status"/>
            <span style="color: #f4f4f5;margin-left: 10px;"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.create_time')" prop="entry_time">
            <el-input class="cpp" v-model="form.entry_time"/>
            <span style="color: #f4f4f5;margin-left: 10px;"/>
          </el-form-item>
          <el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.IP')" prop="ip">
            <el-input class="cpp" v-model="form.ip"/>
            <span style="color: #f4f4f5;margin-left: 10px;"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="device!=''"
         style="font-size: 30px; color: #f4f4f5; text-align: center; background-color: transparent;padding-top: 50px;">
      <i class="el-icon-lock"></i>
      http://127.0.0.1:8014/bigScreen/screen
    </div>
  </div>
</template>

<script>

import crud from '@/mixins/crud'
import deviceCrud from '@/api/monitor/screen'
import Background from '@/assets/images/bigScreen.png'
import BackgroundTwo from '@/assets/images/bigScreenTwo.png'

export default {
  mixins: [crud],
  data() {
    return {
      Background: Background,
      BackgroundTwo: BackgroundTwo,
      device_code: '',
      device_id: '',
      device: '',
      vehicle_code: '',
      bar_code: '',
      entry_time: '',
      ip: '',
      form: {
        task_code: '',
        inst_code: '',
        start_device_code: '',
        next_device_code: '',
        material_type: '',
        quantity: '',
        vehicle_code: '',
        instruction_status: '',
        entry_time: '',
        ip: ''
      },
      ledList: [],
      getTime: '',
      getDate: '',
      src: '../images/bigScreen.png'
    }
  },
  mounted() {
    this.init()
    // 定时器
    const timer = setInterval(() => {
      this.settime()// 你所加载数据的方法
    }, 1000)
    // 销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  },
  beforeDestroy() {
    // js提供的clearInterval方法用来清除定时器
    console.log('定时器销毁')
    clearInterval(this.timer)
  },

  created() {
    this.$nextTick(() => {
      deviceCrud.selectLedList().then(data => {
        this.ledList = data
      })
    })
  },
  methods: {
    changeDevice(val) {
      this.device = val
      deviceCrud.getLedMessage(this.device).then(data => {
        this.form = data
      })
      // todo: 定时器
      this.timer = setInterval(() => { // 定时刷新设备的状态信息
        console.log('定时器启动')
        this.initStatus()
      }, 10000)
    },
    settime() {
      const _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
      _this.getTime = hh + ':' + mf + ':' + ss
    }
  }
}
</script>
<style scoped>
.login {
  height: 100%;
  background-size: cover;
}
</style>
<style>
/*.item .el-form-item__label {*/
/*  color: white;*/
/*  font-size: 34px;*/
/*}*/

.cpp {
  width: 500px;
  font-size: 40px;;
  text-align: center;
}
/*.ppd {*/
/*  height: 301%;*/
/*  width: 350px;*/
/*  margin-left: 10px;*/
/*  font-size: 30px;;*/
/*  text-align: center;*/
/*}*/

.custom-label .el-form-item__label {
  font-size: 40px;
  color: white;
}

.custom-label .el-input__inner {
  height: 40px;
  line-height: 40px;
}

#item-size {
  font-size: 37px;
  width: 200px;
}
</style>

