<template>
  <div :class="`add-project ${props.addModal? 'showModal': ''}`">
    <div class="title">
      <div class="title-span">项目设置</div>
      <div class="close-add-modal" @click="closeAddModal"></div>
    </div>
    <div class="add-project-interval"></div>
    <div class="add-project-content">
      <div class="add-project-title">
        <div class="require-mark">*</div>
        <div class="add-project-title-content">项目名称（项目ID:{{ project.id }})</div>
      </div>
      <div class="add-project-name-input-div">
        <a-input class="add-project-name-input" v-model:value="project.workspaceName" />
      </div>
      <div class="add-project-title">
        <div class="add-project-title-content">项目简介</div>
      </div>
      <div class="add-project-info-div">
        <a-textarea class="add-project-info" v-model:value="project.workspaceDesc" :autoSize="false" />
      </div>
      <div class="add-project-title" style="justify-content: space-between;margin-bottom: 7px;">
        <div style="display: flex;align-items: center;">
          <div class="require-mark">*</div>
          <div class="add-project-title-content">项目作业中心点</div>
          <a-tooltip placement="bottom">
            <template #title>
              <span>项目在地图上的地理位置</span>
            </template>
            <div class="hint"></div>
          </a-tooltip>
        </div>
        <div class="location-div" @click="getLocationCenter">
          <div class="location-icon"></div>
          <div class="location-span">设置项目中心点</div>
        </div>
      </div>
      <div class="lng-lat" v-if="project.centerLng && project.centerLat">经纬度：{{project.centerLat.toFixed(9)}}° N {{project.centerLng.toFixed(9)}}°E</div>
      <div class="setting-item">
        <div class="setting-label-div">
          <div class="setting-label">申请码加入项目</div>
        </div>
        <a-tooltip placement="bottom" v-if="props.modalType == 'insert'">
          <template #title>
            <span>项目创建完成后才能修改该选项</span>
          </template>
          <div  class="setting-value-div setting-value-div-disable">
            <div>{{project.isAllowRequestCode? "已开启": "未开启"}}</div>
            <div class="arrow-icon"></div>
          </div>
        </a-tooltip>
        <div v-else class="setting-value-div" @click="openChildSetting('申请码加入项目')">
          <div>{{project.isAllowRequestCode? "已开启": "未开启"}}</div>
          <div class="arrow-icon"></div>
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-label-div">
          <div class="setting-label">天气阻飞设置</div>
        </div>
        <div class="setting-value-div" @click="openChildSetting('天气阻飞设置')">
          <div>{{project.isCloudBlockFlight? "已开启": "未开启"}}</div>
          <div class="arrow-icon"></div>
        </div>
      </div>
      <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="project.isMultipleAircraft" />
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-label-div">
          <div class="setting-label">录制设置</div>
        </div>
        <a-tooltip placement="bottom" v-if="props.modalType == 'insert'">
          <template #title>
            <span>项目创建完成后才能修改该选项</span>
          </template>
          <div class="setting-value-div setting-value-div-disable">
            <div>{{(project.isAirportRecord || project.isAircraftRecord)? "已开启": "未开启"}}</div>
            <div class="arrow-icon"></div>
          </div>
        </a-tooltip>
        <div v-else class="setting-value-div" @click="openChildSetting('录制设置')">
          <div>{{(project.isAirportRecord || project.isAircraftRecord)? "已开启": "未开启"}}</div>
          <div class="arrow-icon"></div>
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-label-div">
          <div class="setting-label">分享设置</div>
        </div>
        <div class="setting-value-div" @click="openChildSetting('分享设置')">
          <div class="arrow-icon"></div>
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-label-div">
          <div class="setting-label">设备直传</div>
          <div class="hint"></div>
        </div>
        <div class="setting-value-div">
          <a-switch class="setting-switch" v-model:checked="project.isDeviceTrans" />
        </div>
      </div>
      <div class="setting-item" style="margin-bottom: 12px;">
        <div class="setting-label-div">
          <div class="setting-label">设备直传-计划设置</div>
          <div class="hint"></div>
        </div>
        <div class="setting-value-div">
          <a-switch class="setting-switch" v-model:checked="project.isDeicePlaneTrans" />
        </div>
      </div>
      <div class="setting-list-item" style="margin-bottom: 15px;">
        <div class="setting-list-title-div">
          <div class="setting-list-title">项目成员</div>
          <div class="setting-list-add" @click="openChildSetting('项目成员')">
            <div class="add-icon"></div>
            添加成员
          </div>
        </div>
        <div class="setting-table-title-div">
          <div class="table-title-item" style="width: 119px;">
            人员项目呼号
            <div class="sort-icon"></div>
          </div>
          <div class="table-title-item" style="width: 94px;">
            项目角色
            <div class="hint" style="margin-left: 4px;"></div>
          </div>
          <div class="table-title-item" style="width: 57px;border-right: 0px;">编辑</div>
        </div>
        <div class="setting-table-item" v-for="item in project.userIds">
          <div class="table-item-col" style="width: 119px;padding-left: 12px; justify-content: start;">
            {{ item.name }}
            <div class="user-icon" v-if="userId == item.id"></div>
          </div>
          <div class="table-item-col" style="width: 94px;">
            {{ item.role }}
          </div>
          <div class="table-item-col" style="width: 57px;">
            <div v-if="userId == item.id" class="list-del list-del-disable"></div>
            <div v-else class="list-del" @click="delUser(item)"></div>
          </div>
        </div>
      </div>
      <div class="setting-list-item"  style="margin-bottom: 15px;">
        <div class="setting-list-title-div">
          <div class="setting-list-title">项目设备</div>
          <div class="setting-list-add"  @click="openChildSetting('项目设备')">
            <div class="add-icon"></div>
            添加飞行器
          </div>
        </div>
        <div class="setting-table-title-div">
          <div class="table-title-item" style="width: 119px;">
            人员项目呼号
            <div class="sort-icon"></div>
          </div>
          <div class="table-title-item" style="width: 94px;">
            设备型号
          </div>
          <div class="table-title-item" style="width: 57px;border-right: 0px;">编辑</div>
        </div>
        <div class="setting-table-item" v-for="item in project.deviceIds">
          <div class="table-item-col" style="width: 119px;padding-left: 12px; justify-content: start;">
            {{item.name}}
            <div class="time-icon"></div>
          </div>
          <div class="table-item-col" style="width: 94px;">
            {{item.typeId}}
          </div>
          <div class="table-item-col" style="width: 57px;">
            <div class="list-del" @click="delDevice(item)"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="save-button" @click="saveProject">完成</div>
    <div :class="`child-setting ${childSetting.open? 'show-child-setting': ''}`">
      <div class="title">
        <div class="title-span">{{ childSettingTitle }}</div>
        <div class="close-add-modal" @click="closeChildSetting"></div>
      </div>
      <div class="add-project-interval"></div>
      <div class="add-project-content" style="max-height: calc(100% - 65px);">
        <RequestCode v-if="childSetting.type == '申请码加入项目'" :project="project"/>
        <Weather v-if="childSetting.type == '天气阻飞设置'" :project="project"/>
        <Record v-if="childSetting.type == '录制设置'" :project="project"/>
        <ShareSetting v-if="childSetting.type == '分享设置'" :project="project"/>
        <UserSetting v-if="childSetting.type == '项目成员'" :userId="userId" :project="project" :userList="userList" @searchUser="searchUser"/>
        <DeviceSetting v-if="childSetting.type == '项目设备'" :project="project" :deviceList="deviceList" @searchDevice="searchDevice"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, onMounted, watch } from "vue"
