<script lang="ts" setup>
import { socket } from 'libs/socket'
import { sendControl } from 'libs/utils'
import { useDebugStore } from 'stores/debugStore'
import { useSystemStore } from 'stores/systemStore'
import { onMounted, onUnmounted } from 'vue'

const systemStore = useSystemStore()

const debugStore = useDebugStore()

onMounted(() => {
  socket.init(receiveMessage, 'notification')
})

onUnmounted(() => {
  socket.unregisterCallback(receiveMessage, 'notification')
})

const receiveMessage = (data: Socket.NotificationData) => {
  systemStore.pushSystemList(data)
}

const pallet_elevator_lift_up = async () => {
  const params = {
    command: 'debug_pallet_elevator_lift_up',
    params: {
      index: debugStore.formData.heatArea.index,
      ...debugStore.formData.heatArea.heatMotorData,
    },
  }
  await sendControl(params, 'debug')
}

const pallet_elevator_lift_down = async () => {
  const params = {
    command: 'debug_pallet_elevator_lift_down',
    params: {
      index: debugStore.formData.heatArea.index,
      ...debugStore.formData.heatArea.heatMotorData,
    },
  }
  await sendControl(params, 'debug')
}

const pallet_elevator_stop = async () => {
  const params = {
    command: 'debug_pallet_elevator_stop',
    params: {
      index: debugStore.formData.heatArea.index,
    },
  }
  await sendControl(params, 'debug')
}

const heater_start = async () => {
  const params = {
    command: 'debug_heater_start',
    params: {
      index: debugStore.formData.heatArea.index,
      ...debugStore.formData.heatArea.heatTemperature,
    },
  }
  await sendControl(params, 'debug')
}
const heater_stop = async () => {
  const params = {
    command: 'debug_heater_stop',
    params: {
      index: debugStore.formData.heatArea.index,
    },
  }
  await sendControl(params, 'debug')
}

const debug_heater_start_heat_maintaining = async () => {
  const params = {
    command: 'debug_heater_start_heat_maintaining',
    params: {
      index: debugStore.formData.heatArea.index,
      ...debugStore.formData.heatArea.heatTemperature,
    },
  }
  await sendControl(params, 'debug')
}

const debug_heater_stop_heat_maintaining = async () => {
  const params = {
    command: 'debug_heater_stop_heat_maintaining',
    params: {
      index: debugStore.formData.heatArea.index,
    },
  }
  await sendControl(params, 'debug')
}

const debug_fan_start = async () => {
  const params = {
    command: 'debug_fan_start',
    params: {
      index: debugStore.formData.heatArea.index,
    },
  }
  await sendControl(params, 'debug')
}

const debug_fan_stop = async () => {
  const params = {
    command: 'debug_fan_stop',
    params: {
      index: debugStore.formData.heatArea.index,
    },
  }
  await sendControl(params, 'debug')
}

const debug_cover_elvator_lift_up = async () => {
  const params = {
    command: 'debug_cover_elvator_lift_up',
    params: {
      ...debugStore.formData.lidData,
    },
  }
  await sendControl(params, 'debug')
}

const debug_cover_elvator_lift_down = async () => {
  const params = {
    command: 'debug_cover_elvator_lift_down',
    params: {
      ...debugStore.formData.lidData,
    },
  }
  await sendControl(params, 'debug')
}

const debug_cover_elvator_reset = async () => {
  const params = {
    command: 'debug_cover_elvator_reset',
    params: {},
  }
  await sendControl(params, 'debug')
}

const debug_cover_elvator_stop = async () => {
  const params = {
    command: 'debug_cover_elvator_stop',
    params: {},
  }
  await sendControl(params, 'debug')
}

const liquid_arm_reset = async () => {
  const params = {
    command: 'debug_liquid_arm_reset',
    params: {
      target: ['largeArm', 'smallArm'],
    },
  }
  await sendControl(params, 'debug')
}

const liquid_arm_rotation = async () => {
  const params = {
    command: 'debug_liquid_arm_rotation',
    params: {
      ...debugStore.formData.liquidArmData,
    },
  }
  await sendControl(params, 'debug')
}

const liquid_arm_stop = async () => {
  const params = {
    command: 'debug_liquid_arm_stop',
    params: {
      target: ['largeArm', 'smallArm'],
    },
  }
  await sendControl(params, 'debug')
}

