	<template>
  <view class="s_page">
    <custom
      :isBack="false"
      :bgColor="'linear-gradient(180deg, #A0CC56 0%, #A4CD51 100%)'"
    >
      <template v-slot:content>
        <view class="custom_content flex_ac">
          <!-- <view class="custom_c_txt">明細/{{ $t('明细') }}</view> -->
          <view class="custom_c_txt">NO.{{ newData.ticket_number }}</view>
        </view>
      </template>
      <template v-slot:right>
        <view class="custom_right right" @tap="gotoBack()">
          <image src="/static/img/icon_109.png" mode=""></image>
        </view>
      </template>
    </custom>
    <view class="view_content">
      <!-- <view class="page_title">No.{{ newData.id }}</view> -->
      <view class="public_box all_money flex">
        <view class="title">実際支払い金額</view>
        <view class="content">¥{{ newData.paid_in_amount | changeMoney }}</view>
      </view>
      <view class="public_box fun_box">
        <view class="fun_item">
          <view class="left">店舗ID</view>
          <view class="right flex_abs">
            <view class="right_l">
              <view>NO.{{ newData.shop_id }}</view>
              <view>{{ newData.shop_name }}</view>
            </view>
            <view class="right_r flex_ac"></view>
          </view>
        </view>
        <view class="fun_item">
          <view class="left">割引前金額</view>
          <view class="right flex_abs">
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt"
                >¥{{ newData.amount_receivable | changeMoney }}</view
              >
            </view>
          </view>
        </view>
        <view
          class="fun_item"
          v-for="(item, index) in newData.coupon"
          :key="index"
        >
          <view v-if="item.type == 1 || item.type == 3" class="left">割引</view>
          <view v-if="item.type == 2" class="left">ポイント利用</view>
          <view class="right flex_abs">
            <view class="right_r flex_ac">
              <view class="txt">-{{ item.price | changeMoney }}</view>
            </view>
          </view>
        </view>
        <!-- <view class="fun_item" v-if="newData.pointAmount">
          <view class="left">ポイント利用</view>
          <view class="right flex_abs">
            <view class="right_r flex_ac">
              <view class="txt">-{{ newData.pointAmount | changeMoney }}</view>
            </view>
          </view>
        </view> -->
        <!-- 人数 -->
        <view class="fun_item">
          <view class="left">お客様人数</view>
          <view class="right flex_abs">
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt">{{ newData.number_of_people }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="public_box fun_box">
        <view class="fun_item" v-if="newData.merchants_reward_points">
          <view class="left">ポイント還元</view>
          <view class="right flex_abs">
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt">{{
                newData.merchants_reward_points | changeMoney
              }}</view>
            </view>
          </view>
        </view>
        <view class="fun_item" v-if="newData.cardBackPoint">
          <view class="left">JCBポイント還元</view>
          <view class="right flex_abs">
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt">{{ newData.cardBackPoint | changeMoney }}</view>
            </view>
          </view>
        </view>
        <view class="fun_item">
          <!-- 标记一下 -->
          <view class="left">時間</view>
          <view class="right flex_abs">
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt">{{ newData.created_at }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import custom from "@/components/custom/custom";
import { dateTransition, dateTransitionJo } from "@/util/util";
export default {
  components: {
    custom,
  },
  data() {
    return {
      newData: {},
    };
  },
  onLoad(options) {
    // 设置顶部导航标题
    uni.setNavigationBarTitle({
      title: this.$t("明细") + "/明細",
    });
    if ("params" in options) {
      this.newData = JSON.parse(decodeURIComponent(options.params));
      console.log(this.newData);
    }
  },

  methods: {
    gotoBack() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },
    gotoWhere() {
      uni.navigateBack({
        delta: 1,
      });
      // uni.navigateTo({
      // 	url
      // })
    },
  },
};
</script>
<style>
/* page {
		background: linear-gradient(#000000 0%, #FFFFFF 100%);
	} */
</style>
<style scoped lang="scss">
.s_page {
  height: auto;
  min-height: 100%;
}
.custom_c_txt {
  font-size: 40rpx;
  color: #000000;
  font-weight: 600;
}
.custom_right {
  width: 48rpx;
  height: 48rpx;
  image {
    width: 100%;
    height: 100%;
  }
  &.right {
    margin-right: 32rpx;
  }
}
.page_title {
  font-size: 40rpx;
  line-height: 54rpx;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}
.view_content {
  background: linear-gradient(
    rgba(160, 204, 87, 1) 0%,
    rgba(223, 226, 0, 1) 100%
  );
  height: 100%;
  padding-top: 60rpx;
  padding-bottom: 60rpx;
}
.public_box {
  width: 100%;
  padding: 40rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 40rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}
.all_money {
  flex-direction: column;
  align-items: center;
  .title {
    color: $step_color;
    font-weight: bold;
    font-size: 28rpx;
    line-height: 38rpx;
    text-align: center;
    margin-bottom: 16rpx;
  }
  .content {
    font-size: 68rpx;
    line-height: 96rpx;
    font-weight: bold;
    color: #000000;
    text-align: center;
    padding: 0 100rpx;
    border-bottom: 1px solid #dbdbdb;
  }
}
.fun_box {
  .fun_item {
    width: 100%;
    margin-bottom: 20rpx;
    border-bottom: 1px solid #dbdbdb;
    &:last-child {
      margin-bottom: 0;
    }
    .left {
      color: $them_color_two;
      font-weight: bold;
      font-size: 28rpx;
      line-height: 38rpx;
    }
    .right {
      padding: 20rpx 0 10rpx;
      .right_l {
        > view {
          font-size: 28rpx;
          line-height: 38rpx;
          color: #000000;
          font-weight: bold;
        }
      }
      .right_r {
        .txt {
          font-size: 40rpx;
          line-height: 56rpx;
          color: #000000;
          font-weight: bold;
        }
        image {
          width: 40rpx;
          height: 40rpx;
          display: block;
          margin-left: 4rpx;
        }
      }
    }
  }
}
</style>
