<template>
  <div class="rm-actions dialog1027" v-interact>
    <div class="dialog-header">
      <img class="dialog-header__icon" src="../../../../../../assets/images/mount_head.png" />
      <div class="dialog-header__title">航点动作</div>
      <div class="dialog-header__close">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <div class="icon el-icon-plus" title="添加"></div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in actions"
              @click.native="selectActions1.push(item)"
            >{{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class @click="$emit('close')">关闭</div>
      </div>
    </div>
    <div class="rm-as-list">
      <div
        class="rm-as-item"
        v-for="(item, i) in selectActions1"
        :key="i"
        :class="{double: ['云台控制'].includes(item.label)}"
      >
        <div class="rm-as-item__title">{{item.label}}</div>
        <div class="rm-as-item__input" v-if="['间隔拍照', '悬停', '变焦'].includes(item.label)">
          <div>
            <el-input-number
              :min="item.min"
              :max="item.max"
              v-if="['间隔拍照', '悬停'].includes(item.label)"
              v-model="item.param1"
            ></el-input-number>
            <el-input-number
              :min="item.min"
              :max="item.max"
              v-if="['变焦'].includes(item.label)"
              v-model="item.param2"
            ></el-input-number>
            （{{item.unit}}）
          </div>
        </div>
        <div class="rm-as-item__input" v-if="['云台控制'].includes(item.label)">
          <div>
            （俯仰）
            <el-input-number :min="-90" :max="30" v-model="item.param1"></el-input-number>（度）
          </div>
          <div>
            （偏航）
            <el-input-number :min="-145" :max="145" v-model="item.param3"></el-input-number>（度）
          </div>
        </div>
        <i class="el-icon-delete rm-as-item__del" v-hover @click="selectActions.splice()"></i>
      </div>
    </div>
    <div class="rm-rp-btns">
      <div class="rm-rp-btn" v-hover @click="$emit('close')">取消</div>
      <div class="rm-rp-btn save" v-hover @click="$emit('save', selectActions1)">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Actions",
  props: {
    selectActions: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      actions: [
        {
          label: "无动作",
          actionType: "",
          param1: 1,
        },
        {
          label: "间隔拍照",
          actionType: "TRIGGER",
          param1: 1,
          unit: "米",
        },
        {
          label: "悬停",
          min: 0,
          // max: 32000,
          actionType: "STAY",
          param1: 10,
          unit: "秒",
        },
        {
          label: "云台控制",
          actionType: "GIMBAL_PITCH",
          param1: 0,
          param2: 0,
          param3: 0,
          param4: 2,
        },
        {
          label: "开始录像",
          actionType: "START_RECORD",
          param1: 1,
        },

        {
          label: "停止录像",
          actionType: "STOP_RECORD",
          param1: 1,
        },
        {
          label: "变焦",
          min: 0,
          // max: 32000,
          actionType: "CAMERA_ZOOM",
          param1: 2,
          param2: 0,
          unit: "倍",
        },
        {
          label: "拍照",
          actionType: "START_TAKE_PHOTO",
          param3: 1,
        },
      ], //全部动作
      selectActions1: [], //选中的动作
    };
  },
  created(){
    this.selectActions1 = JSON.parse(JSON.stringify(this.selectActions));
  }
};
</script>

<style lang="scss" scoped>
.rm-actions {
  position: absolute;
  left: 480px;
  top: 0;
  height: 100%;
  width: 420px;
  background: #222222;
  display: flex;
  flex-direction: column;

  .dialog-header__close::v-deep {
    display: flex;
    gap: 20px;

    .icon {
      color: #fff;
    }
  }

  .rm-as-list {
    padding: 16px;
    flex: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .rm-as-item::v-deep {
      background: #3c3c3c;
      border-radius: 1px;
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 14px;
      color: #dedede;
      line-height: 20px;
      padding: 16px 16px;
      justify-content: space-between;

      &.double {
        .rm-as-item__title {
          width: 60px;
        }
      }

      .el-input__inner {
        height: 32px;
        background: #191919;
        border-radius: 2px;
        border: 1px solid #4b4b4b;
      }

      .rm-as-item__title {
        width: 120px;
      }

      .rm-as-item__input {
        width: 140px;
        flex: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        .el-input-number {
          width: 140px;
          line-height: 32px;
        }
        .el-input-number__decrease {
          width: 32px;
          height: 32px;
          background: transparent;
          border-right: 1px solid #4b4b4b;
        }
        .el-input-number__increase {
          width: 32px;
          height: 32px;
          background: transparent;
          border-left: 1px solid #4b4b4b;
        }
      }

      .rm-as-item__del {
        font-size: 24px;
      }
    }
  }
}

.rm-rp-btns {
  flex: 0;
  padding: 32px 0;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.rm-rp-btn {
  width: 100px;
  height: 32px;
  border-radius: 2px;
  border: 1px solid #3388ff;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  &.save {
    background: #3388ff;
    border: none;
  }

  &.del {
    background: #f56c6c;
    border: none;
  }
}
</style>