<template>
  <view class="make-container">
    <view class="content">
      <view class="model-content border-radius">
        <view class="model-image border-radius">
          <image :src="data.modelImg" style="width: 100%; height: 100%"></image>
        </view>
        <view class="model-info">
          <view class="model-title">{{ data.modelTitle }}</view>
          <view class="model-tips">
            <uni-icons
              type="info-filled"
              class="tips-icon"
              color=""
              size="20"
            />
            <text>注意事项</text>
          </view>
          <view class="tips-content">
            <view class="memo-tips" v-for="memo in data.memoList" :key="memo">{{
              memo
            }}</view>
          </view>
          <view class="bot-right">
            <text>{{ "消耗：" + data.starNum }}</text>
            <image
              style="width: 28rpx; height: 28rpx"
              src="../../static/jd.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      <view class="part-title">
        <view class="flag"></view>
        上传照片
      </view>
      <button class="make-btn-style">
        <uni-icons type="plusempty" color="" size="24" />
      </button>
      <view class="part-title">
        <view class="flag"></view>
        历史相册
      </view>
      <view class="img-history">
        <image
          v-for="img in data.imgHistoryList"
          :key="img.source_img_url"
          :src="img.source_img_url"
          style="width: 160rpx; height: 160rpx"
        />
      </view>
    </view>
    <button @click="toMake" class="make-btn-style">立即制作</button>
  </view>
</template>
<script setup lang="ts">
import getData from "./make";
const { data, toMake } = getData();
</script>
<style scoped lang="scss">
.make-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: $uni-spacing-col-base;
  box-sizing: border-box;
  .content {
    width: 100%;
    height: calc(100% - 112rpx);
    .model-content {
      width: 100%;
      height: 550rpx;
      background-color: white;
      padding: $uni-spacing-col-base;
      box-sizing: border-box;
      display: flex;
      margin-bottom: $uni-spacing-col-base;
      .model-image {
        width: 340rpx;
        height: 100%;
        overflow: hidden;
      }
      .model-info {
        flex: 1;
        height: 100%;
        padding-left: $uni-spacing-col-base;
        box-sizing: border-box;
        position: relative;
        .model-title {
          width: 100%;
          font-size: $uni-font-size-lg;
          font-weight: bold;
          margin-bottom: 10rpx;
          display: flex;
          flex-wrap: wrap;
        }
        .model-tips {
          width: 100%;
          height: 50rpx;
          display: flex;
          align-items: center;
          color: $uni-color-warning;
          margin: 10rpx 0;
          .tips-icon {
            margin-left: -5rpx;
          }
          text {
            font-weight: bold;
          }
        }
        .tips-content {
          width: 100%;
          height: auto;
          font-size: $uni-font-size-base;
          color: $uni-text-color-grey;
          .memo-tips {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 10rpx;
          }
        }
        .bot-right {
          position: absolute;
          bottom: 0;
          right: 0;
          color: #ffd100;
          font-size: $uni-font-size-base;
          font-weight: bold;
        }
      }
    }
    .part-title {
      width: 100%;
      height: 50rpx;
      display: flex;
      align-items: center;
      font-size: $uni-font-size-lg;
      font-weight: bold;
      margin-bottom: 10rpx;
      .flag {
        width: 10rpx;
        height: 35rpx;
        border-radius: 10rpx;
        background-color: $uni-color-primary;
        margin-right: 10rpx;
      }
    }
    .img-history {
      width: 100%;
      height: auto;
      background-color: white;
      padding: $uni-spacing-col-base;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
  .make-btn-style {
    width: 100%;
    height: 92rpx;
    line-height: 92rpx;
    margin-bottom: $uni-spacing-col-base;
  }
}
</style>
