<template>
  <!-- v-loading="bianloading" -->
  <div class="main" >
    <!-- 标题栏、时间选择、搜索框 -->
    <el-row class="header">
      <el-col class="navTitle" :span="12">
        <img class="img" :src="imgSrc" />
        <span v-html="`&nbsp;${navLabel}: Number of &nbsp; `"></span>
        <span class="navLabel">{{ $t( current.label) }}</span>
      </el-col>     
    </el-row>

    <!-- 时间导航 -->
    <div class="timeBox">
      <el-row>
        <el-col :span="24">
          <el-select
            class="symbol"
            v-model="symbolValue"
            @change="handelChang"
            size="small"
            filterable
          >
            <el-option
              v-for="item in symbolValueList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <ul class="timeList" @click="handelTimeList">
            <li title="1min">{{$t(`bian.oneMinutes`)}}</li>
            <li title="15min">{{$t(`bian.minutes15`)}}</li>
            <li title="4h">{{$t(`bian.hours4`)}}</li>
            <li title="1d">{{$t(`bian.day`)}}</li>
            <li title="1w">{{$t(`bian.weekly`)}}</li>
            <!-- <li><i class="i ixiaosanjiaodown triangle"></i></li> -->
          </ul>
          <span class="triangleBox"
            ><i class="i ixiaosanjiaodown triangle"></i
          ></span>
          <!-- 弹窗导航 -->
          <div class="popup">
            <p>{{$t(`bian.selectCycle`)}}</p>
            <ul class="popupList" @click="handelPopupList">
              <li title="1min" class="separate">{{$t(`bian.oneMinutes`)}}</li>
              <li title="3min">{{$t(`bian.minutes3`)}}</li>
              <li title="5min">{{$t(`bian.minutes5`)}}</li>
              <li title="15min" class="separate">{{$t(`bian.minutes15`)}}</li>
              <li title="30min">{{$t(`bian.minutes30`)}}</li>
              <li title="1h" class="separate">{{$t(`bian.hours1`)}}</li>
              <li title="2h">{{$t(`bian.hours2`)}}</li>
              <li title="4h" class="separate">{{$t(`bian.hours4`)}}</li>
              <li title="6h">{{$t(`bian.hours6`)}}</li>
              <li title="8h">{{$t(`bian.hours8`)}}</li>
              <li title="12h">{{$t(`bian.hours12`)}}</li>
              <li title="1d" class="separate">{{$t(`bian.day`)}}</li>
              <li title="3d">{{$t(`bian.day3`)}}</li>
              <li title="1w" class="separate">{{$t(`bian.weekly`)}}</li>
              <li title="1M">{{$t(`bian.month`)}}</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 时间及具体数据展示栏 -->
    <el-row>
      <el-col :span="24">
        <ul class="dynamicValueBox">
          <li>{{ dynamicTime || 0 }}</li>
          <li>
            {{$t(`bian.open`)}}:
            <span :style="{ color: dynamicColor }">{{
              dynamicValue[1] || 0
            }}</span>
          </li>
          <li>
            {{$t(`bian.high`)}}:
            <span :style="{ color: dynamicColor }">{{
              dynamicValue[4] || 0
            }}</span>
          </li>
          <li>
            {{$t(`bian.low`)}}:
            <span :style="{ color: dynamicColor }">{{
              dynamicValue[3] || 0
            }}</span>
          </li>
          <li>
            {{$t(`bian.closed`)}}:
            <span :style="{ color: dynamicColor }">{{
              dynamicValue[2] || 0
            }}</span>
          </li>
          <li>
            {{$t(`bian.volume`)}}:
            <span :style="{ color: dynamicColor }">{{
              dynamicBuyVolume || 0
            }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <!-- 图表 -->
    <el-row>
      <el-col :span="24">
        <!-- margin-left: -80px -->
        <div id="BiAnBox" style="width: 100%; min-height: 700px"></div>
      </el-col>
    </el-row>

    <!-- 页面底部描述 -->
    <div class="describe">
      <div class="tltle2"> {{$t(`bian.assets`)}}</div>
      <p class="Assets">{{ currencyAssets  }}</p>
      <div class="tltle2"> {{$t(`bian.interval`)}}</div>
      <p>{{$t(`bian.Real`)}}</p>
      <div class="tltle2">{{$t(`bian.introduce`)}}</div>
      <p>{{ introduce }}</p>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
export default {
  data() {
    return {
      option: {},
      show: "",
      params: {
        req: "list",
        radius: "bian",
        symbol: "BTCUSDT",
        timeInterval: "1min",
        start: "",
        end: "",
      },
      bianloading: false,
      wsData: [],
      requestStatus: false,
      zoomStart: "",
      zoomEnd: "",
      rolling: false,
      falg: false,
      upColor: "#fc5f5f",
      downColor: "#31baa0",
      dynamicValue: [],
      dynamicBuyVolume: "",
      dynamicColor: "",
      dynamicTime: "",
      symbolValue: "BTCUSDT",
      symbolValueList: [
        {
          value: "BTC",
          label: "BTCUSDT",
        },
        {
          value: "ETH",
          label: "ETHUSDT",
        },
        {
          value: "BCH",
          label: "BCHUSDT",
        },
        {
          value: "XRP",
          label: "XRPUSDT",
        },
        {
          value: "EOS",
          label: "EOSUSDT",
        },
        {
          value: "LTC",
          label: "LTCUSDT",
        },
        {
          value: "TRX",
          label: "TRXUSDT",
        },
        {
          value: "ETC",
          label: "ETCUSDT",
        },
        {
          value: "LINK",
          label: "LINKUSDT",
        },
        {
          value: "XLM",
          label: "XLMUSDT",
        },
        {
          value: "ADA",
          label: "ADAUSDT",
        },
        {
          value: "XMR",
          label: "XMRUSDT",
        },
        {
          value: "DASH",
          label: "DASHUSDT",
        },
        {
          value: "ZEC",
          label: "ZECUSDT",
        },
        {
          value: "XTZ",
          label: "XTZUSDT",
        },
        {
          value: "BNB",
          label: "BNBUSDT",
        },
        {
          value: "ATOM",
          label: "ATOMUSDT",
        },
        {
          value: "ONT",
          label: "ONTUSDT",
        },
        {
          value: "IOTA",
          label: "IOTAUSDT",
        },
        {
          value: "BAT",
          label: "BATUSDT",
        },
        {
          value: "VET",
          label: "VETUSDT",
        },
        {
          value: "NEO",
          label: "NEOUSDT",
        },
        {
          value: "QTUM",
          label: "QTUMUSDT",
        },
        {
          value: "IOST",
          label: "IOSTUSDT",
        },
        {
          value: "THETA",
          label: "THETAUSDT",
        },
        {
          value: "ALGO",
          label: "ALGOUSDT",
        },
        {
          value: "ZIL",
          label: "ZILUSDT",
        },
        {
          value: "KNC",
          label: "KNCUSDT",
        },
        {
          value: "ZRX",
          label: "ZRXUSDT",
        },
        {
          value: "COMP",
          label: "COMPUSDT",
        },
        {
          value: "OMG",
          label: "OMGUSDT",
        },
        {
          value: "DOG",
          label: "DOGEUSDT",
        },
        {
          value: "SXP",
          label: "SXPUSDT",
        },
        {
          value: "KAVA",
          label: "KAVAUSDT",
        },
        {
          value: "BAND",
          label: "BANDUSDT",
        },
        {
          value: "RLC",
          label: "RLCUSDT",
        },

        {
          value: "WAVE",
          label: "WAVESUSDT",
        },
        {
          value: "MKR",
          label: "MKRUSDT",
        },
        {
          value: "SNX",
          label: "SNXUSDT",
        },
        {
          value: "DOT",
          label: "DOTUSDT",
        },
        {
          value: "DEFI",
          label: "DEFIUSDT",
        },
        {
          value: "YFI",
          label: "YFIUSDT",
        },
        {
          value: "BAL",
          label: "BALUSDT",
        },
        {
          value: "CRV",
          label: "CRVUSDT",
        },
        {
          value: "TRB",
          label: "TRBUSDT",
        },
        {
          value: "RUNE",
          label: "RUNEUSDT",
        },
        {
          value: "SUSHI",
          label: "SUSHIUSDT",
        },
      ],
      times: null, //保存悬浮框计时器
      second: 0, //当前以停留秒数
      componentReq: "",
      imgSrc: "https://studio.glassnode.com/images/crypto-icons/btc.png",
      navLabel: "Bitcoin (BTC)",
      currencyAssets: "",
     
      introduce: "",
    };
  },
  created() {
    this.onOption();
  },

  beforeRouteLeave(to, from, next) {
    this.ws.close();
    this.requestStatus = false;

    next();
  },
  //映射仓库数据
  computed: {
    ...mapState({
      current: (state) => state.tab.currentMenu,
    }),
  },
  mounted() {
    //进页面默认取值
    this.userName = localStorage.getItem("username");
    this.show = localStorage.getItem("currentTabComponent");
    let myState = localStorage.getItem("leave");
    this.componentReq = JSON.parse(myState);
    this.currencyAssets = localStorage.getItem("assets");
    this.introduce = localStorage.getItem("introduce");
    //监听localstorage变化
    window.addEventListener("setItem", () => {
      let obj = localStorage.getItem("src");
      this.show = localStorage.getItem("currentTabComponent");
      this.userName = localStorage.getItem("username");
      let myState = localStorage.getItem("leave");
      this.componentReq = JSON.parse(myState);
      this.navLabel = JSON.parse(obj).label;
      let imgsrc = localStorage.getItem("imgsrc");
      this.imgSrc = JSON.parse(imgsrc);
      this.currencyAssets = localStorage.getItem("assets");
      this.introduce = localStorage.getItem("introduce");
    });
    this.upColor = "#fc5f5f";
    this.downColor = "#31baa0";
    this.params.start = this.getDate("day", -10);
    this.params.end = this.getDate();
    //处理下拉框数据
    this.handelSymbolValueList();
    //请求数据
    this.fetchBiAnData(
      this.params.req,
      this.params.radius,
      this.params.symbol,
      this.params.timeInterval,
      this.params.start,
      this.params.end
    );
  },
  watch: {
    // componentReq(val) {
    //   console.log(99999999999999999,val);
    //   if (val) {
    //     console.log("进入页面");
    //     this.fetchBiAnData(
    //       this.params.req,
    //       this.params.radius,
    //       this.params.symbol,
    //       this.params.timeInterval,
    //       this.params.start,
    //       this.params.end
    //     );
    //   } else {
    //     console.log("离开页面，我已关闭");
    //     this.ws.close();
    //     this.requestStatus = false;
    //   }
    // },
    show: {
      handler(value) {
        if (value == "bianController") {
         
          this.fetchBiAnData(
            this.params.req,
            this.params.radius,
            this.params.symbol,
            this.params.timeInterval,
            this.params.start,
            this.params.end
          );
        } else {
          //监听离开页面关闭websoket
       
          // this.ws.send({
          //   code:2,
          //   msg:'我已主动关闭'
          // })
          this.ws.close();
          this.requestStatus = false;
        }
      },
    },

    // show(val) {
    //
    //   console.log(val,99999);
    //   if (val == "bianController") {
    //     console.log("进入页面");
    //     this.fetchBiAnData(
    //       this.params.req,
    //       this.params.radius,
    //       this.params.symbol,
    //       this.params.timeInterval,
    //       this.params.start,
    //       this.params.end
    //     );
    //   } else {
    //     //监听离开页面关闭websoket
    //     console.log("离开页面，我已关闭");
    //     // this.ws.send({
    //     //   code:2,
    //     //   msg:'我已主动关闭'
    //     // })
    //     this.ws.close();//这里调用了 看一哈  就是没有走这里  打印的东西都没有打印
    //     this.requestStatus = false;
    //   }

    // },

    //WebSocket 发起请求 判断http请求成功才能发起
    requestStatus(val) {
      if (val) {
        this.handelWebSocket(
          this.params.timeInterval,
          this.params.symbol,
          this
        );

        this.rolling = true;
      }
    },
    //监听请求参数变化就重新发送请求
    params: {
      handler(val) {
        if (this.falg) {
          //判断不是分钟就不需要带请求时间
          if (
            val.timeInterval == "1min" ||
            val.timeInterval == "15min" ||
            val.timeInterval == "30min"
          ) {
            this.fetchBiAnData(
              this.params.req,
              this.params.radius,
              val.symbol,
              val.timeInterval,
              this.params.start,
              this.params.end
            );
          } else {
            this.fetchBiAnData(
              this.params.req,
              this.params.radius,
              val.symbol,
              val.timeInterval
            );
          }

          //监听请求数据变化 发送请求
          this.handelWebSocket(val.timeInterval, val.symbol, this);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initBianCharts() {
      //  "dark"
      this.myChart = echarts.init(document.getElementById("BiAnBox"), "dark");
      //
      this.myChart.setOption(this.option, true);
      //  当窗口或者大小发生改变时执行resize，重新绘制图表
      window.addEventListener("resize", () => {
        if (this.myChart)this.myChart.resize();
      });
    },
    //请求数据
    async fetchBiAnData(req, radius, symbol, timeInterval, start, end) {
      let _that = this;
      _that.bianloading = true;
    
      const list = await this.$API.getBiAnController(
        req,
        radius,
        symbol,
        timeInterval,
        start,
        end
      );

      this.bianData = list.data.data;
      let barColor = "";
      //初始化option
      this.onOption();
      if (this.myChart) {
        this.myChart.clear();
      }
      this.option.xAxis[0].data.length = 0;
      this.option.xAxis[1].data.length = 0;
      this.option.series[0].data.length = 0;
      this.option.series[3].data.length = 0;
      this.bianData.forEach((item) => {
        let day = item.openTime.split("T")[0];
        let hours = item.openTime.split("T")[1].split(".")[0];
        let time = `${day} ${hours}`;
        this.option.xAxis[0].data.push(time);
        this.option.xAxis[1].data.push(time);
        this.option.series[0].data.push([
          item.openPrice,
          item.closePrice,
          item.lowPrice,
          item.highPrice,
        ]);
        this.option.series[3].data.push(item.buyVolume);
      });
      this.myChart = echarts.init(document.getElementById("BiAnBox"), "dark");

      // //监听图表滚动 记录位置
      this.rolling = true;
      if (this.rolling) {
        // _that.dataZmstart =_that.option.series[0].data.length>900?100-(100/(_that.option.series[0].data.length/900)):10
        // this.dataZmstart=95
        this.zoomStart =
          this.bianData.length > 900
            ? 100 - 100 / (this.bianData.length / 900)
            : 10;
        this.zoomEnd = 100;
        this.rolling = false;
      } else {
        this.myChart.on("dataZoom", function (e) {
          this.zoomStart = e.start || e.batch[0].start;
          this.zoomEnd = e.end|| e.batch[0].end;
        });
      }
      this.option.dataZoom[0].start = this.zoomStart;
      this.option.dataZoom[0].end = this.zoomEnd;
      this.option.dataZoom[1].start = this.zoomStart;
      this.option.dataZoom[1].end = this.zoomEnd;
      //判断渲染数据长度动态改变显示的条数和缩放范围

      if (this.bianData.length > 10000) {
        this.option.dataZoom[0].minSpan = 0.5;
        this.option.dataZoom[0].maxSpan = 100;
        this.zoomStart = 99;
        this.zoomEnd = 100;
      } else if (this.bianData.length > 7000 && this.bianData.length < 10000) {
        this.option.dataZoom[0].minSpan = 1;
        this.option.dataZoom[0].maxSpan = 100;
        this.zoomStart = 99;
        this.zoomEnd = 100;
      } else if (this.bianData.length > 5000 && this.bianData.length < 7000) {
     
        this.option.dataZoom[0].minSpan = 1;
        this.option.dataZoom[0].maxSpan = 100;
        this.zoomStart = 95;
        this.zoomEnd = 100;
      } else if (this.bianData.length > 1000 && this.bianData.length < 5000) {
        this.option.dataZoom[0].minSpan = 5;
        this.option.dataZoom[0].maxSpan = 100;
        this.zoomStart = 90;
        this.zoomEnd = 100;
      } else if (this.bianData.length < 1000) {
        this.option.dataZoom[0].minSpan = 20;
        this.option.dataZoom[0].maxSpan = 100;
        this.zoomStart = 10;
        this.zoomEnd = 100;
      } else {
        this.option.dataZoom[0].minSpan = 99;
        this.option.dataZoom[0].maxSpan = 100;
        this.zoomStart = 0;
        this.zoomEnd = 100;
      }

      this.myChart.setOption(this.option, true);
    
      //  当窗口或者大小发生改变时执行resize，重新绘制图表
      window.addEventListener("resize", () => {
        if (this.myChart)this.myChart.resize();
      });
      // this.$forceUpdate();
      this.requestStatus = true;
      _that.bianloading = false;
    },
    //请求WebSocket 实时数据
    handelWebSocket(time, category, _that) {
      let barColor = "";
      //  _that.ws.close();

      _that.ws = new WebSocket(
        `wss://13.214.133.132:7101/marketall/websocket/${this.userName}`
      );

      //连接成功发送消息
      _that.ws.onopen = function () {
        _that.ws.send(`${time},${category}`);
      };
      // 服务器连接关闭
      _that.ws.onclose = function () {
        console.log("已关闭");
      };
      // 服务器连接出错
      _that.ws.onerror = function (e) {
        console.log("连接出错", e);
      };
      // 服务器返回信息
      _that.ws.onmessage = function (msg) {
        if (_that.isJSON(msg.data)) {
          _that.wsData = JSON.parse(msg.data).data;
        }

        //判断鼠标再图表hover消失就展示动态数据
        if (!_that.times) {
          _that.wsData.forEach((item) => {
            _that.dynamicValue = [
              0,
              item.openPrice,
              item.closePrice,
              item.lowPrice,
              item.highPrice,
            ];
            _that.dynamicBuyVolume = item.buyVolume;
            _that.dynamicTime = item.openTime;
          });

          if (_that.dynamicValue[1] > _that.dynamicValue[2]) {
            _that.dynamicColor = "#54ea92";
          } else {
            _that.dynamicColor = "#f64e56";
          }
        }

        _that.wsData.forEach((item) => {
          if (Object.keys(item).length < 13) return;
          let times = item.openTime;

          //在已经渲染的数据里面查找websoket数据 没有就Ppush到图表中
          if (_that.option.xAxis[0].data.indexOf(times) == -1) {
            _that.option.xAxis[0].data.push(times);
            _that.option.xAxis[1].data.push(times);
            _that.option.series[0].data.push([
              item.openPrice,
              item.closePrice,
              item.lowPrice,
              item.highPrice,
            ]);
            _that.option.series[3].data.push(item.buyVolume);
          } else {
            // console.log("找到数据替换",_that.option.series[3].data);
            _that.option.series[0].data[
              _that.option.series[0].data.length - 1
            ] = [
              item.openPrice,
              item.closePrice,
              item.lowPrice,
              item.highPrice,
            ];

            _that.option.series[3].data[
              _that.option.series[3].data.length - 1
            ] = item.buyVolume;

            return;
          }
        });

        //处理柱状图颜色
        let arr = _that.option.series[0].data.map((item) => {
          return [item[0], item[1]];
        });

        _that.option.series[3].itemStyle.color = function (params) {
          //  if(arr[params.dataIndex] === 'undefined'){
          //   console.log(params.dataIndex,123)
          //  }
          if (
            Number(arr[params.dataIndex][1] || 0) >=
            Number(arr[params.dataIndex][0])
          ) {
            barColor = "#f64e56";
          } else {
            barColor = "#54ea92";
          }

          return barColor;
        };
        //监听图表滚动 记录位置
        // if (_that.rolling) {
        //   // _that.dataZmstart =_that.option.series[0].data.length>900?100-(100/(_that.option.series[0].data.length/900)):10
        //   _that.zoomStart = 95;
        //   _that.zoomEnd = 100;
        //   _that.rolling = false;
        // } else {
        //   _that.myChart.on("dataZoom", function (e) {
        //     _that.zoomStart = e.start || e.batch[0].start;
        //     _that.zoomEnd = e.end|| e.batch[0].end;
        //   });
        // }

        _that.myChart.on("dataZoom", function (e) {
          _that.zoomStart = e.start || e.batch[0].start;
          _that.zoomEnd = e.end|| e.batch[0].end;
        });

        // console.log(_that.option.dataZoom);
        _that.option.dataZoom[0].start = _that.zoomStart;
        _that.option.dataZoom[0].end = _that.zoomEnd;
        _that.option.dataZoom[1].start = _that.zoomStart;
        _that.option.dataZoom[1].end = _that.zoomEnd;

        // console.log(_that.option, "数据");
        _that.myChart.setOption(_that.option, true);

        //  _that.initBianCharts()
      };
    },
    //处理弹窗的导航点击
    handelPopupList(event) {
      let title = event.target.title;
      this.params.timeInterval = title;
      this.falg = true;
    },
    //处理时间栏导航
    handelTimeList(event) {
      if (!event.target.title) return;
      let title = event.target.title;
      this.params.timeInterval = title;
      this.falg = true;
    },
    //时间
    getDate(type = null, number = 0) {
      var nowdate = new Date();
      switch (type) {
        case "day": //取number天前、后的时间
          nowdate.setTime(nowdate.getTime() + 24 * 3600 * 1000 * number);
          var y = nowdate.getFullYear();
          var m =
            nowdate.getMonth() + 1 >= 10
              ? nowdate.getMonth() + 1
              : "0" + (nowdate.getMonth() + 1);
          var d =
            nowdate.getDate() >= 10
              ? nowdate.getDate()
              : "0" + nowdate.getDate();
          var retrundate = `${y}-${m}-${d}`;
          break;
        default:
          //取当前时间
          var y = nowdate.getFullYear();
          var m =
            nowdate.getMonth() + 1 >= 10
              ? nowdate.getMonth() + 1
              : "0" + (nowdate.getMonth() + 1);
          var d =
            nowdate.getDate() >= 10
              ? nowdate.getDate()
              : "0" + nowdate.getDate();
          var retrundate = `${y}-${m}-${d}`;
      }
      return retrundate;
    },

    //判断是否是json
    isJSON(str) {
      if (typeof str === "string") {
        try {
          let obj = JSON.parse(str);
          if (typeof obj === "object" && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      }
    },
    //定义OPtion
    onOption() {
      this.zoomStart = 80;
      this.zoomEnd = 100;
      this.option = {
        animation: true,
        tooltip: {
          show: true,
          trigger: "axis",
          triggerOn: "mousemove|click",
          alwaysShowContent: false,
          hideDelay: 3000,
          axisPointer: {
            type: "line",
            axis: "x",
          },
          formatter: (parmas) => {
            // console.log(parmas,67746644447);
            this.dynamicTime = parmas[0].axisValue;
            this.dynamicValue = parmas[0].data;
            this.dynamicBuyVolume = parmas[1].data;
            this.dynamicColor = parmas[0].color;

            if (this.times) {
              clearInterval(this.times);
            }
            this.second = 0;
            this.times = setInterval(() => {
              this.second++;
              if (this.second === 3) {
                clearInterval(this.times);
                this.times = null;
              }
            }, 1000);
            //找到webscoket接收信息哪里
          },
        },
        axisPointer: {
          label: {
            //指示标背景颜色
            backgeoundColor: "#ccc",
          },
          link: [
            {
              xAxisIndex: "all",
            },
          ],
        },
        grid: [
          {
            left: 0,
            top: "3%",
            right: "10%",
            height: "77%",
            // borderWidth: 10,
            // containLabel: true,
          },
          {
            left: 0,
            top: "78%",
            right: "10%",
            height: "18%",
            // containLabel:true
          },
        ],
        xAxis: [
          {
            //是否显示X轴
            show: false,
            //显示在第一个grid坐标上
            gridIndex: 0,
            // 坐标轴类型
            // type: 'category',
            splitNumber: 20,
            //两端是否留白
            boundaryGap: false,
            //坐标轴最小刻度
            min: "dataMin",
            //坐标轴 最大刻度。
            max: "dataMax",
            //坐标轴X轴设置
            axisline: { show: false, onZero: false },
            //是否显示坐标轴刻度
            axisTick: { show: false },
            //是否显示刻度标签
            axiosLine: { show: false },
            axisLabel: { show: false, interval: 3 },
            axisPointer: {
              z: 100,
            },
            // 网格线
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(43,54,82,0.5)",
                width: 1,
                type: "solid",
              },
            },
            // 数据
            data: [],
          },
          {
            //是否显示X轴
            show: true,
            //显示在第一个grid坐标上
            gridIndex: 1,
            // 坐标轴类型
            // type: 'category',
            splitNumber: 20,
            //两端是否留白
            boundaryGap: false,
            //坐标轴最小刻度
            min: "dataMin",
            //坐标轴 最大刻度。
            max: "dataMax",
            //坐标轴X轴设置
            axisline: { show: false, onZero: false },
            //是否显示坐标轴刻度
            axisTick: { show: false },
            //是否显示刻度标签
            axiosLine: { show: false },
            axisLabel: {
              show: true,
              normal: {
                interval: 0,
              },     
              formatter: function (value) {
                if (!value) return;

                let time = value.split(" ")[1].split(":");

                return `${time[0]}:${time[1]}`;
              },
            },
            // 网格线
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(43,54,82,0.5)",
                width: 1,
                type: "solid",
              },
            },
            // 数据
            data: [],
          },
        ],
        yAxis: [
          {
            //是否显示Y轴
            show: true,
            //grid索引值
            gridIndex: 0,
            //在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度
            alignTicks: false,
            //Y轴位置
            position: "right",
            //Y轴类型
            type: "value",
            //坐标两边留白
            boundaryGap: false,
            //坐标最小刻度
            // min: "dataMin",
            //坐标最大刻度
            // max: "dataMax",
            //是否脱零设置
            scale: true,
            //坐标轴轴线相关设置。
            axisLine: { show: false },
            //坐标轴刻度相关设置。
            axisTick: { show: false },
            //网格设置
            splitLine: {
              show: false,
              lineStyle: {
                color: "#2b3652",
                width: 1,
                type: "dotted",
              },
            },
            //y轴文字的配置
            axisLabel: {
              inside: false,
              interval: 3,
              textStyle: {
                color: "rgba(255, 255, 255, 1)", //Y轴内容文字颜色
              },
            },
            axisLine: {
              onZero: false,
            },
            //Y轴位置显示偏移
            offset: 20,

            // interval:200,
          },
          {
            //是否显示Y轴
            show: true,
            //grid索引值
            gridIndex: 1,
            //在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度
            alignTicks: false,
            //Y轴位置
            position: "right",
            //Y轴类型
            type: "value",
            //坐标两边留白
            boundaryGap: false,
            //坐标最小刻度
            min: "dataMin",
            //坐标最大刻度
            // max: "dataMax",
            //是否脱零设置
            scale: false,
            //坐标轴轴线相关设置。
            axisLine: { show: false },
            //坐标轴刻度相关设置。
            axisTick: { show: false },
            splitNumber: 1,
            //网格设置
            splitLine: {
              show: false,
              lineStyle: {
                color: "#2b3652",
                width: 1,
                type: "dotted",
              },
            },
            //y轴文字的配置
            axisLabel: {
              inside: false,
              textStyle: {
                color: "rgba(255, 255, 255, 1)", //Y轴内容文字颜色
              },
            },
            axisLine: {
              onZero: false,
            },
            //Y轴位置显示偏移
            offset: 20,
            // min:0,
            // max:3000,
            //  interval:1000,
          },
        ],
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0, 1],
            start: this.zoomStart,
            end: this.zoomEnd,
            minSpan: 1,
            maxSpan: 10,
          },
          {
            type: "slider",
            show: false,
            xAxisIndex: [0, 1],
            start: this.zoomStart,
            end: this.zoomEnd,
            minSpan: 1,
            maxSpan: 10,
          },
        ],
        series: [
          {
            type: "candlestick",
            name: "K",
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: "70%",
            barMaxWidth: "70%",
            data: [],
            // markLine: {
            //   symbol: ["none", "none"],
            //   precision: 4,
            //   silent: true,
            //   data: [
            //     {
            //       type: "average",
            //       yAxis: 0,
            //       label: {
            //         position: "end",
            //         padding: [3, 4],
            //         color: "#fff",
            //         backgroundColor: "#f2a725",
            //         borderRadius: 2,
            //       },
            //       lineStyle: {
            //         type: "solid",
            //         color: "#b3b3b8",
            //       },
            //     },
            //   ],
            // },
            lineStyle: {
              // color: this.downColor,
              // color0: this.upColor,
              // borderColor: this.downColor,
              // borderColor0: this.upColor,
            },
            //绘制右侧Y轴
            // markLine: {
            //   symbol: ["none", "none"], //去掉箭头
            //   itemStyle: {
            //     normal: {
            //       lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
            //     },
            //   },
            //   // lineStyle:{
            //   //   color:"red"
            //   // },

            //   label: {
            //     formatter: "{b}",
            //     fontSize: 10,
            //     color: "rgba(0,0,0,0.8)",
            //     align: "left",
            //   },
            //   data: [
            //     {
            //       name: "25k",
            //       yAxis: 25000,
            //     },
            //     {
            //       name: "20k",
            //       yAxis: 20000,
            //     },
            //     {
            //       name: "15k",
            //       yAxis: 15000,
            //       // position: ['100%', '50'],
            //     },
            //         {
            //       name: "10k",
            //       yAxis: 10000,
            //     },
            //     {
            //       name: "5k",
            //       yAxis: 5000,
            //     },
            //   ],
            // },
          },
          {
            name: "MA5",
            type: "line",
            data: [],
            smooth: false,
            showSymbol: false,
            lineStyle: {
              opacity: 0.5,
            },
          },
          {
            name: "MA10",
            type: "line",
            data: [],
            smooth: false,
            showSymbol: false,
            lineStyle: {
              opacity: 0.5,
            },
          },
          {
            type: "bar",
            name: "成交量",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [],
            barCategoryGap: "30%",
            itemStyle: {
              color: "",
            },
            //绘制右侧Y轴
            // markLine: {
            //   symbol: ["none", "none"], //去掉箭头
            //   itemStyle: {
            //     normal: {
            //       lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
            //     },
            //   },
            //   // lineStyle:{
            //   //   color:"red"
            //   // },

            //   label: {
            //     formatter: "{b}",
            //     fontSize: 10,
            //     color: "rgba(0,0,0,0.8)",
            //     align: "left",
            //   },
            //   data: [
            //     {
            //       name: "1000",
            //       yAxis: 1000,
            //     },
            //     {
            //       name: "5000",
            //       yAxis: 5000,
            //     },
            //     {
            //       name: "8000",
            //       yAxis: 8000,
            //       // position: ['100%', '50'],
            //     },
            //   ],
            // },
          },
        ],
      };
    },
    //处理下拉框数据
    handelSymbolValueList() {
      let str =
        "SRMUSDT EGLDUSDT SOLUSDT ICXUSDT STORJUSDT BLZUSDT UNIUSDT AVAXUSDT FTMUSDT HNTUSDT ENJUSDT FLMUSDT TOMOUSDT RENUSDT KSMUSDT NEARUSDT AAVEUSDT FILUSDT RSRUSDT LRCUSDT MATICUSDT OCEANUSDT CVCUSDT BELUSDT CTKUSDT AXSUSDT ALPHAUSDT ZENUSDT SKLUSDT GRTUSDT 1INCHUSDT CHZUSDT SANDUSDT ANKRUSDT BTSUSDT LITUSDT UNFIUSDT REEFUSDT RVNUSDT SFPUSDT XEMUSDT BTCSTUSDT COTIUSDT CHRUSDT MANAUSDT ALICEUSDT HBARUSDT";
      str = str.split(" ");

      str.forEach((item) => {
        let obj = {};
        obj.value = item;
        obj.label = item;
        this.symbolValueList.push(obj);
      });
    },
    handelChang(e) {
      let obj = this.symbolValueList.find((item) => item.value == e);
      this.params.symbol = obj.label;
      this.falg = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  margin: 0px;
  padding: 0px;
  width: 100%;
}
.main {
  width: 100vw;
  margin-left: -10px;
  padding: 0px !important;
}
//头部显示页面
.header {
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
}
.img {
  width: 20px;
  object-fit: cover;
}
.navLabel {
  color: rgba(0, 0, 0, 0.6);
}


.timeList {
  display: flex;
  // outline: 1px solid red;
  width: 100%;
  height: 35px;
  font-size: 12px;
  background: #100c2a;
  color: #848e9c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  align-items: center;
  margin-left: -5px;
  padding-left: 240px;
}
.timeList li {
  width: 50px;
  text-align: center;
  cursor: pointer;
}
.timeList li:hover {
  color: #f0b90b;
}
.timeBox {
  position: relative;
  margin: 0px;
  padding: 0px 10px;
}
// --------下拉框-------
.symbol {
  position: absolute;
  top: 9px;
  left: 10px;
}
.popup {
  background: #23282d;
  top: 30px;
  left: 470px;
  z-index: 99;
  height: 170px;
  width: 260px;
  position: absolute;
  padding: 0px 10px;
  display: none;
  transition: 0.5s;
}
.popup:hover {
  display: block;
  z-index: 99;
}
.popup p {
  width: 100%;
  height: 15px;
  margin: 3px 7px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.popupList {
  display: flex;
  flex-wrap: wrap;
}
.popupList li {
  width: 55px;
  height: 25px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 8px;
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  line-height: 25px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}
.popupList li:hover {
  background: rgba(255, 255, 255, 0.3);
}
.popupList .separate {
  background: rgba(240, 185, 11, 0.3);
  color: #f0b90b;
}
.triangleBox:hover + .popup {
  display: block;
  z-index: 99;
}
.triangleBox {
  position: absolute;
  // background: red;
  left: 480px;
  top: 3px;
  height: 30px;
  cursor: pointer;
}
.triangle {
  color: #848e9c;
}
// --------------动态展示数据盒子-------------------
.dynamicValueBox {
  background: #100c2a;
  width: calc(100vw - 320px);
  height: 30px;
  display: flex;
  font-size: 12px;
  color: #76808f;
  align-items: center;
  margin-left: -5px;
  padding-left: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dynamicValueBox li {
  // background: #f0b90b;
  margin-left: 10px;
  padding: 2px 2px;
}
//底部样式
.describe {
  // height: 150px;
  // padding-left: 100px;
  background: rgba(0, 0, 0, 0.1);
  /* background: pink; */
  padding: 10px 20px;
  // background: gold;
  margin-top: 30px;
  outline: 1px solid rgba(0, 0, 0, 0.2);
}
// --------币种显示----------------
.Assets {
  // background: gold;
  width: 100%;
  height: 30px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.describe .tltle1 {
  height: 50px;
  // line-height: 50px;
  //  background: pink;

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 10px;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.8);
}
.describe p {
  /* outline: 1px solid red; */
  /* color: rgba(0, 0, 0, 0.4); */
  color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
  // padding-left: 10px;
}
</style>

<style  lang="scss">
.timeBox .el-input__inner {
  background: rgba(255, 255, 255, 0.1);
  height: 25px;
  color: rgba(255, 255, 255, 0.7);
}
// .el-select-dropdown{
//   background:rgba(0, 0, 0, 0.2);
//   color: rgba(255, 255, 255, 0.7);
// }

</style>