<template>
  <template v-if="subTitle">
    <view class="details-wrapper" style="align-items: flex-start; padding-top: 40rpx">
      <view class="details-title">{{ title }}</view>
      <view>
        <view class="sub-title">
          <view class="details-info single-text-beyond"> {{ subTitle }}</view>
          <image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
        </view>
        <view class="sub-info details-info single-text-beyond">{{ info }}</view>
      </view>
    </view>
  </template>
  <template v-else>
    <view class="details-wrapper">
      <view class="details-title">{{ title }}</view>
      <view class="details-info single-text-beyond">{{ info }}</view>
      <image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
    </view>
  </template>
</template>

<script setup>
const props = defineProps({
  title: { type: String }, //标题
  info: [String, Number], //内容
  subTitle: { type: String }, //副标题
})
</script>

<style lang="scss" scoped>
.details-wrapper {
  display: flex;
  align-items: center;
  padding-left: 40rpx;
  min-height: 120rpx;
  font-size: 30rpx;
  background-color: #fff;
  .details-title {
    width: 200rpx;
    color: #4c4c4c;
  }
  .details-info {
    flex: 1;
    width: 334rpx;
  }
  image {
    width: 108rpx;
    height: 120rpx;
  }
}
.sub-title {
  display: flex;
  image {
    width: 108rpx;
    height: 40rpx;
  }
}
.sub-info {
  margin-top: 20rpx;
  font-size: 30rpx;
  color: #a1a1a1;
  padding-bottom: 40rpx;
}
</style>
