<template>
  <div class="w-100 h-100 mainBox">
    <!-- 弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh" @close="closeCallback"
      @open="openCallback">
      <!-- 起飞设置弹出框 -->
      <template v-if="dialogItem === 'takeoffBox'">
        <div class="flex mse mac">
          <el-slider class="w-100" v-model="takeoffValue" :show-tooltip="false" show-input :min="1" :max="100" />
          <font class="m-l-5">米</font>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
          <el-button size="medium" type="primary"
            @click="publishFun(`{guidedMode:{alt:${takeoffValue}}}`); speakText('确认起飞')">
            飞至
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- tab 控件组 -->
    <div class="flex column mr mac tabContainer p-l-10 p-r-10">
      <!-- 内容面板 -->
      <div class="tabContent" :class="{ active: activeIndex !== null }">
        <!-- 控制 -->
        <div v-if="activeIndex === 0" class="tabContentBox">
          <div class="clearB m-b-15 fb f-s-16 contentTit">
            <i class="iconfont icon-youxishoubing f-s-22 m-r-5"></i>
            <span>飞机控制</span>
          </div>
          <div class="butIconBox gap10 flex">
            <el-button size="medium" type="primary" class="flex1 butIcon"
              @click="confirmation('确认对全部飞机解锁？请确保飞行环境安全。', '解锁操作', '{unlock:1}'); speakText('解锁全部飞机')">
              <i class="iconfont icon-jiesuo f-s-24"></i>
              <div class="m-t-5">解锁</div>
            </el-button>
            <el-button size="medium" type="primary" class="flex1 butIcon"
              @click="confirmation('飞机全部加锁，螺旋桨将停转，请谨慎操作！', '加锁操作', '{lock:1}'); speakText('加锁全部飞机,请注意安全')">
              <i class="iconfont icon-suoding f-s-24"></i>
              <div class="m-t-5">加锁</div>
            </el-button>
            <el-button size="medium" type="primary" class="flex1 butIcon" @click="showTakeoffDialog">
              <i class="iconfont icon-yangshi_icon_tongyong_departure f-s-24"></i>
              <div class="m-t-5">起飞</div>
            </el-button>
            <el-button size="medium" type="primary" class="flex1 butIcon"
              @click="publishFun('{loiterMode:1}'); speakText('悬停')">
              <i class="iconfont icon-fengzheng1 f-s-24"></i>
              <div class="m-t-5">悬停</div>
            </el-button>
            <el-button size="medium" type="primary" class="flex1 butIcon"
              @click="publishFun('{rtlMode:1}'); speakText('返航')">
              <i class="iconfont icon-yijianfanhang f-s-24"></i>
              <div class="m-t-5">返航</div>
            </el-button>
            <el-button size="medium" type="primary" class="flex1 butIcon"
              @click="publishFun('{landMode:1}'); speakText('降落')">
              <i class="iconfont icon-yangshi_icon_tongyong_arriving f-s-24"></i>
              <div class="m-t-5">降落</div>
            </el-button>
          </div>
        </div>
        <!-- 重选 -->
        <div v-else-if="activeIndex === 1" class="tabContentBox">
          <div class="clearB m-b-15 fb f-s-16 contentTit">
            <i class="iconfont icon-zhongxuanwenjian f-s-22 m-r-5"></i>
            <span>重新选择飞机</span>
          </div>
          <el-button type="danger" size="medium" class="m-t-10" @click="confirmReselect">
            确认重选
          </el-button>
        </div>
      </div>

      <!-- tab 按钮组 -->
      <div class="flex gap10 m-b-10 taButGroup">
        <div class="flex1 h-100 taBut flex column mac mc animation" :class="activeIndex === index ? 'taButBG' : ''"
          v-for="(item, index) in controlItems" :key="index" @click="toggleContent(index, item.voice)">
          <i :class="item.icon" class="iconfont f-s-35 no-select"></i>
          <div class="m-t-15 fb f-s-18 no-select">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mqtt from '@/utils/mqtt'
