<template>
  <div class="pointList">
    <div class="points" :style="infoShow ? 'height:208px':''">
      <div class="title">
        <div class="w100"></div>
        <div>{{ pointInfo ? "航点" + pointInfo.id : "" }}</div>
        <div class="right">
          <div
            class="btn"
            :class="disable && pointList.length >= 2 ? 'active':''"
            v-if="disable && pointList.length >= 2"
            @click="saveLine"
          >生成航线</div>
          <div class="btn" v-else>生成航线</div>
          <div class="close" @click="$emit('close')">关闭</div>
        </div>
      </div>
      <div class="list" v-if="!infoShow">
        <div class="item" v-for="(item, i) in pointList" :key="i">
          <img :src="item.img" alt @click="getItem(item)" />
          <img class="img" src="./assets/images/close.png" alt @click="delPoint(i)" />
        </div>
        <div class="box el-icon-plus" @click="getPoint()"></div>
      </div>
      <div class="info" v-else>
        <div class="return el-icon-arrow-left cp" @click="save_point"></div>
        <div class="point">
          <div class="form">
            <div class="info" :class="active == 2 ? 'active' : ''" @click="getActive(2)">
              <div class="num">{{ pointInfo.alt.toFixed(2) }}</div>
              <div class="name">高度</div>
            </div>
            <div class="info" :class="active == 3 ? 'active' : ''" @click="getActive(3)">
              <div class="num">{{ pointInfo.heading.toFixed(2) }}</div>
              <div class="name">偏航角</div>
            </div>
            <div class="info" :class="active == 4 ? 'active' : ''" @click="getActive(4)">
              <div class="num">{{ pointInfo.actions[0].param3.toFixed(2) }}</div>
              <div class="name">云台偏航</div>
            </div>
            <div class="info" :class="active == 5 ? 'active' : ''" @click="getActive(5)">
              <div class="num">{{ pointInfo.actions[0].param1.toFixed(2) }}</div>
              <div class="name">云台俯仰</div>
            </div>
            <div class="info" :class="active == 6 ? 'active' : ''" @click="getActive(6)">
              <div class="num">{{ (pointInfo.actions[1].param2).toFixed(2) + "X" }}</div>
              <div class="name">变焦</div>
            </div>
            <div class="info" :class="active == 7 ? 'active' : ''" @click="getActive(7, 'ai')">
              <div class="num">{{ checkedAI(aiList) + "/" + aiList.length }}</div>
              <div class="name">AI识别</div>
            </div>
            <div class="info" :class="active == 8 ? 'active' : ''" @click="getActive(8, 'stay')">
              <div class="num">{{ this.min + "分" + this.se + "秒" }}</div>
              <div class="name">悬停</div>
            </div>
            <div class="info" :class="active == 9 ? 'active' : ''" @click="getActive(9, 'speed')">
              <div class="num">{{this.speed}}M/S</div>
              <div class="name">速度</div>
            </div>
          </div>
          <div class="ai" v-if="aiShow">
            <!-- <div class="head">AI识别</div> -->
            <div
              class="item"
              :class="item.switch ? 'itemActive' : !item.switch && item.history ? 'itemAfter':'itemHover'"
              v-for="item in aiList"
              :key="item.id"
            >
              <div class="check">
                <div class="flexs" @click="getcheck(item)">
                  <div class="type">{{ item.type }}</div>
                  <!-- <el-switch v-model="item.switch"></el-switch> -->
                  <div class="img">
                    <img :src="item.img" alt />
                  </div>
                </div>
                <el-checkbox v-model="item.check" :disabled="!item.switch">单点</el-checkbox>
              </div>
            </div>
          </div>
          <div class="stay" v-if="stayShow">
            <el-input-number @change="getMinte" v-model="min" :max="30" :min="0"></el-input-number>分
            <el-input-number v-model="se" :max="maxSe" :min="0"></el-input-number>秒
          </div>
          <div class="stay" v-if="speedStatus">
            速度
            <el-input-number v-model="speed" :max="12" :min="1"></el-input-number>M/S
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import response from "./methods/response";
import { Utils } from "../../../../../../lib/cesium";
import { mapState } from "vuex";
import { flightTaskAPI } from "../../../../../../api";
import { nanoid } from "nanoid";
import svgFace from "./assets/images/face.svg";
import svgCar from "./assets/images/car.svg";
import svgPeople from "./assets/images/people.svg";
import svgSwim from "./assets/images/swim.svg";
import svgYan from "./assets/images/yan.svg";
import svgThings from "./assets/images/things.svg";

