<template>
  <div style="padding: 25px">
    <div style="height: 80px; flex-direction: row;">
      <div style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center" onclick="goto(0)">
        <text class="page-title">Page 1</text>
      </div>
      <div style="flex: 1;background-color: aquamarine;justify-content: center;align-items: center" onclick="goto(1)">
        <text class="page-title">Page 2</text>
      </div>
      <div style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center" onclick="goto(2)">
        <text class="page-title">Page 3</text>
      </div>
    </div>
    <div style="height: 10px;background-color: skyblue">
      <div style="width: 233px;height: 10px;margin-left:{{progress}}; background-color:darkblue"></div>
    </div>
    <slider class="slider" interval="4500" onchange="onchange" append="tree" index="{{index}}" onscroll="onscroll"
            onchange="onchange" offset-x-accuracy="0.01">
      <div class="frame" repeat="{{img in imageList}}">
        <image class="image" resize="cover" src="{{img.src}}"></image>
        <text class="title">{{img.title}}</text>
      </div>
      <indicator style="height: 20px"></indicator>
    </slider>
  </div>
</template>
<style>
  .page-title {
    color: black;
    font-size: 40px;
    font-weight: bold;
  }

  .image {
    width: 700px;
    height: 700px;
  }

  .slider {
    width: 700px;
    height: 700px;
    position: absolute;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
  }

  .title {
    position: absolute;
    top: 20px;
    left: 20px;
    padding-left: 20px;
    width: 200px;
    color: #FFFFFF;
    font-size: 36px;
    line-height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .frame {
    width: 700px;
    height: 700px;
  }
</style>
<script>
  export default {
    data: {
      imageList: [
        {title: 'Page 1', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
        {
          title: 'Page 2',
          src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
        },
        {
          title: 'Page 3',
          src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
        }
      ],
      index: 0,
      progress: 0,
    },
    methods: {
      onchange (event) {
        console.log('changed:', event.index)
      },
      goto (i) {
        this.index = i;
        this.progress = i * 233;
      },
      onscroll (e) {
        var ratio = parseFloat(e.offsetXRatio);
        this.progress = 233 * this.index + (233 * -ratio);
      },
      onchange (e) {
        this.goto(parseInt(e.index));
      }
    }
  }
</script>