<template>
  <div class="app-container">
    <div class="base-wrapper">
      <div class="device-base">
        <p class="item"><span class="keyword">{{$t('counter.device')}}: </span><el-tag>{{deviceID}}</el-tag></p>
        <p class="item" v-if="lastItem.device_name"><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>{{lastItem.device_name}}</el-tag></p>
        <p class="item" v-else><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>{{$t('counter.noName')}}</el-tag></p>
      </div>
    </div>
    <div class="screen-wrapper">
      <div class="device-screen">
        <table cellspacing="0">
          <tbody>
            <tr>
              <td v-for="(item, index) of lastTime" :key="index">
                {{item}}
              </td>
            </tr>
            <tr>
              <td v-for="(item, index) of lastCount" :key="index">
                {{item}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="device-status">
        <ul>
          <li>Status: 
            <span
              :class="lastItem.status ? 'text-success' : 'text-danger'"
              v-if="lastItem.status == 0"
            >
              Offline
            </span>
            <span
              :class="lastItem.status ? 'text-success' : 'text-danger'"
              v-if="lastItem.status == 1"
            >
              Online
            </span>
          </li>
          <li class="signal">Signal: <span>{{lastItem.signal}}/31</span></li>
          <li>Power:  <span>{{lastItem.energy.replace('%','')}}%</span></li>
        </ul>
      </div>
      <div class="device-status" 
      v-if="lastItem.chip_type === 'AIR-V2'"
      >
        <ul>
          <li>
            <p>LED开关
              <el-switch
                v-model="led"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handleLedSwitchChange"
              >
              </el-switch>
            </p>
          </li>
          <li>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="handleCountClear">计数清零</el-button>
          </li>
          <!-- <li>
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="handleMosqClean">自动清扫</el-button>
          </li> -->
        </ul>
      </div>

      <!-- 计数器清零确认弹窗 -->
      <el-dialog
        title="确认"
        :visible.sync="dialogCountVisible"
        :width="dialogWidth"
        center
      >
        <span>确定要清零计数器吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogCountVisible = false">取消</el-button>
          <el-button type="primary" @click="handleCountClear">确定</el-button>
        </span>
      </el-dialog>

      <!-- 清理速度选择、确认弹窗 -->
      <el-dialog
        title="请选择清理速度，并确定！"
        :visible.sync="dialogMosqVisible"
        :width="dialogWidth"
        center
      >

        <div class="block">
    <el-row>
  <el-col :span="12"><div class="grid-content bg-purple">
    <span style="display: flex; justify-content: flex-start;">慢🐢</span>
  </div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple">
    <span style="display: flex; justify-content: flex-end;">🐰快</span>
  </div></el-col>
</el-row>
    <el-slider
      v-model="cleanSpeed"
      :step="1"
      :min="1"
      :max="9"
      show-stops>
    </el-slider>
  </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogMosqVisible = false">取消</el-button>
          <el-button type="primary" @click="handleMosqClean">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { fetchRemoteControl } from '@/api/counter'

export default {
  name: 'screen',
  props: {
    deviceID: String,
    lastItem: Object
  },
  data() {
    return {
      led: true,
      dialogCountVisible: false,
      dialogMosqVisible: false,
      cleanSpeed: 6
    }
  },
  methods: {
    async handleLedSwitchChange() {
      const action = this.led ? 'ledOn' : 'ledOff'
      await this.sendRemoteControlCommand(action)
    },
    async handleCountClear() {
      if (!this.dialogCountVisible) {
        this.showCountConfirmationDialog()
      } else {
        await this.sendRemoteControlCommand('countClear')
      }
    },
    async handleMosqClean() {
      if (!this.dialogMosqVisible) {
        this.showMosqConfirmationDialog()
      } else {
        await this.sendRemoteControlCommand('mosqClean', { speed: this.cleanSpeed })
      }
    },
    async sendRemoteControlCommand(command, options = {}) {
      try {
        const { speed } = options
        const deviceID = this.deviceID
        console.log(deviceID, command, speed)

        const requestData = { command, speed }

        const response = await fetchRemoteControl(deviceID, requestData)
        console.log('Command sent successfully:', response.data)
      } catch (error) {
        console.error('Error sending command:', error)
      } finally {
        this.dialogCountVisible = false
        this.dialogMosqVisible = false
      }
    },
    showCountConfirmationDialog() {
      this.dialogCountVisible = true
    },
    showMosqConfirmationDialog() {
      this.dialogMosqVisible = true
    }
  },
  computed: {
    lastTime() {
      const curTime = moment().format('YYYY-MM-DD HH:mm')
      return curTime.split('')
      // return this.lastItem.calc_time.substr(0, 16).split('')
    },
    lastCount() {
      const count = this.lastItem.count
      const qty = 'Qty.' + ' '.repeat(10 - count.length) + '00' + count
      return qty.split('')
    },
    dialogWidth() {
      // 获取当前浏览器窗口宽度
      const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

      // 如果窗口宽度大于800像素，设置对话框宽度为30%，否则设置为100%
      return windowWidth > 600 ? '30%' : '100%'
    }

  },
  mounted() {
  }
}
</script>

<style lang="scss">
  .text-success {
    color: #67C23A
  }
  .text-danger {
    color: #F56C6C
  }
  .base-wrapper {
    overflow: auto;
    .device-base {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 350px;
      .item {
        width: 300px;
        margin: 0 0 5px 0;
      }
      .keyword {
        display: inline-block;
        width: 100px;
        font-size: 0.9em;
      }
    }
  }
  .screen-wrapper {
    background: #F2F6FC;
    .device-screen {
      display: flex;
      justify-content: center;
      table {
        font-size: 1.2rem;
        font-family: 'Courier New', Courier, monospace;
        border: 1px solid #666;
        border-collapse: collapse;
        text-align: center;
        margin: 2rem 0 2rem 0;
        td {
          border: 1px solid #666;
          width: 1rem;
          height: 1.5rem;
          line-height: 1.5rem;
          font-weight: 600;
           padding: .2rem;
        }
      }
    }
    .device-status {
      display: flex;
      justify-content: center;
      margin: -2rem 0 1rem 0;
      ul {
        padding: 0;
        li {
          font-size: .85rem;
          list-style-type: none;
          display: inline-block;
        }
        .signal {
          margin: 0 2rem 0 2rem
        }
      }
    }
    @media only screen and (max-width: 768px) {
      .device-screen {
        table {
          margin: 1rem 0 1rem 0;
          td {
            font-size: 1rem;     
          }
        }
      }
      .device-status {
        margin: -1rem 0 1.5rem 0;
        font-size: 1rem;
      }
      .signal {
        margin: 0 1rem 0 1rem
      }
    }
  }
</style>