import { speakText } from '@/utils/index'

export default {
  name: 'TabController',
  props: {
    planes: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      dialogTitle: '',
      dialogItem: '',
      dialogVisible: false,
      takeoffValue: 2,
      controlItems: [
        { title: '控制', icon: 'icon-youxishoubing', voice: '控制飞机' },
        { title: '重选', icon: 'icon-zhongxuanwenjian', voice: '重新选择飞机' }
      ],
      activeIndex: null,
      tabIsOpen: false
    }
  },
  computed: {
    isMobile () {
      return this.$store.state.app.isMobile
    }
  },
  methods: {
    speakText,
    /** 关闭弹出框后的处理 */
    closeCallback () {
      if (this.dialogItem === 'compassBox') this.handlerCloseCompassBox()
      else if (this.dialogItem === 'acceBox') this.handlerCloseAcceBox()
    },
    /** 打开弹出框时处理 */
    openCallback () { },

    /** 切换 tab 内容 */
    toggleContent (index, voice) {
      const wasActive = this.activeIndex === index
      this.activeIndex = wasActive ? null : index

      if (this.tabIsOpen) {
        if (!wasActive) {
          this.tabIsOpen = false
          this.$emit('mapXOffset', 0, -200)
        } else {
          this.speakText(voice)
        }
      } else {
        this.tabIsOpen = true
        this.$emit('mapXOffset', 0, 200)
        this.speakText(voice)
      }
    },

    /** 打开发送起飞指令的对话框 */
    showTakeoffDialog () {
      this.dialogVisible = true
      this.dialogTitle = '高度设置'
      this.dialogItem = 'takeoffBox'
      this.speakText('设置起飞高度')
    },

    /** 群发 MQTT 指令 */
    publishFun (jsonData) {
      if (!this.planes || this.planes.length === 0) {
        return this.$message.warning('没有连接的飞机')
      }
      this.planes.forEach(plane => {
        if (plane.macadd) {
          mqtt.publishFun(`cmd/${plane.macadd}`, jsonData)
        }
      })
    },
    // 重选飞机 确定
    confirmReselect () {
      this.$confirm('将清空当前选中的所有飞机，是否确认重选？', '确认重选', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.state.app.swarmIdArr = []
        this.$router.replace('/register/index')
      }).catch(() => {
        this.$message.info('取消重选操作')
      })
    },

    /** 弹窗确认发送指令 */
    confirmation (msg, title, instruct) {
      this.$confirm(msg, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.publishFun(instruct)
        })
        .catch(() => {
          this.$message.info('取消操作！')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.danger-color {
  color: $danger-color;
  font-weight: bold;
}

.mainBox {
  position: absolute;
}

.tabContainer {
  width: 100%;
  height: 100%;
}

.tabContent {
  z-index: 90;
  position: relative;
  width: 100%;
  max-width: 470px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  top: -50px;
  opacity: 0;
  transition: top 0.5s ease, opacity 1s ease;
}

.tabContent.active {
  top: -10px;
  opacity: 1;
}

.tabContentBox {
  padding: 20px;
}

.contentTit i {
  vertical-align: middle;
}

.butIconBox {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
}

.butIcon {
  border-radius: 10px;
  text-align: center;
  border: none;
  margin-left: 0 !important;
}

.taButGroup {
  position: relative;
  width: 100%;
  max-width: 470px;
  height: 105px;
  cursor: pointer;
  z-index: 90;
}

@media (max-width: 480px) {
  .taButGroup {
    height: calc((100vw - 50px) / 4);
  }

  .tabContainer {
    width: 100vw;
  }
}

.taBut {
  color: $maintext-color;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.taButBG {
  color: $graylight-color;
  background-color: $brand-color;
}

.gap10 {
  gap: 10px;
}
</style>
