<template>
  <el-container>
    <el-header class="nav-bar">
      <span class="logo">いぬハウス</span>

      <el-select v-model="selectedBreed" placeholder="犬種選択" class="breed-select">
        <el-option v-for="breed in breedOptions" :key="breed" :label="breed" :value="breed" />
      </el-select>

      <el-input v-model="search" placeholder="サーチ" class="search-box" />
      <el-button type="primary">検索</el-button>
    </el-header>

    <el-header class="sub-nav">
      <el-menu mode="horizontal" :default-active="activeMenu" @select="handleSelect">
        <el-menu-item index="1">ホーム</el-menu-item>
        <el-menu-item index="2">犬種</el-menu-item>
        <el-menu-item index="3">ケア</el-menu-item>
        <el-menu-item index="4">美容</el-menu-item>
        <el-menu-item index="5">いぬ公園</el-menu-item>
        <el-menu-item index="6">イベント</el-menu-item>
        <el-menu-item index="7">ショップ</el-menu-item>
        <el-menu-item index="8">マップ</el-menu-item>
      </el-menu>
    </el-header>

    <el-main>

      <div v-if="activeMenu === '2'" class="breed-list">
        <el-menu mode="vertical" class="breed-list-menu">
          <el-menu-item v-for="breed in breedList" :key="breed" @click="onBreedListItem(breed)">
            {{ breed }}
          </el-menu-item>
        </el-menu>
      </div>

      <div v-else class="card-container">
        <el-card v-for="(dog, index) in filteredDogs" :key="index" class="card">
          <img :src="dog.image" class="card-img" />
          <h3>
            {{ dog.name }}
          </h3>
          <p>{{ dog.description }}</p>
          <el-button type="success" @click="showDetails(dog)">
            詳しく
          </el-button>
        </el-card>
      </div>

      <div v-if="activeMenu !== '2'" class="bottom-button">
        <el-button type="primary" class="btm" @click="goToRegister">会員登録</el-button>
        <el-button type="primary" class="btm" @click="goToLogin">ログイン</el-button>

      </div>

      <el-dialog v-model="dialogVisible" title="犬の詳細" width="500px" :before-close="() => (dialogVisible = false)">
        <div v-if="selectedDog">
          <img :src="selectedDog.image" alt="dog image"
            style="width: 100%; border-radius: 10px; margin-bottom: 10px;" />
          <h3>{{ selectedDog.name }}</h3>
          <p><strong>説明：</strong>{{ selectedDog.description }}</p>
          <p><strong>体型：</strong>{{ selectedDog.size }}</p>
          <p><strong>寿命：</strong>{{ selectedDog.lifespan }}</p>
          <p><strong>原産地：</strong>{{ selectedDog.origin }}</p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">閉じる</el-button>
          </span>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
const images = import.meta.glob("/src/assets/*.jpg", { eager: true });
import { useRouter } from 'vue-router';

export default {
  data() {
    return {
      search: "",
      selectedBreed: "",
      activeMenu: "1",

      breedList: [
        "ゴールデンレトリバー", "ラブラドールレトリバー", "柴犬", "ハスキー",
        "コーギー", "ダックスフンド", "プードル", "チワワ", "シーズー",
        "ポメラニアン", "フレンチブルドッグ", "ボーダーコリー", "パグ",
        "ブルドッグ", "ドーベルマン", "グレートデーン", "チャウチャウ",
        "ウェルシュコーギー", "ジャックラッセルテリア", "マルチーズ",
        "ジャーマンシェパード", "ビーグル", "バセットハウンド"
      ],
      dogs: [
        {
          image: images["/src/assets/1.jpg"]?.default,
          name: "ゴールデンレトリバー",
          description:
            "ゴールデン・レトリバーは温厚で賢く、しつけがしやすい家庭向けの犬です。",
          breed: "ゴールデンレトリバー",
          size: "大型",
          lifespan: "10〜12年",
          origin: "イギリス",
        },
        {
          image: images["/src/assets/2.jpg"]?.default,
          name: "柴犬",
          description:
            "柴犬は日本の土着犬で、警戒心が強く、活発な性格を持ちます。",
          breed: "柴犬",
          size: "中型",
          lifespan: "12〜15年",
          origin: "日本",
        },
        {
          image: images["/src/assets/3.jpg"]?.default,
          name: "ハスキー",
          description:
            "シベリアン・ハスキーは特徴的な青い目を持ち、エネルギッシュでやんちゃな性格です。",
          breed: "ハスキー",
          size: "大型",
          lifespan: "12〜14年",
          origin: "ロシア（シベリア）",
        },
        {
          image: images["/src/assets/4.jpg"]?.default,
          name: "コーギー",
          description:
            "コーギーは短い足と活発な性格を持ち、非常に愛らしい家庭向けの犬種です。",
          breed: "コーギー",
          size: "中型",
          lifespan: "12〜15年",
          origin: "イギリス（ウェールズ）",
        },
        {
          image: images["/src/assets/5.jpg"]?.default,
          name: "ダックスフンド",
          description:
            "胴長短足のユニークな体型で、好奇心旺盛で活発な性格を持っています。",
          breed: "ダックスフンド",
          size: "小型",
          lifespan: "12〜16年",
          origin: "ドイツ",
        },
      ],
      dialogVisible: false,
      selectedDog: null,
    };
  },
  computed: {
    breedOptions() {
      return ["すべて", ...this.breedList];
    },
    filteredDogs() {
      return this.dogs.filter(
        (dog) =>
          (this.selectedBreed === "すべて" ||
            this.selectedBreed === "" ||
            dog.breed === this.selectedBreed) &&
          (this.search === "" || dog.name.includes(this.search))
      );
    },
  },
  methods: {
    async fetchDogs() {
      try {
        const response = await axios.get("http://192.168.1.42:8080/");
        this.dogs = response.data;
      } catch (error) {
        console.error("获取数据失败:", error);
      };
    },

    handleSelect(index) {
      this.activeMenu = index;
      if (index === "1") {
        this.selectedBreed = "";
      }
    },
    onBreedListItem(breed) {
      this.selectedBreed = breed;
      this.activeMenu = "1";
    },
    showDetails(dog) {
      this.selectedDog = dog;
      this.dialogVisible = true;
    },
  },
  setup() {
    const router = useRouter();

    const goToRegister = () => {
      router.push('/register'); 
    };

    return {
      goToRegister,
    };
  },

  mounted() {
    this.fetchDogs();
  },
};
</script>

<style scoped>
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2c3e50;
  padding: 10px 20px;
  color: white;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.breed-select {
  width: 150px;
  margin-right: 10px;
}

.search-box {
  width: 200px;
  margin-right: 10px;
}

.sub-nav {
  background-color: #f8f9fa;
  padding: 0;
}

.el-menu {
  justify-content: center;
  border-bottom: none;
}

.el-menu-item {
  font-size: 16px;
}

.breed-list {
  padding: 20px;
}

.breed-list-menu {
  width: 250px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

.card {
  width: 250px;
  text-align: center;
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

.bottom-button {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

.btm {
  width: 120px;
  height: 45px;
  font-size: 16px;
  border-radius: 15px;
}
</style>