const liquid_pump_pre_filling = async () => {
  const params = {
    command: 'debug_liquid_pump_pre_filling',
    params: {
      index: debugStore.formData.liquidPumpData.index,
    },
  }
  await sendControl(params, 'debug')
}

const liquid_pump_pre_evacuation = async () => {
  const params = {
    command: 'debug_liquid_pump_pre_evacuation',
    params: {
      index: debugStore.formData.liquidPumpData.index,
    },
  }
  await sendControl(params, 'debug')
}

const liquid_pump_start = async () => {
  const params = {
    command: 'debug_liquid_pump_start',
    params: {
      ...debugStore.formData.liquidPumpData,
    },
  }
  await sendControl(params, 'debug')
}

const liquid_pump_stop = async () => {
  const params = {
    command: 'debug_liquid_pump_stop',
    params: {
      index: debugStore.formData.liquidPumpData.index,
    },
  }
  await sendControl(params, 'debug')
}

const shaker_start = async () => {
  const params = {
    command: 'debug_shaker_start',
    params: {
      ...debugStore.formData.shakeSpeed,
    },
  }
  await sendControl(params, 'debug')
}

const shaker_stop = async () => {
  const params = {
    command: 'debug_shaker_stop',
    params: {},
  }
  await sendControl(params, 'debug')
}

const debug_transportation_arm_reset = async (motor: 'x' | 'y' | 'z') => {
  const params = {
    command: 'debug_transportation_arm_reset',
    params: {
      dim: [motor],
    },
  }
  await sendControl(params, 'debug')
}

const debug_transportation_arm_move = async (motor: 'x' | 'y' | 'z') => {
  const params = {
    command: 'debug_transportation_arm_move',
    params: {
      ...debugStore.formData.transferModule[`${motor}MotorData`],
    },
  }
  await sendControl(params, 'debug')
}

const debug_transportation_arm_stop = async (motor: 'x' | 'y' | 'z') => {
  const params = {
    command: 'debug_transportation_arm_stop',
    params: {
      dim: [motor],
    },
  }
  await sendControl(params, 'debug')
}

const debug_holding_jaw_open = async () => {
  const params = {
    command: 'debug_holding_jaw_open',
    params: {
      ...debugStore.formData.transferModule.JawData,
    },
  }
  await sendControl(params, 'debug')
}

const debug_holding_jaw_close = async () => {
  const params = {
    command: 'debug_holding_jaw_close',
    params: {
      ...debugStore.formData.transferModule.JawData,
    },
  }
  await sendControl(params, 'debug')
}

const debug_holding_jaw_pause = async () => {
  const params = {
    command: 'debug_holding_jaw_pause',
    params: {},
  }
  await sendControl(params, 'debug')
}

const door_open = async () => {
  const params = {
    command: 'debug_door_open',
    params: {},
  }
  await sendControl(params, 'debug')
}

const door_close = async () => {
  const params = {
    command: 'debug_door_close',
    params: {},
  }
  await sendControl(params, 'debug')
}

const door_stop = async () => {
  const params = {
    command: 'debug_door_stop',
    params: {},
  }
  await sendControl(params, 'debug')
}
</script>

