<template>
  <div class="container">
    <div class="box flex">
      <div class="time-box flex">
        <div class="time" :class="{ active: timeShare }" @click="updateTime1">
          <div>
            <!-- 分时 -->
            {{ $t('exchange.l60') }}
          </div>
        </div>
        <div class="time" v-for="(item, index) in timeList" :key="index" @click="updateTime(item)" :class="{ active: timeSign == item.time && !timeShare }">
          <div>{{ item.text }}</div>
        </div>
      </div>
      <div class="right flex">
        <div class="time more" :class="{active: ((symbolInfo.crypto != 1 && timeType == 2) || (symbolInfo.crypto == 1 && timeType == 1)) && !timeShare}" @click="showTimePop = true">
          <!-- 更多 <i class="el-icon-caret-bottom"></i> -->
           <template v-if="((symbolInfo.crypto != 1 && timeType == 2) || (symbolInfo.crypto == 1 && timeType == 1)) && !timeShare">
            {{ textName[timeSign] }} <i class="el-icon-caret-bottom"></i>
           </template>
           <template v-else>
            {{ $t('home.l6') }} <i class="el-icon-caret-bottom"></i>
           </template>
        </div>
        <img class="setting" @click="settingPop = true" src="/img/market/setting.png" alt="极度证券">
      </div>
    </div>
    <div id="kline">
      <div id="simple_chart1" :style="{'height': height}" />
      <div class="tooltip" v-if="!timeShare && tooltip" :class="tooltipP">
        <div class="row">
          <div class="label">
            <!-- 时间 -->
            {{ $t('common.l24') }}
          </div>
          <div>
            {{ tooltipDate(tooltipInfo.timestamp) }}
          </div>
        </div>
        <div class="row">
          <div class="label">
            <!-- 开 -->
            {{ $t('product.l133') }}
          </div>
          <div>
            {{ $handleDigits(tooltipInfo.open, symbolInfo.digits) }}
          </div>
        </div>
        <div class="row">
          <div class="label">
            <!-- 高 -->
            {{ $t('product.l134') }}
          </div>
          <div>
            {{ $handleDigits(tooltipInfo.high, symbolInfo.digits) }}
          </div>
        </div>
        <div class="row">
          <div class="label">
            <!-- 低 -->
            {{ $t('product.l135') }}
          </div>
          <div>
            {{ $handleDigits(tooltipInfo.low, symbolInfo.digits) }}
          </div>
        </div>
        <div class="row">
          <div class="label">
            <!-- 收 -->
            {{ $t('product.l136') }}
          </div>
          <div v-if="tooltipInfo.sign">
            {{ $handleDigits(symbolInfo.ask, symbolInfo.digits) }}
          </div>
          <div v-else>
            {{ $handleDigits(tooltipInfo.close, symbolInfo.digits) }}
          </div>
        </div>
        <div class="row">
          <div class="label">
            <!-- 涨跌额 -->
            {{ $t('product.l137') }}
          </div>
          <div v-if="tooltipInfo.sign" :style="{color: tooltipSpread < 0 ? kLineColor.down: kLineColor.up}">
            {{ tooltipSpread > 0 ? '+' : ''  }}{{ $handleDigits(tooltipSpread, symbolInfo.digits) }}
          </div>
          <div v-else :style="{color: tooltipInfo.spread < 0 ? kLineColor.down: kLineColor.up}">
            {{ tooltipInfo.spread > 0 ? '+' : ''  }}{{ $handleDigits(tooltipInfo.spread, symbolInfo.digits) }}
          </div>
        </div>
        <div class="row">
          <div class="label">
            <!-- 涨跌幅 -->
            {{ $t('market.l5') }}
          </div>
          <div v-if="tooltipInfo.sign" :style="{color: tooltipSpread < 0 ? kLineColor.down: kLineColor.up}">
            {{ tooltipSpread > 0 ? '+' : ''  }}{{ tooltipPercentage }}%
          </div>
          <div v-else :style="{color: tooltipInfo.spread < 0 ? kLineColor.down: kLineColor.up}">
            {{ tooltipInfo.spread > 0 ? '+' : ''  }}{{ tooltipInfo.percentage }}%
          </div>
        </div>
      </div>
    </div>
    <van-popup get-container="body" v-model="showTimePop" round position="bottom">
      <timeList v-if="showTimePop" :timeShare="timeShare" :timeSign="timeSign" :symbolInfo="symbolInfo" @success="updateTime" />
    </van-popup>
    <van-popup get-container="body" v-model="settingPop" round position="bottom">
      <indicatorSettings @cancel="settingPop = false" @switchIndicator="switchIndicator" :indicator="indicator" @switchKLineColorSign="switchKLineColorSign" :kLineColorSign="kLineColorSign" @switchCandleType="switchCandleType" :candleType="candleType" @switchMainImage="switchMainImage" :mainImage="mainImage" v-if="settingPop"/>
    </van-popup>
  </div>