import { CaretDownOutlined } from '@ant-design/icons-vue'
import { getAccountList } from '@/api/demo/system';
import { AddWorkspace, EditWorkspace } from '@/api/demo/projecthome'
import RequestCode from './RequestCode/index.vue'
import Weather from './Weather/index.vue'
import Record from './Record/index.vue'
import ShareSetting from './ShareSetting/index.vue'
import UserSetting from './UserSetting/index.vue'
import DeviceSetting from './DeviceSetting/index.vue'
import { GetUavList } from '@/api/demo/projecthome'
import { defaultPorject } from './utils'
import * as mars3d from "mars3d";
import * as Cesium from "mars3d-cesium"
import cloneDeep from 'lodash/cloneDeep'
import { message } from "ant-design-vue";
import dayjs from "dayjs";

const props = defineProps(['addModal', 'modalType','map', 'updateProject'])
const emits = defineEmits(['update:addModal', 'getProjectList'])

let graphicLayer
watch(() => props.map, (val) => {
  if (val) {
    initGraphicLayer(val)
  }
}, { immediate: true })
function initGraphicLayer(map) {
  graphicLayer = new mars3d.layer.GraphicLayer()
  map.addLayer(graphicLayer)
}

watch(() => props.addModal, (newValue) => {
  console.log('addModal',newValue,props.modalType,props.map)
  if(newValue && props.modalType == 'insert'){
    project.value = JSON.parse(JSON.stringify(defaultPorject))
    console.log('userId',userId)
    console.log('userId == -1',userId == -1)
    if(userId == -1){
      project.value.userIds.push({id:-1,name:'超级管理员',role:'超级管理员'})
    }else{
      let user = userList.value.find(item => item.id == userId)
      project.value.userIds.push(user)
    }
  }else if(newValue && props.modalType == 'update'){
    let userId = props.updateProject.users.map(item => item.id)
    let userlist = userList.value.filter(item => userId.includes(item.id))
    let deviceId = props.updateProject.lasaDronePort.map(item => item.id)
    let deviceArray = deviceList.value.filter(item => deviceId.includes(item.id))
    project.value = {
      ...props.updateProject.workspace,
      requestCodeCutOffTime: props.updateProject.workspace.requestCodeCutOffTime? dayjs(props.updateProject.workspace.requestCodeCutOffTime): '',
      userIds: userlist,
      lockfly: props.updateProject.lasaSpaceLockFlies,
      deviceIds: deviceArray
    }
  }
})

