<template>
  <view class="card item">
    <image v-if="project.cover" class="cover" :src="project.cover" mode="aspectFill" @tap="open" />
    <view class="row between">
      <view class="name" @tap="open">{{ project.name }}</view>
      <view class="price">
        <text class="yen">¥</text>
        <text class="num">{{ project.price }}</text>
        <text class="ori muted" v-if="project.originPrice">¥{{ project.originPrice }}</text>
      </view>
    </view>
    <view class="muted meta">服务时长：{{ project.durationMin }} 分钟</view>
    <view class="muted meta">适合人群：{{ project.fitFor }}</view>
    <view class="muted meta">简介：{{ project.desc }}</view>
    <view class="muted meta">禁忌提醒：{{ project.taboo }}</view>
    <view class="row between ops">
      <view class="btn btn-ghost a" @tap="book">立即预约</view>
      <view class="btn btn-primary b" @tap="buy">立即购买</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProjectCard',
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  methods: {
    open() {
      uni.navigateTo({ url: `/pages/projects/detail?id=${this.project.id}` })
    },
    book() {
      this.open()
    },
    buy() {
      uni.navigateTo({ url: `/pages/order/confirm?type=coupon&projectId=${this.project.id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  padding: 22rpx;
}
.cover {
  width: 100%;
  height: 260rpx;
  border-radius: 18rpx;
  margin-bottom: 16rpx;
}
.name {
  font-weight: 950;
  font-size: 34rpx;
  max-width: 520rpx;
}
.price {
  display: flex;
  align-items: baseline;
  color: #111827;
}
.yen {
  font-size: 24rpx;
  opacity: 0.8;
}
.num {
  font-size: 40rpx;
  font-weight: 950;
}
.ori {
  margin-left: 10rpx;
  font-size: 24rpx;
  text-decoration: line-through;
}
.meta {
  margin-top: 10rpx;
  font-size: 26rpx;
}
.ops {
  margin-top: 18rpx;
  gap: 16rpx;
}
.a {
  flex: 1;
  height: 80rpx;
}
.b {
  flex: 1;
  height: 80rpx;
}
</style>

