<template>
  <div class="debug-page BaseApp-page">
    <header class="BaseApp-page-header">
      <div class="debug-header-title">调试</div>
    </header>
    <main class="BaseApp-page-main">
      <div class="debug-inner">
        <div class="debug-status-wrapper">
          <div class="debug-status-row">
            <div class="debug-status-row-item">
              <div class="debug-status-row-item__label">箱体温度：</div>
              <div class="debug-status-row-item__value">{{ formData?.StatusDict?.box_temp }}℃</div>
            </div>
            <div class="debug-status-row-item">
              <div class="debug-status-row-item__label">表面温度1：</div>
              <div class="debug-status-row-item__value">{{ formData?.StatusDict?.temp_a }}℃</div>
            </div>
            <div class="debug-status-row-item">
              <div class="debug-status-row-item__label">表面温度2：</div>
              <div class="debug-status-row-item__value">{{ formData?.StatusDict?.temp_b }}℃</div>
            </div>
            <div class="debug-status-row-item">
              <div class="debug-status-row-item__label">表面温度3：</div>
              <div class="debug-status-row-item__value">{{ formData?.StatusDict?.temp_c }}℃</div>
            </div>
          </div>
          <div class="debug-status-row">
            <div class="debug-status-row-item">
              <div class="debug-status-row-item__label">开门状态：</div>
              <div class="debug-status-row-item__value">{{ formData.door_status == 1? '开门': '关门' }}</div>
            </div>
            <div class="debug-status-row-item">
              <div class="debug-status-row-item__label">表面温度4：</div>
              <div class="debug-status-row-item__value">{{ formData?.StatusDict?.temp_d }}℃</div>
            </div>
            <div class="debug-status-row-item">
              <div class="debug-status-row-item__label">表面温度5：</div>
              <div class="debug-status-row-item__value">{{ formData?.StatusDict?.temp_e }}℃</div>
            </div>
            <div class="debug-status-row-item"></div>
          </div>
        </div>
        <div class="debug-switch-wrapper">
          
         
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">导通1路</div>
            <div class="debug-switch-item__value">
              <CommonInput
              style="margin: 10px;"
                inputType="number"
                v-model="inputValueArr.data1"
                placeholderVal="时间:10s"
                ></CommonInput>
              <div class="BaseApp-btn BaseApp-btn--primary" @click="sendMsg( 'TD1',1,inputValueArr.data1)">开始</div>
            </div>
          </div>
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">导通2路</div>
            <div class="debug-switch-item__value">
              <CommonInput
              style="margin: 10px;"
              v-model="inputValueArr.data2"
                inputType="number"
                placeholderVal="时间:10s"
                ></CommonInput>
              <div class="BaseApp-btn BaseApp-btn--primary" @click="sendMsg( 'TD2',1,inputValueArr.data2)">开始</div>
            </div>
          </div>
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">导通3路</div>
            <div class="debug-switch-item__value">
              <CommonInput
              style="margin: 10px;"
                inputType="number"
                v-model="inputValueArr.data3"
                placeholderVal="时间:10s"
                ></CommonInput>
              <div class="BaseApp-btn BaseApp-btn--primary" @click="sendMsg( 'TD3', 1,inputValueArr.data3)">开始</div>
            </div>
          </div>
        </div>
        <div class="debug-switch-wrapper">
          
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">导通4路</div>
            <div class="debug-switch-item__value">
              <CommonInput
              style="margin: 10px;"
              v-model="inputValueArr.data4"

                inputType="number"
                placeholderVal="时间:10s"
                ></CommonInput>
              <div class="BaseApp-btn BaseApp-btn--primary" @click="sendMsg( 'TD4', 1,inputValueArr.data4)">开始</div>
            </div>
          </div>
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">导通5路</div>
            <div class="debug-switch-item__value">
              <CommonInput
              style="margin: 10px;"
                inputType="number"
                v-model="inputValueArr.data5"

                placeholderVal="时间:10s"
                ></CommonInput>
              <div class="BaseApp-btn BaseApp-btn--primary" @click="sendMsg( 'TD5',1,inputValueArr.data5)">开始</div>
            </div>
          </div>
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">红灯</div>
            <div class="debug-switch-item__value" style="margin-right:10px">
              <van-switch
                v-model="formData.device.red_light"
                :active-value="1"
                :inactive-value="0"
                @change="sendMsg( 'HD', formData.device.red_light,'')"

                />
            </div>
            
            <div class="debug-switch-item__label">绿灯</div>
            <div class="debug-switch-item__value">
              <van-switch
                v-model="formData.device.green_light"
                :active-value="1"
                :inactive-value="0"
                @change="sendMsg( 'LLD', formData.device.green_light,'')"
                />
            </div>
          </div>
        </div>
        <div class="debug-switch-wrapper">
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">灯光</div>
            <div class="debug-switch-item__value">
              <van-switch
                v-model="formData.device.light"
                :active-value="1"
                :inactive-value="0"
                @change="sendMsg( 'DG', formData.device.light,'')"
              />
            </div>
          </div>
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">外排风</div>
            <div class="debug-switch-item__value">
              <van-switch
                v-model="formData.device.wpf"
                :active-value="1"
                :inactive-value="0"
                @change="sendMsg( 'WPFS', formData.device.wpf,'')"
                />
            </div>
          </div>
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">报警灯</div>
            <div class="debug-switch-item__value">
              <van-switch
                v-model="formData.device.alarm_light"
                :active-value="1"
                :inactive-value="0"
                @change="sendMsg( 'BJD', formData.device.alarm_light,'')"
                />
            </div>
          </div>
          <div class="debug-switch-item">
            <div class="debug-switch-item__label">开锁</div>
            <div class="debug-switch-item__value">
              <van-switch
                v-model="formData.device.lock"
                :active-value="1"
                :inactive-value="0"
                @change="sendMsg( 'DOOR', formData.device.lock,'')"

                />
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="BaseApp-page-footer">
      <div class="BaseApp-btn" @click="goBack">返回</div>
    </footer>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { notify } from '@/utils/message.js';
