<template>

  <div>
  <transition-group name="fade" tag="div" class="container">
    <div class="item" v-for="(item,index) in items" :key="item.key" :style="{
    transform:`rotate(${item.rotate}deg)`,left:item.left,top:item.top, width:item.width,height:item.height}"
         draggable="true"
         @dragstart="handleDragStart($event, item)"
         @dragover="handleDragOver($event, item)"
         @drop = 'handleDrop($event, item)'
         @dragend="handleDragEnd($event, item)" >
      {{item.key}}
<!--      <img :src="item.bgUrl" alt="">-->
    </div>
  </transition-group>
  <el-form inline>
    <!--先选择 排数-->
    <el-form-item label="请输入行数" style="margin-left: 50px;">
<!--      <el-select style="width: 100% ;" v-model="row1" placeholder="请选择排" @change="row1Change">-->
<!--        <el-option v-for="item in floorNumList" :key="item.floorId"-->
<!--                   :value="item.floorId"></el-option>-->
<!--      </el-select>-->

      <el-input v-model="rowNum" @change="rowChange"></el-input>
    </el-form-item>

    <!--再选择 列数-->
    <el-form-item label="请输入列数">
<!--      <el-select style="width: 100% ;" v-model="col1" placeholder="请选择列" @change="col1Change">-->
<!--        <el-option v-for="item in floorNumList" :key="item.floorId"-->
<!--                   :value="item.floorId"></el-option>-->
<!--      </el-select>-->
      <el-input v-model="colNum" @change="colChange"></el-input>
    </el-form-item>

  </el-form>
    <el-table :show-header='headerState'  border :data="rowDataList" style="width:80%; border: 2px solid red; margin-left: 30px;" highlight-current-row>
<!--      <el-table-column fixed type="selection" align="center" width="50" label="列"></el-table-column>-->
      <!--   <el-table-column type="index" align="center" width="50" label="索引"></el-table-column>-->
      <el-table-column v-for="(col,index) in colData" :label="col.key" align="left"  class="tableItem" >
<!--        <el-table-column prop="id" align="center" >-->
          <template slot-scope="{row}">
            <el-input class="tableItemInput" v-model="row.colData[index].width" placeholder="横向"></el-input>
            <el-input class="tableItemInput" v-model="row.colData[index].height" placeholder="纵向"></el-input>
            <el-input class="tableItemInput" v-model="row.colData[index].rotate" placeholder="角度"></el-input>
          </template>
