<script setup>
import { ref, reactive } from "vue";
import Navbar from "@/components/Navbar.vue";

const breadcrumbs = reactive([
  {
    title: '首頁',
    disabled: false,
    href: '/',

  },
  {
    title: '最新消息',
    disabled: true,
    href: '/news',

  }
]);

const categoryList = reactive([
  {
    title: '總覽'
  },
  {
    title: '一日學徒'
  },
  {
    title: '工藝行旅'
  },
  {
    title: '希望工程'
  },
  {
    title: '展覽資訊'
  },
  {
    title: '補助計畫'
  },
  {
    title: '策展補助'
  }
])

const getImageUrl = (name) => {
  return new URL(`/src/assets/img/${name}`, import.meta.url).href;
};

console.log("getImageUrl('img-11.jpg')", getImageUrl('img-11.jpg'));
const newsData = reactive([
  {
    date: '2023.06.19',
    category: '工藝行旅',
    img: getImageUrl('img-11.jpg'),
    title: '臺灣綠工藝Taiwan Green Craft 健全臺灣工藝生態系 工藝價值的社會實踐',
    describe: '臺灣綠工藝兼具「頂真精神、工作倫理、愉悅勞動、生活美學」的精神，以及「自然、循環、平衡、寬容、生命力」的本質，從生態系的宏觀視野，關注跨越文化面向、經濟面向、社會面向等廣大範疇，從而以工藝產業鏈的架構...'
  },
  {
    date: '2023.06.19',
    category: '工藝行旅',
    img: getImageUrl('img-11.jpg'),
    title: '臺灣綠工藝Taiwan Green Craft 健全臺灣工藝生態系 工藝價值的社會實踐',
    describe: '臺灣綠工藝兼具「頂真精神、工作倫理、愉悅勞動、生活美學」的精神，以及「自然、循環、平衡、寬容、生命力」的本質，從生態系的宏觀視野，關注跨越文化面向、經濟面向、社會面向等廣大範疇，從而以工藝產業鏈的架構...'
  },
  {
    date: '2023.06.19',
    category: '工藝行旅',
    img: getImageUrl('img-11.jpg'),
    title: '臺灣綠工藝Taiwan Green Craft 健全臺灣工藝生態系 工藝價值的社會實踐',
    describe: '臺灣綠工藝兼具「頂真精神、工作倫理、愉悅勞動、生活美學」的精神，以及「自然、循環、平衡、寬容、生命力」的本質，從生態系的宏觀視野，關注跨越文化面向、經濟面向、社會面向等廣大範疇，從而以工藝產業鏈的架構...'
  },
])
</script>

<template>
  <Navbar />
  <div class="position-relative">
    <img src="@/assets/img/news/news-01.png" alt="" class="material-img">
    <v-container>
      <img src="@/assets/img/news/news-banner.png" alt="">

      <div class="content pt-10 mt-16">
        <div class="bg-img">
          <img src="@/assets/img/news/news-02.png" alt="">
        </div>

        <v-breadcrumbs :items="breadcrumbs" divider="/" class="pt-16 mb-5"></v-breadcrumbs>

        <div class="category-btn">
          <v-btn v-for="(item, index) in categoryList" :key="index" rounded="xl" color="brown"
            :class="{ 'me-5': index !== categoryList.length - 1 }" class="mb-5">
            {{ item.title }}
          </v-btn>
        </div>

        <div class="search mt-5 mb-10 me-16">
          <span>
            <input type="text">
            <button>
              <img src="@/assets/img/news/news-search-icon.png" alt="">
            </button>
          </span>
        </div>
        <ul>
          <li v-for="(item, index) in newsData" :key="index" class="mb-10">
            <section class="d-flex">
              <p class="category mb-5">
                <span></span>
                {{ item.category }}
              </p>
              <p class="ms-5">{{ item.date }}</p>
            </section>
            <v-card variant="outlined" class="d-flex align-center pa-5">
              <img :src="item.img" alt="">
              <section class="d-flex flex-column px-10">
                <h2>{{ item.title }}</h2>
                <p>{{ item.describe }}</p>
              </section>
            </v-card>
          </li>
        </ul>
      </div>
    </v-container>
    <img src="@/assets/img/news/news-01.png" alt="" class="material-img">
  </div>
</template>

<style lang="scss">
.material-img {
  position: absolute;

  &:first-child {
    top: -185px;
  }

  &:last-child {
    bottom: 0;
    z-index: -5;
    transform: scaleX(-1);
  }
}

.category-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .v-btn {
    width: 130px;
  }
}

.search {
  display: flex;
  align-items: center;
  justify-content: end;

  span {
    position: relative;
  }

  input {
    padding: 5px 10px;
    border-radius: 100px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #ccc;
  }

  button {
    position: absolute;
    right: 10px;
    left: 0;
    top: 3px;

    img {
      width: 25px;
      position: absolute;
      right: 0;
    }
  }

}

.content {
  position: relative;
  margin-bottom: 200px;

  .bg-img {
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: -110px;

    img {
      min-width: 105%;
    }
  }

  ul {
    padding: 0 80px;

    li {
      letter-spacing: 1px;

      .v-card {
        background-color: #fff;

        section {
          h2 {
            margin-bottom: 20px;
            font-size: 26px;
            font-weight: 500;
            line-height: 36px;
          }

          p {
            line-height: 22px;
          }
        }

        img {
          width: 100%;
          max-width: 330px;
          height: 200px;
          object-fit: cover;
        }
      }

      .category {
        display: flex;
        align-items: center;

        span {
          display: block;
          width: 8px;
          height: 8px;
          margin-right: 10px;
          border-radius: 10px;
          background-color: #000;
        }

      }
    }
  }
}
</style>