const userId = localStorage.getItem('userid')
const childSetting = ref({
  open: false,
  type: ''
})
const childSettingTitle = ref('')
const project = ref({
  id: '',
  workspaceName: '',
  workspaceDesc: '',
  platformName: '',
  createTime: '',
  createId: '',
  bindCode: '',
  centerLng: '',
  centerLat: '',
  isAllowRequestCode: false,
  requestCode: '',
  requestCodeCutOffTime: '',
  isCloudBlockFlight: true,
  isWeatherBlockFlight: true,
  isMultipleAircraft: false,
  isAirportRecord: false,
  isAircraftRecord: false,
  isLiveShare: true,
  isMediaShare: true,
  isDeviceTrans: false,
  isDeicePlaneTrans: false,
  sate: 0,
  isDelete: true,
  lockfly:[
    {
      id: "",
      name: '大疆机场',
      windSpeed: 12,
      weatherWindSpeed: 15,
      rainFall: '大雨',
      workSpaceId: "",
    },
    {
      id: "",
      name: '大疆机场2',
      windSpeed: 8,
      weatherWindSpeed: 12,
      rainFall: '大雨',
      workSpaceId: "",
    },
    {
      id: "",
      name: '大疆机场3',
      windSpeed: 12,
      weatherWindSpeed: 12,
      rainFall: '大雨',
      workSpaceId: "",
    },
  ],
  userIds:[],
  deviceIds:[],
})
const userList = ref([])
const deviceList = ref([])

onMounted(() => {
  getAccountList({page:1,limit:999}).then(res => {
    userList.value = res.items
    if(userId == -1){
      project.value.userIds.push({id:-1,name:'超级管理员',role:'超级管理员'})
      return
    }
    let user = userList.value.find(item => item.id == userId)
    project.value.userIds.push(user)
  })
  GetUavList().then(res => {
    deviceList.value = res
  })
})

const closeAddModal = () => {
  emits('update:addModal',false)
}
const closeChildSetting = () => {
  childSetting.value.open = false
}
const openChildSetting = (type) => {
  let time = 0
  if(childSetting.value.open){
    if(childSetting.value.type == type){
      childSetting.value.open = false
      return
    }else{
      childSetting.value.open = false
      time = 100
    }
  }
  setTimeout(() => {
    childSetting.value.type = type
    switch(type){
      case '申请码加入项目':
        childSettingTitle.value = '申请码加入项目'
        break
      case '天气阻飞设置':
        childSettingTitle.value = '以下设置只在当前项目生效'
        break
      case '录制设置':
        childSettingTitle.value = '项目录制设置'
        break
      case '分享设置':
        childSettingTitle.value = '项目分享设置'
        break
      case '项目成员':
        childSettingTitle.value = '添加成员'
        break
      case '项目设备':
        childSettingTitle.value = '添加飞行器'
        break
    }
    childSetting.value.open = true
  },time)
}

