<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>