<template>
  <div class="tab-container">
    <el-button size="medium" type="primary" :class="activeIndex === index ? 'butIconGroupBG' : ''" class="butIconGroup"
      v-for="(item, index) in controlItems" :key="index" @click="toggleContent(index)">
      <i :class="item.icon" class="iconfont f-s-35"></i>
      <div class="m-t-5 fb">{{ item.title }}</div>
    </el-button>
    <!-- 子内容菜单 -->
    <div class="content" :class="{ 'active': activeIndex !== null }">
      <!-- 订单任务 -->
      <div v-if="activeIndex === 0" class="contentBox">
        <!-- 标题 -->
        <div class="clearB m-b-10 fb f-s-16 contentTit">
          <i class="iconfont icon-dingdanguanli f-s-22 m-r-5"></i>
          <span>送餐任务</span>
        </div>
        <!-- 内容 -->
        <el-form label-position="left" ref="questForm" :model="questForm" label-width="80px">
          <el-form-item label="订单任务">
            <el-select v-model="questForm.id" :filterable="isMobile" placeholder="请选择，也可输入搜索" :disabled="airLock">
              <el-option v-for="item in questList" :key="item.id" :label="item.id" :value="item.id">
                <span class="l">{{ item.id }}</span>
                <span class="l m-l-5">{{ item.name }}</span>
                <span class="l m-l-5">{{ item.receive_site_name }}</span>
                <span v-for="product in item.products" :key="product.id" class="l m-l-5">{{
                  product.name
                }}-{{ product.pro_buff }}-{{ product.num }}份</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="飞机操作">
            <el-button-group>
              <el-button size="mini" class="f-s-14" v-if="planeState & 1 && airLock" key="pubBut" type="info"
                icon="iconfont el-icon-loading" disabled>
                <font class="m-l-5">航线锁定</font>
              </el-button>
              <el-button size="mini" class="f-s-14" v-if="planeState & 1 && !airLock" type="primary"
                icon="f-s-14 iconfont icon-chakanzhihangrizhi" @click="runQuest">
                <font class="m-l-5">提交任务</font>
              </el-button>
              <el-button size="mini" class="f-s-14" v-if="planeState & 2" key="wirteBut" type="info"
                icon="f-s-14 iconfont el-icon-loading" disabled>
                <font class="m-l-5">航点写入中···</font>
              </el-button>
              <el-button size="mini" class="f-s-14" v-if="planeState & 4 && !(planeState & 16)" type="warning"
                icon="f-s-14 iconfont icon-jiesuo"
                @click="publishFun('{setPlaneState:{bit:3,state:1,count:2,param:[1,0]}}')">
                <font class="m-l-5">解锁飞机</font>
              </el-button>
              <el-button size="mini" class="f-s-14" v-if="planeState & 16 && !(planeState & 1) && !(planeState & 2)"
                type="success" icon="f-s-14 iconfont icon-yangshi_icon_tongyong_departure"
                @click="publishFun('{setPlaneState:{bit:5,state:1}')">
                <font class="m-l-5">执行任务</font>
              </el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item label="订单操作">
            <el-button-group>
              <el-button size="mini" class="f-s-14" type="danger" icon="iconfont icon-meiyoudingdan-01" key="celBUt"
                @click="reQuest">
                <font class="m-l-5">取消</font>
              </el-button>
              <el-button size="mini" class="f-s-14" type="success" icon="iconfont icon-qiandai" key="bingBut"
                @click="overQuest">
                <font class="m-l-5">已送达</font>
              </el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 飞机操作 -->
      <template v-if="activeIndex === 1">
        <!-- 标题 -->
        <div class="clearB m-b-10 fb f-s-16 contentTit">
          <i class="iconfont icon-youxishoubing f-s-22 m-r-5"></i>
          <span>飞机控制</span>
        </div>
        <div class="butIconBox">
          <el-button size="medium" type="primary" class="butIcon border"
            @click="publishFun('{setPlaneState:{bit:3,state:1,count:2,param:[1,0]}}')">
            <i class="iconfont icon-jiesuo f-s-24"></i>
            <div class="m-t-5">解锁</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border"
            @click="publishFun('{setPlaneState:{bit:3,state:0,count:2,param:[0,21196]}}')">
            <i class="iconfont icon-suoding f-s-24"></i>
            <div class="m-t-5">加锁</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border"
            @click="publishFun('{setPlaneState:{bit:6,state:1,count:1,param:[2]}')">
            <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="butIcon border"
            @click="publishFun('{setPlaneState:{bit:7,state:1}')">
            <i class="iconfont icon-fengzheng1 f-s-24"></i>
            <div class="m-t-5">悬停</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border">
            <i class="iconfont icon-duandianxufei f-s-24"></i>
            <div class="m-t-5">恢复航点</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border"
            @click="publishFun('{setPlaneState:{bit:9,state:1}')">
            <i class="iconfont icon-yijianfanhang f-s-24"></i>
            <div class="m-t-5">返航</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border"
            @click="publishFun('{setPlaneState:{bit:5,state:1}')">
            <i class="iconfont icon-yangshi_icon_tongyong_arriving f-s-24"></i>
            <div class="m-t-5">降落</div>
          </el-button>
        </div>
      </template>
      <!-- 附加模组操作 -->
      <template v-if="activeIndex === 2">
        <!-- 标题 -->
        <div class="clearB m-b-10 fb f-s-16 contentTit">
          <i class="iconfont icon-mianxingdiaogou f-s-22 m-r-5"></i>
          <span>挂载仓控制</span>
        </div>
        <div class="butIconBox">
          <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:4')">
            <i class="iconfont icon-zhongliang f-s-24"></i>
            <div class="m-t-5">重量归零</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:0')">
            <i class="iconfont icon-xiangshang f-s-24"></i>
            <div class="m-t-5">收钩</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:3')">
            <i class="iconfont icon-qiyong f-s-24"></i>
            <div class="m-t-5">继续</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:2')">
            <i class="iconfont icon-xuanting-zanting f-s-24"></i>
            <div class="m-t-5">暂停</div>
          </el-button>
        </div>
        <!-- 标题 -->
        <div class="clearB m-b-10 fb f-s-16 contentTit">
          <i class="iconfont icon-shipinjiankong f-s-22 m-r-5"></i>
          <span>摄像头控制</span>
        </div>
        <div class="butIconBox">
          <el-button size="medium" type="primary" class="butIcon border"
            @click="publishFun('{cameraController:{item:0,val:0}')">
            <i class="iconfont icon-icon-rotation f-s-24"></i>
            <div class="m-t-5">一键回中</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border"
            @click="publishFun('{cameraController:{item:2,val:0,yaw:0,pitch:-1}}')">
            <i class="iconfont icon-rotateX f-s-24"></i>
            <div class="m-t-5">一键俯视</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border">
            <i class="iconfont icon-rotateY f-s-24"></i>
            <div class="m-t-5">旋转</div>
          </el-button>
          <el-button size="medium" type="primary" class="butIcon border">
            <i class="iconfont icon-fangda f-s-24"></i>
            <div class="m-t-5">焦距</div>
          </el-button>
        </div>
        <!-- 标题 -->
        <div class="clearB m-b-10 fb f-s-16 contentTit">
          <i class="iconfont icon-tongzhi f-s-22 m-r-5"></i>
          <span>喇叭控制</span>
        </div>
        <div class="butIconBox">
          <el-button size="medium" type="primary" class="butIcon border">
            <i class="iconfont icon-icon-test f-s-24"></i>
            <div class="m-t-5">喊话</div>
          </el-button>
        </div>
      </template>
      <!-- 飞机调试 -->
      <template v-if="activeIndex === 3">
        <!-- 标题 -->
        <div class="clearB m-b-10 fb f-s-16 contentTit">
          <i class="iconfont icon-tongzhi f-s-22 m-r-5"></i>
          <span>飞机调试</span>
        </div>
        <div class="butIconBox">
          <el-button size="medium" type="primary" class="butIcon border">
            <i class="iconfont icon-icon-test f-s-24"></i>
            <div class="m-t-5">喊话</div>
          </el-button>
        </div>
      </template>
    </div>
    <!-- end 子内容菜单 -->
  </div>
