<template>
  <div class="airPointSetup uav_box">
    <div class="header">
      <div class="logo">
        <img class="title" src="../../images/airsetup.png" alt="" />
        <div class="item">
          <div class="back com" @click="back" title="返回"></div>
        </div>
        <div class="item">
          <div class="save com" @click="save" title="保存"></div>
        </div>
        <div class="item">
          <div class="switch com" @click="senior" title="高级设置"></div>
        </div>
        <!-- <el-tooltip class="item" effect="dark" content="返回" placement="top">
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="保存" placement="top">
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="高级设置" placement="top">
        </el-tooltip> -->
      </div>
    </div>
    <div class="title">
      <img src="../../images/title.png" alt="" />
      <span>航点列表</span>
    </div>
    <el-divider></el-divider>
    <!-- 航线信息 -->
    <div class="info">
      <el-row>
        <el-col :span="10">
          <div class="info_item">
            <div>航线长度</div>
            <div>{{ length }} m</div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="info_item">
            <div>航点</div>
            <div>{{ points.length }}</div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="info_item">
            <div>照片</div>
            <div>{{ getPhotoNum }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <!-- 航点列表 -->
    <div class="content">
      <div v-for="(item, index) in points" :key="index" @click="select(index, item)" class="point_item"
        :class="{ active: selectId == index }">
        <div class="left">
          <img src="../../images/point.png" alt="" />
          <span style="margin: 0 5px;">{{ index + 1 }}</span>
        </div>
        <div v-if="item.actions.length > 0" class="middle">
          <div v-for="(item1, index1) in item.actions" :key="index1" @click.stop="openSet(index, index1, item1)"
            style="display: inline-block;margin: 0 3px;cursor: pointer;">
            <svg-icon :icon-class="item1.svg" style="width: 16px;height: 16px;" :style="selectIndexS == index1 && selectIndexF == index
              ? 'fill:rgba(0, 255, 255, 1)'
              : 'fill:#fff'
              "></svg-icon>
          </div>
        </div>
        <div class="right">
          <el-dropdown @command="handleDropMenu" trigger="click">
            <div class="more_icon"></div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="beforeHandleDropMenu(drop.value, item)" v-for="drop in dropdownList"
                  :key="drop.value">{{ drop.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- 操作仓 -->
    <div v-show="keywordShow" class="keyword flex">
      <div class="left mr20">
        <div class="top">
          <div class="flex space_between">
            <div class="img_box">
              <img src="../../images/left.png" alt="" />
            </div>
            <div class="img_box">
              <img style="width: 16px;height: 20px;" src="../../images/top.png" alt="" />
            </div>
            <div class="img_box">
              <img src="../../images/right.png" alt="" />
            </div>
          </div>
          <div class="flex space_between ">
            <div class="item_bottom" @mousedown="towardsLeft">Q</div>
            <div class="item_bottom" @mousedown="up">W</div>
            <div class="item_bottom" @mousedown="towardsRight">E</div>
          </div>
        </div>
        <div class="bottom">
          <div class="flex space_between ">
            <div class="img_box">
              <img src="../../images/left_f.png" alt="" />
            </div>
            <div class="img_box">
              <img src="../../images/after_f.png" alt="" />
            </div>
            <div class="img_box">
              <img src="../../images/right_f.png" alt="" />
            </div>
          </div>
          <div class="flex space_between ">
            <div class="item_bottom" @mousedown="left">A</div>
            <div class="item_bottom" @mousedown="after">S</div>
            <div class="item_bottom" @mousedown="right">D</div>
          </div>
        </div>
      </div>
      <div class="middle mr20">
        <div class="middle_item">
          <div class="titel">经度</div>
          <div class="value">106.25467890 °</div>
        </div>
        <div class="middle_item">
          <div class="titel">维度</div>
          <div class="value">36.25467890 °</div>
        </div>
        <div class="middle_item">
          <div class="titel">高度</div>
          <div class="value">90 m</div>
        </div>
      </div>
      <div class="right flex">
        <img src="../../images/top_r.png" alt="" />
        <div class="item_right">C</div>
        <div class="alt flex space_between">
          <div class="f30">96.3</div>
          <div class="f14 text_algin_right">
            <div>ALT</div>
            <div>m</div>
          </div>
        </div>
        <div class="f12 asl text_algin_right">581 ASL</div>
        <img src="../../images/bottom_r.png" alt="" />
        <div class="item_right">Z</div>
      </div>
    </div>
    <!-- 动作 -->
    <div class="control">
      <div class="right">
        <div v-if="points.length > 0" class="control_item" @click="addPoint">
          <span>新增航点</span>
          <img src="../../images/control_add.png" alt="" />
        </div>
        <div class="control_item" @click="more">
          <span>更多</span>
          <img src="../../images/control_more.png" alt="" />
        </div>
      </div>
      <div v-show="leftShow" class="left">
        <div class="control_item" v-for="item in controls" :key="item.label" @click="onClick(item)">
          <span>{{ item.label }}</span>
          <img :src="item.url" alt="" />
        </div>
      </div>
    </div>
    <!-- 动作设置 -->
    <div v-show="setupShow" class="setup">
      <div class="setup_header flex space_between">
        <div class="setup_header_left">
          <svg-icon icon-class="camera" style="width: 20px;height: 16px;vertical-align: middle;"></svg-icon>
          <span class="f14 header_title">{{ selectObj.label }}</span>
        </div>
        <div class="setup_header_right flex ai_center">
          <svg-icon icon-class="left" style="width: 18px;height: 10px;"></svg-icon>
          {{ selectIndexF + 1 }}-{{ selectIndexS + 1 }}
          <svg-icon icon-class="right" style="width: 18px;height: 10px;color: red;"></svg-icon>
          <div class="del" @click="delAction"></div>
        </div>
        <div class="close" @click="closeSetup"></div>
      </div>
      <el-divider></el-divider>
      <!-- 开始录像 -->
      <div v-if="selectObj.svg == 'start_record'" class="setup_content">
        <div class="flex space_between">
          <div>DJI_YYYYMMDDhhmm_XXX_</div>
          <div v-if="!selectObj.params.fileSuffix" class="edit" @click="inputShow = true, inputDiv = true"></div>
        </div>
        <div v-if="inputShow" class="flex wuyongBox">
          <el-input v-if="inputDiv" v-model="selectObj.params.fileSuffix"></el-input>
          <div style="flex: 1;" v-if="!inputDiv">{{ selectObj.params.fileSuffix }}</div>
          <i class="el-icon-edit wuyong-icon" v-if="!inputDiv" @click="inputDiv = true"></i>
          <i class="el-icon-check wuyong-icon" v-if="inputDiv" style="color: green;" @click="saveSuucess"></i>
          <i class="el-icon-close wuyong-icon" v-if="inputDiv" style="color: red;" @click="deleteSuucess"></i>
        </div>
        <div class="flex mt15 space_between">
          <div class="btns">
            <el-checkbox-group :disabled="!selectObj.params.useGlobalPayloadLensIndex" v-model="checkboxGroup1" :min="1"
              :max="2" @change="changeGroup">
              <el-checkbox-button v-for="item in pohoto" :label="item.value" :key="item.value">{{ item.label
                }}</el-checkbox-button>
            </el-checkbox-group>
          </div>
          <el-button size="small" :class="{ bugen: selectObj.params.useGlobalPayloadLensIndex == 1 }"
            @click="genliuhangxian">
            <svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
        </div>
      </div>
      <!-- 停止录像 -->
      <!-- 开始等时隔拍照 -->
      <div v-if="selectObj.svg == 'interval_time'" class="setup_content">
        <div class="flex space_between">
          <div>间隔时间</div>
        </div>
        <div>
          <plusReduce :defValue="selectObj.actionTrigger.actionTriggerParam" @value="interval_distance" :max="30"
            :min="1">
          </plusReduce>
        </div>
        <div class="flex mt15 space_between">
          <div>
            <el-button size="small" :disabled="pzDisabled">可见光</el-button>
            <el-button size="small" :disabled="pzDisabled">红外照片</el-button>
          </div>
          <el-button size="small" :class="{ bugen: selectObj.params.useGlobalPayloadLensIndex == 1 }">
            <svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
        </div>
      </div>
      <!-- 拍照 -->
      <div v-if="selectObj.svg == 'take_photo'" class="setup_content">
        <div class="flex space_between">
          <div>DJI_YYYYMMDDhhmm_XXX_</div>
          <div v-if="!selectObj.params.fileSuffix" class="edit" @click="inputShow = true, inputDiv = true"></div>
        </div>
        <div v-if="inputShow" class="flex wuyongBox">
          <el-input v-if="inputDiv" v-model="selectObj.params.fileSuffix"></el-input>
          <div style="flex: 1;" v-if="!inputDiv">{{ selectObj.params.fileSuffix }}</div>
          <i class="el-icon-edit wuyong-icon" v-if="!inputDiv" @click="inputDiv = true"></i>
          <i class="el-icon-check wuyong-icon" v-if="inputDiv" style="color: green;" @click="saveSuucess"></i>
          <i class="el-icon-close wuyong-icon" v-if="inputDiv" style="color: red;" @click="deleteSuucess"></i>
        </div>
        <div class="flex mt15 space_between">
          <div class="btnss">
            <el-checkbox-group :disabled="!selectObj.params.useGlobalPayloadLensIndex" v-model="checkboxGroup2" :min="1"
              @change="changeGroup1">
              <el-checkbox-button v-for="item in pohoto1" :label="item.value" :key="item.value">{{ item.label
                }}</el-checkbox-button>
            </el-checkbox-group>
            <!-- <el-button size="small" :disabled="pzDisabled">可见光</el-button>
            <el-button size="small" :disabled="pzDisabled">红外照片</el-button> -->
          </div>
          <el-button size="small" :class="{ bugen: selectObj.params.useGlobalPayloadLensIndex == 1 }"
            @click="genliuhangxian">
            <svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
        </div>
      </div>
      <!-- 开始等距隔拍照 -->
      <div v-if="selectObj.svg == 'interval_distance'" class="setup_content">
        <div class="flex space_between">
          <div>间隔时间</div>
        </div>
        <div>
          <plusReduce @value="interval_distance" :defValue="selectObj.actionTrigger.actionTriggerParam" unit="m"
            :max="100" :min="1"></plusReduce>
        </div>
        <div class="flex mt15 space_between">
          <div>
            <el-button size="small" :disabled="pzDisabled">可见光</el-button>
            <el-button size="small" :disabled="pzDisabled">红外照片</el-button>
          </div>
          <el-button size="small" @click="pzDisabled = !pzDisabled">
            <svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
        </div>
      </div>
      <!-- 悬停 -->
      <div v-if="selectObj.svg == 'hover'" class="setup_content">
        <div class="flex space_between">
          <div>间隔时间</div>
        </div>
        <div>
          <plusReduce @value="interval_distance" :defValue="Number(selectObj.params.hoverTime)" :max="1800" :min="1">
          </plusReduce>
        </div>
      </div>
      <!-- 飞行器偏航角 -->
      <div v-if="selectObj.svg == 'drone_yaw'" class="setup_content">
        <div class="flex space_between">
          <div>飞行器偏航角</div>
          <div class="lan">{{ selectObj.params.aircraftHeading }}°</div>
        </div>
        <div>
          <myProgress :defValue="Number(selectObj.params.aircraftHeading)" @value="hpr" :sliderMax="180"
            :sliderMin="-180">
          </myProgress>
        </div>
        <div class="flex mt15 space_between"></div>
      </div>
      <!-- 云台俯仰角 -->
      <div v-if="selectObj.svg == 'action_gimbal_pitch'" class="setup_content">
        <div class="flex space_between">
          <div>云台俯仰角</div>
          <div class="lan">{{ selectObj.params.gimbalPitchRotateAngle }}°</div>
        </div>
        <div>
          <myProgress :defValue="Number(selectObj.params.gimbalPitchRotateAngle)" @value="hpr" :sliderMax="30"
            :sliderMin="-90"></myProgress>
        </div>
        <div class="flex mt15 space_between"></div>
      </div>
      <!-- 变焦 camera_zoom -->
      <div v-if="selectObj.svg == 'camera_zoom'" class="setup_content">
        <div class="flex space_between">
          <div>变焦</div>
          <div class="lan">
            {{ Number(selectObj.params.focalLength) / 24 }}
            <span style="font-size: 24px;color: #fff;">X</span>
          </div>
        </div>
        <div>
          <myProgress :defValue="Number(selectObj.params.focalLength) / 24" @value="hpr" :sliderMax="56" :sliderMin="1"
            unit="X"></myProgress>
        </div>
        <div class="flex mt15 space_between"></div>
      </div>
    </div>
    <div id="tongbuEarth"></div>
  </div>
</template>

<script>
import plusReduce from "../component/plusReduce/index.vue";
import myProgress from "../component/progress/index.vue";
import mixin from "./js/pointSetup";
export default {
  name: "airSetup",
  components: { plusReduce, myProgress },
  props: {
    routeLine: {
      type: Object,
      default: () => { },
    },
  },
  mixins: [mixin],
};
</script>
<style lang="scss">
.airPointSetup {
  color: #fff;
  left: 20px;

  .header {
    .logo {
      position: relative;
      text-align: center;

      .title {
        width: 380px;
        height: 32px;
      }

      .com {
        position: absolute;
        top: 5px;
        width: 16px;
        height: 16px;
        z-index: 20;

        cursor: pointer;
      }

      .back {
        right: 70px;
        background: url("../../images/back.png");
        background-size: cover;
      }

      .back:hover {
        background: url("../../images/back_h.png");
        background-size: cover;
      }

      .save {
        right: 40px;
        background: url("../../images/save.png");
        background-size: cover;
      }

      .save:hover {
        background: url("../../images/saveh.png");
        background-size: cover;
      }

      .switch {
        right: 10px;
        background: url("../../images/switch.png");
        background-size: cover;
      }

      .switch:hover {
        background: url("../../images/switchh.png");
        background-size: cover;
      }
    }

    .search {
      .el-input__inner {
        background-color: rgba(0, 0, 0, 0.5);
        height: 32px;
        border-color: rgba(0, 255, 255, 0.5);
      }

      .date {
        height: 32px;
        color: #fff;
        align-items: center;
        justify-content: center;
      }

      .arrow {
        flex-direction: column;
        font-size: 12px;
      }
    }
  }

  .title {
    height: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    margin-top: 8px;

    img {
      width: 20px;
      height: 16px;
      margin-right: 10px;
    }
  }

  .info {
    .info_item {
      div {
        text-align: center;
        line-height: 24px;
      }

      div:last-child {
        font-family: "ddin";
      }
    }
  }

  .content {
    height: calc(100% - 154px);
    color: #fff;
    overflow: auto;
    padding-right: 5px;

    .point_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 40px;
      // margin-bottom: 10px;
      border-bottom: 1px solid rgba(204, 204, 204, 0.2);
      background: transparent;

      .left {
        min-width: 50px;
        margin-left: 15px;

        img {
          width: 12px;
          height: 16px;
        }
      }

      .middle {
        flex: 1;
        align-items: center;

        img {
          width: 12px;
          height: 16px;
          margin: 0 5px;
        }
      }

      .right {
        .more_icon {
          height: 20px;
          width: 20px;
          margin: 0 6px 0 10px;
          cursor: pointer;
          background: url("../../images/more1.png");
          background-size: cover;
        }

        .more_icon:hover {
          background: url("../../images/more2.png");
          background-size: cover;
        }
      }
    }

    .active {
      background: linear-gradient(180deg,
          rgba(0, 255, 255, 0) 0%,
          rgba(0, 255, 255, 0.5) 100%);
    }

    .point_item:hover {
      background: linear-gradient(180deg,
          rgba(0, 255, 255, 0) 0%,
          rgba(0, 255, 255, 0.5) 100%);
    }
  }

  /* 修改垂直滚动条 */
  .content::-webkit-scrollbar {
    width: 8px;
    /* 修改宽度 */
  }

  /* 修改滚动条轨道背景色 */
  .content::-webkit-scrollbar-track {
    background-color: rgba(0, 255, 255, 0.1);
    border-radius: 10px;
  }

  /* 修改滚动条滑块颜色 */
  .content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 255, 255, 0.3);
    border-radius: 10px;
  }

  .el-divider--horizontal {
    margin: 10px 0;
  }

  .el-divider {
    background: rgba(204, 204, 204, 0.2);
  }

  .text_align_center {
    text-align: center;
  }

  .keyword {
    position: fixed;
    left: 50%;
    bottom: 6%;
    transform: translate(-50%, -8%);

    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .top,
    .bottom {
      width: 157px;
      height: 80px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      padding: 10px;

      .img_box {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;

        img {
          width: 20px;
          height: 18px;
        }
      }

      .item_bottom {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        background: rgba(60, 60, 60, 1);
        text-align: center;
      }
    }

    .bottom {
      .img_box:nth-child(1) {
        img {
          width: 12px;
          height: 18px;
        }
      }

      .img_box:nth-child(2) {
        img {
          width: 18px;
          height: 12px;
        }
      }

      .img_box:nth-child(3) {
        img {
          width: 12px;
          height: 18px;
        }
      }
    }

    .middle {
      min-width: 145px;
      border-radius: 8px;
      padding: 16px;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .middle_item {
        .title {
          font-size: 16px;
          font-weight: 400;
          color: rgba(230, 247, 255, 1);
        }

        .value {
          font-family: "ddin";
          font-size: 18px;
          font-weight: 700;
          color: rgba(255, 255, 255, 1);
        }
      }
    }

    .right {
      min-width: 120px;
      border-radius: 8px;
      padding: 10px 16px;
      background-color: rgba(0, 0, 0, 0.5);
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      img {
        width: 16px;
        height: 20px;
      }

      .item_right {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        background: rgba(60, 60, 60, 1);
        text-align: center;
      }

      .alt,
      .asl {
        font-family: "ddin";
      }

      .alt {
        color: rgba(0, 255, 255, 1);
      }

      .asl {
        width: 100%;
      }
    }

    .middle,
    .right {
      height: 200px;
    }
  }

  .control {
    position: fixed;
    right: 2%;
    top: 35%;

    // background-color: transparent;
    .control_item {
      text-align: right;
      margin-bottom: 20px;

      span {
        font-size: 14px;
        font-weight: 700;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
          1px 1px 0 #000;
        /* 文字阴影，模拟边框效果 */
      }

      img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
      }
    }

    .left {
      position: absolute;
      right: 120px;
      top: 0;
      min-width: 200px;
    }
  }

  // 设置
  .setup {
    position: fixed;
    top: 10%;
    right: 5%;
    min-width: 400px;
    min-height: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.5);
    padding: 30px 12px 12px 16px;

    .close {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 8px;
      right: 12px;
      cursor: pointer;
      background: url("../../images/close1.png");
      background-size: cover;
    }

    .setup_header_left {
      .header_title {
        font-weight: 500;
        color: rgba(0, 255, 255, 1);
      }
    }

    .setup_header_right {
      .del {
        width: 14px;
        height: 14px;
        background: url("../../images/del.png");
        background-size: cover;
        cursor: pointer;
        margin: 0 0 0 8px;
      }

      .del:hover {
        background: url("../../images/delh.png");
        background-size: cover;
      }
    }

    .setup_content {
      margin: 10px 0;

      .wuyongBox {
        align-items: center;
        margin-top: 10px;

        .wuyong-icon {
          font-weight: bold;
          margin: 0 5px;
          cursor: pointer;
        }
      }

      .bugen {
        // background: rgba(0, 255, 255, 0.2) !important;
        // color: rgba(0, 255, 255, 0.8) !important;
        // border: 1px solid rgba(0, 255, 255, 0.5) !important;
        background: rgb(255 255 255 / 20%) !important;
        color: rgb(255 255 255 / 80%) !important;
        border: 1px solid rgb(107 107 107 / 50%) !important;
      }

      .el-checkbox-group {
        width: 100%;
      }

      .el-checkbox-button:last-child .el-checkbox-button__inner,
      .el-checkbox-button:first-child .el-checkbox-button__inner {
        border-radius: 5px;
        box-shadow: none;
      }

      .el-checkbox-button.is-checked .el-checkbox-button__inner {
        background: rgba(0, 255, 255, 0.2);
        border: 1px solid rgba(0, 255, 255, 1);
        color: rgba(0, 255, 255, 1);

      }

      .el-checkbox-button__inner {
        // background: rgba(0, 255, 255, 0.2);
        // color: rgba(0, 255, 255, 0.8);
        // border: 1px solid rgba(0, 255, 255, 0.5);
        background: rgb(255 255 255 / 20%);
        color: rgb(255 255 255 / 80%);
        border: 1px solid rgb(107 107 107 / 50%);
        margin-right: 8px;
        border-radius: 5px;
        padding: 8px 15px;
        box-shadow: none;
      }

      .el-input__inner {
        background-color: transparent;
        border-color: aqua;
        height: 30px;
        line-height: 30px;
        color: #fff;
      }

      .edit {
        width: 14px;
        height: 14px;
        background: url("../../images/edit.png");
        background-size: cover;
        cursor: pointer;
      }

      .el-button.is-disabled,
      .el-button.is-disabled:focus,
      .el-button.is-disabled:hover {
        background: rgba(0, 255, 255, 0.2);
        border: 1px solid rgba(0, 255, 255, 0.5);
        color: rgba(255, 255, 255, 0.8);
      }

      .el-button {
        background: rgba(0, 255, 255, 0.2);
        border: 1px solid rgba(0, 255, 255, 1);
        color: rgba(0, 255, 255, 1);
      }

      .lan {
        color: rgba(0, 255, 255, 1);
        font-size: 30px;
        font-family: "ddin";
      }
    }
  }
}

.el-dropdown-menu {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 255, 255, 0.5);
  color: #fff;

  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    color: rgba(0, 255, 255, 1);
    background-color: transparent;
  }
}

.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}

#tongbuEarth {
  width: 300px;
  height: 200px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: aqua;
}
</style>