import { getTerminalSetting, sendMsgApi,updateConfig,getSettingApi } from '../../api/equipment.js';
const router = useRouter();
const formData = reactive({
  device:{},
  StatusDict:{},
});
let inputValueArr = ref({
  data1:'',
  data2:'',
  data3:'',
  data4:'',
  data5:'',

})
let listMap = {
  1: '_a',
  2: '_b',
  3: '_c',
  4: '_d',
  5: '_e'
};
const loadData = async () => {
  const res = await getSettingApi();
  Object.assign(formData, res?.data.data);
  console.log(formData);
};
const goBack = () => {
  router.go(-1);
};



const saveForm = async () => {
  let res = await updateConfig(formData);
  console.log(res);
}
onMounted(() => {
  loadData();
});
const sendMsg = async (name,value,num) => {
  let params  ={
    name:name,
    status:value,
    data:num
  }

  let res = await sendMsgApi(params);
  let { code, desc, data } = res?.data;
  if (code === 200) {
    notify(desc, 'success');

  } else {
    notify(desc);
  }
};
</script>

<style lang="less" scoped>
.debug-page {
  font-size: 20px;
  color: #666666;
  .BaseApp-page-header {
    margin: 40px 0 0 40px;
    .debug-header-title {
      font-weight: bold;
      font-size: 28px;
      color: #3a3a3a;
    }
  }
  .debug-inner {
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
    .debug-status-wrapper {
      padding: 30px 40px;
      border-bottom: 1px solid #e5e5e5ff;
  
      .debug-status-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .debug-status-row-item {
          display: flex;
          flex-direction: row;
          // justify-content: flex-end;
          min-width: 22%;
          &:first-child {
            justify-content: flex-start;
          }
          .debug-status-row-item__value {
          }
        }
      }

      .debug-status-row + .debug-status-row {
        margin-top: 20px;
      }
    }
    .debug-switch-wrapper {
      display: flex;
      flex-direction: row;
      .debug-switch-item {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 125px;
        border-right: 1px solid #e5e5e5ff;
        &:last-child {
          border-right: none;
        }
        .debug-switch-item__value {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-left: 10px;
        }
      }
      .flex-set{
        flex: none;
        margin-left:60px;
      }
      border-bottom: 1px solid #e5e5e5ff;
    }
  }
}
</style>
