<template>
    <div style="width: 100%;height: 100%">
      <!--<el-image
        style="width: 100px; height: 100px"
        :src="url"
        :fit="fits[0]"></el-image>

      <el-button  type="success" size="mini" style="margin-left: 5px" icon="el-icon-camera-solid" @click="openQrcodeDraw">
        运维二维码生成
      </el-button>-->
      <button @click="show = !show">
        Toggle
      </button>
      <transition
        name="fade"
        enter-active-class="animated rotateInDownLeft
"
        leave-active-class="animated hinge"
      >
        <p v-if="show" style="color: white">hello,dasdsdas</p>
      </transition>
      <div id="demo" style="width: 100%;height: 100%">
        <button @click="shuffle">Shuffle</button>
        <transition-group name="cells" tag="div" class="container">
          <div v-for="cell in cells" :key="cell.id" class="cell">
            {{ cell.number }}
          </div>
        </transition-group>
      </div>

    </div>
</template>

<script>
    export default {
        name: "index",
      data(){
          return {
            fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            url: '',
            cells: Array.apply(null, {length : 9}).map(function(_, index) {
              return {
                id: index,
                number : index % 3 + 1
              }
            }),
            show: true
          }
      },
      created() {

      },
      methods:{
        openQrcodeDraw(){
          this.url = 'https://localhost:9005/qrCode/realPower'
        },
        shuffle() {
          this.cells = _.shuffle(this.cells);
        }
      }
    }
</script>

<style scoped>
  button{
    width: 100px;
    height: 30px;
    border: 1px solid #666666;
    border-radius: 5px;
    background: rgba(195, 197, 221, 0.36);
    margin: 10px;
  }
  button:active, button:hover {
    box-shadow: 2px 3px 2px #999 inset;
    border: 1.5px solid rgba(195, 197, 221, 0.57);
  }
  .container {
    display: flex;
    flex-wrap: wrap; /*flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行*/
    width: 90%;
    height: 100%;
  }
  .cell {
    display: flex;
    justify-content: space-around; /*在弹性盒对象的 <div> 元素中的各项周围留有空白,用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式*/
    align-items: center;/*居中对齐弹性盒的各项 <div> 元*/
    width: 33%;
    height: 250px;
    border: 1px solid #aaa;
    margin-right: -1px;
    margin-bottom: -1px;
    color: white;
  }
  .cell:nth-child(3n) {
    margin-right: 0;
  }
  .cell:nth-child(27n) {
    margin-bottom: 0;
  }
  .cells-move {
    transition: transform 1s;
  }
  html,body{
    height: 100%;
  }
</style>
