<!--
 * @Author: zwq
 * @Date: 2020-12-29 16:37:56
 * @LastEditors: gtz
 * @LastEditTime: 2021-03-15 10:48:36
 * @Description:
-->
<template>
  <el-dialog
    :title="'btn.see' | i18nFilter"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-row :gutter="15">
      <el-col :span="5" style="text-align: right;">
        {{ $t('module.factory.visual.locationSub') }}
      </el-col>
      <el-col :span="19">
        <el-row v-for="item in trueSubList" :key="item">
          {{ item }}
        </el-row>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      subList: [
        '00023342107070243',
        '00023342107070244',
        '00023342107070245',
        '00023342107070246',
        '00023342107070247',
        '00023342107070248',
        '00023342107070249',
        '00023342107070250',
        '00023342107070251',
        '00023342107070252',
        '00023342107070253',
        '00023342107070254',
        '00023342107070255',
        '00023342107070256',
        '00023342107070257',
        '00023342107070258',
        '00023342107070259',
        '00023342107070260',
        '00023342107070261',
        '00023342107070262',
        '00023342107070263',
        '00023342107070264',
        '00023342107070265',
        '00023342107070266',
        '00023342107070267',
        '00023342107070268',
        '00023342107070269',
        '00023342107070270',
        '00023342107070271',
        '00023342107070272',
        '00023342107070273',
        '00023342107070274',
        '00023342107070275',
        '00023342107070276',
        '00023342107070277',
        '00023342107070278',
        '00023342107070279',
        '00023342107070280',
        '00023342107070281',
        '00023342107070282',
        '00023342107070283',
        '00023342107070284',
        '00023342107070285',
        '00023342107070286',
        '00023342107070287',
        '00023342107070288',
        '00023342107070289',
        '00023342107070290',
        '00023342107070291',
        '00023342107070292'
      ],
      oldNum: [],
      trueSubList: []
    }
  },
  watch: {
    visible: function(val) {
      if (val) {
        this.trueSubList = []
        this.oldNum = []
        for (let i = 0; i < Number(this.getRandom(10, 30)); i++) {
          this.getTrueSubList()
        }
      }
    }
  },
  methods: {
    getRandom(min, max, fixed = 0) {
      const differ = max - min
      const random = Math.random()
      return (min + random * differ).toFixed(fixed)
    },
    init() {
      this.visible = true
    },
    getTrueSubList() {
      const idx = Number(this.getRandom(0, 59))
      if (this.oldNum.indexOf(idx) >= 0) {
        this.getTrueSubList()
      } else {
        this.trueSubList.push(this.subList[idx])
        this.oldNum.push(idx)
      }
    }
  }
}
</script>
