<template>
  <div class="image-comparison-container">
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in 24"
        :key="index"
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
      >
        <vab-comparison
          :id="'silder-' + index"
          style="margin-bottom: 12px"
          :width="comparison.width"
          :height="comparison.height"
          :src1="comparison.src1"
          :src2="comparison.src2"
          :start="random(20, 80)"
        ></vab-comparison>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import VabComparison from '@/plugins/vabComparison'
  import { random } from '@/utils'

  export default {
    name: 'ImgComparison',
    components: { VabComparison },
    data() {
      return {
        comparison: {
          width: '100%',
          height: 'auto',
          src1: require('@/assets/comparison/left.jpg'),
          src2: require('@/assets/comparison/right.jpg'),
          start: random(0, 100),
        },
      }
    },
    created() {},
    mounted() {},
    methods: {
      random(m, n) {
        return random(m, n).toString()
      },
    },
  }
</script>