<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 tag="span" name="list-complete">
          <div
            v-bind:class="{ border_top: index == 0 }"
            v-for="(element, index) in groupData"
            :key="index"
            class="list-complete-item dargDiv"
          >
            <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;
  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;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>
