<template>
  <!-- npm install vuedraggable -S --registry=https://registry.npmmirror.com -->
  <!-- npm install vue-draggable-plus --registry=https://registry.npmmirror.com -->
  <div class="flex">
    <el-table ref="table1" :data="list1" row-key="id" class="mr-15" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="年龄" align="center" prop="age" />
      <el-table-column label="其他" align="center" prop="other" />
    </el-table>
    <el-table ref="table2" :data="list2" row-key="id" class="draggable-table" border @selection-change="handleSelectionChange2">
      <el-table-column type="selection" width="55" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="name" />
    </el-table>
  </div>
  <div class="mt-15 w-800px">
    <!-- <table style="min-height: 300px; border: 5px solid red">
      <tr style="max-height: 20px">
        <td style="max-height: 15px"><span>123</span></td>
      </tr>
      <tr style="max-height: 20px">
        <td style="max-height: 15px"><span>123</span></td>
      </tr>
    </table> -->
    <el-button type="primary" @click="openWindowDailog">打开弹窗</el-button>
    <user-account-select ref="userAccountSelect" @success="submitForm"></user-account-select>
  </div>
</template>

<script lang="ts" name="draggable" setup>
import { ref } from 'vue';
import { useDraggable } from 'vue-draggable-plus';
import UserAccountSelect from '@/components/UserAccountSelect/index.vue';

const table1 = ref();
const tbody1 = ref<HTMLTableSectionElement>();
const tbody2 = ref<HTMLTableSectionElement>();
const table2 = ref();
const userAccountSelect = ref();

const ids1 = ref<Array<string | number>>([]);
const selected1 = ref<testDemo[]>([]);
const ids2 = ref<Array<string | number>>([]);
const selected2 = ref<testDemo[]>([]);
/* const single = ref(true);
const multiple = ref(true); */

// console.log(table1, table1.value.querySelector('.el-table__body-wrapper > table> tbody'));

// console.log(table1.value.$el.querySelector('.el-table__body-wrapper > table> tbody'));

interface testDemo {
  /**
   * 卡类别
   */
  id: string | number;

  /**
   * 状态
   */
  name: string;

  age?: number;

  /**
   * 状态
   */
  other?: string;
}

const group = ref({
  name: 'pageButton',
  pull: true,
  put: true
});
const list1 = ref<testDemo[]>([
  {
    name: 'Joao',
    id: '1',
    age: 20,
    other: 'other'
  },
  {
    name: 'Jean',
    id: '2',
    age: 30,
    other: 'qqq'
  },
  {
    name: 'Johanna',
    id: '3',
    age: 40,
    other: 'eeeeee'
  },
  {
    name: 'Juan',
    id: '4',
    age: 50,
    other: 'xxxxx'
  }
]);
const list2 = ref<testDemo[]>(
  list1.value.map((item) => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
);

/** 多选框选中数据 */
const handleSelectionChange = (selection: testDemo[]) => {
  selected1.value = selection;
  ids1.value = selection.map((item) => item.id);
  /* single.value = selection.length != 1;
  multiple.value = !selection.length; */
};

/** 多选框选中数据 */
const handleSelectionChange2 = (selection: testDemo[]) => {
  selected2.value = selection;
  ids2.value = selection.map((item) => item.id);
};

const openWindowDailog = () => {
  console.log('openWindowDailog');
  const list = [
    {
      'userId': 825,
      'postId': 111,
      'deptId': 148,
      'userName': '15207411111',
      'password': '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92',
      'userNumb': '15207411111',
      'realName': '艾医卫',
      'sex': '1',
      'category': '1',
      'email': '',
      'address': '',
      'phone': 'MTUyMDc0MTE',
      'avatar': null,
      'idNumber': 'NDMwNTIyMTk2ODA2MDczODc4',
      'accountStatus': '1',
      'freezeStatus': 'N',
      'consumePwd': 'MDczODc4',
      'userNo': 3328,
      'cardType': 1,
      'lifespan': '2050-01-01 08:00:00',
      'userAttr': 0,
      'photo': '',
      'formation': '1',
      'hidden': '0',
      'otherId': '003c73ec64bf26511eab285d39f7c63a093',
      'userState': 'o',
      'remark': '',
      'loginIp': '',
      'loginDate': null,
      'status': '0',
      'deptName': '公共管理教研部（湖南行政管理学会）',
      'cardTypeName': null,
      'accountBalance': null,
      'accountCard': null
    }
  ];
  userAccountSelect.value.open('人员选择example', list);
};
const submitForm = (data) => {
  console.log('submitForm');
  console.log('data', data);
};

onMounted(async () => {
  await nextTick(); // 确保 DOM 更新完成
  // console.log('table1', table1.value);
  // console.log('table1 $el', table1.value.$el.querySelector('.el-table__body-wrapper'));
  // console.log('table1 $el', table1.value.$el.querySelector('.el-table__body-wrapper table.el-table__body > tbody'));
  tbody1.value = table1.value.$el.querySelector('.el-table__body-wrapper table.el-table__body > tbody');
  tbody2.value = table2.value.$el.querySelector('.el-table__body-wrapper table.el-table__body > tbody');
  useDraggable(tbody1, list1, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    group: 'people',
    onAdd: (evt) => {
      if (selected2.value.length > 1) {
        list1.value.splice(evt.newIndex, 1, ...selected2.value); //添加所有选中的元素
      }
    },
    onStart: onStart,
    onRemove: () => {
      if (selected1.value.length > 1) {
        list1.value = list1.value.filter((item) => !selected1.value.includes(item));
      }
    }
  });

  useDraggable(tbody2, list2, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    group: 'people',
    onAdd: (evt) => {
      if (selected1.value.length > 1) {
        list2.value.splice(evt.newIndex, 1, ...selected1.value); //添加所有选中的元素
      }
    },
    onStart: (evt) => {
      if (selected2.value.length > 0) {
        const moveItem = toRaw(evt.data);
        if (!ids2.value.includes(moveItem.id)) {
          //取消选中
          selected2.value = [];
          ids2.value = [];
        }
      }
    },
    onRemove: () => {
      if (selected2.value.length > 1) {
        list2.value = list2.value.filter((item) => !selected2.value.includes(item));
      }
    }
  });
});

function onStart(evt) {
  if (selected1.value.length > 0) {
    const moveItem = toRaw(evt.data);
    if (!ids1.value.includes(moveItem.id)) {
      //取消选中
      selected1.value = [];
      ids1.value = [];
    }
  }
}

/* nextTick(() => {
  tbody1.value = table1.value.$el.querySelector('.el-table__body-wrapper table.el-table__body > tbody');
  tbody2.value = table2.value.$el.querySelector('.el-table__body-wrapper table.el-table__body > tbody');
  
}); */
</script>
<style lang="scss" scoped>
/* .sortable-chosen {
  background: #ff4043 !important;
  color: #ee0f3b !important;
  border-color: #ff4043 !important;
  border-radius: 4px !important;
} */
//托拽时的样式
:v-deep .sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #21af73 !important;
}

/* ::v-deep .el-table__body tr.current-row > td {
  background: #21af73 !important;
  color: #ffffff !important;
} */
</style>