<!--        </el-table-column>-->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import pic1 from './img/1.png'

  const tableItem={
    key:'',
    width:'',
    height:'',
    rotate:''
  }
  export default {
    name: 'Toolbar',
    data () {
      return {
        items: [
          { key: 1, width:'250px',height:'125px',top:'0',left:"0",bgUrl:pic1,rotate:'0'},
          { key: 2, width:'250px',height:'125px',top:'0',left:"240px",bgUrl:pic1,rotate:'180'},
          { key: 3, width:'250px',height:'125px',top:'0',left:"470px",bgUrl:pic1,rotate:'0'},
          { key: 4, width:'250px',height:'125px',top:'0',left:"700px",bgUrl:pic1,rotate:'180'},
          { key: 5, width:'250px',height:'125px',top:'120px',left:"0",bgUrl:pic1,rotate:'0'},
          { key: 6, width:'250px',height:'125px',top:'120px',left:"240px",bgUrl:pic1,rotate:'180'},
          { key: 7, width:'250px',height:'125px',top:'120px',left:"470px",bgUrl:pic1,rotate:'0'},
          { key: 8, width:'250px',height:'125px',top:'120px',left:"700px",bgUrl:pic1,rotate:'180'},
          { key: 9, width:'250px',height:'125px',top:'250px',left:"0",bgUrl:pic1,rotate:'0'},
          { key: 10, width:'250px',height:'125px',top:'250px',left:"240px",bgUrl:pic1,rotate:'180'},
          { key: 11, width:'250px',height:'125px',top:'250px',left:"470px",bgUrl:pic1,rotate:'0'},
          { key: 12, width:'250px',height:'125px',top:'250px',left:"700px",bgUrl:pic1,rotate:'180'},
        ],

        dragging: null,


        headerState:false,
        floorNumList: [
          {floorId: 1},
          {floorId: 2},
          {floorId: 3},
          {floorId: 4},
          {floorId: 5},
          {floorId: 6},
          {floorId: 7},
          {floorId: 8},
          {floorId: 9},
          {floorId: 10}
        ],
        floorNum: '',

        // 第1层 默认选择的排数 和 列数
        row1: 1,
        col1: 1,
        // 第2层 默认选择的排数 和 列数
        row2: 1,
        col2: 1,
        // 第3层 默认选择的排数 和 列数
        row3: 1,
        col3: 1,
        // 第4层 默认选择的排数 和 列数
        row4: 1,
        col4: 1,
        // 第5层 默认选择的排数 和 列数
        row5: 1,
        col5: 1,

        activeColor: 'green',

        colPos: '',
        rowPos: '',



        rowDataList1: [{ // 默认给一个对象,即默认状态是 1行数据
          id: Math.ceil(Math.random()*100)
        }],

        colDataList1: [
          {id: '1'}
        ],

        //
        rowNum:1,
        colNum:1,
        rowDataList:[
          {
            id:'row_1',
            colData:{
              key:'1',
              width:'',
              height:'',
              rotate:''
            }
          }
        ],

        colDataList:[
          {
            key:'1',
            width:'',
            height:'',
            rotate:''
          }
        ],



      }
    },
    methods:{
      handleDragStart(e,item){
        this.dragging = item;
      },
      handleDragEnd(e,item){
        this.dragging = null
      },
      handleDragOver(e) {
        // 阻止元素的默认行为，不然ondrop不管用
        e.preventDefault();
      },
      handleDrop(e,item){
        if(item === this.dragging){
          return
        }
        const newItems = [...this.items];
        // console.log(newItems)
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);

        // let newItem1 = JSON.parse(JSON.stringify(newItems[src]));
        // let newItem2 =JSON.parse(JSON.stringify(newItems[dst]));
        let newItem1 = newItems[src];
        let newItem2 =newItems[dst];
        [
          newItem1.left,
          newItem2.left,
          newItem1.top,
          newItem2.top,
          newItem1.rotate,
          newItem2.rotate
        ] = [
          newItem2.left,
          newItem1.left,
          newItem2.top,
          newItem1.top,
          newItem2.rotate,
          newItem1.rotate
        ];

        // console.log(newItems);
        newItems.splice(dst, 0, ...newItems.splice(src, 1))

        this.items = newItems
      },


      // 行变化
      rowChange(){
        let _that = this;
        // console.log(_that.rowNum);
        _that.rowDataList=[
          {
            id:'row_1',
            colData:{
              key:'1',
              width:'',
              height:'',
              rotate:''
            }
          }
        ];
        let rows = _that.rowNum
        if(rows>1){
          for (let i = 2; i <= rows ; i++) {
            _that.rowDataList.push({id:'row_'+i});
            _that.rowDataList[i-1]['colData']= _that.colDataList
          }
          return _that.rowDataList;
        }else {
          return _that.rowDataList;
        }

      },

      // 列变化
      colChange(){
        let _that = this;
        _that.colDataList=[
          {
            key:'1',
            width:'',
            height:'',
            rotate:''
          }
        ]
        console.log(_that.colNum);
        let rows = _that.colNum
        if(rows>1){
          for (let i = 2; i <= rows ; i++) {
            _that.colDataList.push(JSON.parse(JSON.stringify(tableItem)));
            _that.colDataList[i-1].key = String(i);
          }
          _that.rowDataList.forEach((item)=>{
            item.colData = JSON.parse(JSON.stringify(_that.colDataList))
          })
          return _that.colDataList;
        }else {
          return _that.colDataList;
        }

      },

      col1Change(){
        // 每触发一次，清空数据
        this.colDataList1 = [{id: '1'}];
        // 取得 选中的第一层的第一排的数值
        let len = this.col1;
        if(len > 1){
          for (let i = 2; i <= len; i++){
            this.colDataList1.push({id: i + ''});
          }
          return this.colDataList1;
        }else{
          return this.colDataList1;
        }
      },

      row1Change(){
        // 每触发一次，清空数据
        this.rowDataList1 = [{ id: Math.ceil(Math.random()*100)}];
        let len = this.row1;
        if (len > 1){
          for (let i = 2; i <= len ; i++){
            this.rowDataList1.push({id: Math.ceil(Math.random()*100) + i});
          }
          return this.rowDataList1;
        }else {
          return this.rowDataList1;
        }
      },



    }
  }
</script>

<style scoped>
  .container{
    width: 950px;
    height: 532px;
    position: relative;
    display:flex;
    flex-direction: column;
    padding: 0;
    margin: 40px;
    border: 1px solid #99a9bf;
  }
  .item {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    position: absolute;
    /*transition: all linear 0.3s;*/
    transition-timing-function:ease ;
    background: url("./img/1.png") no-repeat;
    background-size: cover;
    border: 1px solid #42b983;
  }
  /*.item:nth-child(even){*/
  /*  transform:rotate(180deg)*/
  /*}*/
  /*.item img{*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*}*/

  .tableItemInput{
    width: 30%;
  }
</style>
