<template>
  <div class="app-transfer">
    <el-transfer
      v-model="selectedApps"
      :data="appOptions"
      :titles="['可选产品', '已选产品']"
      :props="{
        key: 'pkg',
        label: 'appName'
      }"
      filterable
      filter-placeholder="请输入产品名称"
      @change="handleChange"
    ></el-transfer>
  </div>
</template>

<script>
import { getAllApps } from '@/api/appGroup'

export default {
  name: 'AppTransfer',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      appOptions: [],
      selectedApps: []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectedApps = newVal || []
      },
      immediate: true
    }
  },
  created() {
    this.fetchApps()
  },
  methods: {
    async fetchApps() {
      try {
        const response = await getAllApps()
        console.log('AppTransfer获取产品列表响应:', response)
        
        if (response.status === 200 && response.result && response.result.data) {
          // 确保数据格式正确
          this.appOptions = response.result.data.map(app => ({
            pkg: app.pkg,
            appName: app.appName
          }))
          console.log('AppTransfer处理后的产品列表:', this.appOptions)
        } else {
          console.error('获取产品列表失败:', response)
        }
      } catch (error) {
        console.error('获取产品列表失败:', error)
      }
    },
    handleChange(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped>
.app-transfer {
  margin: 10px 0;
}

.el-transfer {
  width: 100%;
}

.el-transfer-panel {
  width: 45%;
}
</style>