<template>
  <div class="debug-content">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>转运模组</span>
            </div>
          </template>
          <el-divider>X轴电机</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="距离">
                <el-input v-model.number="debugStore.formData.transferModule.xMotorData.xDimDistance" type="number" placeholder="请输入距离">
                  <template #append>
                    mm
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="速度">
                <el-input v-model.number="debugStore.formData.transferModule.xMotorData.xDimRate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="() => debug_transportation_arm_reset('x')">
                  回原点
                </ft-button>
                <ft-button type="primary" :click-handle="() => debug_transportation_arm_move('x')">
                  开始
                </ft-button>
                <ft-button :click-handle="() => debug_transportation_arm_stop('x')">
                  停止
                </ft-button>
              </el-form-item>
            </el-form>
          </div>
          <el-divider>Y轴电机</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="距离">
                <el-input v-model.number="debugStore.formData.transferModule.yMotorData.yDimDistance" type="number" placeholder="请输入距离">
                  <template #append>
                    mm
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="速度">
                <el-input v-model.number="debugStore.formData.transferModule.yMotorData.yDimRate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="() => debug_transportation_arm_reset('y')">
                  回原点
                </ft-button>
                <ft-button type="primary" :click-handle="() => debug_transportation_arm_move('y')">
                  开始
                </ft-button>
                <ft-button :click-handle="() => debug_transportation_arm_stop('y')">
                  停止
                </ft-button>
              </el-form-item>
            </el-form>
          </div>
          <el-divider>Z轴电机</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="距离">
                <el-input v-model.number="debugStore.formData.transferModule.zMotorData.zDimDistance" type="number" placeholder="请输入距离">
                  <template #append>
                    mm
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="速度">
                <el-input v-model.number="debugStore.formData.transferModule.zMotorData.zDimRate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="() => debug_transportation_arm_reset('z')">
                  回原点
                </ft-button>
                <ft-button type="primary" :click-handle="() => debug_transportation_arm_move('z')">
                  开始
                </ft-button>
                <ft-button :click-handle="() => debug_transportation_arm_stop('z')">
                  停止
                </ft-button>
              </el-form-item>
            </el-form>
          </div>
          <el-divider>夹爪舵机</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="速度">
                <el-input v-model.number="debugStore.formData.transferModule.JawData.rate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="debug_holding_jaw_open">
                  打开
                </ft-button>
                <ft-button type="primary" :click-handle="debug_holding_jaw_close">
                  闭合
                </ft-button>
                <ft-button :click-handle="debug_holding_jaw_pause">
                  停止
                </ft-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card>
          <template #header>
            <div class="card-header">
              <span>门</span>
            </div>
          </template>
          <div class="card-box">
            <ft-button type="primary" :click-handle="door_open">
              开门
            </ft-button>
            <ft-button type="primary" :click-handle="door_close">
              关门
            </ft-button>
            <ft-button :click-handle="door_stop">
              停止
            </ft-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>加液模组</span>
            </div>
          </template>
          <el-divider>加液臂</el-divider>
          <div class="card-box">
            <el-form inline>
              <el-form-item label="大臂速度">
                <el-input v-model.number="debugStore.formData.liquidArmData.largeArmRotationRate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="大臂角度">
                <el-input v-model.number="debugStore.formData.liquidArmData.largeArmAngle" type="number" placeholder="请输入角度">
                  <template #append>
                    °
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="小臂速度">
                <el-input v-model.number="debugStore.formData.liquidArmData.smallArmRotationRate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="小臂角度">
                <el-input v-model.number="debugStore.formData.liquidArmData.smallArmAngle" type="number" placeholder="请输入角度">
                  <template #append>
                    °
                  </template>
                </el-input>
              </el-form-item>
            </el-form>

            <ft-button type="primary" :click-handle="liquid_arm_reset">
              复位
            </ft-button>
            <ft-button type="primary" :click-handle="liquid_arm_rotation">
              开始
            </ft-button>
            <ft-button :click-handle="liquid_arm_stop">
              停止
            </ft-button>
          </div>
          <el-divider>加液泵</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="加液速度">
                <el-input v-model.number="debugStore.formData.liquidPumpData.rate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="加液泵头">
                <el-select v-model="debugStore.formData.liquidPumpData.index" placeholder="请选择泵头">
                  <el-option v-for="item in 8" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="liquid_pump_pre_filling">
                  预充
                </ft-button>
                <ft-button :click-handle="liquid_pump_pre_evacuation">
                  排空
                </ft-button>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="liquid_pump_start">
                  启动
                </ft-button>
                <ft-button :click-handle="liquid_pump_stop">
                  停止
                </ft-button>
              </el-form-item>
            </el-form>
          </div>
          <el-divider>摇匀</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="摇匀速度">
                <el-input v-model.number="debugStore.formData.shakeSpeed.rate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <ft-button type="primary" :click-handle="shaker_start">
              开始
            </ft-button>
            <ft-button :click-handle="shaker_stop">
              停止
            </ft-button>
          </div>
        </el-card>
        <el-card>
          <template #header>
            <div class="card-header">
              <span>相机模组</span>
            </div>
          </template>
          <div class="card-box">
            <!--            <el-form> -->
            <!--              <el-form-item label="速度"> -->
            <!--                <el-input> -->
            <!--                  <template #append> -->
            <!--                    mm/s -->
            <!--                  </template> -->
            <!--                </el-input> -->
            <!--              </el-form-item> -->
            <!--              <el-form-item label="距离"> -->
            <!--                <el-input> -->
            <!--                  <template #append> -->
            <!--                    ° -->
            <!--                  </template> -->
            <!--                </el-input> -->
            <!--              </el-form-item> -->
            <!--              <el-form-item> -->
            <!--                <ft-button type="primary"> -->
            <!--                  抬升 -->
            <!--                </ft-button> -->
            <!--                <ft-button type="primary"> -->
            <!--                  下降 -->
            <!--                </ft-button> -->
            <!--              </el-form-item> -->
            <!--              <el-form-item> -->
            <!--                <ft-button type="primary"> -->
            <!--                  复位 -->
            <!--                </ft-button> -->
            <!--                <ft-button> -->
            <!--                  停止 -->
            <!--                </ft-button> -->
            <!--              </el-form-item> -->
            <!--            </el-form> -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>加热模组</span>
              <div>
                <el-select v-model="debugStore.formData.heatArea.index" style="width: 150px" placeholder="请选择区域">
                  <el-option v-for="item in 6" :key="item" :label="`A${item}`" :value="item" />
                </el-select>
              </div>
            </div>
          </template>
          <el-divider>升降电机</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="距离">
                <el-input v-model.number="debugStore.formData.heatArea.heatMotorData.distance" type="number" placeholder="请输入距离">
                  <template #append>
                    mm
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="速度">
                <el-input v-model.number="debugStore.formData.heatArea.heatMotorData.rate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <ft-button type="primary" :click-handle="pallet_elevator_lift_up">
              上升
            </ft-button>
            <ft-button type="primary" :click-handle="pallet_elevator_lift_down">
              下降
            </ft-button>
            <ft-button :click-handle="pallet_elevator_stop">
              停止
            </ft-button>
          </div>
          <el-divider>加热棒</el-divider>
          <div class="card-box">
            <el-form>
              <el-form-item label="温度">
                <el-input v-model.number="debugStore.formData.heatArea.heatTemperature.temperature" type="number" placeholder="请输入温度">
                  <template #append>
                    ℃
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="heater_start">
                  开始加热
                </ft-button>
                <ft-button :click-handle="heater_stop">
                  停止加热
                </ft-button>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="debug_heater_start_heat_maintaining">
                  开始恒温
                </ft-button>
                <ft-button :click-handle="debug_heater_stop_heat_maintaining">
                  停止恒温
                </ft-button>
              </el-form-item>
            </el-form>
          </div>
          <el-divider>拍子</el-divider>
          <div class="card-box">
            <ft-button type="primary">
              启动吸附
            </ft-button>
            <ft-button>
              停止吸附
            </ft-button>
          </div>
          <el-divider>风扇</el-divider>
          <div class="card-box">
            <ft-button type="primary" :click-handle="debug_fan_start">
              打开风扇
            </ft-button>
            <ft-button :click-handle="debug_fan_stop">
              关闭风扇
            </ft-button>
          </div>
        </el-card>
        <el-card>
          <template #header>
            <div class="card-header">
              <span>拍子存放模组</span>
            </div>
          </template>
          <div class="card-box">
            <el-form>
              <el-form-item label="速度">
                <el-input v-model.number="debugStore.formData.lidData.rate" type="number" placeholder="请输入速度">
                  <template #append>
                    mm/s
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="距离">
                <el-input v-model.number="debugStore.formData.lidData.distance" type="number" placeholder="请输入距离">
                  <template #append>
                    mm
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="debug_cover_elvator_lift_up">
                  抬升
                </ft-button>
                <ft-button type="primary" :click-handle="debug_cover_elvator_lift_down">
                  下降
                </ft-button>
              </el-form-item>
              <el-form-item>
                <ft-button type="primary" :click-handle="debug_cover_elvator_reset">
                  复位
                </ft-button>
                <ft-button :click-handle="debug_cover_elvator_stop">
                  停止
                </ft-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.debug-content {
  overflow: hidden;
  max-height: 100%;
  .el-row {
    height: 100%;
    overflow: auto;
  }
}

.el-card {
  margin-bottom: 10px;
}

:deep(.el-card__header) {
  padding: 5px 10px;
}

.el-input, .el-select {
  width: 100%;
}

.el-form-item {
  margin-bottom: 10px;
  margin-right: 10px;
}

.card-box {
  //display: flex;
  //align-items: center;
}

:deep(.el-input-group__append) {
  padding: 0 10px;
}
:deep(.el-card__header) {
  background:rgba(0,0,0,0.03);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-label {
  margin-right: 10px;
}
:deep(.el-card__body) {
  padding: 10px;
}
</style>
