<template>
  <view class="file-info">
    <view class="title">商品信息</view>
    <view class="file-content">
      <view class="justify-between">
        <image src="/static/imgs/general/pdf-icon.png" class="image"></image>
        <view class="file-content-right">
          <view class="flex-row-center-space" style="width: 100%">
            <text class="file-title">文件打印</text>
            <text class="price">¥{{ fileItem.price || 0 }}</text>
          </view>
          <view class="tip">共{{ fileItem.fileNumber || 0 }}个文档</view>
        </view>
      </view>
      <view class="postage">
        <text class="label">快递方式</text>
        <view class="flex-col-end-start">
          <text class="label">圆通快递</text>
          <text class="tip">24小时内发货(15:00前下单当天发货,节假日看公告)</text>
        </view>
      </view>
      <view class="form">
        <view class="form-item">
          <text class="label">订单备注</text>
          <input class="value" v-model="form.remark" placeholder="填写备注" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      fileItem: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        form: {
          remark: ''
        }
      }
    },
    methods: {
      checkForm() {
        return true
      },
      getForm() {
        if (!this.checkForm()) {
          uni.showToast({
            title: '请填写完成信息',
            icon: 'none'
          })
          return {
            status: 'fail',
            value: null
          }
        }
        return {
          status: 'success',
          value: this.form
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .file-info {
    background-color: #fff;
    width: 100%;
    .title {
      padding: 24rpx;
      font-size: 30rpx;
      color: rgb(0, 0, 0);
      text-align: left;
      border-bottom: 1px solid rgb(221, 221, 221);
    }
    .file-content {
      padding: 32rpx 24rpx 24rpx;
      .file-content-right {
        flex: 1;
        margin-left: 24rpx;
        .tip {
          font-size: 24rpx;
          color: rgb(136, 136, 136);
          margin-top: 16rpx;
          text-align: left;
        }
      }
      .image {
        margin-left: 28rpx;
        width: 60rpx;
        height: 68rpx;
      }
      .file-title {
        font-size: 32rpx;
        color: rgb(51, 51, 51);
        width: 400rpx;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        font-size: 26rpx;
        color: rgb(255, 0, 0);
      }
      .postage {
        margin-top: 32rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        .tip {
          font-size: 22rpx;
          color: rgb(136, 136, 136);
          margin-top: 16rpx;
          text-align: left;
        }
      }
      .form {
        margin-top: 32rpx;
        .form-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          .label {
            font-size: 28rpx;
            color: rgb(51, 51, 51);
          }
          .value {
            font-size: 28rpx;
            color: rgb(153, 153, 153);
            text-align: right;
            width: 500rpx;
          }
        }
      }
    }
  }
  .label {
    font-size: 28rpx;
    color: rgb(51, 51, 51);
  }
  .red {
    color: rgb(255, 0, 0);
  }
</style>
