<template>
  <div class="kmc">
    <el-row class="table-content">
      <!-- 表格 -->
      <div class="table-title">
        <span class="table-t" v-for="(item,index) of titleList" :key="index">{{item.title}}</span>
      </div>
      <draggable :list="groupData" :move="getdata" @update="datadragEnd" :options="{handle:'.dargDiv'}">
        <transition-group name="list-complete">
            <div v-for="(element, index) in groupData" :key="index" class="list-complete-item dargDiv" v-bind:class="{ border_top: index == 0}">
                <div class="styleclass" style="width: 150px">{{ index+1 }}</div>
                <div class="styleclass" >{{ element.name }}</div>
                <div class="styleclass" >{{ element.district }}</div>
                <div class="styleclass" >{{ element.hospital }}</div>
                <div class="styleclass" >{{ element.department }}</div>
                <div class="styleclass" >{{ element.title }}</div>
                <div class="styleclass" >{{ element.team }}</div>
                <div class="styleclass" >{{ element.status }}</div>
                <div class="styleclass" >
                    <el-button type="danger" size="small" @click="deletefn(index)">移除</el-button>
                </div>
            </div>
        </transition-group>
      </draggable>
    </el-row>


  </div>
</template>

<script>

export default {
  props: {
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      groupData: [],
      titleList: [
        {
          title: '顺序(可拖拽排序)'
        },
        {
          title: '姓名'
        },
        {
          title: '地区'
        },
        {
          title: '所在医院'
        },
        {
          title: '科室'
        },
        {
          title: '职称'
        },
        {
          title: '所属团队'
        },
        {
          title: '专家状态'
        },
        {
          title: '操作'
        }
      ]
    }
  },
  watch: {
    tableData: {
      deep: true,
      immediate: true,
      handler(newv){
        this.groupData = newv
      }
    }
  },
  methods: {
    getdata: function(evt){
    },
    datadragEnd:function(evt){
      console.log('拖动前的索引：'+evt.oldIndex);
      console.log('拖动后的索引：'+evt.newIndex);
    },
    deletefn(index) {
      this.groupData.splice(index,1)
    },
    getNewData() {
      this.groupData.forEach((element,index) => {
        element.seq = index + 1
      });
      return this.groupData
    }
  },
}
</script>

<style lang="scss" scoped>
.kmc{
  font-size: 14px;
}
.table-content {
  margin-top: 15px;
}
.save-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.table-title {
  display: flex;
  /*height: 60px;*/
  /*line-height: 60px;*/
  min-height: 60px;
  background: #fafafa;
  border-bottom: 1px solid #efefef;
  align-items: center;
  justify-content: center;
  .table-t {
    flex: 1;
    width: 11%;
    display: inline-block;
    text-align: center;
  }
}
.dargDiv {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #efefef;
  overflow: hidden;
}
.dargDiv .styleclass{
    flex: 1;
    width: 11%;
    text-align: center;
    height: 100px;
    // line-height: 100px;
    // overflow: hidden;
    // text-overflow:ellipsis;
    // white-space: nowrap;
    align-items: center;
    justify-content: center;
    display: flex;
}
</style>
