<template>
  <div class="app-content">
    <a-transfer :data-source="mockData" :target-keys="targetKeys" :show-search="showSearch" :list-style="{ width: '60%', height: '60%' }" @change="handleChange" :titles="transferTitles">
      <template slot="children" slot-scope="{ props: { filteredItems, selectedKeys, disabled: listDisabled }, on: { itemSelectAll, itemSelect }, }">
        <a-table
          :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
          :pagination="false"
          :scroll="{ y: 400 }"
          :columns="columns"
          :data-source="filteredItems"
          size="small"
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
          :custom-row="
            ({ key, disabled: itemDisabled }) => ({
              on: {
                click: () => {
                  if (itemDisabled || listDisabled) return;
                  itemSelect(key, !selectedKeys.includes(key));
                },
              },
            })
          "
        />
      </template>
    </a-transfer>
  </div>
</template>

<script>
import difference from 'lodash/difference';
import { isEmptyParams } from '@/views/utils/common'

export default {
  name: "projectGroupAdjust",
  props: {
    groupInfo1: {
      type: Object,
      default: {}
    },
    groupInfo2: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      mockData: [],
      targetKeys: [],
      showSearch: false,
      disabled: false,
      columns: [
        { dataIndex: 'projNo', title: '项目编号' },
        { dataIndex: 'projName', title: '项目名称' },
      ],
      searchForm: { groupId: null },
      transferTitles: ['Source', 'Target'],
    }
  },
  created () {
    if (this.groupInfo1.expertCount > 0 || this.groupInfo2.expertCount > 0) {
      this.$message.error('项目组已经分配有专家，不能进行项目调整！')
      this.$emit('close')
    }
    
    this.getProjectListByGroupIds()
    this.transferTitles = [ this.groupInfo1.groupName, this.groupInfo2.groupName ]
  },
  methods: {
    getProjectListByGroupIds () {
      let groupIds = this.groupInfo1.id + ',' + this.groupInfo2.id
      this.$api.projectGroupAssign.getProjectListByGroupIds({ groupIds: groupIds }).then(({ data = {} }) => {
        if (data) {
          this.mockData = data
          this.targetKeys = this.mockData.filter(e => e.groupId === this.groupInfo2.id).map(e => e.id)
        }
      }).catch(() => {})
    },
    handleChange (targetKeys, direction, moveKeys) {
      let gourpId = this.groupInfo1.id
      if (direction === 'right')
        gourpId = this.groupInfo2.id

      let Ids = moveKeys.join(",")
      this.$api.projectGroupAssign.updataProjectGroupAdjust({ Ids: Ids, groupId: gourpId }).then(({ data = {} }) => {
        if (data === '数据保存成功！') {
          //this.targetKeys = targetKeys
          this.getProjectListByGroupIds()
        } else {
          this.$message.info(data)
        }
      }).catch(() => {})
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },
  },
};
</script>