<template>
  <div>
    <el-form>
      <el-form-item label="环境">
        <el-switch v-model="devMode" active-text="测试环境" inactive-text="正式环境"></el-switch>
      </el-form-item>
      <el-form-item label="场景">
        <el-switch v-model="scene1" active-text="无人机" inactive-text="机库"></el-switch>
      </el-form-item>
      <el-form-item label="使用标准航线库">
        <el-switch v-model="useSTLAirway" active-text="启用" inactive-text="关闭"></el-switch>
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="password"></el-input>
      </el-form-item>
      <el-form-item label="token">{{ userInfo }}</el-form-item>
      <el-button @click="login">登录</el-button>
    </el-form>
    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>上左</el-button>
    </el-tooltip>
    <div style="margin-top: 1080px;">
      <MMCFlightControlCenter
        style="width: 1920px; height: 1080px; position: absolute; left: 0; top: 600px;"
        v-if="userInfo"
        :userInfo="userInfo"
        :devMode="devMode"
        :uavTaskList="uavTaskList"
        :hangarTaskList="hangarTaskList"
        :airwayList="airwayList"
        :scene="scene"
        :useSTLAirway="useSTLAirway"
        @uavTaskStart="onUAVTaskStart"
        @uavTaskAdd="onUAVTaskAdd"
        @hangarChange="onHangarChange"
        @hangarTaskTabChange="onHangarTaskTabChange"
        @hangarTaskStart="onHangarTaskStart"
        @hangarTaskAdd="onHangarTaskAdd"
        @hangarTaskDel="onHangarTaskDel"
        @airwayPageChange="onAirwayPageChange"
      ></MMCFlightControlCenter>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";

