<template>
  <div class="youtube-video-input">
    <!-- 视频链接输入区域 -->
    <el-input
      v-model="currentInput"
      placeholder="请输入YouTube视频链接，按Enter添加多个"
      @blur="handleInputBlur"
      @keyup.enter.native="handleEnter"
      clearable
    >
      <el-button slot="append" @click="handleEnter" :disabled="!currentInput">
        添加
      </el-button>
    </el-input>

    <!-- 视频预览列表 -->
    <el-row :gutter="20" class="video-list" v-if="videoList.length > 0">
      <el-col
        :span="8"
        v-for="(video, index) in videoList"
        :key="index"
        class="video-item mt-20"
      >
        <el-card shadow="hover">
          <!-- 使用 vue-core-video-player 播放 YouTube 视频 -->
          <div class="video-player-container">
            <vue-core-video-player
              :src="video.url"
              :autoplay="false"
              :controls="true"
              :loop="false"
              :muted="true"
              :volume="0.6"
            />
          </div>

          <!-- 视频信息和操作区 -->
          <div class="video-info mt-10">
            <el-tooltip :content="video.url" placement="top">
              <div class="video-url text-truncate">{{ video.url }}</div>
            </el-tooltip>

            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeVideo(index)"
              class="mt-10"
            >
              删除
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 空状态 -->
    <el-empty
      v-else
      description="还没有添加视频，请输入YouTube视频链接"
      class="mt-20"
    ></el-empty>
  </div>
</template>

<script>

export default {
  name: 'YouTubeVideoInput',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentInput: '',
      videoList: []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.videoList)) {
          this.videoList = newVal.map(url => ({
            url: this.getEmbedUrl(url),
            originalUrl: url
          }))
        }
      },
      immediate: true
    },
    videoList: {
      handler(newVal) {
        this.$emit('input', newVal.map(video => video.originalUrl))
      },
      deep: true
    }
  },
  methods: {
    handleInputBlur() {
      if (this.currentInput.trim()) {
        this.addVideo(this.currentInput)
      }
    },
    handleEnter() {
      if (this.currentInput.trim()) {
        this.addVideo(this.currentInput)
      }
    },
    addVideo(url) {
      const videoId = this.extractVideoId(url)
      if (videoId) {
        const embedUrl = this.getEmbedUrl(url)
        this.videoList.push({
          url: embedUrl,
          originalUrl: url.trim()
        })
        this.currentInput = ''
        this.$message.success('视频添加成功')
      } else {
        this.$message.error('请输入有效的YouTube视频链接')
      }
    },
    removeVideo(index) {
      this.$confirm('确定要删除这个视频吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.videoList.splice(index, 1)
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    extractVideoId(url) {
      const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/
      const match = url.match(regExp)
      return (match && match[2].length === 11) ? match[2] : null
    },
    getEmbedUrl(url) {
      const videoId = this.extractVideoId(url)
      return videoId ? `https://www.youtube.com/embed/${videoId}` : ''
    }
  }
}
</script>

<style scoped>
.youtube-video-input {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.video-player-container {
  aspect-ratio: 16/9;
  width: 100%;
  background: #000;
}

.video-url {
  font-size: 12px;
  color: #606266;
  margin: 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
