<template>
  <!-- <Load></Load> -->
  <!-- <ImgDetail ref='ImgDetailRef' :imgList="imgList" :imgIdx="imgIdx"></ImgDetail> -->

  <Head>
    <Title>{{ tdk.tdk_title }}</Title>
    <Meta :content=tdk.tdk_keyword name="keywords" />
    <Meta :content=tdk.tdk_description name="description" />
    <Meta name="baidu-site-verification" content="" />
  </Head>
  <Header></Header>
  <Carousel></Carousel>


  <div class="Home-main">


    <!-- 爱情故事展示 -->
    <div class="card-pos-box">

      <div class="love-story-title-box op0" data-animation="animate__animated animate__fadeInDown">
        <h2>爱情故事</h2>
        <h4>记录生活，分享喜悦，快乐相随</h4>
      </div>

      <div class="content" v-if="homeData.loveStoryList" >
        <!-- 列表渲染 -->
        <div class="card1" v-for="(item) in homeData.loveStoryList" :key=item.love_story_id>
          <div class="show-wrapper">
            <div class="pic-wrapper">
              <img :src=item.love_story_cover />
            </div>
            <h2 class="title">{{ item.love_story_title }}</h2>
            <div class="show-info">
              <div class="show-info-item">
                <svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1642" width="128" height="128">
                  <path
                    d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
                    fill="" p-id="1643"></path>
                  <path
                    d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
                    fill="#FF5F5F" p-id="1644"></path>
                  <path
                    d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
                    fill="#FFFFFF" p-id="1645"></path>
                </svg>
                {{ item.love_story_date }}
              </div>
            </div>
          </div>
          <div class="hover-wrapper">
            <div class="hover-info">
              <div class="info-item">
                <!-- 地点 -->
                <span>{{ item.love_story_place }}</span>
                <span class="info-item-title">{{ item.love_story_date }}</span>
              </div>
            </div>
            <nuxt-link :to="getLink(item)" class="btn">
              <div>查看</div>
            </nuxt-link>
          </div>
          <div class="background"></div>
        </div>
      </div>

      <div class="love-story-btn-box">
        <nuxt-link to="/love-story/1" class="btn">
          查看更多
        </nuxt-link>
      </div>

    </div>


    <!-- 心愿清单 -->
    <div class="cardiac-moment-pos-box">
      <div class="cardiac-moment-img-box">
        <img src="/img/home/monment.png" alt="">
      </div>

      <div class="love-story-title-box op0" data-animation="animate__animated animate__fadeInDown">
        <h2>心愿清单</h2>
        <h4>听我许下与你有关的心愿</h4>
      </div>

      <div class="todo-list-big-box" v-if="homeData.wishList">
        <div class="todo-list-box" v-for="(item) in homeData.wishList" :key="item.wish_list_id">
          <div class="todo-list-check-box">
            <img v-if="item.wish_list_status === 1" alt="" class="todo-list-check-img"
              src="https://www.mitangguan.cn/img/mitangguan/imcomplete.png">
            <img v-else alt="" class="todo-list-check-img" src="https://www.mitangguan.cn/img/mitangguan/complete.png">
          </div>
          <div class="todo-list-text-box">
            <div class="todo-list-text">{{ item.wish_list_name }}</div>
            <div class="todo-list-time">{{ item.wish_list_create_time }}</div>
          </div>

        </div>
      </div>

      <div class="love-story-btn-box">
        <nuxt-link to="/todo-list" class="btn">
          查看更多
        </nuxt-link>
      </div>

    </div>


  </div>

  <!-- 图片预览示例 -->
  <!-- <div class="top-show-box">
    <img @click="handleImg(0)" :src=openImg1 alt="">
  </div> -->

  <Final></Final>
</template>

<script setup>


/**  基础变量  **/
let imgList = ref([])
let imgIdx = ref(0)
let ImgDetailRef = ref(null)


/**预对接的数据**/


/**js常量的定义**/




/**js操控的逻辑变量**/




/**方法函数**/

// 预览图片
function handleImg(v) {
  ImgDetailRef.value.showImgDetail()
  imgIdx.value = v
}

const getLink = function (item) {
  if (item.love_story_link) {
    return item.love_story_link;
  } else {
    return "/love-story/details/" + item.love_story_id;
  }
}


/**
 * 接口对接
 */

let homeData = ref({})
useFetch('/api/home/getHome').then(res => {
  homeData.value = JSON.parse(res.data.value).data
})

// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1 } }).then(res => {
  tdk.value = JSON.parse(res.data.value).data
})



/**onMounted**/
onMounted(() => {
  // imgList.value.push(openImg1.value)

  htmlAddAnimations({ tagDom: 'Home-main', preload: 1.3 })
})
/**export**/
defineExpose({
  middleware: 'auth'
})

</script>

<style scoped src="~/assets/css/index/index.scss"></style>
<style scoped src="~/assets/css/index/media.scss"></style>  
<style scoped src="~/assets/css/index/card.css"></style>
