<template>
  <n-scrollbar class="show-scrollbar">
    <n-space class="map-setting" vertical>

      <n-space style="flex-flow: row; align-items: center;">

        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;" >加載比例</n-text>
        <n-slider
          style="padding: 8px; width: 160px;height: 28px;align-content: center;border-radius: 4px;background-color: #2080F0;"
          :min="1"
          :step="1"
          :max="maxPointNum"
          @dragend="handleDragSaveSetting"
          v-model:value="mapDrawingStore.mapSetting.pointNum"/>
        <n-input-number
          :min="1"
          :max="maxPointNum"
          :show-button="false"
          size="small"
          style="width: 80px; color: #fff;"
          v-model:value="mapDrawingStore.mapSetting.pointNum"
          @blur="handleDragSaveSetting">
          <template #suffix>萬</template>
        </n-input-number>
        
      </n-space>

      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">控制模式</n-text>
        <n-radio-group v-model:value="mapDrawingStore.mapSetting.control">
          <n-space style="gap: 1px 1px;">
            <n-radio-button class="radio-btn" style="width: 80px;" value="orbit">軌道</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="fly">飛行</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-space>


      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">顯示質(zhì)量</n-text>
        <n-radio-group v-model:value="mapDrawingStore.mapSetting.quality" @update:value="handleDragSaveSetting">
          <n-space style="gap: 1px 1px;">
            <n-radio-button class="radio-btn" style="width: 80px;" value="low">低質(zhì)量</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="height">高質(zhì)量</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-space>


      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">顯示內(nèi)容</n-text>
        <n-space style="gap: 1px 1px;">
          <n-button
            v-for="(item, index) of showOptions"
            :key="'showContent' + index"
            style="width: 60px; height: 30px;"
            :type="item.active ? 'primary' : ''"
            @click="handleVisible(item)">
            {{ item.label }}
          </n-button>
        </n-space>
      </n-space>


      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">顯示模式</n-text>
        <n-radio-group v-model:value="mapDrawingStore.mapSetting.cameraMode">
          <n-space style="gap: 1px 1px;">
            <n-radio-button class="radio-btn" style="width: 80px;" value="o">正交</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="p">透視</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-space>


      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">渲染模式</n-text>
        <n-radio-group v-model:value="mapDrawingStore.mapSetting.cameraMode">
          <n-space style="gap: 1px 1px;">
            <n-radio-button class="radio-btn" style="width: 80px;" value="o">表面</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="p">XRAY</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-space>


      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">著色模式</n-text>
        <n-radio-group v-model:value="mapDrawingStore.mapSetting.showColor">
          <n-space style="gap: 1px 1px;">
            <n-radio-button class="radio-btn" style="width: 80px;" value="rgb">RGB</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="color">單色</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-space>


      <n-space style="flex-flow: row; align-items: center;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">點(diǎn)云大小</n-text>
        <n-slider 
        style="padding: 8px; width: 160px;height: 28px;align-content: center;border-radius: 4px;background-color: #2080F0;"
        :min="0.1" 
        :max="10" 
        :step="0.01" 
        v-model:value="mapDrawingStore.mapSetting.pointCloudSize"/>
        <n-input-number
          :min="0.1"
          :max="10"
          :step="0.01"
          size="small"
          :show-button="false"
          style="width: 80px; color: #fff"
          v-model:value="mapDrawingStore.mapSetting.pointCloudSize">
        </n-input-number>
      </n-space>



      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">大小類型</n-text>
        <n-radio-group v-model:value="mapDrawingStore.mapSetting.showColor">
          <n-space style="gap: 1px 1px;">
            <n-radio-button class="radio-btn" style="width: 80px;" value="rgb">固定</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="color">衰減</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="rgb">自適應(yīng)</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-space>

      <n-divider style="margin-top: 24px; width: 330px; " />

      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">透明模式</n-text>
        <n-radio-group v-model:value="mapDrawingStore.mapSetting.showColor">
          <n-space style="gap: 1px 1px;">
            <n-radio-button class="radio-btn" style="width: 80px;" value="rgb">自動</n-radio-button>
            <n-radio-button class="radio-btn" style="width: 80px;" value="color">手動</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-space>


      <n-space style="flex-flow: row; align-items: center;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;" >透明調(diào)節(jié)</n-text>
        <n-slider 
          style="padding: 8px; width: 160px;height: 28px;align-content: center;border-radius: 4px;background-color: #2080F0;"
          :min="0" 
          :max="1" 
          :step="0.01" 
          v-model:value="mapDrawingStore.mapSetting.pointCloudOpacity" />
        <n-input-number
          :min="0"
          :max="1"
          :step="0.01"
          size="small"
          :show-button="false"
          style="width: 80px; color: #fff"
          v-model:value="mapDrawingStore.mapSetting.pointCloudOpacity">
        </n-input-number>
      </n-space>

      <n-divider style="margin-top: 24px; width: 330px; " />


      <n-space style="flex-flow: row; align-items: center;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">顯示長度</n-text>
        <n-slider
          style="padding: 8px; width: 160px;height: 28px;align-content: center;border-radius: 4px;background-color: #2080F0;"
          :min="0"
          :step="0.01"
          @dragend="handleDragSaveSetting"
          :max="mapDrawingStore.mapSetting.maxShowHieght"
          v-model:value="mapDrawingStore.mapSetting.showHeight"/>
        <n-input-number
          :min="0"
          :step="0.01"
          :show-button="false"
          size="small"
          style="width: 80px; color: #fff"
          :max="mapDrawingStore.mapSetting.maxShowHieght"
          v-model:value="mapDrawingStore.mapSetting.showHeight"
          @blur="handleDragSaveSetting">
          <template #suffix>米</template>
        </n-input-number>
      </n-space>

      <n-space style="flex-flow: row; align-items: center;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">顯示寬度</n-text>
        <n-slider
          style="padding: 8px; width: 160px;height: 28px;align-content: center;border-radius: 4px;background-color: #2080F0;"
          :min="0"
          :step="0.01"
          @dragend="handleDragSaveSetting"
          :max="mapDrawingStore.mapSetting.maxShowHieght"
          v-model:value="mapDrawingStore.mapSetting.showHeight"/>
        <n-input-number
          :min="0"
          :step="0.01"
          :show-button="false"
          size="small"
          style="width: 80px; color: #fff"
          :max="mapDrawingStore.mapSetting.maxShowHieght"
          v-model:value="mapDrawingStore.mapSetting.showHeight"
          @blur="handleDragSaveSetting">
          <template #suffix>米</template>
        </n-input-number>
      </n-space>


      <n-space style="flex-flow: row; align-items: center;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">顯示高度</n-text>
        <n-slider
          style="padding: 8px; width: 160px;height: 28px;align-content: center;border-radius: 4px;background-color: #2080F0;"
          :min="0"
          :step="0.01"
          @dragend="handleDragSaveSetting"
          :max="mapDrawingStore.mapSetting.maxShowHieght"
          v-model:value="mapDrawingStore.mapSetting.showHeight"/>
        <n-input-number
          :min="0"
          :step="0.01"
          :show-button="false"
          size="small"
          style="width: 80px; color: #fff"
          :max="mapDrawingStore.mapSetting.maxShowHieght"
          v-model:value="mapDrawingStore.mapSetting.showHeight"
          @blur="handleDragSaveSetting">
          <template #suffix>米</template>
        </n-input-number>
      </n-space>

      <n-divider style="margin-top: 24px; width: 330px; " />

      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">深度增強(qiáng)</n-text>
        <n-space style="gap: 1px 1px;">
          <n-button style="width: 26px; height: 26px;"></n-button>
        </n-space>
      </n-space>

      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">三窗視圖</n-text>
        <n-space style="gap: 1px 1px;">
          <n-button style="width: 26px; height: 26px;"></n-button>
        </n-space>
      </n-space>

      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">視角控件</n-text>
        <n-space style="gap: 1px 1px;">
          <n-button style="width: 26px; height: 26px;"></n-button>
        </n-space>
      </n-space>

      <n-space style="flex-flow: row; align-items: center; width: 340px;">
        <n-text class="color-white" style="width: 60px; display: flex; font-size: 15px;">狀態(tài)展示</n-text>
        <n-space style="gap: 1px 1px;">
          <n-button style="width: 26px; height: 26px;"></n-button>
        </n-space>
      </n-space>


      <!-- <div class="close" @click="handleClose">
        <svg-icon local-icon="map-setting-close"></svg-icon>
      </div> -->
    </n-space>
  </n-scrollbar>
</template>