<template>
    <el-form @submit.native.prevent>
      <el-form-item>
        <el-input
          clearable
          v-model="search"
          placeholder="你干嘛啊~"
          style="width: 100%"
          :prefix-icon="Search"
          @keyup.enter.native="runSearch"
        />
      </el-form-item>
      <el-form-item label="精准搜索：">
        <el-radio-group v-model="type" class="ml-4">
          <el-radio
            v-for="item in advanceSearchList"
            :label="item.name"
            :key="item.id"
            size="small"
            >{{ item.chName }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择平台：">
        <el-radio-group v-model="platform" class="ml-4">
          <el-radio
            v-for="item in platInfoList"
            :label="item.name"
            :key="item.id"
            size="small"
            >{{ item.chName }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-row
          style="font-size: 10px"
          :style="{ color: type === 'playlist' ? '#F56C6C' : '#79bbff' }"
        >
          <span>{{ alertInfo[type] }}</span>
        </el-row>
        <el-button @click="runSearch" type="primary" style="width: 100%"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { Search } from "@element-plus/icons-vue";
  import { ref, reactive } from "vue";
  import bus from "./../utils/bus.js";
  
  const platInfoList = [
    {
      name: "tencent",
      chName: "QQ音乐",
      id: "0",
    },
    {
      name: "netease",
      chName: "网易云音乐",
      id: "1",
    },
    {
      name: "kugou",
      chName: "酷狗音乐",
      id: "2",
    },
    {
      name: "xiami",
      chName: "虾米音乐",
      id: "3",
    },
    {
      name: "baidu",
      chName: "百度音乐",
      id: "4",
    },
  ];
  
  const advanceSearchList = [
    {
      name: "search",
      chName: "关键字",
      id: "0",
    },
    {
      name: "playlist",
      chName: "歌单",
      id: "1",
    },
    {
      name: "artist",
      chName: "歌手",
      id: "2",
    },
    {
      name: "song",
      chName: "单曲",
      id: "3",
    },
    {
      name: "album",
      chName: "专辑",
      id: "4",
    },
  ];
  
  const alertInfo = reactive({
    search: "推荐使用：关键字+网易云音乐",
    playlist: "请输入歌单分享链接中的id值！！",
    artist: "推荐使用：关键字+网易云音乐",
    song: "推荐使用：关键字+网易云音乐",
    album: "推荐使用：关键字+网易云音乐",
  });
  
  let search = ref("");
  let key = ref(0);
  let platform = ref("netease");
  let type = ref("search");
  
  function runSearch() {
    bus.emit("searchNewValue", {
      search: search.value || '鸡你太美',
      platform: platform.value,
      type: type.value,
    });
  }
  /*
  type是搜索类型
  playlist 歌单
  song 单曲
  album 专辑
  search 关键词
  artist 歌手
  */
  </script>
  