<template>
  <div class="setting-item">
    <div class="setting-label-div">
      <div class="setting-label">云端天气阻飞</div>
      <a-tooltip placement="bottom">
        <template #title>
          <span>
            开启后，您可依据实际工况自定义阻飞的天气值，当风速或雨量大于设置值时，云端将对机场的飞行器进行阻飞。<br/>
            关闭后，设备将按照默认天气值阻飞，机场的阻飞条件：<br/>
            大疆机场：风速 (风速计) ≥12m/s 或 雨量 (雨量计) ≥大雨<br/>
            大疆机场 2：风速 (风速计) ≥8m/s 或 雨量 (雨量计) ≥大雨<br/>
            大疆机场3：风速 (风速计) ≥12m/s 或 雨量 (雨量计) ≥大雨
          </span>
        </template>
        <div class="hint"></div>
      </a-tooltip>
    </div>
    <div class="setting-value-div">
      <a-switch class="setting-switch" v-model:checked="props.project.isCloudBlockFlight" />
    </div>
  </div>
  <div v-if="props.project.isCloudBlockFlight">
    <div class="setting-item">
      <div class="setting-label-div">
        <div class="setting-label">使用天气预报数据阻飞</div>
        <a-tooltip placement="bottom">
          <template #title>
            <span>
              开启后，天气阻飞将使用天气预报，同时也会使用机场风速计和雨量计数据。<br/>
              关闭后，天气阻飞不使用天气预报，仅使用机场风速计和雨量计数据。
            </span>
          </template>
          <div class="hint"></div>
        </a-tooltip>
      </div>
      <div class="setting-value-div">
        <a-switch class="setting-switch" v-model:checked="props.project.isWeatherBlockFlight" />
      </div>
    </div>
    <div v-for="item in props.project.lockfly">
      <div class="setting-title">
        <div class="setting-title-content">{{item.name}}</div>
      </div>
      <div style="margin-bottom: 10px;">
        <div class="setting-item" style="margin-bottom: 0px;">
          <div class="setting-label-div">
            <div class="setting-label">风速</div>
          </div>
          <div class="setting-value-div">
            <template v-if="!isEdit">{{ item.windSpeed }}m/s</template>
            <template v-else>
              <a-input-number v-model:value="item.windSpeed" class="setting-number-input" :min="1" :max="12" :controls=false :precision="0"/>m/s
            </template>
          </div>
        </div>
        <div class="weather-hint">(风速计)(1-12m/s)</div>
      </div>
      <div style="margin-bottom: 10px;" v-if="props.project.isWeatherBlockFlight">
        <div class="setting-item" style="margin-bottom: 0px;">
          <div class="setting-label-div">
            <div class="setting-label">风速</div>
          </div>
          <div class="setting-value-div">
            <template v-if="!isEdit">{{ item.weatherWindSpeed }}m/s</template>
            <template v-else>
              <a-input-number v-model:value="item.weatherWindSpeed" class="setting-number-input" :min="1" :max="12" :controls=false :precision="0"/>m/s
            </template>
          </div>
        </div>
        <div class="weather-hint">(天气预报)(1-12m/s)</div>
      </div>
      <div style="margin-bottom: 20px;">
        <div class="setting-item" style="margin-bottom: 0px;">
          <div class="setting-label-div">
            <div class="setting-label">雨量</div>
          </div>
          <div class="setting-value-div">
            <template v-if="!isEdit"> {{ item.rainFall }}</template>
            <template v-else>
              <a-select
                class="setting-weather-select"
                popupClassName="setting-weather-dropdown"
                v-model:value="item.rainFall"
                :options="weatherOptions"/>
            </template>
          </div>
        </div>
        <div class="weather-hint">(雨量计/天气预报)</div>
      </div>
    </div>
    
    <div class="button-div">
      <a-button v-if="!isEdit" class="button-item" type="primary" @click="changeEdit(true,'')">编辑</a-button>
      <a-button v-if="isEdit" class="button-item" style="margin-right: 15px;background: #6b6b6b;" type="primary" @click="changeEdit(false,'cancel')">取消</a-button>
      <a-button v-if="isEdit" class="button-item" type="primary" @click="changeEdit(false,'save')">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue"
const props = defineProps(['project'])
const emits = defineEmits([])
const isEdit = ref(false)
const oldValue = ref('')
const weatherOptions = [
  { label: '小雨', value: '小雨' },
  { label: '中雨', value: '中雨' },
  { label: '大雨', value: '大雨' }
]

const changeEdit = (value,type) => {
  if(value){
    oldValue.value = JSON.stringify(props.project.lockfly)
    isEdit.value = value
    return
  }
  if(type == 'cancel'){
    props.project.lockfly = JSON.parse(oldValue.value)
    isEdit.value = value
    return
  }
  isEdit.value = value
}
</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;
    }
  }
}
.setting-title{
  display: flex;
  align-items: center;
  font-family: 'PingFangSC-Medium';
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 9px;
  line-height: 20px;
  text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
  .setting-title-content{
    color: #ffffff;
  }
}

.setting-name-input-div{
  margin-bottom: 13px;
  .setting-name-input{
    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;
  }
  .setting-date{
    width: 100%;
    height: 30px;
    background: #151823;
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
    border-radius: 2px;
    border: 1px solid #3B4154;
    :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;
    }
  }
}
.button-div{
  display: flex;
  .button-item{
    background: #3A57E8;
    border-radius: 4px;
    font-family: 'PingFangSC-Medium';
    font-weight: 500;
    font-size: 13px;
    color: #FFFFFF;
    text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
  }
}
.weather-hint{
  font-family: 'PingFangSC-Medium';
  font-size: 13px;
  color: #fff;
  opacity: 0.7;
}
</style>
<style lang="scss">
.setting-weather-dropdown{
  background-color: #151823;
  color: #FFFFFF;
  font-family: 'PingFangSC-Regular';
  font-weight: 400;
  font-size: 13px;
  .ant-select-item{
    color: #FFFFFF;
  }
}
</style>