export default {
  props: {
    uavRealTimeData: {
      type: Object,
      default: () => ({}),
    },
  },
  inject: ["bus", "rootNode"],
  data() {
    return {
      disable: true, // 生成航线按钮是否可用
      pointList: [], // 航线数据
      pointInfo: null, //航点信息
      infoShow: false, //是否展示航点信息
      eo_zoom: 0, //变焦
      pitch: 0, //俯仰
      yaw: 0, //偏航
      active: 2, //当前编辑的动作
      aiShow: false, // 展示ai编辑
      stayShow: false, //展示停留编辑
      speedStatus: false, // 展示速度编辑
      speed: 6, // 速度值
      min: 0, // 停留分值
      se: 0, // 停留秒值
      maxSe: 59, // 停留最大秒值
      aiList: [
        {
          id: 1,
          type: "人脸识别",
          switch: false,
          check: false,
          img: svgFace,
        },
        {
          id: 2,
          type: "车牌识别",
          switch: false,
          check: false,
          img: svgCar,
        },
        {
          id: 3,
          type: "人流识别",
          switch: false,
          check: false,
          img: svgPeople,
        },
        {
          id: 4,
          type: "游泳识别",
          switch: false,
          check: false,
          img: svgSwim,
        },
        {
          id: 7,
          type: "烟雾识别",
          switch: false,
          check: false,
          img: svgYan,
        },
        {
          id: 6,
          type: "异物识别",
          switch: false,
          check: false,
          img: svgThings,
        },
      ],
      lineNameAI: "",
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["userInfo"]),
  },
  watch: {
    mountData: {
      handler(val) {
        this.set_payload_data(val.payload);
      },
    },
  },
  methods: {
    ...response,
    getMinte() {
      if (this.min == 30) {
        this.se = 0;
        this.maxSe = 0;
      } else {
        this.maxSe = 59;
      }
    },
    getcheck(item) {
      item.switch = !item.switch;
      if (!item.switch) {
        item.check = false;
      }
    },
    checkedAI() {
      let num = 0;
      this.aiList.forEach((val) => {
        if (val.switch) {
          num++;
        }
      });
      return num;
    },
    save_point() {
      this.infoShow = false;
      if (this.pointInfo) {
        if (this.pointList.length > 0) {
          this.pointList.forEach((val) => {
            if (val.id == this.pointInfo.id) {
              console.log(val, "val");
              val.speed = this.speed;
              // this.$set(val, "aiList", this.aiList);
              val.aiList = JSON.parse(JSON.stringify(this.aiList));
              val.actions[2].param1 = this.min * 60 + this.se;
            }
          });
        }
      }
      console.log(this.aiList, "save");
      // console.log(this.pointInfo);
      // console.log(this.pointList);
    },
    getPoint() {
      let blob = this.$parent.screenShot();
      let img = null;
      let _this = this;
      blobToBase64(blob, async (base64DataUrl) => {
        img = base64DataUrl;
        let data = {
          id: _this.pointList.length + 1,
          img: img,
          lat: _this.uavRealTimeData?.locationCoordinate3D?.latitude || 0,
          lon: _this.uavRealTimeData?.locationCoordinate3D?.longitude || 0,
          alt:
            _this.uavRealTimeData &&
            _this.uavRealTimeData.rtk &&
            _this.uavRealTimeData.rtk.type == 19 &&
            _this.uavRealTimeData.rtk.isMainSensor
              ? _this.uavRealTimeData.rtk.relativeAlt
              : _this.uavRealTimeData.gps
              ? _this.uavRealTimeData.gps.relativeAlt
              : 0,
          speed: this.speed,
          frame: 3,
          isYawEnable: true,
          // isGimbalPitchEnable: true,
          heading: _this.uavRealTimeData?.attitude?.yaw || 0,
        };
        let actions = [
          {
            actionType: "GIMBAL_PITCH",
            param2: 0,
            param1: _this.pitch,
            param3: _this.yaw,
            param4: 2,
          },
          {
            actionType: "CAMERA_ZOOM",
            param1: 2,
            param2: _this.eo_zoom,
          },
          {
            actionType: "STAY",
            param1: 0,
          },
        ];
        _this.$set(data, "actions", actions);
        // console.log(data, "datatattaatatat");
        _this.pointList.push(data);
        _this.pointInfo = data;
        _this.infoShow = true;
        _this.getDe();
        console.log("新增航点", _this.pointList);
      });
      function blobToBase64(blob, callback) {
        if(!blob){
          callback(null);
          return;
        }
        let reader = new FileReader();
        reader.onload = () => {
          callback(reader.result);
        };
        reader.readAsDataURL(blob);
      }
    },
    delPoint(i) {
      this.pointList.splice(i, 1);
      if (this.pointList.length > 0) {
        this.aiList = this.pointList[this.pointList.length - 1].aiList;
      } else {
        this.aiList = [
          {
            id: 1,
            type: "人脸识别",
            switch: false,
            check: false,
            img: svgFace,
          },
          {
            id: 2,
            type: "车牌识别",
            switch: false,
            check: false,
            img: svgCar,
          },
          {
            id: 3,
            type: "人流识别",
            switch: false,
            check: false,
            img: svgPeople,
          },
          {
            id: 4,
            type: "游泳识别",
            switch: false,
            check: false,
            img: svgSwim,
          },
          {
            id: 7,
            type: "烟雾识别",
            switch: false,
            check: false,
            img: svgYan,
          },
          {
            id: 6,
            type: "异物识别",
            switch: false,
            check: false,
            img: svgThings,
          },
        ];
      }
    },
    getItem(item) {
      this.infoShow = true;
      this.pointInfo = item;
      this.getDe();
    },
    getActive(num, val) {
      this.active = num;
      if (val == "ai") {
        this.aiShow = true;
        this.stayShow = false;
        this.speedStatus = false;
      } else if (val == "stay") {
        this.stayShow = true;
        this.aiShow = false;
        this.speedStatus = false;
      } else if (val == "carmera") {
      } else if (val == "speed") {
        this.speedStatus = true;
        this.aiShow = false;
        this.stayShow = false;
      } else {
        this.aiShow = false;
        this.stayShow = false;
        this.speedStatus = false;
      }
    },
    getDe() {
      this.active = 2;
      this.aiShow = false;
      this.stayShow = false;
      console.log(this.aiList, "123");

      // setTimeout(() => {
      if (this.pointInfo && this.pointInfo.aiList) {
        console.log(this.aiList, "456");
        this.aiList = JSON.parse(JSON.stringify(this.pointInfo.aiList));
        console.log(this.aiList, "789");
        this.min = parseInt(this.pointInfo.actions[2].param1 / 60);
        this.se = this.pointInfo.actions[2].param1 - this.min;
      } else {
        this.min = 0;
        this.se = 0;
        this.aiList.forEach((val) => {
          if (val.switch && !val.check) {
            val.history = 1;
          } else {
            val.switch = false;
          }
          val.check = false;
        });
      }
      // }, 2000);
    },
    async getLineName() {
      let filename = "";
      filename = `${this.userInfo.username}-巡查-${Date.now()}`;
      this.lineNameAI = filename;
    },
    async saveLine() {
      if (this.pointList.length <= 1)
        return this.$message.warning("生成航线至少两个航点");
      this.getLineName();
      this.disable = false;
      setTimeout(async () => {
        let distance = 0;
        let pointCount = this.pointList.length;
        //lng,lat待定
        let lng = this.pointList[this.pointList.length - 1].lon;
        let lat = this.pointList[this.pointList.length - 1].lat;
        this.pointList.forEach((item, i) => {
          delete item.img;
          item.actions.forEach((val) => {
            if (val.actionType == "STAY") {
              val.param1 = val.param1 * 1000;
            }
          });
          if (this.pointList[i + 1]) {
            let p1 = Utils.transformWGS842Cartesian({
              lng: Number(item.lon),
              lat: Number(item.lat),
            });
            let p2 = Utils.transformWGS842Cartesian({
              lng: Number(this.pointList[i + 1].lon),
              lat: Number(this.pointList[i + 1].lat),
            });
            let cd = Cesium.Cartesian3.distance(p1, p2);
            distance = distance + cd;
          }
        });
        let time = parseInt(distance / 6);

        let waypoints = this.pointList.map((val) => {
          return {
            altitude: val.alt,
            coordinate: {
              latitude: val.lat,
              longitude: val.lon,
            },
            frame: 3,
            speed: this.speed,
            stay: 0,
            waypointActions: val.actions,
          };
        });
        let data = {
          content: waypoints,
          distance,
          dutyOrganizationId: "",
          // name: this.lineNameAI,
          speed: this.speed,
        };

        this.rootNode.$emit('airwayAdd', {
          airway: data
        });
        this.$emit("close");
      }, 0);
    },
  },
};
</script>
<style lang="scss" scoped>
.pointList {
  margin-top: 50px;
  // height: 400px;
  position: absolute;
  top: 420px;
  // display: flex;
  .points {
    width: 720px;
    border-radius: 6px;
    height: 158px;
    background: #20201e;
    .title {
      height: 36px;
      background: #353434;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.59);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      color: #ffffff;
      .right {
        display: flex;
        align-items: center;
        .btn {
          cursor: pointer;
          padding: 6px;
          background: rgba($color: #9499a5, $alpha: 0.6);
          border-radius: 4px;
          opacity: 0.58;
          // backdrop-filter: blur(6.683917952653804px);
          // &:hover{
          // background: rgba($color: #9499a5, $alpha: 1);
          // }
        }
        .active {
          background: url("./assets/images/btn_lan.png") no-repeat;
          background-size: 100% 100%;
          color: #fff;
          opacity: 1;
        }
        .close {
          margin-left: 33px;
          margin-right: 4px;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #d2dfff;
          cursor: pointer;
        }
      }
    }
    .list {
      // width: 400px;
      // height: 80px;
      // border: solid 1px #fff;
      height: 132px;
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
      .box {
        width: 59px;
        height: 59px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        background: #02173d;
        border-radius: 2px;
        border: 1px solid #aab6b9;
        line-height: 59px;
        cursor: pointer;
      }
      .item {
        position: relative;
        width: 59px;
        height: 59px;
        position: relative;
        margin-right: 7px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 1px;
        img {
          width: 100%;
          height: 100%;
        }
        .img {
          position: absolute;
          right: -5px;
          top: -5px;
          width: 12px;
          height: 12px;
        }
        span {
          position: absolute;
        }
      }
    }
    .info {
      display: flex;
      .return {
        line-height: 172px;
        text-align: center;
        color: #a1a1a1;
        font-size: 24px;
        width: 36px;
        height: 172px;
        background: #20201e;
        box-shadow: 1px 0px 2px 0px rgba(255, 255, 255, 0.22);
      }
      .point {
        // margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // border: solid 1px #fff;
        width: 694px;
        height: 172px;
        // background: #333;
        .form {
          margin: 10px;
          width: 450px;
          display: flex;
          color: #fff;
          align-items: center;
          justify-content: space-between;
          .info {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
          .active {
            color: yellow;
          }
        }
        .ai {
          padding: 10px 0;
          display: flex;
          // background: #333;
          color: #fff;
          align-items: center;
          justify-content: space-between;
          .item {
            width: 100px;
            height: 88px;
            // border: solid 1px #fff;
            margin: 6px;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .check {
              display: flex;
              flex-direction: column;
              align-items: center;
              .flexs {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              }
              .el-checkbox {
                color: #fff;
              }
              .type {
                white-space: nowrap;
              }
              .img {
                margin: 4px 0;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
          .itemHover {
            &:hover {
              background: rgba(255, 255, 255, 0.6);
              .img {
                background: rgba(32, 32, 30, 1);
              }
            }
          }
          .itemAfter {
            background: rgba(255, 255, 255, 0.6);
          }
          .itemActive {
            background: rgba(253, 220, 5, 0.3);
            .img {
              border: solid 1px rgba(255, 221, 0, 1);
            }
          }
        }
        .stay {
          width: 450px;
          color: #fff;
        }
      }
    }
  }
}
</style>