<template>
  <div class="setting-item">
    <div class="setting-label-div">
      <div class="setting-label">机场自动录制</div>
      <a-tooltip placement="bottom">
        <template #title>
          <span>设备在任务开始时自动开启录制，任务结束时关闭录制。该功能会消耗较多直播时长及存储空间，请按需开启</span>
        </template>
        <div class="hint"></div>
      </a-tooltip>
    </div>
    <div class="setting-value-div">
      <a-switch class="setting-switch" v-model:checked="props.project.isAirportRecord" />
    </div>
  </div>
  <p class="tip">开启后，该项目内所选设备将自动开启直播录制，录制文件可以在媒体库「自动录制回放」文件夹中查看。 </p>
  <div class="setting-item">
    <div class="setting-label-div">
      <div class="setting-label"> 飞行器自动录制(遥控器接入) </div>
      <a-tooltip placement="bottom">
        <template #title>
          <span>设备在任务开始时自动开启录制，任务结束时关闭录制。该功能会消耗较多直播时长及存储空间，请按需开启</span>
        </template>
        <div class="hint"></div>
      </a-tooltip>
    </div>
    <div class="setting-value-div">
      <a-switch class="setting-switch" v-model:checked="props.project.isAircraftRecord" />
    </div>
  </div>
  <p class="tip"> 开启后，该项目内遥控器接入的飞行器在线后将自动录制，录制文件可以在媒体库「自动录制回放」文件夹中查看。  </p>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue"
const props = defineProps(['project'])
const emits = defineEmits([])
</script>

<style lang="scss" scoped>
.hint{
  width: 12px;
  height: 12px;
  background-image: url('/public/projecthome/hint.png');
  background-size: 100% 100%;
  margin-left: 6px;
}
.tip{
  font-family: 'PingFangSC-Medium';
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  opacity: 0.7;
}
.setting-item{
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'PingFangSC-Medium';
  font-weight: 500;
  font-size: 13px;
  color: #FFFFFF;
  line-height: 18px;
  text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
  margin-bottom: 10px;
  .setting-label-div{
    display: flex;
    align-items: center;
  }
  .setting-value-div{
    display: flex;
    align-items: center;
    cursor: pointer;
    .arrow-icon{
      width: 8px;
      height: 12px;
      background-image: url('/public/projecthome/arrow_icon.png');
      background-size: 100% 100%;
      margin-left: 8px;
    }
    .setting-switch{
      min-width: 40px;
      width: 40px;
      height: 21px;
      background: #ccc;
    }
    :deep(.ant-switch-checked){
      background: #2941B0;
    }
    .setting-number-input{
      min-width: 40px;
      width: 40px !important;
      height: 30px;
      background: #151823;
      box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
      border-radius: 2px;
      border: 1px solid #3B4154;
      color: #FFFFFF;
      line-height: 18px;
      text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 13px;
      margin-right: 8px;
    }
    .setting-weather-select{
      :deep(.ant-select-selector){
        background-color: #151823;
        border: 1px solid #3B4154;
        color: #FFFFFF;
        font-family: 'PingFangSC-Regular';
        font-weight: 400;
        font-size: 13px;
      }
      :deep(.ant-select-selection-item){
        color: #FFFFFF;
      }
    }
    :deep(input){
      color: #FFFFFF;
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 13px;
    }
    :deep(input::placeholder){
      color: #FFFFFF;
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 13px;
    }
  }
}
</style>
