<!--
@name: 承运商管理-结算方式
@author: 张泽贤
@time: 2022-08-08
@doc:
-->
<template>
  <p-card :loading="loading">
    <p-transfer
      :data-source="mockData"
      :target-keys="targetKeys"
      :show-search="showSearch"
      :filter-option="(inputValue, item) => item.accountWayCode.indexOf(inputValue) !== -1"
      :titles="['待分配结算方式', '已分配结算方式']"
      :show-select-all="false"
      @change="onChange"
    >
      <template slot="children" slot-scope="{ props: { direction, filteredItems, selectedKeys, disabled: listDisabled }, on: { itemSelectAll, itemSelect } }">
        <p-table
          :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
          :columns="direction === 'left' ? leftColumns : rightColumns"
          row-key="accountWayCode"
          :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>
    </p-transfer>
  </p-card>
</template>

<script>
import { settlementList, accountSave } from '../js/api';

const tableColumns = [
  {
    dataIndex: 'accountWayCode',
    title: '结算方式编码',
    ellipsis: true,
  },
  {
    dataIndex: 'accountWayName',
    title: '结算方式名称',
    ellipsis: true,
  },
  {
    dataIndex: 'accountTypeName',
    title: '结算类型',
    ellipsis: true,
  },
];

export default {
  props: {
    editCode: {
      type: String,
      default: '',
    },
  },
  // watch: {
  //   editCode(nVal, oVal) {
  //     if (nVal) {
  //       this.loading = !this.loading;
  //       this.mockData = [...this.settlementList];
  //       settlementList({ code: nVal })
  //         .then((res) => {
  //           this.targetKeys = res.data?.map((item) => item.accountWayCode) ?? [];
  //         })
  //         .finally(() => {
  //           this.loading = !this.loading;
  //         });
  //     } else if (!nVal) {
  //       this.mockData = [];
  //       this.targetKeys = [];
  //     }
  //   },
  // },
  data() {
    return {
      loading: false,

      mockData: [],
      targetKeys: [],
      disabled: false,
      showSearch: false,
      leftColumns: tableColumns,
      rightColumns: tableColumns,

      settlementList: [],
    };
  },
  mounted() {
    settlementList({ code: '' }).then((res) => {
      this.settlementList =
        res.data?.map((item) => {
          item.key = item.accountWayCode;
          return item;
        }) ?? [];
    });
  },
  methods: {
    onChange(nextTargetKeys) {
      let request = {
        code: this.editCode,
        list: [],
      };
      this.settlementList.forEach((item) => {
        if (nextTargetKeys.includes(item.key)) {
          request.list.push({
            accountType: item.accountType,
            accountWayCode: item.accountWayCode,
            accountWayName: item.accountWayName,
          });
        }
      });
      accountSave(request).then((res) => {
        this.targetKeys = nextTargetKeys;
      });
    },

    differenceFun(array, array1) {
      let newArray = [];
      array.map((item, index) => {
        if (!array1.includes(item)) {
          newArray.push(item);
        }
      });
      return newArray;
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      let that = this;
      return {
        getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key);
          const diffKeys = selected ? that.differenceFun(treeSelectedKeys, selectedKeys) : that.differenceFun(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },

    onSearch(nVal) {
      if (nVal) {
        this.loading = !this.loading;
        this.mockData = [...this.settlementList];
        settlementList({ code: nVal })
          .then((res) => {
            this.targetKeys = res.data?.map((item) => item.accountWayCode) ?? [];
          })
          .finally(() => {
            this.loading = !this.loading;
          });
      } else if (!nVal) {
        this.mockData = [];
        this.targetKeys = [];
      }
    },
  },
};
</script>