<template>
  <div class="cloud-select">
    <el-select v-model="selectedCloud" placeholder="选择目标网盘" @change="handleSelect">
      <el-option
        v-for="item in cloudList"
        :key="item.cloud_type"
        :label="item.nickname || CLOUD_LABELS[item.cloud_type]"
        :value="item.cloud_type"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { CLOUD_LABELS } from '../types'
import type { CloudType, CloudConfig } from '../types'
import { getCloudConfigs } from '../api'

const props = defineProps<{
  modelValue?: CloudType
}>()

const emit = defineEmits<{
  select: [cloudType: CloudType]
  'update:modelValue': [cloudType: CloudType]
}>()

const selectedCloud = ref<CloudType | undefined>(props.modelValue)
const cloudList = ref<CloudConfig[]>([])

onMounted(async () => {
  try {
    cloudList.value = await getCloudConfigs()
  } catch (e) {
    console.error('获取网盘配置失败', e)
  }
})

function handleSelect(value: CloudType) {
  emit('select', value)
  emit('update:modelValue', value)
}
</script>

<style scoped>
.cloud-select {
  width: 100%;
}
</style>
