<template>
  <div class="police dialog1027" v-interact>
    <div class="dialog-header">
      <img class="dialog-header__icon" src="../../assets/images/mount_head.png" />
      <div class="dialog-header__title">警灯</div>

      <div class="dialog-header__close" @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>
</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;
  pointer-events: auto;
  position: absolute;
  left: -490px;
  bottom: -89px;
  border-radius: 12px 12px 0px 0px;
  background: #222222;

  .police_head {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    background: #3c3c3c;
    border-radius: 12px 12px 0px 0px;
    padding: 0 10px;

    .police_name {
      display: flex;

      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      color: #14faff;
      line-height: 26px;
      text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
      background: linear-gradient(
        135deg,
        #e3aa77 0%,
        #f5cda9 38%,
        #f9ecd3 58%,
        #fcdbb1 79%,
        #edb07a 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .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: #fff;
  cursor: pointer;
}

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