export default {
  name: "fkzx1",
  data() {
    return {
      useSTLAirway: null,
      baseUrl: "https://test.tmj.mmcuav.cn",
      devMode: false,
      scene1: false, // 场景类型 true: 无人机 false: 机库
      account: "mmctest@admin",
      password: "test@Admin001",
      userInfo: null,
      uavTaskList: [
        {
          name: "任务1",
          id: 1,
          children: [
            {
              name: "任务2",
              id: 2,
              // children: [],
              airway: {
                name: "航线名称2",
                id: 2,
              },
            },
          ],
          airway: {
            name: "航线名称1",
            id: 1,
            content:
              '{"filename":"肇庆航线20240318","line":{"baseSpeed":3},"content":[{"uuid":"1nmI-Fo18IagbcVJsia7Q","latitude":23.178153411812204,"longitude":112.57807281336807,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"9pTbBPlF8iIwbUNqusyHK","latitude":23.17783116525969,"longitude":112.57797543441967,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"s91IhN22wuaeyG-UQs0XR","latitude":23.17786413506686,"longitude":112.57824336604547,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"xS_JIl3wxQrhMPdpcjcSn","latitude":23.17820934975604,"longitude":112.5781357731637,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]}],"baseSpeed":3,"gimbalYaw":0,"gimbalPitch":0,"alt":100}',
          },
        },
        {
          name: "任务2",
          id: 2,
          children: [],
          airway: {
            name: "航线名称2",
            id: 2,
            content:
              '{"filename":"肇庆航线20240318","line":{"baseSpeed":3},"content":[{"uuid":"1nmI-Fo18IagbcVJsia7Q","latitude":23.178153411812204,"longitude":112.57807281336807,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"9pTbBPlF8iIwbUNqusyHK","latitude":23.17783116525969,"longitude":112.57797543441967,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"s91IhN22wuaeyG-UQs0XR","latitude":23.17786413506686,"longitude":112.57824336604547,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"xS_JIl3wxQrhMPdpcjcSn","latitude":23.17820934975604,"longitude":112.5781357731637,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]}],"baseSpeed":3,"gimbalYaw":0,"gimbalPitch":0,"alt":100}',
          },
        },
      ],
      hangarTaskList: {
        // 常态
        normal: [
          /* 
          {
            name: "任务1",
            id: 1,
            airwayId: 105,
          },
          {
            name: "任务2",
            id: 2,
            airwayId: 106,
          }, */
        ],
        // 定时
        timed: [
          /* {
            name: "任务",
            id: 1,
            time: "2024-04-28 01:00:00", //定时与周期的时间
            status: "未执行", //任务状态
            airwayId: 105,
          }, */
        ],
        // 周期
        period: [
          /* {
                name: '任务',
                id: 1,
                time: '', //定时与周期的时间
                status: '', 任务状态
                airway: {
                  name: '航线名称',
                  id: 1
                }
              } */
        ],
      },
      airwayList: [
        {
          name: "航线名称1",
          id: 1,
          organizationName: "所属单位1",
          status: 1, //空域状态 1: 可用 2: 待申请 3: 待审批 4: 通过 5: 驳回
          isSafe: 1, //空域状态 1: 安全 2: 待确定
          labelName: "航线标签1",
          content:
            '{"filename":"肇庆航线20240318","line":{"baseSpeed":3},"content":[{"uuid":"1nmI-Fo18IagbcVJsia7Q","latitude":23.178153411812204,"longitude":112.57807281336807,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"9pTbBPlF8iIwbUNqusyHK","latitude":23.17783116525969,"longitude":112.57797543441967,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"s91IhN22wuaeyG-UQs0XR","latitude":23.17786413506686,"longitude":112.57824336604547,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"xS_JIl3wxQrhMPdpcjcSn","latitude":23.17820934975604,"longitude":112.5781357731637,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]}],"baseSpeed":3,"gimbalYaw":0,"gimbalPitch":0,"alt":100}',
        },
        {
          name: "航线名称2",
          id: 2,
          organizationName: "所属单位2",
          status: 2, //空域状态 1: 可用 2: 待申请 3: 待审批 4: 通过 5: 驳回
          isSafe: 2, //空域状态 1: 安全 2: 待确定
          labelName: "航线标签2",
          content:
            '{"filename":"肇庆航线20240318","line":{"baseSpeed":3},"content":[{"uuid":"1nmI-Fo18IagbcVJsia7Q","latitude":23.178153411812204,"longitude":112.57807281336807,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"9pTbBPlF8iIwbUNqusyHK","latitude":23.17783116525969,"longitude":112.57797543441967,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"s91IhN22wuaeyG-UQs0XR","latitude":23.17786413506686,"longitude":112.57824336604547,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"xS_JIl3wxQrhMPdpcjcSn","latitude":23.17820934975604,"longitude":112.5781357731637,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]}],"baseSpeed":3,"gimbalYaw":0,"gimbalPitch":0,"alt":100}',
        },
      ],
    };
  },
  computed: {
    scene(){
      return this.scene1 ? 1 : 2;
    }
  },
  watch: {
    devMode: {
      immediate: true,
      handler() {
        if (this.devMode) {
          this.account = "mmctest@admin";
          this.password = "test@Admin001";
          this.baseUrl = "https://test.tmj.mmcuav.cn";
        } else {
          this.account = "mmcadmin@kbt001";
          this.password = "TMJMMC@kbta0227&adm";
          this.baseUrl = "https://tmj.mmcuav.cn";
        }
      },
    },
  },
  async mounted() {},
  methods: {
    /**
     * 无人机通过航线创建任务
     */
    onUAVTaskAdd({ airway }) {
      console.log("无人机通过航线创建任务", airway);
      let id = Date.now();
      this.uavTaskList.push({
        name: "任务1",
        id: id,
        airwayId: airway.id,
        airway,
      });
    },
    onUAVTaskStart(uav, selectedTask, selectedAirway) {
      console.log("一键任务事件", uav, selectedTask, selectedAirway);
      // alert("一键任务事件");
    },
    /**
     * 更换机库事件
     */
    onHangarChange(hangar) {
      console.log("onHangarChange");
      if (hangar) {
        this.hangarTaskList = {
          // 常态
          normal: [
            {
              name: "任务1",
              id: 1,
              airwayId: 105,
            },
            {
              name: "任务2",
              id: 2,
              airwayId: 106,
            },
          ],
          // 定时
          timed: [
            {
              name: "任务",
              id: 1,
              time: "2024-04-28 01:00:00", //定时与周期的时间
              status: "未执行", //任务状态
              airwayId: 105,
            },
          ],
          // 周期
          period: [
            {
              name: "任务",
              id: 1,
              time: "2024-04-28 01:00:00 2024-05-28 01:00:00", //定时与周期的时间
              status: "未执行", //任务状态
              airwayId: 105,
            },
          ],
        };
      }
    },
    /**
     * 机库任务添加事件
     * @param {Object} param
     * @param {number} param.type 1: 日常任务 2: 定时任务 3:周期任务
     * @param {Object} param.airway 航线数据
     * @param {Function} params.callback 回调，参数为更新后新增的任务id, 仅日常任务有用
     * @param {Array} param.taskList 定时与周期任务创建的任务数组
     */
    onHangarTaskAdd({ type, airway, callback, taskList }) {
      console.log("onHangarTaskAdd", type, airway, taskList);
      let hangarTaskList = JSON.parse(JSON.stringify(this.hangarTaskList));
      switch (type) {
        case 1: {
          let id = Date.now();
          hangarTaskList.normal.push({
            name: "任务" + id,
            id: id,
            airwayId: airway.id,
            airway,
          });
          callback(id);
          break;
        }

        case 2: {
          let id = Date.now();
          let _taskList = taskList.map((item, i) => {
            return {
              ...item,
              id: id + String(i),
              status: "未执行",
              name: "任务" + (hangarTaskList.timed.length + 1),
            };
          });
          hangarTaskList.timed = hangarTaskList.timed.concat(_taskList);
          break;
        }

        case 3: {
          let id = Date.now();
          let _taskList = taskList.map((item, i) => {
            return {
              ...item,
              id: id + String(i),
              status: "未执行",
              name: "任务" + (hangarTaskList.period.length + 1),
              time: `${item.date[0]} ${item.time[0]} ${item.date[1]} ${item.time[1]}`,
            };
          });
          hangarTaskList.period = hangarTaskList.period.concat(_taskList);
          break;
        }
      }
      this.hangarTaskList = hangarTaskList;
    },
    /**
     * 机库任务tab更改事件
     * @param {object} param
     * @param {number} param.type  1: 日常任务 2: 定时任务 3:周期任务
     */
    onHangarTaskTabChange({ type }) {
      console.log("onHangarTaskTabChange", type);
    },
    /**
     * 机库开始任务
     * @param {object} param
     * @parma {number} param.type  1: 日常任务 2: 定时任务 3:周期任务
     * @param {object} param.task 任务对象
     * @param {object} param.airway 航线信息
     */
    onHangarTaskStart({ type, hangar, task, airway }) {
      console.log("onHangarTaskStart", type, hangar, task, airway);
    },
    /**
     * 删除机库任务
     * @param {object} param
     * @parma {number} param.type  1: 日常任务 2: 定时任务 3:周期任务
     * @param {object} param.task 任务对象
     */
    onHangarTaskDel({ type, task }) {
      console.log("onHangarTaskDel", type, task);
      let hangarTaskList = JSON.parse(JSON.stringify(this.hangarTaskList));
      switch (type) {
        case 2:
          hangarTaskList.timed = hangarTaskList.timed.filter(
            (item) => item.id !== task.id
          );
          break;

        case 3:
          hangarTaskList.period = hangarTaskList.period.filter(
            (item) => item.id !== task.id
          );
          break;
      }
      this.hangarTaskList = hangarTaskList;
    },
    /**
     * 航线分页更改
     */
    onAirwayPageChange({ page, pageSize, callback }) {
      console.log("航线分页更改", page, pageSize);
      callback({
        current: page, // 当前页码
        records: [
          {
            id: 1,
            name: "模拟航线" + `第${page}页`,
            organizationName: "机构名",
            status: "可用", //空域状态
            isSafe: 1, // 安全状态1: 安全 , 0: 待确定,
            labelName: "航线标签",
            //航线数据
            content:
              '{"filename":"盐城基地拍照录像","line":{"baseSpeed":6},"content":[{"uuid":"1uamoBnUN8je_2s5O7LAI","latitude":33.326034986025924,"longitude":120.2855868204341,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":2,"label":"拍照","key":"photo","checked":true,"value":1,"unit":"张"}]},{"uuid":"0V_BPu2m3u-zsCIVKRR7v","latitude":33.32572118330467,"longitude":120.28452270932941,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":2,"label":"拍照","key":"photo","checked":true,"value":1,"unit":"张"}]},{"uuid":"vXX0IkeE-z0BjMcQEG3f1","latitude":33.32483291531692,"longitude":120.28544172335158,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":3,"label":"录像","key":"video","checked":true,"value":0,"unit":"s"}]},{"uuid":"L32qDDlAiMtyKjoaySxHW","latitude":33.32576947678917,"longitude":120.28641994886797,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":3,"label":"录像","key":"video","checked":true,"value":0,"unit":"s"}]},{"uuid":"FYnNBx-i3bHkbEgt3QCWF","latitude":33.326686239734364,"longitude":120.28572577154279,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":3,"label":"录像","key":"video","checked":true,"value":0,"unit":"s"}]}],"baseSpeed":6,"gimbalYaw":0,"gimbalPitch":0,"alt":100}',
          },
        ],
        size: 10, // 当前页记录数
        total: 20, // 总记录灵
      });
    },
    async login() {
      let formData = new FormData();
      formData.append("userAccount", this.account);
      formData.append("password", Base64.encode(this.password));
      let res1 = await fetch(this.baseUrl + "/crm/login", {
        method: "post",
        headers: {
          // "Content-Type": "multipart/form-data",
        },
        body: formData,
      });
      let data1 = await res1.json();

      if (data1.code == 200) {
        await fetch(this.baseUrl + "/crm/user/platformPermission", {
          method: "get",
          headers: {
            Token: data1.data.token,
          },
        });
        this.userInfo = data1.data;
      }
    },
  },
};
</script>