var RED_COLOR = '#ef232a';
var GREEN_COLOR = '#14b143';
var NORMAL_COLOR = '#999';
function numberFormatter(number, isOpenMillion = true, fixedLength = 2) {

    if (!number) return ''
    if (number < 100 ** 2) {
        return `${number.toFixed(fixedLength)} `
    }

    if (isOpenMillion && number >= 100 ** 4) {
        return `${(number / 100 ** 4).toFixed(fixedLength)} 亿`
    }

    return `${(number / 100 ** 2).toFixed(fixedLength)} 万`
}
function max(numberArray) {
    if (!numberArray) return 0
    numberArray = numberArray.filter(item => !!item)

    return Math.max.apply(numberArray, numberArray)
}

function min(numberArray) {
    if (!numberArray) return 0
    numberArray = numberArray.filter(item => !!item)

    return Math.min.apply(numberArray, numberArray)
}

function getColumnData(arr, column) {
    return arr.map(item => {
        return item[column]
    })
}
function timeFormatter(t, needTime = false) {
    if (!t) return t
    var e = String(t);
    return `${e.substr(0, 4)}-${e.substr(4, 2)}-${e.substr(6, 2)}` + (needTime ? ` ${e.substr(8, 2)}: ${e.substr(10, 2)}` : '')
}
function numberFormatterToThreeParts(value) {
    return `${value}`.split('').reverse().join('').match(/\w{1,3}/g).map(item => item.split('').reverse().join('')).reverse().join(',')
}
function calculateMA(dayCount, data) {
    var result = [];
    for (var i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
    }
    return result;
}
  // name点击切换数据源 只用kline数据 使用iniajax()
  $(".inves-x-l-btns span").click(function(){
    var klinenav = $(this).index();
    $(".inves-x-l-btns span").eq(klinenav).addClass("in").siblings("span").removeClass('in');
    var datetype = $(".inves-x-l-btns span").eq(klinenav).data("type");
    var dateurl = "https://hqapi.p5w.net/kline?code=300773.SZ&type="+datetype;
    switch (datetype) {
      case 6:
        name = "日K"
        break;
      case 7:
        name = "周K"
        break;
      case 8:
        name = "月K"
        break;
      case 9:
        name = "年K"
        break;
    }
    iniajax(dateurl,name);
    // console.log(dateurl);
  });

  // k线 数据点击切换
  // $(".inves-x-r-nav span").click(function(){
  //   var ixrnnum = $(this).index();
  //   $(".inves-x-r-nav span").eq(ixrnnum).addClass("in").siblings("span").removeClass('in');
  //   $(".inves-x-l-k .kinfo").eq(ixrnnum).addClass("in").siblings(".kinfo").removeClass('in');
  //   if ($(".kline-x").hasClass("in")) {
  //     $(".inves-x-l-btns").show();
  //   }else{
  //     $(".inves-x-l-btns").hide();
  //   }
  // });
  // if ($(window).width() <= 768) {
  //   $(".biinfo-m").hide();
  //   $(".inves-x-r-nav span").click(function(){
  //     var ixrnnum = $(this).index();
  //     $(".inves-x-r-nav span").eq(ixrnnum).addClass("in").siblings("span").removeClass('in');
  //     $(".inves-x-l-k .kinfo").eq(ixrnnum).addClass("in").siblings(".kinfo").removeClass('in');
  //     if ($(".kline-x").hasClass("in")) {
  //       $(".inves-x-l-btns").show();
  //       $(".biinfo-m").hide();
  //     }else{
  //       $(".inves-x-l-btns").hide();
  //       $(".biinfo-m").show();
  //     }
  //   });
  // }



  var iniajax = function(dateurl,name){
    $.ajax({
      url: dateurl,
      type:"GET",
      success:function(data){
        var mychart = echarts.init(document.getElementById('lklkline-d'));
        var rawData = data;
        // console.log(data);
          // 0交易时间  1开盘价  2最高价  3最低价  4收盘价  5成交量  6成交额
          var dates = rawData.map(function (item) {
              return item[0];
          });
          var data = rawData.map(function (item) {
              return [+item[1], +item[4], +item[3], +item[2]];
          });
          var BarData = rawData.map(function (item) {
              return item[5];
          });
          var option = {
              backgroundColor: '#fff',
              legend: {
                data: [name, 'MA5', 'MA10', 'MA20', 'MA30'],
                inactiveColor: '#777',
                textStyle: {color: '#000'},
                right: 20,
                top: 10
              },
              tooltip: {
                trigger: 'axis',
                position(pos, params, dom, rect, size) {
                  // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                  var obj = { top: 40 }
                  obj[
                    ["left", "right"][+(pos[0] < size.viewSize[0] / 2)]
                  ] = 5
                  return obj
                },
                axisPointer: {
                  animation: false,
                  type: 'cross',
                  lineStyle: {
                    color: '#000',
                    width: 1,
                    opacity: 0.8
                  },
                  label: {
                    formatter(label) {
                      if (label.axisDimension == "x")
                        return timeFormatter(label.value)

                      if (label.axisDimension === "y") {
                        let fixedLength = label.axisIndex == 1 ? 0 : 2
                        label.value = label.value.toFixed(fixedLength)
                      }

                      return label.value
                    },
                  }
                },


          formatter(value) {
                  // 使用第二个数据做标识, 如果该数据没有值, 则部显示tooltip
                  if (!value[0].value[1]) {
                    return null
                  }
                  function buildTipsContent(data) {
                    let layoutStyle = `style="display: flex; justify-content: space-between;"`,
                                      margin = `style="margin-right: 10px"`
                    let result = data
                      .sort((a, b) => a.seriesIndex - b.seriesIndex)
                      .map((item) => {
                        let value = 0

                        if (!item.seriesIndex) {
                          try {
                            let data =
                              rawData[item.dataIndex],
                              preIndex = item.dataIndex - 1,
                              yestodayClosePrice =
                                rawData[
                                preIndex >= 0
                                  ? preIndex
                                  : 0
                                ][4],
                              openRange = (
                                (item.value[1] /
                                  yestodayClosePrice -
                                  1) *
                                100
                              ).toFixed(2),
                              closeRange = (
                                (item.value[2] /
                                  yestodayClosePrice -
                                  1) *
                                100
                              ).toFixed(2),
                              minRange = (
                                (item.value[3] /
                                  yestodayClosePrice -
                                  1) *
                                100
                              ).toFixed(2),
                              maxRange = (
                                (item.value[4] /
                                  yestodayClosePrice -
                                  1) *
                                100
                              ).toFixed(2)
                            return `
                                                  <div ${layoutStyle}><span ${margin}>开盘</span> <span style="color: ${
                              openRange > 0
                                ? RED_COLOR
                                : GREEN_COLOR
                              }">${
                              item.value[1]
                              } (${openRange}%)</span></div>
                                                  <div ${layoutStyle}><span ${margin}>收盘</span> <span style="color: ${
                              closeRange > 0
                                ? RED_COLOR
                                : GREEN_COLOR
                              }">${
                              item.value[2]
                              } (${closeRange}%)</span></div>
                                                  <div ${layoutStyle}><span ${margin}>最高</span> <span style="color: ${
                              maxRange > 0
                                ? RED_COLOR
                                : GREEN_COLOR
                              }">${
                              item.value[4]
                              } (${maxRange}%)</span></div>
                                                  <div ${layoutStyle}><span ${margin}>最低</span> <span style="color: ${
                              minRange > 0
                                ? RED_COLOR
                                : GREEN_COLOR
                              }">${
                              item.value[3]
                              } (${minRange}%)</span></div>
                                              `
                          } catch (error) {
                            console.log(error)
                            console.log(rawData, item)
                          }
                        }
                                          /**
                                           * 这边是成交量, 保留两位小数
                                           * 如果是万以上, 百万以下, 则以万为单位
                                           * 如果是百万以上, 以百万位单位显示
                                           */
                        // if (item.seriesIndex == 1) {
                        //   return `<div ${layoutStyle}><span ${margin}>${
                        //     item.seriesName
                        //     }：</span> <span>${numberFormatter(
                        //       item.value
                        //     )}手</span></div>`
                        // }
                        return `<div ${layoutStyle}><span ${margin}>${item.seriesName}：</span> <span>${item.value}</span></div>`
                      })
                      .join("")

                    return result
                  }
                  // 这边的 时间：value[0].axisValueLabel, 原格式：20200810 格式化后：2020-08-10,
                  // 这边不用进行格式化, 因为在axisPointer.label.formatter里, 做了格式化, 这边会同步影响
                  let tips = `
                          <div>${value[0].axisValueLabel}</div>
                          <div>${buildTipsContent(value)}</div>
                      `

                  return tips
                },



              },
              xAxis: {
                  type: 'category',
                  data: dates,
                  axisLine: { lineStyle: { color: '#333' } }
              },
              yAxis: {
                  scale: true,
                  axisLine: { lineStyle: { color: '#333' } },
                  splitLine: { show: false },
              },
              grid: {
                  bottom: 30,
                  left:30,
                  right:20
              },
              dataZoom: {
                type: 'inside',
                start: 10,
                end: 100
              },
              animation: false,
              series: [
              {
                name: name,
                type: "k",
                data: data,
                itemStyle: {
                  normal: {
                    color: RED_COLOR,
                    color0: GREEN_COLOR,
                    borderColor: RED_COLOR,
                    borderColor0: GREEN_COLOR,
                  },
                },
                markPoint: {
                  symbolSize: 50,
                  label: {
                    normal: {
                      formatter: function (param) {
                        return param != null
                          ? Math.round(param.value)
                          : ""
                      },
                    },
                  },
                  data: [
                    {
                      name: "highest value",
                      type: "max",
                      valueIndex: "highest",
                    },
                    {
                      name: "lowest value",
                      type: "min",
                      valueDim: "lowest",
                      symbolRotate: 0,
                    },
                  ],
                },
              },{
                name: 'MA5',
                type: 'line',
                data: calculateMA(5, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                  normal: {width: 1},
                },
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#2f4554' // 0% 处的颜色
                  }, {
                      offset: 1, color: '#2f4554' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },{
                name: 'MA10',
                type: 'line',
                data: calculateMA(10, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                  normal: {width: 1}
                },
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#61a0a8' // 0% 处的颜色
                  }, {
                      offset: 1, color: '#61a0a8' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },{
                name: 'MA20',
                type: 'line',
                data: calculateMA(20, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                  normal: {width: 1}
                },
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#d48264' // 0% 处的颜色
                  }, {
                      offset: 1, color: '#d48264' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },{
                name: 'MA30',
                type: 'line',
                data: calculateMA(30, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                  normal: {width: 1}
                },
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#91c7af' // 0% 处的颜色
                  }, {
                      offset: 1, color: '#91c7af' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
              ]
          }; // option end

        mychart.setOption(option);
      }  // success end
    }); // ajax end
  }


  function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
  }



  window.onload = function(){
    // 初始化使用分时数据
    var dateurl = "https://hqapi.p5w.net/kline?code=300773.SZ&type=6";
    var name = "日K";
    iniajax(dateurl,name);
    settimeinfo();
    getgpinfo();
  };

  function settimeinfo(){
    let date = new Date();
    // console.log(dateFormat("YYYY年mm月dd日 HH:MM:SS", date)+" 实时信息");
    $(".biinfo-x-time").html(dateFormat("YYYY年mm月dd日 HH:MM:SS", date)+"<span>"+gpstatus+"</span>");
    setTimeout(settimeinfo, 1000*1); // 1s获取一次数据
  }
  var times = 0;
  var gpstatus = "";
  function Setstatus(d){
    // 枚举: OCALL：开始集合竞价,,DELISTED：退市,,SUSP：停盘，与HALT的区别在于SUSP时可以撤单,,HALT：暂停，除了⾃有订单和交易的查询之外，任何交易活动都被禁⽌,
    // POSIT：盘后,,PRETR：盘前,,ENDTR：交易结束,,BREAK：休市,,START：市场启动（初始化之后，集合竞价前）,,TRADE：交易（连续撮合）,,STOPT：⻓期停盘，停盘n天,n>=1
    if (d=="ENDTR") {return "交易结束";}
    if (d=="INIT") {return "盘后固定价格启动前";}
    if (d=="TRADE") {return "交易";}
    if (d=="OCALL") {return "开始集合竞价";}
    if (d=="PCALL") {return "盘后集合竞价";}
    if (d=="ENDPT") {return "盘后固定价格闭市阶段";}
    if (d=="POSSP") {return "盘后固定价格停牌";}
    if (d=="DELISTED") {return "退市";}
    if (d=="SUSP") {return "停盘";}
    if (d=="HALT") {return "暂停";}
    if (d=="POSIT") {return "盘后";}
    if (d=="PRETR") {return "盘前";}
    if (d=="BREAK") {return "休市";}
    if (d=="START") {return "市场启动";}
    if (d=="STOPT") {return "⻓期停盘";}
    if (d=="POSMT") {return "盘后交易";}
  }
  var preclose="";
  function Setinfocolor(e){
    if (e - preclose > 0) {
      return "<span style='color:#e60012'>"+e+"</span>";
    }else{
      return "<span style='color:#14b143'>"+e+"</span>";
    }
  }
  function getgpinfo(){
    setTimeout(getgpinfo, 1000*2); // 2s获取一次数据
    times++;
    // console.log("现在是第"+times+"次获取数据");
    $.ajax({
        async: "flase",
        url:"https://hqapi.p5w.net/real?code=300773.SZ",
        type:"GET",
        success:function(data){
          $(".biinfo-x-uad-l span").text(data.last_px);
          $(".bxur-zd1 .num").text(data.px_change);
          $(".bxur-zd2 .num").text(data.px_change_rate+"%");
          $(".biinfo-m i").eq(0).text(data.up_px);
          $(".biinfo-m i").eq(1).text(data.down_px);
          if (data.px_change_rate > 0) {
            $(".bxur-zd1").css({color:'#ff413c'});
            $(".bxur-zd2").css({color:'#ff413c'});
            $(".bxur-zd .num").css({color:'#ff413c'});
            $(".biinfo-x-uad-l span").css({color:'#ff413c'});
            $(".biinfo-x-uad-l img").attr('src', '/static/frontend/images/public/stock-up.png');
          }

          gpstatus = Setstatus(data.trade_status);
          preclose = data.preclose_px;

          $(".bxc-p1").html("今 开: "+Setinfocolor(data.open_px));$(".bxc-p2").html("最 高: "+Setinfocolor(data.high_px));$(".bxc-p3").html("最 低: "+Setinfocolor(data.low_px));
          $(".bxc-p4").text("昨 收: "+data.preclose_px);$(".bxc-p5").text("成交量: "+(data.business_amount/1000000).toFixed(2) + "万手");$(".bxc-p6").text("成交额: "+(data.business_balance / 100000000).toFixed(2)+"亿元");
          $(".bxc-p7").text("总市值: "+(data.market_value / 100000000).toFixed(2)+"亿");$(".bxc-p8").text("流通值: "+(data.circulation_value / 100000000).toFixed(1)+"亿");$(".bxc-p9").text("振 幅: "+data.amplitude);
          $(".bxc-p10").text("换手率: "+data.turnover_ratio);$(".bxc-p11").text("市净率: "+data.dyn_pb_rate);$(".bxc-p12").text("市盈率: "+data.pe_rate);
          $(".bxc-p13").text("总股本: "+(data.total_shares / 100000000).toFixed(1)+"亿");$(".bxc-p14").text("流通股: "+(data.circulation_amount / 100000000).toFixed(1)+"亿");
            // console.log("最新价格"+data.last_px);
            // console.log("涨跌价格"+data.px_change);
            // console.log("涨跌"+data.px_change_rate+"%");
            // console.log("今开:"+data.open_px);
            // console.log("最高:"+data.high_px);
            // console.log("最低:"+data.low_px);
            // console.log("昨收:"+data.preclose_px);
            // console.log("成交量:"+parseInt(data.business_amount/100) + "手");
            // console.log("成交额:"+data.business_balance);
            // console.log("总市值:"+data.market_value);
            // console.log("流通市值:"+data.circulation_value);
            // console.log("振幅:"+data.amplitude);
            // console.log("换手率:"+data.turnover_ratio);
            // console.log("市净率:"+data.dyn_pb_rate);
            // console.log("市盈率:"+data.pe_rate);
            // console.log("总股本:"+data.total_shares);
            // console.log("流通股:"+data.circulation_amount);
            // console.log("交易状态:"+data.trade_status);
        }
    });
  }