<!--
 * @Date: 2023-12-13 13:42:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-13 15:48:27
 * @FilePath: /meihuaApp/src/components/serverCard.vue
 * @Description: 房间详情组件
-->
<template>
  <view class="server-card-component">
    <image class="server-cover" mode="scaleToFill" :src="cover" />
    <view class="overlay">
      <view class="text">{{ title }}</view>
      <view class="more" @tap="getMore(id)">了解详情</view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import Taro from '@tarojs/taro'

const props = defineProps({
  data: { // 详情
    type: Object,
    default: {},
  },
});

const id = ref(''); // 房间id
const cover = ref(''); // 封面图
const title = ref(''); // 标题

onMounted(() => {
  id.value = props.data.id;
  cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
  title.value = props.data.title;
});

watch(
  () => props.data,
  (val) => {
    if (val) {
      id.value = val.id;
      cover.value = val.cover ? val.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
      title.value = val.title;
    }
  },
  {
    deep: true,
    immediate: true
  }
);

const getMore = (id) => {
  Taro.previewImage({
    // 需要预览的图片链接列表
    urls: ['https://cdn.ipadbiz.cn/meihua/temp/f600f0432b0b1cf075bdc1bcc24feb47.jpg'],
    // 为当前显示图片的链接/索引值
    current: 'https://cdn.ipadbiz.cn/meihua/temp/f600f0432b0b1cf075bdc1bcc24feb47.jpg',
    // 图片指示器样式
    indicator:'default',
    // 是否可循环预览
    loop:false,
    // 长按图片显示操作菜单，如不填默认为保存相册
    // longPressActions:{
    // 	itemList:[this.l('发送给朋友'),this.l]
    // },
    success: res => {
      console.warn('res', res);
    },
    fail: err => {
      console.error('err', err);
    }
  })
}
</script>

<style lang="less">
:root,
page {
  --nut-price-medium-size: 35rpx;
}
.server-card-component {
  position: relative;
  margin-bottom: 1rem;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
  border: 1px solid #f9f9f9;
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* 图片底部对齐 */
  .server-cover {
    width: 100%;
    height: 13rem;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4); /* 半透明的黑色背景 */
    color: #fff;
    .text {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .more {
      font-size: 0.85rem;
      background: rgba(106,73,37,0.35);
      border-radius: 34rpx 34rpx 34rpx 34rpx;
      border: 2rpx solid #94795C;
      padding: 0.5rem 1.5rem;
    }
  }
}
</style>