<template>
  <div class="cone-control">
    <van-nav-bar title="路锥控制" left-arrow @click-left="onClickLeft" fixed placeholder />

    <!-- 为模组概况添加边框 -->
    <div class="module-container">
      <div class="module-header">
        <van-icon name="setting-o" size="18" />
        <span>模组概况</span>
      </div>
      <van-cell-group inset>
        <van-cell title="模组概况">
          <template #label>
            <div class="module-info">
              <div class="info-row">
                <span class="info-label">固件版本</span>
                <span class="info-value" ref="firmwareVersionEl"></span>
              </div>
              <div class="info-row">
                <span class="info-label">MAC地址</span>
                <span class="info-value" ref="macAddressEl"></span>
              </div>
              <div class="info-title">网络参数</div>
              <div class="info-row">
                <span class="info-label">网络ID</span>
                <van-field v-model="networkId" type="text" input-align="right" placeholder="请输入网络ID" maxlength="6"
                  :formatter="value => value.replace(/[^0-9]/g, '')" />
              </div>
              <div class="info-row">
                <span class="info-label">无线频段</span>
                <van-field v-model="freqBand" is-link readonly input-align="right" placeholder="请选择频段"
                  @click="showFreqBandPopup" />
              </div>
              <div class="info-row">
                <span class="info-label">信道</span>
                <van-field v-model="channel" is-link readonly input-align="right" placeholder="请选择信道"
                  @click="showChannelPopup" />
              </div>
              <div class="info-row">
                <span class="info-label">速率(SF)</span>
                <van-field v-model="speedRate" is-link readonly input-align="right" placeholder="请选择速率"
                  @click="showSpeedRatePopup" />
              </div>
              <div class="info-row">
                <span class="info-label">功率</span>
                <van-field v-model="power" is-link readonly input-align="right" placeholder="请选择功率"
                  @click="showPowerPopup" />
              </div>
              <div class="upload-button-container">
                <van-button type="primary" size="small" block @click="uploadLoRaConfig">上传配置</van-button>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 指令控制面板 -->
    <div class="command-container">
      <div class="command-header">
        <van-icon name="apps-o" size="18" />
        <span>控制面板</span>
      </div>
      <div class="command-grid">
        <div class="command-item" @click="sendCommand('command1')">
          <div class="command-icon">
            <van-icon name="play-circle-o" size="24" />
          </div>
          <div class="command-text">启动路锥</div>
        </div>
        <div class="command-item" @click="sendCommand('command2')">
          <div class="command-icon">
            <van-icon name="pause-circle-o" size="24" />
          </div>
          <div class="command-text">停止路锥</div>
        </div>
        <div class="command-item" @click="sendCommand('command3')">
          <div class="command-icon">
            <van-icon name="setting-o" size="24" />
          </div>
          <div class="command-text">设置模式</div>
        </div>
        <div class="command-item" @click="sendCommand('command4')">
          <div class="command-icon">
            <van-icon name="warning-o" size="24" />
          </div>
          <div class="command-text">紧急停止</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
// import { showToast } from 'vant';
import axios from 'axios';

