<template>
  <div class="act-form">
    <!--    <iframe :src="src" ref="iframe" width="100%" height="700" frameborder="0"></iframe>-->
    <button @click="test()">darw pic</button>
    <button @click="test2()">darw bband</button>
    <div id="container" style="height:600px; min-width: 310px"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      stock_data: [],
      bband_up: [],
      bband_down: [],
      bband_width: [],
      buy_data: [],
      sell_data: []
    };
  },
  mounted() {
    // 这里就拿到了iframe的对象
    console.log(this.$refs.iframe);
  },
  methods: {
    test2() {
      this.getRequest("http://localhost:5000/todos/todo3").then(resp => {
        this.stock_data = this.bband_up = this.bband_down = this.buy_data = [];
        this.bband_up = resp.data["bbandup"];
        this.bband_down = resp.data["bbanddown"];
        this.buy_data = resp.data["buy_list"];
        this.sell_data = resp.data["sell_list"];
        this.bband_width = resp.data["bbandwidth"];

        console.log("test");
        this.test();
      });
    },
    test() {
      this.getRequest("/321").then(resp => {
        //const items = resp.data.data.items;
        this.stock_data = resp.data;
        let tmp_data = [];

        console.log(tmp_data);
        let series_tmp = [
          {
            type: "candlestick",
            name: "AAPL Stock Price",
            id: "aapl",
            zIndex: 1,
            data: this.stock_data,
            dataGrouping: {
              units: [
                [
                  "week", // unit name
                  [1] // allowed multiples
                ],
                ["month", [1, 2, 3, 4, 6]]
              ]
            }
          },

          {
            type: "macd",
            yAxis: 1,
            linkedTo: "aapl"
          },
          {
            name: "bband_up",
            data: this.bband_up,
            type: "spline",
            tooltip: {
              valueDecimals: 2
            },
            color: "green"
          },

          {
            name: "bband_down",
            data: this.bband_down,
            type: "spline",
            tooltip: {
              valueDecimals: 2
            },
            color: "green"
          },

          {
            name: "bband_width",
            data: this.bband_width,
            type: "spline",
            tooltip: {
              valueDecimals: 2
            },
            color: "blue"
          }
        ];
        console.log(series_tmp);
        let tmp = [];
        this.buy_data.forEach(function(element) {
          let array = {
            type: "flags",
            data: [
              {
                x: new Date(element[0]).getTime(),
                y: element[1],

                title: "買入" + element[1],
                text: 'Shape: "squarepin"'
              }
            ],
            onSeries: "dataseries",
            shape: "squarepin",
            width: 16,
            style: {
              // text style
              color: "red"
            }
          };
          series_tmp.push(array);
        });

        tmp = [];
        this.sell_data.forEach(function(element) {
          let array = {
            type: "flags",
            data: [
              {
                x: new Date(element[0]).getTime(),
                y: element[1],

                title: "賣出" + element[1],
                text: 'Shape: "squarepin"'
              }
            ],
            onSeries: "dataseries",
            shape: "squarepin",
            width: 16,
            style: {
              // text style
              color: "green"
            }
          };
          series_tmp.push(array);
        });

        console.log(this.buy_data);
        console.log(series_tmp);
        Highcharts.stockChart("container", {
          title: {
            text: "AAPL Stock Price"
          },

          yAxis: [
            {
              height: "75%",
              resize: {
                enabled: true
              },
              labels: {
                align: "right",
                x: -3
              },
              title: {
                text: "AAPL"
              }
            },
            {
              top: "75%",
              height: "25%",
              labels: {
                align: "right",
                x: -3
              },
              offset: 0,
              title: {
                text: "MACD"
              }
            }
          ],
          series: series_tmp
        });
      });
    }
  }
};
</script>