</template>
<script>
import { dispose, init } from 'klinecharts'
import { mapGetters } from 'vuex'
import { getPriceList } from '@/api/product'
import bus from '@/utils/bus'
import timeList from "@/view/productDetail/quotation/components/timeList.vue";
import indicatorSettings from "@/view/productDetail/quotation/components/indicatorSettings.vue";
import { kLineColor, kLineLinesColor } from "@/utils/config";
export default {
  name: 'SimpleChart',
  props: {
    symbol: {},
    symbolInfo: {
      default() {
        return {}
      }
    },
    mdcShow: {
      default: false,
    },
    height: {
      default: '500px'
    }
  },
  components: {
    timeList,
    indicatorSettings
  },
  data() {
    return {
      timeSign: '1D',
      loading: false,
      timeShare: false,
      showTimePop: false,
      indicatorObj: {
        MACD: false,
        KDJ: false,
        RSI: false,
        WR: false,
        EMA: false,
        BRAR: false,
      },
      ma: true,
      timeType: 1,
      timeOptions: [
        {
          text: this.$t('product.l48'),
          type: 1,
          time: '1D',
        },
        {
          text: this.$t('product.l49'),
          type: 1,
          time: '7',
        },
        {
          text: this.$t('product.l50'),
          type: 1,
          time: '31',
        },
        {
          text: this.$t('product.l51'),
          type: 1,
          time: '365',
        }
      ],
      timeOptions1: [
        {
          text: '15' + this.$t('exchange.l74'),
          type: 2,
          time: '15',
        },
        {
          text: '30' + this.$t('exchange.l74'),
          type: 2,
          time: '30',
        },
        {
          text: '60' + this.$t('exchange.l74'),
          type: 2,
          time: '60',
        },
        {
          text: this.$t('product.l48'),
          type: 2,
          time: '1D',
        }
      ],
      chart: null,
      chartDataList: [],
      initSign: false,
      startDate: null,
      priceSign: false,
      chartSign: false,
      PriceVolumePrecision: 2,
      timerSign: 0,
      settingPop: false,
      mainImage: 'MA',
      candleType: 'candle_solid',
      kLineColorSign: '0',
      indicator: 'MACD',
      tooltip: false,
      tooltipP: 'pleft',
      tooltipInfo: {},
      toolTimer: null
    }
  },
  beforeDestroy() {
    if (this.toolTimer) {
      clearInterval(this.toolTimer)
      this.toolTimer = null
    }
    this.chart && this.chart.unsubscribeAction('onCrosshairChange')
    dispose('simple_chart1')
    bus.$off('updateChart', this.updateList)
  },
  computed: {
    ...mapGetters(['isLogin']),
    timeList() {
      return this.symbolInfo.crypto != 1 ? this.timeOptions : this.timeOptions1
    },
    textName() {
      return {
        '1': '1' + this.$t('exchange.l74'),
        '5': '5' + this.$t('exchange.l74'),
        '15': '15' + this.$t('exchange.l74'),
        '30': '30' + this.$t('exchange.l74'),
        '60': '60' + this.$t('exchange.l74'),
        '1D': this.$t('product.l48'),
        '7': this.$t('product.l49'),
        '31': this.$t('product.l50'),
        '365': this.$t('product.l51'),
      }
    },
    kLineColor() {
      return {
        up: this.kLineColorSign == '0' ? kLineColor.up : kLineColor.down,
        down: this.kLineColorSign == '1' ? kLineColor.up : kLineColor.down,
      }
    },
    tooltipSpread() {
      return this.$bigDecimal.subtract(this.symbolInfo.ask, this.tooltipInfo.yclose)
    },
    tooltipPercentage() {
      if (this.tooltipInfo.yclose) {
        return ((this.tooltipSpread / this.tooltipInfo.yclose) * 100).toFixed(2)
      }
      return 100
    }
  },
  created () {
    if (this.symbolInfo.crypto == 1) {
      this.timeSign = '15';
      this.timeType = 2
    }
    var mainImage = localStorage.getItem('mainImage')
    if (mainImage) {
      this.mainImage = JSON.parse(mainImage)
    }
    var candleType = localStorage.getItem('candleType')
    if (candleType) {
      this.candleType = JSON.parse(candleType)
    }
    var kLineColorSign = localStorage.getItem('kLineColorSign')
    if (kLineColorSign) {
      this.kLineColorSign = JSON.parse(kLineColorSign)
    }
    var indicator = localStorage.getItem('indicator')
    if (indicator) {
      this.indicator = JSON.parse(indicator)
    }
  },
  mounted() {
    this.getPriceList()
    bus.$on('updateChart', this.updateList)
  },
  methods: {
    updateList(data) {
      if ((this.symbol == data.symbol)) {
        // if (new Date().getTime() - this.timerSign > 1000) {
          // this.timerSign = new Date().getTime()
          this.updateTradesPrice(data)
        // }
      }
    },
    updateTradesPrice(data) {
      if (!this.initSign) {
        return
      }
      if (this.chartDataList.length) {
        var time = this.gettimestamp()
        var a = {
          timestamp: time,
        }
        var oldList = this.chartDataList[this.chartDataList.length - 1]
        if (time == oldList.timestamp) {
          a.open = oldList.open
          a.high = +data.ask > oldList.high ? +data.ask : oldList.high
          a.low = +data.ask < oldList.low ? +data.ask : oldList.low
          a.close = +data.ask
          a.volume = (oldList.volume + (Number(data.volume) || 0))
          this.chartDataList[this.chartDataList.length - 1].high = a.high
          this.chartDataList[this.chartDataList.length - 1].low = a.low
        } else {
          a.open = oldList.close
          a.high = +data.ask
          a.low = +data.ask
          a.close = +data.ask
          a.volume = (Number(data.volume) || 0)
          this.chartDataList.push(a)
        }
        this.chart.updateData(a)
      }
    },
    updateTime(item) {
      this.showTimePop = false
      if (!this.timeShare) {
        if (this.timeSign == item.time) {
          return
        }
      }
      this.timeSign = item.time
      this.timeType = item.type
      this.timeShare = false
      this.initSign = false
      this.getPriceList()
    },
    updateTime1() {
      if (this.timeShare) {
        return
      }
      this.timeSign = '1'
      this.timeShare = true
      this.initSign = false
      var startTime = this.getStartTime()
      this.getPriceList(startTime)
    },
    getPriceList(time) {
      this.loading = true;
      this.tooltip = false;
      var data = {
        symbol: this.symbol,
        type: this.timeSign === '1D' ? 1440 : this.timeSign,
        endTime: parseInt(new Date().getTime()),
      }
      if (this.timeShare) {
        data.count = 499
        if (this.symbolInfo.market !== 'CFD') {
          data.startTime = time
        }
      } else {
        data.count = 100
      }
      getPriceList(data).then((res) => {
        var list = res || [];
        if (this.timeShare && list.length == 0) {
          this.getPriceList(time - (24*60*60*1000))
          return
        }
        this.chartDataList = list.map((item) => {
          return {
            timestamp: +item.datetime,
            open: +item.open, // 开盘
            high: +item.high, // 最高
            low: +item.low, // 最低
            close: +item.close, // 收盘
            volume: item.volume || 0, // 成交量
          }
        })
        if (this.priceSign) {
          this.chart.clearData()
        } else {
          this.initChart()
        }
        this.priceSign = true
        if (this.chartDataList.length === 0) {
          // this.$message({
          //   message: this.$t('quote.no-data'),
          //   type: 'error',
          //   duration: 1500,
          // })
        }
        this.chartSign && this.initData()
      }).catch(() => {
        this.loading = false
      })
    },
    initChart() {
      this.chart = init('simple_chart1', {
        customApi: {
          formatDate: (dateTimeFormat, timestamp, format) => {
            if (this.timeShare) {
              return this.$parseTime(timestamp, '{h}:{i}')
            }
            if (this.timeSign == '1D' || this.timeSign == '7') {
              return this.$parseTime(timestamp, '{y}-{m}-{d}')
            }
            if (this.timeSign == '31') {
              return this.$parseTime(timestamp, '{y}-{m}')
            }
            if (this.timeSign == '365') {
              return this.$parseTime(timestamp, '{y}')
            }
            return this.$parseTime(timestamp, '{m}-{d} {h}:{i}')
          }
        }
      })
      this.chart.setStyles({
        grid: {
          show: true,
          horizontal: {
            show: true,
            dashedValue: [5, 4],
          },
          vertical: {
            show: true,
            dashedValue: [5, 4],
          }
        },
        xAxis: {
          show: true,
          axisLine: {
            show: false,
          },
          tickLine: {
            show: false,
          },
          tickText: {
            show: true,
            size: 10,
            color: '#888888'
          }
        },
        crosshair: {
          horizontal: {
            line: {
              color: '#888888'
            },
            text: {
              size: 10,
              color: '#FE6F30',
              borderColor: '#878787',
              backgroundColor: '#ffffff',
            }
          },
          vertical: {
            line: {
              color: '#888888',
            },
            text: {
              size: 10,
              color: '#FE6F30',
              borderColor: '#878787',
              backgroundColor: '#ffffff',
            }
          }
        },
        candle: {
          type: 'area',
          tooltip: {
            text: {
              size: 10
            },
            showRule: 'none',
          },
          bar: {
            upColor: this.kLineColor.up,
            downColor: this.kLineColor.down,
            upBorderColor: this.kLineColor.up,
            downBorderColor: this.kLineColor.down,
            upWickColor: this.kLineColor.up,
            downWickColor: this.kLineColor.down,
          },
          area: {
            lineSize: 1,
            lineColor: '#FF6F30',
            backgroundColor: [{
              offset: 0,
              color: 'rgba(255, 111, 48, 0.01)'
            }, {
              offset: 1,
              color: 'rgba(255, 111, 48, 0.2)'
            }]
          },
          priceMark: {
            high: {
              color: '#000000',
            },
            low: {
              color: '#000000',
            },
            last: {
              upColor: '#E6B700',
              downColor: '#E6B700',
              noChangeColor: '#E6B700',
              text: {
                size: 10,
                paddingLeft: 3,
                paddingTop: 1,
                paddingRight: 3,
                paddingBottom: 1,
                // style: 'stroke',
                borderSize: 0,
                borderColor: 'transparent',
                color: '#ffffff',
              }
            }
          }
        },
        yAxis: {
          inside: true,
          show: true,
          axisLine: {
            show: true,
            style: 'dashed',
            color: '#F6F6F6',
            dashedValue: [4, 4],
          },
          tickText: {
            size: 10,
            color: '#888888'
          },
          tickLine: {
            show: false,
          }
        },
        indicator: {
          ohlc: {
            upColor: this.kLineColor.up,
            downColor: this.kLineColor.down,
          },
          bars: [{
            upColor: this.kLineColor.up,
            downColor: this.kLineColor.down,
          }],
          lines: kLineLinesColor,
          tooltip: {
            text: {
              size: 10,
            }
          }
        },
        separator: {
          size: 0,
        },
      })
      this.chart.createIndicator('VOL', true, {
        id: 'VOL',
        height: 55
      })
      if (this.indicator !== 'null') {
        this.switchIndicator(this.indicator)
      }
      this.chart.subscribeAction('onCrosshairChange', (data) => {
        this.tooltipChange(data)
      })
      this.chart.setOffsetRightDistance(70)
      this.chartSign = true;
      this.initData()
      this.chart.loadMore(this.loadMore)
    },
    initData() {
      if (this.priceSign && this.chartSign) {
        this.loading = false;
        setTimeout(() => {
          this.chart.setStyles({
            candle: {
              type: this.timeShare ? 'area' : this.candleType,
            },
          })
          this.chart.setZoomEnabled(!this.timeShare)
          if (this.timeShare) {
            this.chart.setBarSpace(4)
          } else {
            this.chart.setBarSpace(8)
          }
          this.switchMainImage(this.mainImage)
          this.chart.applyNewData(this.chartDataList)
          this.initSign = true;
          this.chart.setPriceVolumePrecision(this.symbolInfo.digits, 2)
        }, 1000)
      }
    },
    gettimestamp() {
      var now = new Date();
      var sign2 = ":";
      var a
      var year = now.getFullYear() // 年
      var month = now.getMonth() + 1; // 月
      var day = now.getDate(); // 日
      var hour = now.getHours(); // 时
      var minutes = now.getMinutes(); // 分
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      var m = new Date(year + '/' + month + '/' + day + " " + hour + sign2 + minutes + sign2 + '00').getTime()
      if (this.timeSign == '1') {
        a = m
      }
      if (this.timeSign == '5') {
        var test =  Math.floor(minutes / 5) * 5
        a = new Date(year + '/' + month + '/' + day + " " + hour + sign2 + (test > 10 ? test : ('0' + test)) + ':00').getTime()
      }
      if (this.timeSign == '15') {
        var test =  Math.floor(minutes / 15) * 15
        a = new Date(year + '/' + month + '/' + day + " " + hour + sign2 + (test > 0 ? test : '00') + ':00').getTime()
      }
      if (this.timeSign == '30') {
        a = new Date(year + '/' + month + '/' + day + " " + hour + sign2 + (Math.floor(minutes / 30) > 0 ? '30' : '00') + ':00').getTime()
      }
      if (this.timeSign == '60') {
        a = new Date(year + '/' + month + '/' + day + " " + hour + ':00:00').getTime()
      }
      if (this.timeSign == '1D') {
        a = new Date(year + '/' + month + '/' + day + " " + '00:00:00').getTime()
      }
      if (this.timeSign == '7') {
        var now = new Date();
        var week = now.getDay();
        var day = now.getDate();
        if (week) {
          now.setDate(day - week + 1)
        } else {
          now.setDate(day - 7)
        }
        var year = now.getFullYear() // 年
        var month = now.getMonth() + 1; // 月
        day = now.getDate();
        a = new Date(year + '/' + month + '/' + day + " " + '00:00:00').getTime()
      }
      if (this.timeSign == '31') {
        a = new Date(year + '/' + month + '/01 00:00:00').getTime()
      }
      if (this.timeSign == '365') {
        a = new Date(year + '/01/01 00:00:00').getTime()
      }
      return a
    },
    loadMore(time) {
      if (this.timeShare) {
        return
      }
      this.loding = true
      getPriceList({
        symbol: this.symbol,
        type: this.timeSign === '1D' ? 1440 : this.timeSign,
        count: 100,
        endTime: time,
      })
        .then((res) => {
          var list = res || []
          var chartDataList = []
          list.forEach(item => {
            if (+item.datetime != time) {
                chartDataList.push({
                timestamp: +item.datetime,
                open: +item.open, // 开盘
                high: +item.high, // 最高
                low: +item.low, // 最低
                close: +item.close, // 收盘
                volume: item.volume || 0, // 成交量
              })
            }
          })
          this.chart.applyMoreData(chartDataList, chartDataList.length > 80)
        })
        .finally(() => {
          this.loding = false
        }).catch(() => {})
    },
    switchIndicator(key) {
      if (!this.chart) {
        return
      }
      this.indicator = key
      localStorage.setItem('indicator', JSON.stringify(key))
      for(var item in this.indicatorObj) {
        if (key == item) {
          this.chart.createIndicator(key, true, {
            id: key,
            height: 55
          })
        } else {
          this.chart.removeIndicator(item, item)
        }
      }
    },
    switchMainImage(key) {
      if (!this.chart) {
        return
      }
      this.mainImage = key
      localStorage.setItem('mainImage', JSON.stringify(key))
      if (key == 'null' || this.timeShare) {
        this.chart.removeIndicator('candle_pane', 'MA')
        this.chart.removeIndicator('candle_pane', 'BOLL')
      } else {
        if (key == 'MA') {
          this.chart.removeIndicator('candle_pane', 'BOLL')
          this.chart.createIndicator({
            name: 'MA',
            calcParams: [5, 10, 30],
          }, false, { id: 'candle_pane' })
          return
        }
        if (key == 'BOLL') {
          this.chart.removeIndicator('candle_pane', 'MA')
          this.chart.createIndicator('BOLL', false, { id: 'candle_pane' })
        }
      }
    },
    switchKLineColorSign(key) {
      if (!this.chart) {
        return
      }
      this.kLineColorSign = key
      localStorage.setItem('kLineColorSign', JSON.stringify(key))
      this.chart.setStyles({
        candle: {
          bar: {
            upColor: this.kLineColor.up,
            downColor: this.kLineColor.down,
            upBorderColor: this.kLineColor.up,
            downBorderColor: this.kLineColor.down,
            upWickColor: this.kLineColor.up,
            downWickColor: this.kLineColor.down,
          },
        },
        indicator: {
          ohlc: {
            upColor: this.kLineColor.up,
            downColor: this.kLineColor.down,
          },
          bars: [{
            upColor: this.kLineColor.up,
            downColor: this.kLineColor.down,
          }],
        },
      })
    },
    switchCandleType(key) {
      if (!this.chart) {
        return
      }
      this.candleType = key
      localStorage.setItem('candleType', JSON.stringify(key))
      if (!this.timeShare) {
        this.chart.setStyles({
          candle: {
            type: this.candleType,
          },
        })
      }
    },
    tooltipChange(data) {
      if (this.timeShare) {
        return
      }
      if (data.realDataIndex != data.dataIndex) {
        this.tooltip = false
        clearInterval(this.toolTimer)
        this.toolTimer = null
        return
      }
      this.tooltip = true
      this.tooltipP = data.x < 148 ? 'pright' : 'pleft'
      var tooltipInfo = data.kLineData
      var dataList = this.chart.getDataList()
      tooltipInfo.sign = (data.dataIndex == (dataList.length - 1))
      var close = (dataList[data.dataIndex - 1].close || 0)
      tooltipInfo.yclose = close
      tooltipInfo.spread = this.$bigDecimal.subtract(tooltipInfo.close, close)
      if (close) {
        tooltipInfo.percentage = ((tooltipInfo.spread / close) * 100).toFixed(2)
      } else {
        tooltipInfo.percentage = 100;
      }
      this.tooltipInfo = tooltipInfo
      if (this.toolTimer) {
        return
      }
      this.toolTimer = setInterval(() => {
        if (this.chart.getChartStore().getCrosshairStore().get().x === undefined) {
          this.tooltip = false
          clearInterval(this.toolTimer)
          this.toolTimer = null
        }
      }, 500)
    },
    tooltipDate(timestamp) {
      if (this.timeSign == '1D' || this.timeSign == '7') {
        return this.$parseTime(timestamp, '{m}-{d} {y}')
      }
      if (this.timeSign == '31') {
        return this.$parseTime(timestamp, '{y}-{m}')
      }
      if (this.timeSign == '365') {
        return this.$parseTime(timestamp, '{y}')
      }
      return this.$parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
    },
    getStartTime() {
      var nowTime = new Date();
      var offset = nowTime.getTimezoneOffset()/60;
      var beijingDate = new Date(nowTime.getTime() + ((offset + 8) * 60 * 60 * 1000));
      var year = beijingDate.getFullYear();
      var m = beijingDate.getMonth() + 1
      if (m < 10) {
        m = '0' + m
      }
      var d = beijingDate.getDate()
      if (d < 10) {
        d = '0' + d
      }
      return new Date(`${year}-${m}-${d}T${this.symbolInfo.market == 'US' ? '22:30:00' : '09:30:00'}+08:00`).getTime()
    }
  },
}
</script>
<style lang="less" scoped>
.box {
  padding-left: 10px;
  position: relative;
  column-gap: 39px;
  color: #888888;
  border-bottom: 1px solid #F6F6F6;
  .right {
    column-gap: 15px;
    .time {
      color: #000;
    }
  }
  .setting {
    cursor: pointer;
    width: 16px;
  }
}
.time-box {
  column-gap: 12px;
  white-space: nowrap;
  overflow-x: auto;
  justify-content: space-between;
  flex: 1;
  min-width: 0px;
}
.time {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 35px;
  position: relative;
  letter-spacing: 0;
  font-size: 12px;
  &.active {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
  }
}
.ul {
  padding: 0px 10px 9px;
  justify-content: space-between;
  .li {
    padding:0px 6px 6px;
    color: #B6B6B6;
    font-size: 12px;
    cursor: pointer;
    &.active {
      color: #000000;
    }
  }
}
#kline {
  position: relative;
  .tooltip {
    position: absolute;
    top: 22px;
    background-color: #FFFFFF;
    border: 1px solid #888888;
    width: 140px;
    padding: 7px 9px;
    font-size: 10px;
    color: #000000;
    z-index: 10;
    &.pleft {
      left: 4px;
    }
    &.pright {
      right: 14px;
    }
  }
  .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &+.row {
      margin-top: 4px;
    }
    .label {
      flex: 1;
      min-width: 0px;
    }
  }
}
</style>