<template>

  <div class="app-container">
    <div class="list">
      <draggable data-source="juju" :list="menuList" class="list-group" draggable=".item" group="a" @change="log">
        <div v-for="element in menuList" :key="element.name" class="list-group-item item" style="width: 100px;background: red;float: left;margin-right: 10px;">
          {{ element.name }}
        </div>
      </draggable>
    </div>
    <div class="table">
      <el-table
        :key="table.tableKey"
        v-loading="table.listLoading"
        element-loading-text="给我一点时间"
        :data="table.list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
      >
        <el-table-column label="牧场" width="130px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.pastureName }}</span><br>
          </template>
        </el-table-column>
        <el-table-column label="出库单号" align="center" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备件编号" width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.eqName }}</span><br>
          </template>
        </el-table-column>

        <el-table-column label="发料" min-width="150px" align="center">
          <template slot-scope="scope">
            <draggable id="first" data-source="juju" :list="scope.row.list" class="list-group" draggable=".item" group="a" @change="log">
              <div v-for="element in scope.row.list" :key="element.name" class="list-group-item item" style="width: 100px;background: red;float: left;margin: 5px 5px;padding: 0;">
                {{ element.name }}
              </div>
            </draggable>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>

</template>

<script>
import draggable from 'vuedraggable'
const id = 1
export default {
  name: 'SurplusMaterialPlan',
  display: 'Two list header slot',
  order: 14,
  components: { draggable },
  data() {
    return {
      table: {
        tableKey: 0,
        list: [{
          'eqName': '潜污泵',
          'pastureName': '双城牧场',
          'purpose': '0',
          'specification': '"Q=150t/h',
          'status': '正常',
          'list': [{ name: 'John 1', id: 1 }, { name: 'John 2', id: 2 }, { name: 'John 3', id: 3 }]
        }, {
          'eqCode': '24.QWB074',
          'eqName': '潜污泵',
          'pastureName': '双城牧场',
          'specification': '"Q=150t/h',
          'status': '正常',
          'list': [{ name: 'John 4', id: 4 }, { name: 'John 5', id: 5 }, { name: 'John 6', id: 6 }]
        }, {
          'eqCode': '24.QWB074',
          'eqName': '潜污泵',
          'pastureName': '双城牧场',
          'specification': '"Q=150t/h',
          'status': '正常',
          'list': []
        }],
        total: 0,
        listLoading: false
      },
      menuList: [{ name: 'Gerard 1', id: 1 }, { name: 'Gerard 2', id: 2 }, { name: 'Gerard 3', id: 3 }],
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  methods: {
    log: function(evt) {
      window.console.log(evt)
    }
  }
}
</script>