const getLocationCenter = () => {
  const container = props.map.container
  container.style.cursor = "crosshair"
  props.map.on('click', (event) => {
    const cartesian = event.cartesian
    if (!cartesian) return
    const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
    const lon = Cesium.Math.toDegrees(cartographic.longitude)
    const lat = Cesium.Math.toDegrees(cartographic.latitude)
    const height = cartographic.height
    const position = { lng: lon, lat }
    project.value.centerLng = lon
    project.value.centerLat = lat
    const pointGraphic = new mars3d.graphic.PointEntity({
      position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
      style: {
        color: '#ff0000',
        pixelSize: 10,
        outlineColor: '#ffffff',
        outlineWidth: 2,
        label: {
          text: `经度: ${lon.toFixed(6)}\n纬度: ${lat.toFixed(6)}`,
          font_size: 16,
          color: '#000000',
          outline: true,
          outlineColor: '#ffffff',
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffsetY: -20
        }
      }
    })
    graphicLayer.clear()
    graphicLayer.addGraphic(pointGraphic)
  })
}
const searchUser = (key: string) => {
  getAccountList({page:1,limit:999,key,}).then(res => {
    console.log(123123)
    userList.value = res.items
  })
}
const searchDevice = (key: string) => {
  GetUavList({key}).then(res => {
    deviceList.value = res
  })
}
const delUser = (item) => {
  project.value.userIds = project.value.userIds.filter(userObj => userObj.id != item.id)
}
const delDevice = (item) => {
  project.value.deviceIds = project.value.deviceIds.filter(device => device.id != item.id)
}
const saveProject = () => {
  let error = 0
  let errorMessage = ''
  if(!project.value.workspaceName){
    error++
    errorMessage = errorMessage + '项目名称不能为空; '
  }
  if(!project.value.centerLat || !project.value.centerLng){
    error++
    errorMessage = errorMessage + '项目作业中心点不能为空; '
  }
  if(error > 0){
    message.warning(errorMessage)
    return
  }
  // let params = cloneDeep(project.value)
  let result = {
    lasaWorkspace: project.value,
    userIds: project.value.userIds.map(item => item.id),
    deviceIds: project.value.deviceIds.map(item => item.id),
    lockfly: project.value.lockfly
  }
  if(props.modalType == 'insert'){
    AddWorkspace(result).then(res => {
      message.success('项目添加成功')
      childSetting.value.open = false
      emits('update:addModal',false)
      emits('getProjectList')
    })
  }else if(props.modalType == 'update'){
    EditWorkspace(result).then(res => {
      message.success('项目编辑成功')
      childSetting.value.open = false
      emits('update:addModal',false)
      emits('getProjectList')
    })
  }
}
</script>

