<script>


export default {
  data() {
    return {
      // granim1: null,
      // granim2: null
    }
  },
  mounted() {
    this.initGradients()
    this.initTrame()
    window.addEventListener("resize", this.onWindowResize.bind(this));
  },
  // computed: {
  // },
  // created () {
  // },
  methods: {
    initGradients () {
      let gradientBackground = this.$refs['background-gradient'];

      let gradients = [];
      let num_colors = Math.floor(2 + Math.random()*2);
      for (let i = 0; i < Math.floor(2 + Math.random()*4); i++) {
      // for (let i = 0; i < 1; i++) {
        let colors = [];
        // let hue = Math.floor(Math.random()*360)
        for (let j = 0; j < num_colors; j++) {
          let pos = (1/num_colors*j + 1/num_colors/3 + Math.random()*1/num_colors/3)*100;
          // console.log('gradient pos', pos);
          
          colors.push({ 
            color: this.getRandBGColor(), 
            // pos: parseFloat(`${parseFloat(Math.random()).toFixed(2)}`.slice(1))
            // pos: parseFloat(`${parseFloat(pos).toFixed(2)}`.slice(1))
            pos: parseInt(pos)
          })
        }
        // colors.sort((a,b) => {
        //   return a.pos > b.pos ? 1 : -1
        // })
        gradients.push(colors)
      }
      // console.log('gradients', gradients);

      let cssgrad = '';
      gradients.forEach((gradient, index) => {
        let alpha = Math.floor(Math.random()*360);
        cssgrad += `\n  linear-gradient(${alpha}deg`;
        gradient.forEach(color => {
          cssgrad += `, ${color.color} ${color.pos}%`
        });
        cssgrad += index < gradients.length-1 ? '),' : ')';
      });
      // cssgrad += ';';
      // console.log('cssgrad', cssgrad);
      gradientBackground.style.background = cssgrad;
    },
    getRandBGColor (hue) {
      let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
      let s = 25 + Math.floor(Math.random()*5);
      let l = 40 + Math.floor(Math.random()*10);
      let a = `${parseFloat(0.2 + Math.random()*.4).toFixed(3)}`.slice(1);
      let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
      // console.log(hsla);
      return hsla;
    },
    initTrame () {
      let canvasBackgroundTrame = this.$refs['canvas-background-trame'];
      canvasBackgroundTrame.width = canvasBackgroundTrame.parentElement.clientWidth;
      canvasBackgroundTrame.height = canvasBackgroundTrame.parentElement.clientHeight;
      let ctx = canvasBackgroundTrame.getContext('2d');
      
      ctx.clearRect(0,0, canvasBackgroundTrame.width, canvasBackgroundTrame.height);

      let step = 1;
      for (let i = 0; i < parseInt(canvasBackgroundTrame.width); i+=step) {
        for (let j = 0; j < parseInt(canvasBackgroundTrame.height); j+=step) {
          if (Math.random() > 0.6) {
            ctx.beginPath();
            // ctx.arc(i, j, 0.5, 0, 2 * Math.PI, false);
            ctx.rect(i, j, 1, 1);
            ctx.fillStyle = "rgba(0,0,0,0.1)";
            ctx.fill();
          }
        }
        
      }
      
    },
    onWindowResize () {
      this.initTrame()
    }
  }
}

</script>

<template>
  <div class="map-bg gradient" ref="background-gradient"></div>
  <canvas class="map-bg trame" ref="canvas-background-trame"></canvas>
</template>

<style lang="css" scoped>

</style>