</template>

<script>
import { questAss } from '@/utils/api/table'
import mqtt from '@/utils/mqtt'

export default {
  name: 'TabController',
  data () {
    return {
      controlItems: [// 菜单
        { title: '任务', icon: 'icon-songcanfuwu' },
        { title: '控制', icon: 'icon-youxishoubing' },
        { title: '扩展', icon: 'icon-linghuokuozhan' },
        { title: '调试', icon: 'icon-banshou_Line' }
      ],
      activeIndex: null, // 当前选中的菜单
      tabIsOpen: false, // 判断tab 是否弹出
      questForm: { // 送餐任务表单
        id: ''
      },
      planesId: this.$route.params.id, // 飞机id
      airLock: false // 当前飞机是否被锁定
    }
  },
  props: {
    plane: {
      typeof: 'Object',
      deep: true
    }
  },
  computed: {
    /**
     * @description: 终端平台是否是pc
     */
    isMobile () {
      return this.$store.state.app.isMobile
    },
    /**
     * @description: 飞机状态
     */
    planeState () {
      const plane = this.plane
      return plane ? plane.planeState.state : null
    },
    /**
     * @description: 已付款 已承接 未发货 未发起退款 订单列表
     */
    questList () {
      const plane = this.plane
      return plane ? this.$store.state.questList.filter((item) => item.shop_id === plane.shop_id && item.quest === '1' && item.status === '20' && item.back === '0' && item.runing === null) : []
    },
    /**
     * @description: 已付款 已承接 已发货 订单列表
     */
    overQuestList () {
      return this.$store.state.questList.filter((item) => item.quest === '1' && item.status === '30' && item.runing != null)
    },
    /**
     * @description: 航线列表
     */
    routeList () {
      return this.$store.state.routeList
    },
    /**
     * @description: 获取站点列表
     */
    siteList () {
      return this.$store.state.siteList
    }
  },
  methods: {
    questAss,
    /**
     * @description: 菜单切换 PS:UI
     * @param {*} index 序号
     */
    toggleContent (index) {
      this.activeIndex = this.activeIndex === index ? null : index
      if (this.tabIsOpen) {
        if (index !== this.activeIndex) {
          this.tabIsOpen = false
          this.$emit('mapXOffset', -200)
        }
      } else {
        this.tabIsOpen = true
        this.$emit('mapXOffset', 200)
      }
    },
    /**
     * @description: 发布 mqtt 信息
     * @param {*} jsonData {'item':val} // item: questAss飞行航点任务 setPlaneState 设置飞机状态 getPlaneState获取飞机状态 resetState设置飞机初始状态 chan1油门通道1 chan2油门通道2  chan3油门通道3  chan4油门通道4 hookConteroller钩子控制 cameraController云台相机控制
     */
    publishFun (jsonData) {
      if (this.plane) {
        const val = jsonData
        mqtt.publishFun(`cmd/${this.plane.macadd}`, val)
      } else {
        this.$message.warning('与飞机通信未接通,请稍后')
      }
    },
    /**
     * @description: 执行订单任务
     */
    runQuest () {
      if (this.questForm.id === '') {
        this.$message.error('未选择订单任务!')
        return
      }
      let i
      this.questList.map((item) => {
        if (this.questForm.id === item.id) {
          i = true
          /* 插入日志 */
          this.$store.dispatch('fetchLog', { content: `${this.plane.name} 开始执行 订单ID：${item.id}、叫餐号：${item.food_sn}号。` })
          /* 执行写在这里 */
          if (item.bind_route === null) { // 判断站点是否已经绑定站点 中断操作
            this.$message.error('此站点，未绑定任务航点')
            return
          }
          let routeData
          try {
            const bindRoute = item.bind_route.split(',')
            routeData = this.routeList.find(element => element.id === bindRoute[0]).route_data
            routeData = JSON.parse(routeData)// 反序列化
            /* 处理声音航点 航点里面的表达式 如$food_sn$ 正则替换成订单对应的字段 */
            item.telTail = item.tel.substr(-4)// 手动加一个手机尾号telTail字段 从 tel字段截取后四位
            routeData.tasks.forEach((x, index) => {
              if (x.sound) {
                const str = this.voiceRouteParse(item, x.sound)
                routeData.tasks[index].sound = str// 重新写入声音航点
              }
            })
            routeData = JSON.stringify(routeData)// 重新序列化
          } catch (error) {
            this.$message.error('操作失败,请重新尝试')
          }
          this.publishFun(`{"questAss":${routeData}}`)// 发送航点信息主题
          this.questAss(item.id, 'status', '30')// 订单改为发货状态
          this.$store.dispatch('fetchLockSite', { id: item.receive_site_id, runing: this.plane.id })// 航线注册飞机 锁定送餐点
        }
      })
      if (i) { return }
      this.$message.error('此订单已被申请退款或者订单已经被取消!')
    },
    /**
     * @description: 匹配声音航点字符串 比如$food_sn$ food_sn匹配成 送餐订单里面的对应字段
     * @param {*} questItem 送餐的订单 ps:从数据库里拿的 订单信息对象
     * @param {*} voiceRouteStr 声音航点的字符串
     */
    voiceRouteParse (questItem, voiceRouteStr) {
      // 定义正则表达式
      const regex = /\$(.*?)\$/g
      // 使用replace()方法进行匹配和替换
      const replacedStr = voiceRouteStr.replace(regex, (match, p1) => {
        // match表示匹配到的字符串，p1表示捕获组中的内容
        return questItem[p1] // 用捕获组的内容替换匹配到的字符串
      })
      // 输出替换后的字符串
      return replacedStr // 输出 "请45号电话为13301115846的先生取餐"
    },
    /**
     * @description: 取消任务
     */
    reQuest () {
      if (!this.airLock) { // 只有飞机锁定状态 才向量下执行 "取消"操作
        return
      }
      this.$confirm('确认复位飞机状态，并清除航线的锁定?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.overQuestList.forEach((item) => {
          if (item.runing === this.planesId) {
            /* 插入日志 */
            this.$store.dispatch('fetchLog', { content: `订单ID：${item.id},送餐任务取消。` })
            /* 执行写在这里 */
            this.publishFun('{"resetState":1}')// 发送设置飞机状态主题 状态设为闲置
            this.questAss(item.id, 'status', '20')// 订单改回到发货状态之前 既“已付款状态”
            this.$store.dispatch('fetchLockSite', { id: item.receive_site_id, runing: 'null' })// 解锁航线
          }
        })
      }).catch(() => {
        this.$message.info('取消操作！')
      })
    },
    /**
   * @description: 已送达任务
   */
    overQuest () {
      if (!this.airLock) { // 只有飞机锁定状态 才向量下执行 "已送达"操作
        return
      }
      this.$confirm('确认将订单状态改为已送达吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认执行
        this.overQuestList.map((item) => {
          if (item.runing === this.planesId) { // 找出当前飞机正在执行的任务
            /* 插入日志 */
            this.$store.dispatch('fetchLog', { content: `订单ID：${item.id} 送餐任务已完成。` })
            /* 执行写在这里 */
            this.publishFun('{"resetState":1}')// 发送设置飞机状态主题 状态设为闲置
            this.questAss(item.id, 'status', '40')// 订单改为已完成状态
            this.$store.dispatch('fetchLockSite', { id: item.receive_site_id, runing: 'null' })// 解锁航线
          }
        })
      }).catch(() => {
        this.$message.info('取消操作！')
      })
    },
    /**
     * @description: 在地图上绘制航线
     */
    makeRouteForMap () {
      let bindRoute
      let routeData
      this.siteList.forEach(item => {
        if (item.runing === this.planesId) {
          // 获取航点信息
          if (item.bind_route !== null) { // 判断站点是否已经绑定站点
            bindRoute = item.bind_route.split(',')
            this.$store.dispatch('fetchRouteList').then(res => { // 只能异步拿 虽然效率低一些
              routeData = res.find(element => element.id === bindRoute[0]).route_data
              this.$emit('makeRoute', JSON.parse(routeData))
            })
          } else {
            this.$message.error('此站点，未绑定任务航点')
          }
        }
      })
    }
  },
  created () {
    if (this.siteList && this.routeList) {
      this.airLock = this.siteList.some(item => item.runing === this.planesId)
    }
  },
  watch: {
    airLock (val) {
      if (val) { // 如果当前飞机正在执行任务 把航线绘制到地图上
        this.makeRouteForMap()
      } else { // 如果没有执行任务 把地图上航线清除
        this.$emit('clearRoute')
      }
      this.$store.dispatch('fetchQuestList')// 刷新订单列表
      this.$store.dispatch('fetchSiteList')// 刷新站点列表
    },
    siteList (val) {
      this.airLock = val.some(item => item.runing === this.planesId)
    }
  }

}
</script>

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

.tab-container {
  height: 365px;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.butIconGroup {
  color: $maintext-color;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  padding: 5px;
  width: 80px;
  height: 80px;
  text-align: center;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
}

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

.butIconGroup:last-of-type {
  margin-bottom: 0px;
}

.content {
  color: $maintext-color;
  border-radius: 15px;
  height: 100%;
  position: fixed;
  right: -400px;
  top: 50%;
  transform: translateY(-50%);
  width: 350px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
}

.content.active {
  right: 95px;
}

.contentTit i {
  vertical-align: middle;
}

.butIcon {
  border-radius: 10px;
  padding: 5px;
  width: 66px;
  height: 66px;
  text-align: center;
  border: none;
  float: left;
  margin: 0px !important;
  margin-bottom: 15px !important;
  margin-right: 15px !important;
}

.butIconBox .butIcon:nth-child(4n) {
  margin-right: 0 !important;
}
</style>
