<template>
  <PublicMapComponents class="map-base" :defCenter="[38.8417433306111, 118.43845367431642]" :defZoom="12" />

  <div class="base-div">
    <div class="title-top">
      <el-row>
        <el-col :span="6">
          <div class="title-name">
            <span>曹妃甸港区船舶岸电监管平台</span>
          </div>
          <div style="text-align: center;">
            <span class="title-data">
              <span></span>
              <span style="padding: 0 10px">累计用电：{{ totalPower.toFixed(2) }} kWH</span>
              <span></span>
            </span>
          </div>

        </el-col>
        <el-col :span="14">
          <el-row>
            <template v-for="(item, index) in dataTypeList" :key="index">
              <el-col :span="24 / dataTypeList.length">
                <div class="show-type-btn" :class="{ 'show-type-btn-active': activeButtonType === item.value }"
                  @click="updateButtonType(index + 1)">
                  {{ item.label }}
                </div>
              </el-col>
            </template>

          </el-row>
        </el-col>
        <el-col :span="4">
          <div class="title-time">
            <!--            <div class="title-time" @click="splitScreen = !splitScreen">-->
            <!-- 日期  不能换行  换行后显示中多空格 -->
            {{ timer.getFullYear() + '-' }}{{ ((timer.getMonth() + 1) > 9 ? (timer.getMonth() + 1) : ('0' +
              (timer.getMonth() + 1))) + '-' }}{{ (timer.getDate() > 9 ? timer.getDate() : ('0' + timer.getDate())) }}
            <!-- 时间  不能换行  换行后显示中多空格 -->
            {{ (timer.getHours() > 9 ? timer.getHours() : ('0' + timer.getHours())) + ':' }}{{ (timer.getMinutes() > 9 ?
              timer.getMinutes() : ('0' + timer.getMinutes())) + ':' }}{{ timer.getSeconds() > 9 ? timer.getSeconds() :
              ('0' + timer.getSeconds()) }}
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="showData ? 15 : 24" v-if="!splitScreen">
          <!--            <PublicMapComponents :defCenter="[38.8417433306111, 118.43845367431642]" :defZoom="12" v-if="showData"/>-->
        </el-col>




        <el-col :span="showData ? 9 : 16" v-if="splitScreen">
          <PublicMapComponents mapName="left" :illustration="true" :defCenter="[38.95448645628942, 118.4517351374956]"
            :defZoom="15" v-if="showData" />
          <PublicMapComponents mapName="left" :illustration="true" :defCenter="[38.95448645628942, 118.4517351374956]"
            :defZoom="15" v-if="!showData" />
        </el-col>
        <el-col :span="showData ? 6 : 8" v-if="splitScreen">
          <PublicMapComponents mapName="right" :illustration="false"
            :defCenter="[38.98524127752966, 118.45273520834166]" :defZoom="16" v-if="showData" />
          <PublicMapComponents mapName="right" :illustration="false"
            :defCenter="[38.98524127752966, 118.45273520834166]" :defZoom="16" v-if="!showData" />
        </el-col>



        <el-col :span="showData ? 9 : 0">
          <div class="data-info">
            <el-scrollbar height="100%">
              <div v-show="activeButtonType === 1" class="data-card">
                <el-row>
                  <el-col :span="8">
                    <div class="data-card-title">港口岸电使用情况</div>
                  </el-col>
                  <el-col :span="16">
                    <div class="data-date">
                      <span :class="dataDate == 1 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(1)">日</span>
                      <span :class="dataDate == 2 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(2)">周</span>
                      <span :class="dataDate == 3 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(3)">月</span>
                      <span :class="dataDate == 4 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(4)">年</span>
                      <span :class="dataDate == 5 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(5)">全部</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="24">
                    <div :class="dataType == 1 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 1">
                      <div class="data-card-content-big">{{ usedDl.toFixed(2) }}</div>
                      <div class="data-card-name">累计用电（千瓦时）</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div :class="dataType == 2 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 2">
                      <div class="data-card-content">{{ (usedDl / 7936.84).toFixed(2) }}</div>
                      <div class="data-card-name">减少燃油（吨）</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div :class="dataType == 3 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 3">
                      <div class="data-card-content">{{ (usedDl / 1.4925373).toFixed(2) }}</div>
                      <div class="data-card-name">减少二氧化碳排放（千克）</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div :class="dataType == 4 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 4">
                      <div class="data-card-content">{{ (usedDl / 684.93132534).toFixed(2) }}</div>
                      <div class="data-card-name">减少PM2.5排放（千克）</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div :class="dataType == 5 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 5">
                      <div class="data-card-content">{{ (usedDl / 55.24862549).toFixed(2) }}</div>
                      <div class="data-card-name">减少氮氧化物（千克）</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div :class="dataType == 6 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 6">
                      <div class="data-card-content">{{ (usedDl / 95.238).toFixed(2) }}</div>
                      <div class="data-card-name">减少二氧化硫（千克）</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-show="activeButtonType === 2" class="data-card">
                <el-row>
                  <el-col :span="10">
                    <div class="data-card-title" v-if="dataType == 1">港口企业岸电使用</div>
                    <div class="data-card-title" v-else-if="dataType == 2">港口企业燃油消耗减少</div>
                    <div class="data-card-title" v-else-if="dataType == 3">港口企业二氧化碳排放减少</div>
                    <div class="data-card-title" v-else-if="dataType == 4">港口企业PM2.5排放减少</div>
                    <div class="data-card-title" v-else-if="dataType == 5">港口企业氮氧化物排放减少</div>
                    <div class="data-card-title" v-else-if="dataType == 6">港口企业二氧化硫排放减少</div>
                  </el-col>
                  <el-col :span="14">
                    <div class="data-date">
                      <span :class="dataDate == 1 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(1)">日</span>
                      <span :class="dataDate == 2 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(2)">周</span>
                      <span :class="dataDate == 3 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(3)">月</span>
                      <span :class="dataDate == 4 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(4)">年</span>
                      <span :class="dataDate == 5 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(5)">全部</span>
                      <span class="date-button" v-show="showBerth" @click="updateBerth({})">返回</span>
                    </div>
                  </el-col>
                </el-row>
                <div class="data-card-black">
                  <div v-for="(item, index) in dockShowData" :key="index">
                    <div @click="updateBerth(item)">
                      <el-row>
                        <el-col class="data-progress-data" :span="6">
                          <div class="data-progress-name">{{ item.name }}</div>
                        </el-col>
                        <el-col class="data-progress-data" :span="18">
                          <div>
                            <el-progress :text-inside="true" :stroke-width="18" :percentage="item.value * 200"
                              status="success">
                              <span>
                                {{ (usedDl * item.value / (dataType == 1 ? 1 : dataType == 2 ? 7936.84 : dataType == 3 ?
                                  1.4925373 : dataType == 4 ? 684.93132534 : dataType == 5 ? 55.24862549 : dataType == 6 ?
                                    95.238 : 1)).toFixed(2) }}
                                {{ dataType == 1 ? ' kWH' : dataType == 2 ? ' t' : ' kg' }}
                              </span>
                            </el-progress>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div class="data-card-black">
                    <div v-for="(item, index) in usingData" :key="index">
                      <el-row>
                        <el-col :span="4">
                          <div class="ship-info-info-green">{{ item.dock }}</div>
                        </el-col>
                        <el-col :span="5">
                          <div class="ship-info-info-green">{{ item.berth }}</div>
                        </el-col>
                        <el-col :span="7">
                          <div class="ship-info-info-green">{{ item.name }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="ship-info-info-green">正在用电</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="ship-info-info-green">{{ item.used }}</div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>

              <div v-show="activeButtonType === 3" class="data-card">
                <el-row>
                  <el-col :span="10">
                    <div class="data-card-title">船舶岸电使用情况</div>
                  </el-col>
                  <el-col :span="14">
                    <div class="data-date">
                      <span :class="dataDate == 1 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(1)">日</span>
                      <span :class="dataDate == 2 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(2)">周</span>
                      <span :class="dataDate == 3 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(3)">月</span>
                      <span :class="dataDate == 4 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(4)">年</span>
                      <span :class="dataDate == 5 ? 'date-button-using' : 'date-button'"
                        @click="updateDataDate(5)">全部</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div :class="showShipData == 1 ? 'data-info-one-using' : 'data-info-one'"
                      @click="showShipData = showShipData == 1 ? 0 : 1">
                      <div class="data-card-content">13</div>
                      <div class="data-card-name-big">在泊船舶数量</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div :class="showShipData == 2 ? 'data-info-one-using' : 'data-info-one'"
                      @click="showShipData = showShipData == 2 ? 0 : 2">
                      <div class="data-card-content">3</div>
                      <div class="data-card-name-big">使用岸电船舶数量</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div :class="showShipData == 3 ? 'data-info-one-using' : 'data-info-one'"
                      @click="showShipData = showShipData == 3 ? 0 : 3">
                      <div class="data-card-content">10</div>
                      <div class="data-card-name-big">未使用岸电船舶数量</div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div v-if="showShipData != 0" class="ship-info-card">
                      <div class="ship-info">
                        <div class="ship-info-title" @click="showShipData = 0">收起 ↑</div>
                        <el-scrollbar height="180px">
                          <div v-for="(item, index) in shipData" :key="index">
                            <div
                              v-if="showShipData == 1 || (showShipData == 2 && item.reasonType == 1) || (showShipData == 3 && (item.reasonType == 2 || item.reasonType == 3))">

                              <el-popover :title="item.name" placement="left" :width="430">
                                <template #reference>
                                  <el-row>
                                    <el-col :span="3">
                                      <div
                                        :class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
                                        {{ item.name }}</div>
                                    </el-col>
                                    <el-col :span="5">
                                      <div
                                        :class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
                                        {{ item.dock }}</div>
                                    </el-col>
                                    <el-col :span="3">
                                      <div
                                        :class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
                                        {{ item.berth }}</div>
                                    </el-col>
                                    <el-col :span="13">
                                      <div
                                        :class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
                                        {{ item.reason }}</div>
                                    </el-col>
                                  </el-row>
                                </template>
                                <div>
                                  <div class="ship-info-info-default">船名：{{ item.name }}</div>
                                  <div
                                    :class="item.reasonType == 1 ? 'ship-info-info-green' : item.reasonType == 2 ? 'ship-info-info-yellow' : 'ship-info-info-red'">
                                    岸电使用情况：{{ item.reason }}</div>
                                  <div class="ship-info-info-default">船舶信息：{{ item.info }}</div>
                                </div>
                              </el-popover>
                            </div>
                          </div>
                        </el-scrollbar>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <!--              <div class="data-card">
                <div class="data-card-title" style="text-align: center;">船舶使用岸电情况</div>
                <el-row :gutter="10">
                  <el-col :span="6">
                    <div class="data-info-one" style="cursor: default;">
                      <div class="data-card-content">20</div>
                      <div class="data-card-name">岸电设备数量</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="data-info-one" style="cursor: default;">
                      <div class="data-card-content">10</div>
                      <div class="data-card-name">在泊船舶数量</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="data-info-one" style="cursor: default;">
                      <div class="data-card-content">3</div>
                      <div class="data-card-name">岸电使用船舶数量</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="data-info-one" style="cursor: default;">
                      <div class="data-card-content">1</div>
                      <div class="data-card-name">故障/维护岸电设施数量</div>
                    </div>
                  </el-col>
                </el-row>
              </div>-->

            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script setup lang="ts">

import PublicMapComponents from './components/index.vue'

defineOptions({ name: 'PublicMap' })

const timer = ref(new Date())
const getTime = () => {
  timer.value = new Date()
  setTimeout(() => {
    getTime()
  }, 100)
}
const splitScreen = ref(false)

const showData = ref(true)
const dataDate = ref<number>(1)
let defaultDlData = ref<number>(835229.91)
let totalPower = ref<number>(1492774 + defaultDlData.value)
let usedDl = ref<number>(defaultDlData.value * dataDate.value)
const buildDlData = () => {
  setTimeout(() => {
    buildDlData()
  }, 5000)
  defaultDlData.value = (defaultDlData.value + Math.random() * 10 + 30)
  totalPower.value = (1492774 + defaultDlData.value * 1)
  usedDl.value = (defaultDlData.value * dataDate.value)
}
const updateDataDate = (number: number) => {
  if (number == 5) {
    window.open("http://106.118.88.15:801/login", '_blank');
  } else {
    dataDate.value = number
    usedDl.value = 835229.9 * number
  }
}
const dataType = ref<number>(1)

const dataTypeList = ref<{ value: number, label: string }[]>([
  { value: 1, label: '港口岸电使用情况' },
  { value: 2, label: '港口企业岸电使用' },
  { value: 3, label: '船舶岸电使用情况' },
])

const dockData = ref([
  {
    index: 1, name: '华能码头', value: 0.278, berth: [
      { index: 1, name: '1泊位', value: 0.25 },
      { index: 2, name: '2泊位', value: 0.15 },
      { index: 3, name: '3泊位', value: 0.1 },
      { index: 4, name: '4泊位', value: 0.4 },
      { index: 5, name: '5泊位', value: 0.1 },
    ]
  },
  {
    index: 2, name: '国投码头', value: 0.495, berth: [
      { index: 1, name: '201泊位', value: 0.25 },
      { index: 2, name: '202泊位', value: 0.15 },
      { index: 3, name: '203泊位', value: 0.1 },
      { index: 4, name: '204泊位', value: 0.4 },
      { index: 5, name: '205泊位', value: 0.1 },
      { index: 1, name: '206泊位', value: 0.25 },
      { index: 2, name: '207泊位', value: 0.15 },
      { index: 3, name: '208泊位', value: 0.1 },
      { index: 4, name: '209泊位', value: 0.4 },
      { index: 5, name: '210泊位', value: 0.1 },
    ]
  },
  {
    index: 3, name: '华电码头（储运）', value: 0.227, berth: [
      { index: 1, name: '806泊位', value: 0.25 },
      { index: 2, name: '807泊位', value: 0.15 },
      { index: 3, name: '808泊位', value: 0.1 },
      { index: 4, name: '809泊位', value: 0.4 },
      { index: 5, name: '810泊位', value: 0.1 },
    ]
  }
])
const dockShowData = ref(dockData.value)
let showBerth = ref(false)
const updateBerth = (item: any) => {
  if (showBerth.value) {
    showBerth.value = false
    dockShowData.value = dockData.value
  }
  if (!showBerth.value) {
    if (item.berth) {
      showBerth.value = true
      dockShowData.value = item.berth
    }
  }
}

const usingData = ref([
  { index: 1, name: '华元503', dock: '华能码头', berth: '3泊位', used: '2479kWH' },
  { index: 1, name: '和泰通10', dock: '华电码头（储运）', berth: '810泊位', used: '2192kWH' },
  { index: 1, name: '永宁2', dock: '华电码头（储运）', berth: '808泊位', used: '692kWH' },

])


const shipData = ref([
  { index: 1, name: '华元503', dock: '华能码头', berth: '3泊位', reasonType: 1, reason: '使用岸电21小时45分钟，2479kWH', info: { info: '这里可以显示船舶的信息' } },
  { index: 2, name: '信洋新征程', dock: '国投码头', berth: '202#泊位', reasonType: 2, reason: '无受电设备', info: { info: '这里可以显示船舶的信息' } },
  { index: 3, name: '华海航2', dock: '华电码头（储运）', berth: '806泊位', reasonType: 2, reason: '船电设施损坏，预计2025-11-30恢复', info: { info: '这里可以显示船舶的信息' } },
  { index: 4, name: '东亿603', dock: '国投码头', berth: '205#泊位', reasonType: 2, reason: '电缆长度不匹配', info: { info: '这里可以显示船舶的信息' } },
  { index: 5, name: '东成山', dock: '华能码头', berth: '2泊位', reasonType: 2, reason: '岸电用电接口不匹配', info: { info: '这里可以显示船舶的信息' } },
  { index: 6, name: '中茂98', dock: '华电码头（储运）', berth: '807泊位', reasonType: 3, reason: '岸电设施维护中', info: { info: '这里可以显示船舶的信息' } },
  { index: 7, name: '舜华', dock: '国投码头', berth: '203#泊位', reasonType: 2, reason: '岸电用电接口不匹配', info: { info: '这里可以显示船舶的信息' } },
  { index: 8, name: '浙海温州', dock: '华能码头', berth: '5泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
  { index: 9, name: '浙能2', dock: '华能码头', berth: '1泊位', reasonType: 2, reason: '无受电设备', info: { info: '这里可以显示船舶的信息' } },
  { index: 10, name: '华润电力2', dock: '国投码头', berth: '201#泊位', reasonType: 3, reason: '气象因素禁止作业', info: { info: '这里可以显示船舶的信息' } },
  { index: 11, name: '和泰通10', dock: '华电码头（储运）', berth: '810泊位', reasonType: 1, reason: '使用岸电17小时45分钟，2192kWH', info: { info: '这里可以显示船舶的信息' } },
  { index: 12, name: '永宁2', dock: '华电码头（储运）', berth: '808泊位', reasonType: 1, reason: '使用岸电3小时15分钟，692kWH', info: { info: '这里可以显示船舶的信息' } },
  { index: 13, name: '盛达海', dock: '华能码头', berth: '4泊位', reasonType: 3, reason: '岸电设施维护中', info: { info: '这里可以显示船舶的信息' } },
  { index: 13, name: '新世纪128', dock: '国投码头', berth: '201#泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
  { index: 13, name: '太行128', dock: '国投码头', berth: '206#泊位', reasonType: 2, reason: '无受电设备', info: { info: '这里可以显示船舶的信息' } },
  { index: 13, name: '东和明16', dock: '国投码头', berth: '208#泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
  { index: 13, name: '华鲁海1', dock: '华电码头（储运）', berth: '809泊位', reasonType: 2, reason: '拒绝使用岸电', info: { info: '这里可以显示船舶的信息' } },
  { index: 13, name: '安永山', dock: '国投码头', berth: '204#泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
  { index: 13, name: '华盛151', dock: '国投码头', berth: '209#泊位', reasonType: 2, reason: '电缆长度不匹配', info: { info: '这里可以显示船舶的信息' } },
])
const showShipData = ref<number>(1)
const activeButtonType = ref<number>(1)

const updateButtonType = (type: number) => {
  activeButtonType.value = type
  // 在这里可以添加其他业务逻辑
  console.log('切换到按钮类型:', type)
}

/** 初始化 **/
onMounted(() => {
  getTime()
  buildDlData()
})


</script>
<style scoped lang="scss">
/* .map-base {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -999;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.7);
} */

.map-base:hover {
  z-index: 999;
}

.base-div {
  height: 100%;
  //background-color: rgba(10, 50, 100, 1);
  padding: 15px;

  .title-top {
    position: fixed;
    top: 20px;
    left: 30px;
    right: 30px;
    width: calc(100% - 60px);
    padding: 30px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

    .title-time {
      font-size: 20px;
      color: rgba(20, 200, 255, 0.8);
      font-weight: bold;
      text-align: right;
    }

    .title-name {
      font-size: 28px;
      color: rgba(20, 200, 255, 1);
      text-align: center;
      font-weight: bold;
      line-height: 30px;
      text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 6px rgba(20, 200, 255, 0.3), 0 0 7px rgba(20, 200, 255, 0.2), 0 0 8px rgba(20, 200, 255, 0.1);
    }

    .show-type-btn {
      margin: 5px;
      padding: 8px 12px;
      border: 1px solid rgba(10, 180, 240, 1);
      border-radius: 5px;
      font-size: 14px;
      color: rgba(10, 180, 240, 1);
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .show-type-btn-active {
      background-color: rgba(10, 180, 240, 1);
      color: rgba(0, 0, 0, 1);
      font-weight: bold;
    }

    .show-type-btn:hover {
      background-color: rgba(10, 180, 240, 0.2);
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .show-type-btn-active:hover {
      background-color: rgba(10, 180, 240, 1);
      transform: none;
      box-shadow: none;
    }

    .title-data {
      padding: 8px 15px;
      font-size: 20px;
      color: rgba(20, 200, 255, 0.8);
      font-weight: bold;
      text-align: right;
      border-radius: 10px;

      &:active {
        box-shadow: 0 0 15px 5px rgba(20, 200, 255, 0.3), 0 0 25px 10px rgba(20, 200, 255, 0.1);
      }
    }
  }

  .data-info {
    position: fixed;
    top: 100px;
    right: 0px;
    width: calc(40%);
    padding: 30px;
    border-radius: 10px;
    margin-left: 10px;

    .data-card-black {
      margin-top: 15px;
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 10px;
    }

    .data-card {
      margin-top: 15px;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.15);
      border-radius: 10px;

      .data-card-title {
        font-size: 18px;
        color: rgba(10, 180, 240, 1);
        font-weight: bold;
        line-height: 30px;
        text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
      }

      .data-date {
        text-align: right;
        margin: 2px;

        .date-button {
          margin: 6px;
          padding: 4px 8px;
          border: 1px solid rgba(10, 180, 240, 1);
          border-radius: 5px;
          font-size: 12px;
          color: rgba(10, 180, 240, 1);
          cursor: pointer;
        }

        .date-button-using {
          margin: 6px;
          padding: 4px 8px;
          background-color: rgba(10, 180, 240, 1);
          border: 1px solid rgba(10, 180, 240, 1);
          border-radius: 5px;
          font-size: 12px;
          color: rgba(0, 0, 0, 1);
          cursor: default;
        }
      }

      .data-info-one {
        margin-top: 10px;
        padding: 10px;
        text-align: center;
        background-color: rgba(10, 30, 30, 0.2);
        border: 1px solid rgba(10, 130, 170, 1);
        border-radius: 10px;
        cursor: pointer;

        .data-card-content-big {
          font-size: 30px;
          color: rgba(10, 180, 240, 1);
          font-weight: bold;
          line-height: 30px;
          text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
        }

        .data-card-content {
          font-size: 25px;
          color: rgba(10, 180, 240, 1);
          font-weight: bold;
          line-height: 25px;
          text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
        }

        .data-card-name {
          margin-top: 5px;
          font-size: 10px;
          color: rgba(200, 200, 200, 1);
        }

        .data-card-name-big {
          margin-top: 5px;
          font-size: 16px;
          color: rgba(240, 240, 240, 1);
        }
      }

      .data-info-one-using {
        margin-top: 10px;
        padding: 10px;
        text-align: center;
        background-color: rgba(30, 190, 240, 0.2);
        border: 1px solid rgba(50, 200, 255, 1);
        border-radius: 10px;
        cursor: pointer;

        .data-card-content-big {
          font-size: 30px;
          color: rgba(10, 180, 240, 1);
          font-weight: bold;
          line-height: 30px;
          text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
        }

        .data-card-content {
          font-size: 25px;
          color: rgba(10, 180, 240, 1);
          font-weight: bold;
          line-height: 25px;
          text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
        }

        .data-card-name {
          margin-top: 5px;
          font-size: 10px;
          color: rgba(200, 200, 200, 1);
        }

        .data-card-name-big {
          margin-top: 5px;
          font-size: 16px;
          color: rgba(240, 240, 240, 1);
        }
      }

      .data-progress-name {
        font-size: 15px;
        color: rgba(10, 180, 240, 1);
        font-weight: bold;
        line-height: 15px;
        text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
        cursor: pointer;
      }

      .data-progress-data {
        margin-top: 10px;
        margin-bottom: 5px;
        cursor: pointer;
      }

      .ship-info-card {
        margin-top: 10px;
        font-size: 15px;
        line-height: 30px;

        .ship-info-title {
          padding: 10px;
          text-align: center;
          font-size: 15px;
          color: rgba(10, 180, 240, 1);
          font-weight: 400;
          line-height: 15px;
          border: 1px solid rgba(10, 180, 240, 1);
          border-radius: 7px;
          cursor: pointer;
        }

        .ship-info {
          border-radius: 10px;
          border: 1px solid rgba(10, 180, 240, 1);
          background-color: rgba(10, 30, 30, 0.2);

          .ship-info-green {
            margin-left: 10px;
            color: rgba(50, 255, 100, 1);
          }

          .ship-info-red {
            margin-left: 10px;
            color: rgba(255, 70, 70, 1);
          }

          .ship-info-yellow {
            margin-left: 10px;
            color: rgba(255, 150, 0, 1);
          }
        }

      }
    }

  }

}

.ship-info-info-default {
  margin-left: 10px;
  margin-bottom: 5px;
  color: rgba(50, 50, 50, 1);
}

.ship-info-info-green {
  margin-left: 10px;
  margin-bottom: 5px;
  color: rgba(50, 200, 80, 1);
}

.ship-info-info-red {
  margin-left: 10px;
  margin-bottom: 5px;
  color: rgba(255, 70, 70, 1);
}

.ship-info-info-yellow {
  margin-left: 10px;
  margin-bottom: 5px;
  color: rgba(255, 150, 0, 1);
}
</style>
