1.由于列表數據過多，上千甚至上萬條數據，如果全部加載，頁面交互很卡
2.官方搜索不支持異步調接口查詢，所以需要自定義搜索
3.切換頁碼，調接口獲取數據后，右側上一頁已選擇的數據會沒辦法回顯，所以需要把上一頁的數據合并到接口返回數據里面
4.回顯數據，選的可能不是當前頁的數據，所以需要把已選擇的數據合并到接口返回數據里面，并根據指定字段去重
5.默認的寬高太小，需要通過css設置穿梭框的寬高

<template>
  <el-dialog v-model="dialogVisible" title="選擇項目" width="50%" append-to-body
             :close-on-click-modal="false" @close="cancel">
    <!--   filterable   :filter-method="filterMethod"-->
    <el-form :inline="true">
      <el-form-item prop="searchQuery" style="margin-right: 10px">
        <el-input
            v-model="searchQuery"
            placeholder="請輸入搜索內容"
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getXmList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-transfer
        v-loading="transferLoading"
        class="custom-transfer"
        v-model="transferValue"
        :titles="['可選項目', '已選項目']"
        filter-placeholder="請輸入"
        :data="displayedData"
        :props="{ key: 'code', label: 'name' }"
        @change="handleChange"
        :render-content="renderContent"
    >
      <template #left-footer>
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :pager-count="5"
        />
      </template>
    </el-transfer>
    <template #footer v-if="!disabled">
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">確 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="transfer">
import {getBaseData} from '@/api/api';

const emit = defineEmits(['selectCompleted']);
const dialogVisible = ref(false)
const disabled = ref(false)
const transferValue = ref([])//code數組
const selectedArr = ref([])//選中的數組對象
const displayedData = ref([])
const currentData = ref({})
const transferLoading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize=ref(500)
/**切換頁碼-獲取項目列表*/
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getXmList()
}

const searchQuery = ref('')
/**選中值*/
const handleChange = (targetKeys) => {
  console.log('選中的值',targetKeys)
  selectedArr.value = displayedData.value.filter(item => transferValue.value.includes(item.code))
}
const filterMethod = (query, item) => {
  return item.name.indexOf(query) > -1
}

/**打開彈窗*/
const openDialog = (params = {}) => {
  let {checkedData = []} = params
  console.log('默認選中的項目checkedData', checkedData)
  currentData.value = params
  transferValue.value = checkedData.map(item => item.code)
  dialogVisible.value = true
  getXmList()
}
/**彈窗-確定事件*/
const confirm = () => {
  let {fieldId, qylx, qfType} = currentData.value
  let data = {
    fieldId: fieldId,
    qfType: qfType,
    qylx: qylx,
    selectedValue: selectedArr.value
  }
  emit('selectCompleted', data)
  cancel()
}
/**取消事件-重置數據*/
const cancel = () => {
  dialogVisible.value = false
  displayedData.value = []
  selectedArr.value = []
  transferValue.value = []
  searchQuery.value = ''
  currentPage.value=1
}
/**(除外疾病type傳3，不需要傳xmType)，除外項目、預授權項目type傳2，xmType傳1*/
const getXmList = () => {
  displayedData.value = []
  transferLoading.value = true
  let {type, xmType} = currentData.value
  let params = {
    type: type,
    xmType: xmType,
    name: searchQuery.value,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }
  getBaseData(params).then(res => {
    transferLoading.value = false
    if (res.code == 1) {
      let {content = [], total: totalNum} = res.data
      total.value=totalNum
      let {checkedData = []} = currentData.value
      let resultData = content || []//后端返回null的時候處理
      let newArr = [...checkedData, ...resultData]
      displayedData.value = uniqueBy(newArr, 'code')
      prePageSelectedData()
    }

  })
}
const renderContent = (h, option) => {
  let content = option.jg ? `${option.name} ￥${option.jg}` : `${option.name}`
  return h('span', {style: 'color: #606266;'}, content);
}
/**根據指定字段去重*/
const uniqueBy = (arr, key) => {
  const seen = new Set();
  return arr.filter((item) => {
    const k = item[key];
    return seen.has(k) ? false : seen.add(k);
  });
}
/**獲取上一頁右側選中的數據，把上一頁的數據添加到當前頁*/
const prePageSelectedData=()=>{
  let resultData=[...selectedArr.value,...displayedData.value]
  displayedData.value=uniqueBy(resultData,'code')
}

defineExpose({openDialog})
</script>

<style lang="scss">
.custom-transfer {
  .el-transfer-panel__list {
    height: 500px;
  }

  .el-transfer-panel {
    width: 320px;
    &:last-child{
      vertical-align: top;
    }
  }

  .el-transfer-panel__body {
    height: 500px;
  }
  .el-pagination{
    height: 100%;
  }
}
</style>