<style lang="scss" scoped>
.add-project{
  position: absolute;
  top: 0px;
  left: 300px;
  width: 300px;
  height: 820px;
  max-height: 820px;
  background: rgba(13, 14, 21, 0.8);
  box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), inset 0px 0px 36px 0px rgba(58,87,232,0.73);
  border-radius: 6px;
  backdrop-filter: blur(3px);
  padding: 10px 14px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  .hint{
    width: 12px;
    height: 12px;
    background-image: url('/public/projecthome/hint.png');
    background-size: 100% 100%;
    margin-left: 6px;
  }
  .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 37px;
    margin-bottom: 7px;
    .title-span{
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 33px;
      text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
    }
    .close-add-modal{
      width: 20px;
      height: 20px;
      background-image: url('/public/projecthome/close_button.png');
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .add-project-interval{
    height: 1px;
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
    border: 1px solid #4E5778;
    margin-left: -14px;
    margin-right: -14px;
    opacity: 0.2;
    margin-bottom: 16px;
  }
  .add-project-content{
    max-height: calc(100% - 105px);
    overflow: auto;
    scrollbar-width: none; 
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .add-project-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);
    .require-mark{
      display: flex;
      align-items: center;
      color: #F1752C;
    }
    .add-project-title-content{
      color: #ffffff;
    }
    .location-div{
      display: flex;
      align-items: center;
      color: #0A99EB;
      transition: 0.2s;
      cursor: pointer;
      .location-icon{
        width: 20px;
        height: 20px;
        background-image: url('/public/projecthome/location_icon.png');
        background-size: 100% 100%;
        margin-right: 4px;
      }
      .location-span{
      }
    }
    .location-div:hover{
      color: #45a6df;
    }
  }
  .add-project-name-input-div{
    margin-bottom: 13px;
    .add-project-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;
    }
  }
  .add-project-info-div{
    height: 92px;
    margin-bottom: 10px;
    .add-project-info{
      height: 92px;
      background: #151823;
      box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
      border-radius: 2px;
      border: 1px solid #3B4154;
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 13px;
      color: #FFFFFF;
      line-height: 18px;
      text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
    }
  }
  .lng-lat{
    font-family: 'PingFangSC-Regular';
    font-weight: 400;
    font-size: 12px;
    color: #858DA1;
    line-height: 17px;
    text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
    margin-bottom: 17px;
  }
  .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-value-div-disable{
      opacity: 0.7;
      cursor: no-drop;
    }
  }
  .setting-list-item{
    .setting-list-title-div{
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 18px;
      text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
      font-size: 13px;
      margin-bottom: 9px;
      .setting-list-title{
        font-family: 'PingFangSC-Medium';
        font-weight: 500;
        color: #FFFFFF;
        line-height: 18px;
      }
      .setting-list-add{
        display: flex;
        align-items: center;
        font-family: 'PingFangSC-Regular';
        font-weight: 400;
        color: #3A57E8;
        cursor: pointer;
        .add-icon{
          width: 16px;
          height: 16px;
          background-image: url('/public/projecthome/setting_list_add.png');
          background-size: 100% 100%;
          margin-right: 8px;
        }
      }
    }
    .setting-table-title-div{
      display: flex;
      height: 30px;
      background: #2D3342;
      border-radius: 2px 2px 0px 0px;
      border-top: 1px solid #444B5F;
      border-left: 1px solid #444B5F;
      border-right: 1px solid #444B5F;
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 13px;
      color: #FFFFFF;
      line-height: 18px;
      text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
      .table-title-item{
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #444B5F;
        .sort-icon{
          width: 11px;
          height: 14px;
          background-image: url('/public/projecthome/table_sort_icon.png');
          background-size: 100% 100%;
          margin-left: 2px;
        }
      }
    }
    .setting-table-item{
      display: flex;
      height: 35px;
      border-bottom: 1px solid #444B5F ;
      border-left: 1px solid #444B5F ;
      border-right: 1px solid #444B5F ;
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 17px;
      text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
      .table-item-col{
        display: flex;
        align-items: center;
        justify-content: center;
        .user-icon{
          width: 14px;
          height: 14px;
          background-image: url('/public/projecthome/user_icon.png');
          background-size: 100% 100%;
          margin-left: 3px;
        }
        .time-icon{
          width: 16px;
          height: 16px;
          background-image: url('/public/projecthome/time_icon.png');
          background-size: 100% 100%;
          margin-left: 4px;
        }
        .list-edit{
          width: 13px;
          height: 13px;
          background-image: url('/public/projecthome/list_edit.png');
          background-size: 100% 100%;
        }
        .list-del{
          width: 16px;
          height: 16px;
          background-image: url('/public/projecthome/list_del.png');
          background-size: 100% 100%;
          cursor: pointer;
        }
        .list-del-disable{
          background-image: url('/public/projecthome/list_del_disable.png');
        }
      }
    }
  }
  .save-button{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: #3A57E8;
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
    border-radius: 4px;
    font-family: 'PingFangSC-Medium';
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 33px;
    text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
    cursor: pointer;
  }
  .child-setting{
    position: absolute;
    top: 0px;
    left: 250px;
    width: 300px;
    height: 937px;
    max-height: calc(100vh - 144px);
    background: rgba(13, 14, 21, 0.8);
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), inset 0px 0px 36px 0px rgba(58,87,232,0.73);
    border-radius: 6px;
    backdrop-filter: blur(3px);
    padding: 10px 14px;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    z-index: 0;
  }
  .show-child-setting{
    left: 310px;
    opacity: 1;
    pointer-events: auto;
  }
}
.showModal{
  left: 349px;
  pointer-events: auto;
  opacity: 1;

}
</style>
