<template>
  <div class="main">
    <div class="comp-list">
      <div class="item" v-for="(item,index) in tagData" :key="index" >
        <el-tag @click="item.click">{{item.name}}</el-tag>
      </div>
    </div>
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class DemoIndex extends Vue {
  tagData:Array<any> = [{
    name:'表单',
    click:()=>{
      (this as any).$router.push('/demo/form')
    }
  },{
    name:'表格',
    click:()=>{
      (this as any).$router.push('/demo/table')
    }
  },{
    name:'moduleView',
    click:()=>{
      (this as any).$router.push('/demo/moduleView')
    }
  },{
    name:'单据',
    click:()=>{
      (this as any).$router.push('/demo/bill')
    }
  },{
    name:'弹窗',
    click:()=>{
      (this as any).$router.push('/demo/dialog')
    }
  },{
    name:'标签',
    click:()=>{
      (this as any).$router.push('/demo/tab')
    }
  },]
  arr =[
    {
      title:'尺寸',
      field:'a',
      data:['a1','a2']
    },
    {
      title:'颜色',
      field:'b',
      data:['b1','b2','b3']
    },
    {
      title:'规格',
      field:'c',
      data:['c1','c2','c3']
    }
  ]

  created(){
    this.forFun(this.arr[0],0)
  }

  forFun(data:any,i:number,v?:any){
    if(data.data){
      let d:Array<any>=[];
      data.data.forEach((item:any) => {
        if(i == 0){ // 第一次循环
          let obj:any={}
          obj[data.field] = item
          d.push(obj);
        }else{
          v.forEach((ele:any) => {
            let obj:any={};
            obj = (this as any).$lodash.clone(ele);
            obj[data.field] = item
            d.push(obj);
          });
        }
      });
      i++
      if(this.arr[i]){
        this.forFun(this.arr[i],i,d);
      }
      else{
        console.log('最后结果：',d)
      }
    }
  }
	
}
</script>

<style scoped lang="scss">
.main{
  height: 100%;
  width: 100%;
  overflow: auto;
  .comp-list{
    display: flex;
    flex-wrap: wrap;
    .item{
      margin-bottom: 16px;
      cursor: pointer;
    }
  }
}
</style>