<template>
  <div style="width: 100%">
    <div v-if="language === 'cn'">
      <img src="../../../public/img/typhoonLegend.png" alt="">
    </div>
    <div v-else>
      <el-row class="weather-header">
        <el-col class="header-item flex-center" :span="8" style="color: #FFFFFF">
          {{ language === 'en' ? 'Typhoon Level' : '等级' }}
        </el-col>
        <el-col class="header-item flex-center" :span="8" style="color: #FFFFFF">
          {{ language === 'en' ? 'Wind Speed (m/s)' : '风速(米/秒)' }}
        </el-col>
        <el-col class="header-item flex-center" :span="8" style="color: #FFFFFF">
          {{ language === 'en' ? 'Wind Force (level)' : '风力(级)' }}
        </el-col>
      </el-row>
      <div>
        <el-row class="item-m">
          <el-col class="header-item" :span="8">
            <div class="flex-column-center">
              <div style="width: 16px;height: 16px;background: #056BF3;border-radius: 50%;margin-right: 10px"></div>
              {{ language === 'en' ? 'Tropical Depression' : '热带低压' }}
            </div>
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '10.8～17.1' : '10.8～17.1' }}
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '6～7' : '6～7' }}
          </el-col>
        </el-row>
        <el-row>
          <el-col class="header-item" :span="8">
            <div class="flex-column-center">
              <div style="width: 16px;height: 16px;background: #E9D309;border-radius: 50%;margin-right: 10px"></div>
              {{ language === 'en' ? 'Tropical Storm' : '热带风暴' }}
            </div>
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '17.2～24.2' : '17.2～24.2' }}
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '8～9' : '8～9' }}
          </el-col>
        </el-row>
        <el-row>
          <el-col class="header-item" :span="8">
            <div class="flex-column-center">
              <div style="width: 16px;height: 16px;background: #F98F2A;border-radius: 50%;margin-right: 10px"></div>
              {{ language === 'en' ? 'Severe Tropical Storm' : '强热带风暴' }}
            </div>
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '24.5～32.6' : '24.5～32.6' }}
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '10～11' : '10～11' }}
          </el-col>
        </el-row>
        <el-row>
          <el-col class="header-item" :span="8">
            <div class="flex-column-center">
              <div style="width: 16px;height: 16px;background: #F60900;border-radius: 50%;margin-right: 10px"></div>
              {{ language === 'en' ? 'Typhoon' : '台风' }}
            </div>
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '32.7～41.4' : '32.7～41.4' }}
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '12～13' : '12～13' }}
          </el-col>
        </el-row>
        <el-row>
          <el-col class="header-item" :span="8">
            <div class="flex-column-center">
              <div style="width: 16px;height: 16px;background: #FF3AA0;border-radius: 50%;margin-right: 10px"></div>
              {{ language === 'en' ? 'Violent Typhoon' : '强台风' }}
            </div>
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '41.5～50.9' : '41.5～50.9' }}
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '14～15' : '14～15' }}
          </el-col>
        </el-row>
        <el-row>
          <el-col class="header-item" :span="8">
            <div class="flex-column-center">
              <div style="width: 16px;height: 16px;background: #AB00DC;border-radius: 50%;margin-right: 10px"></div>
              {{ language === 'en' ? 'Super Typhoon' : '超强台风' }}
            </div>
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '≥51' : '≥51' }}
          </el-col>
          <el-col class="header-item flex-center" :span="8">
            {{ language === 'en' ? '≥16' : '≥16' }}
          </el-col>
        </el-row>
      </div>
      <el-divider/>
      <div>
        <el-row class="item-m-2">
          <div class="flex-column-center">
            <div style="width: 16px;height: 16px;border: 2px solid #DBD651;border-radius: 50%;margin-right: 10px"></div>
            {{ language === 'en' ? 'Seven Level Wind Circle' : '七级风圈' }}
          </div>
        </el-row>
        <el-row class="item-m-2">
          <div class="flex-column-center">
            <div style="width: 16px;height: 16px;border: 2px solid #D4702B;border-radius: 50%;margin-right: 10px"></div>
            {{ language === 'en' ? 'Ten Level Wind Circle' : '十级风圈' }}
          </div>
        </el-row>
        <el-row class="item-m">
          <div class="flex-column-center">
            <div class="flex flex-column-center" style="margin-right: 10px">
              <div style="width: 8px;height: 8px;border-radius: 50% ;background: #F98F2A;"></div>
              <div style="width: 21px;height: 1px;border-bottom: 2px solid #F98F2A;"></div>
              <div style="width: 8px;height: 8px;border-radius: 50% ;background: #F98F2A;"></div>
            </div>
            {{ language === 'en' ? 'Actual Route' : '实际路径' }}
          </div>
        </el-row>
        <el-row class="item-m-2">
          <div class="flex-column-center">
            <div class="flex flex-column-center" style="margin-right: 10px">
              <div style="width: 8px;height: 8px;border-radius: 50% ;background: #F98F2A;"></div>
              <div style="width: 2px;height: 2px;background: #F98F2A;border-radius: 50%;margin: 0 2px"></div>
              <div style="width: 4px;height: 4px;background: #F98F2A;border-radius: 50%;margin: 0 3px"></div>
              <div style="width: 2px;height: 2px;background: #F98F2A;border-radius: 50%;margin: 0 2px"></div>
              <div style="width: 8px;height: 8px;border-radius: 50% ;background: #F98F2A;"></div>
            </div>
            {{ language === 'en' ? 'Predicting Route' : '预测路径' }}
          </div>
        </el-row>
        <el-row class="item-m-2">
          <div class="flex-column-center">
            <div class="flex flex-column-center" style="margin-right: 10px">
              <div style="width: 35px;height: 2px;border-bottom: 2px solid #FF3AA0;"></div>
            </div>
            {{ language === 'en' ? '24H Warning Line' : '24小时警戒线' }}
          </div>
        </el-row>
        <el-row class="item-m-2">
          <div class="flex-column-center">
            <div class="flex flex-column-center" style="margin-right: 10px">
              <div style="width: 3px;height: 3px;border-radius: 50% ;background: #FF3AA0;"></div>
              <div style="width: 3px;height: 3px;background: #FF3AA0;border-radius: 50%;margin: 0 4px"></div>
              <div style="width: 3px;height: 3px;background: #FF3AA0;border-radius: 50%;"></div>
              <div style="width: 3px;height: 3px;background: #FF3AA0;border-radius: 50%;margin: 0 4px"></div>
              <div style="width: 3px;height: 3px;border-radius: 50% ;background: #FF3AA0;"></div>
            </div>
            {{ language === 'en' ? '48H Warning Line' : '48小时警戒线' }}
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'

@Component({})
export default class WeatherImage extends Vue {
  private language = window.localStorage.getItem('language')

  private cancel() {
    console.log('')
  }
}
</script>

<style scoped lang="scss">
.weather-header {
  background: #7A8AC1;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 22px;
  width: 535px;
}

.header-item {
  height: 40px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 30px;
}

.item-m-2 {
  margin: 10px 0 !important;
}

.el-divider {
  margin: 5px 0 !important;
}
</style>
