<template>
  <div class="custom-transfer">
    <!-- 左侧工具列表 -->
    <div class="left-panel">
      <div class="panel-header">
        <a-checkbox>{{ title[0] }}</a-checkbox>
      </div>
      <!-- 搜索框 -->
      <div class="search-box" style="padding: 8px 12px;">
        <a-input-search
          v-model="searchKeyword"
          placeholder="请输入工具名称搜索"
          allowClear
        />
      </div>
      <div class="tool-list">
        <a-checkbox-group v-model="checkedTools" @change="handleCheckedToolsChange">
          <a-checkbox style="margin: 0 0 0 8px" v-for="item in filteredData" :key="item.id" :value="item.id">
            {{ item.name + ' / ' + item.specification }}
          </a-checkbox>
        </a-checkbox-group>
      </div>
    </div>

    <!-- 中间操作按钮 -->
    <div class="operation">
      <a-button type="primary" :disabled="!checkedTools.length" @click="addToRight">
        <a-icon type="right" />
      </a-button>
      <a-button type="primary" :disabled="!selectedTableRows.length" @click="addToLeft">
        <a-icon type="left" />
      </a-button>
    </div>

    <!-- 右侧表格 -->
    <div class="right-panel">
      <a-table :dataSource="modelValue" rowKey="id" :rowSelection="{selectedRowKeys: selectedTableRowKeys, onChange: onSelectChange}" :scroll="{y:'500px'}" :columns="columns">
        <template slot="count" slot-scope="text, record">
          <editable-cell :text="text" @change="onCellChange(record.id, 'count', $event)" />
        </template>
        <template slot="unit" slot-scope="text">
          <j-dict-tag dictCode="general_unit" :text="text.toString()"/>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import EditableCell from '@comp/CustomerTransfer/EditableCell.vue'
export default {
  name: 'CustomerTransfer',
  props: {
    data: {
      type: Array,
      required: true,
    },
    modelValue: {
      type: Array,
      required: true,
    },
    title: {
      type: Array,
      default: () => ['Source', 'Target'],
    },
  },
  components:{EditableCell},
  data() {
    return {
      checkedTools: [],
      selectedTableRowKeys: [],
      selectedTableRows: [],
      searchKeyword: '', // 👈 新增：搜索关键词
      columns:[{
        title: '名称',
        dataIndex: 'name',
        rowKey: 'name',
      },{
        title: '规格',
        dataIndex: 'specification',
        rowKey: 'specification',
      },{
        title: '数量',
        dataIndex: 'count',
        rowKey: 'count',
        scopedSlots: { customRender: 'count' },
      },{
        title: '单位',
        dataIndex: 'unit',
        rowKey: 'unit',
        width: 80,
        scopedSlots: { customRender: 'unit' },
      }]
    };
  },
  computed: {
    filteredData() {
      const selectedIds = this.modelValue.map(item => item.id);
      let result = this.data.filter(item => !selectedIds.includes(item.id));

      // 如果有搜索关键词，则进行模糊匹配
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.trim().toLowerCase();
        result = result.filter(item =>
          item.name.toLowerCase().includes(keyword)
        );
      }

      return result;
    },
  },
  methods: {
    onCellChange(id, dataIndex, value){
      console.log(dataIndex, value);
      const dataSource = [...this.modelValue];
      const target = dataSource.find(item => item.id === id);
      if (target) {
        target[dataIndex] = value;
        this.$emit('update:modelValue', [...dataSource]);
      }
    },
    handleCheckedToolsChange(checkedTools) {
      this.checkedTools = checkedTools;
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedTableRowKeys = selectedRowKeys;
      this.selectedTableRows = selectionRows;
    },
    addToRight() {
      const toAdd = this.data.filter(item => this.checkedTools.includes(item.id));
      const toAddData = toAdd.map(item => ({
        id: item.id,
        name: item.name,
        specification: item.specification,
        count: 1,
        unit: item.unit,
        unitText: item.unitText,
      }));
      this.$emit('update:modelValue', [...this.modelValue, ...toAddData]);
      this.$emit('update:data', this.data.filter(item => !this.checkedTools.includes(item.id)));
      this.checkedTools = [];
    },
    addToLeft() {
      const selectedIds = this.selectedTableRows.map(row => row.id);
      this.$emit('update:modelValue', this.modelValue.filter(item => !selectedIds.includes(item.id)));

      const temp = this.data.concat(this.selectedTableRows);

      this.$emit('update:data', temp);
      this.selectedTableRows = []
      this.selectedTableRowKeys = []
    },
  },
  watch: {
    modelValue: {
      handler(newValue) {
        // Handle modelValue changes if needed
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.custom-transfer {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.left-panel {
  flex: 1;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.right-panel {
  flex: 2;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.panel-header {
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
}

.tool-list {
  padding: 10px;
  max-height: 60vh; /* 或者你想要的任何高度 */
  overflow-y: auto;  /* 出现纵向滚动条 */
}

.tool-list .ant-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.operation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  margin-top: 100px;
}

.operation .ant-btn {
  margin: 0;
}

.search-box {
  border-bottom: 1px solid #dcdfe6;
}
</style>