export default {
  name: 'ConeControl',
  setup() {
    const router = useRouter();
    const networkId = ref('');
    const freqBand = ref('');
    const channel = ref('');
    const speedRate = ref('');
    const power = ref('');
    const firmwareVersionEl = ref(null);
    const macAddressEl = ref(null);
    const isLocal = ref(true); // 用于判断是否为本地模式

    const onClickLeft = () => {
      router.back();
    };

    const showFreqBandPopup = () => {
      // 显示频段选择器
    };

    const showChannelPopup = () => {
      // 显示信道选择器
    };

    const showSpeedRatePopup = () => {
      // 显示速率选择器
    };

    const showPowerPopup = () => {
      // 显示功率选择器
    };
    const checkEnvironment = () => {
      if (window.location.hostname === '192.168.4.1') {
        console.log('in local');
        // 本地开发环境，设置 isLocal 为 true
        isLocal.value = true;
      } else {
        // 生产环境，设置 isLocal 为 false
        isLocal.value = false;
      }
    };
    const MQTT_send = (send_string) => {
      showToast('设置成功');
      jsonId.value++;
      console.log("MQTT 发送:" + JSON.stringify(send_string));
      if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
        uni.postMessage({
          data: {
            str: JSON.stringify(send_string)
          }
        });
      } else {
        window.parent.postMessage({ str: JSON.stringify(send_string) }, "*");
      }
    };


    const sendCommand = (command) => {
      // 发送指令逻辑
      showToast(`发送${command}`);
    };
    const uploadLoRaConfig = () => {
      // 检查必填字段是否为空
      if (!networkId.value || !freqBand.value || !channel.value || !speedRate.value || !power.value) {
        showToast('请填写所有必填字段');
        return;
      }

      // 将十进制字符串转换为十六进制数组
      const meshId = networkId.value.match(/.{2}/g)?.map(hex => parseInt(hex, 10)) || [0, 0, 0];

      // 获取各个选项的值
      const freqBandValue = freqBandOptions.find(option => option.text === freqBand.value)?.value || 0;
      const channelValue = parseInt(channel.value.replace('信道', '')) - 1;
      const speedRateValue = speedRateOptions.find(option => option.text === speedRate.value)?.value || 0;
      const powerValue = powerOptions.find(option => option.text === power.value)?.value || 0;

      const configData = {
        "board_id": 1,
        "JSON_id": jsonId.value,
        "gateway": {
          "LoRa_cfg": {
            "mesh_id": meshId,
            "fre_band": freqBandValue,
            "channel": channelValue,
            "SF": speedRateValue,
            "power": powerValue,
            "mode": 0
          }
        }
      };

      console.log('Uploading config:', configData);

      if (isLocal.value) {
        axios.post('/communication', configData, {
          headers: {
            "content-type": "application/json"
          }
        })
          .then(response => {
            console.log('Upload response:', response.data);
            showToast('上传成功');
            jsonId.value++;
          })
          .catch(error => {
            console.error('Upload error:', error);
            showToast('上传失败');
            jsonId.value++;
          });
      } else {
        MQTT_send(configData);
      }
    };
    const MQTT_recv = (string) => {
            loading.value = false;
            console.log("MQTT 接收的json:" + string);
            parseAndFillData(JSON.parse(string));
            // showToast('刷新成功');
            console.log('Received message:', string);
        };
    onMounted(() => {
      checkEnvironment();
      window.MQTT_recv = MQTT_recv;

    });

    // 组件卸载前断开连接
    onBeforeUnmount(() => {

    });

    return {
      networkId,
      freqBand,
      channel,
      speedRate,
      power,
      firmwareVersionEl,
      macAddressEl,
      onClickLeft,
      showFreqBandPopup,
      showChannelPopup,
      showSpeedRatePopup,
      showPowerPopup,
      uploadLoRaConfig,
      sendCommand,
      uploadLoRaConfig,
      checkEnvironment
    };
  }
};
</script>

<style scoped>
.cone-control {
  padding-top: 46px;
  /* 为固定的导航栏留出空间 */
  background-color: #f7f8fa;
  min-height: 100vh;
}

.module-container {
  margin: 16px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
  overflow: hidden;
}

.module-header {
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #323233;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.command-container {
  margin: 16px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
  overflow: hidden;
}

.command-header {
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #323233;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}

.command-item {
  background: #f7f8fa;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.command-item:active {
  background: #e8e8e8;
  transform: scale(0.98);
}

.command-icon {
  color: #1989fa;
  margin-bottom: 4px;
}

.command-text {
  font-size: 14px;
  color: #323233;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  justify-content: space-between;
}

.info-label {
  min-width: 80px;
  color: #646566;
  flex-shrink: 0;
}

.info-row :deep(.van-field) {
  flex: 1;
  padding: 0;
  background: transparent;
  margin-left: 8px;
}

.upload-button-container {
  margin-top: 16px;
  padding: 0 8px;
}

/* 添加过渡动画 */
.command-item {
  position: relative;
  overflow: hidden;
}

.command-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 137, 250, 0.1);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.command-item:active::after {
  opacity: 1;
}
</style>