<template>
  <div>
    <div class="police" v-interact>
      <div class="police_head">
        <div class="police_name">
          <div class="police_icon"></div>
          <div class="police_font">警灯</div>
        </div>
        <div class="police_font" @click="$emit('close')">关闭</div>
      </div>
      <div class="police_ceonter">
        <!-- 警灯模式 -->
        <div class="police_controls">
          <div class="plice_fontTwo">警灯模式:</div>
          <div>
            <el-radio-group v-model="alarmLampMode" @change="onChangeALMode">
              <el-radio :label="1">关闭</el-radio>
              <el-radio :label="2">慢闪</el-radio>
              <el-radio :label="3">快闪</el-radio>
              <el-radio :label="4">交替闪</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 尾灯 -->
        <div class="police_controls">
          <div class="plice_fontTwo">尾灯:</div>
          <div>
            <el-radio-group v-model="tailLightSwitch" @change="onSwitchTL">
              <el-radio :label="1">开</el-radio>
              <el-radio :label="2">关</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 降落伞灯 -->
        <div class="police_controls">
          <div class="plice_fontTwo">降落伞灯:</div>
          <div>
            <el-radio-group v-model="parachuteLightSwitch" @change="onSwitchPL">
              <el-radio :label="1">开</el-radio>
              <el-radio :label="2">关</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 隐蔽模式 -->
        <div class="police_controls">
          <div class="plice_fontTwo">隐蔽模式:</div>
          <div>
            <el-radio-group v-model="covertSwitch" @change="onSwitchCovert">
              <el-radio :label="1">开</el-radio>
              <el-radio :label="2">关</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AlarmLamp",
  props: {
    uav: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      alarmLampMode: "", //警灯模式
      tailLightSwitch: "", //尾灯开关
      parachuteLightSwitch: "", //降落伞灯开头
      covertSwitch: "", //隐蔽模式
    };
  },
  methods: {
    // 警灯控制
    // xing:类型：1警灯，2尾灯，3降落伞灯，4隐蔽
    // num：警灯模式下：1关闭，2慢闪，3快闪，4交替闪，其他模式为1打开，2关闭
    onChangeALMode(e) {
      let num = this.alarmLampMode;
      let data = {
        data: {
          param1: 1,
          param2: num,
        },
        type: 531,
      };
      let topic = `PX4/OBTAIN/${this.uav.deviceId}`;
      this.$store.dispatch("MMCMQTT/publish", {
        topic,
        data,
        callback() {
          console.log("发送成功");
        },
      });
    },
    // 尾灯判定
    onSwitchTL() {
      let num = this.tailLightSwitch;
      let data = {
        data: {
          param1: 2,
          param3: num,
        },
        type: 531,
      };
      let topic = `PX4/OBTAIN/${this.uav.deviceId}`;
      this.$store.dispatch("MMCMQTT/publish", {
        topic,
        data,
        callback() {
          console.log("发送成功");
        },
      });
    },
    // 降落伞灯
    onSwitchPL() {
      let num = this.parachuteLightSwitch;
      let data = {
        data: {
          param1: 3,
          param3: num,
        },
        type: 531,
      };
      let topic = `PX4/OBTAIN/${this.uav.deviceId}`;
      this.$store.dispatch("MMCMQTT/publish", {
        topic,
        data,
        callback() {
          console.log("发送成功");
        },
      });
    },
    // 隐蔽模式
    onSwitchCovert() {
      let num = this.covertSwitch;
      let data = {
        data: {
          param1: 4,
          param4: num,
        },
        type: 531,
      };
      let topic = `PX4/OBTAIN/${this.uav.deviceId}`;
      this.$store.dispatch("MMCMQTT/publish", {
        topic,
        data,
        callback() {
          console.log("发送成功");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 警灯弹框
.police {
  width: 475px;
  height: 200px;
  background: rgba(0, 39, 121, 0.5);
  border: 1px solid #43deff;
  backdrop-filter: blur(2px);
  pointer-events: auto;
  position: absolute;
  left: -490px;
  bottom: -89px;

  .police_head {
    background: linear-gradient(
      180deg,
      #9198ff 0%,
      rgba(45, 81, 153, 0.45) 40%,
      #05091a 100%
    );
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #70daf9;
    display: flex;
    justify-content: space-between;
    padding: 0 10px 0 10px;
    align-items: center;
    box-sizing: border-box;

    .police_name {
      display: flex;

      .police_icon {
        width: 5px;
        height: 15px;
        background: #ffbd36;
        margin: 0 10px 0 0;
      }
    }
  }

  .police_ceonter {
    width: 100%;
    height: calc(100% - 30px);
    padding: 24px;
    box-sizing: border-box;

    .police_controls::v-deep {
      display: flex;
      margin: 0 0 15px 0;

      .el-radio__label {
        color: #fff;
      }
    }
  }
}

.police_font {
  font-weight: 700;
  color: #2ddcfc;
  cursor: pointer;
}

.plice_fontTwo {
  width: 90px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
</style>