<template>
<view class="price-cell">
  <view class="left-part">
    <view class="nation">{{data.country}}</view>
<!--    <view class="sub-nation">11</view>-->
  </view>
  <view class="center-part">
    <uni-tag type="error" v-if="data.discountOff" size="small" :text="'-'+data.discountOff+'%'" class="center-child"></uni-tag>
    <uni-tag type="success" size="small" v-if="!!data.isLowestPrice" text="史低" class="center-child"></uni-tag>
    <view class="time-rest center-child" v-if="data.leftTime">
      <text >剩余{{data.leftTime}}</text>
    </view>
  </view>
  <view class="right-part">
    <view class="price-tip">史低{{data.lowestPrice/100}}</view>
    <view class="main-price">¥{{data.price/100}}</view>
    <view class="price-tip">{{data.coinSymbol}}{{data.priceOrigin/100}}</view>
  </view>
</view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

declare module 'vue/types/vue' {
  interface Vue {
    data?: any
  }
}


@Component({
  name: 'PriceCell',
  props: ['data'],
})
export default class extends Vue{

}
</script>
<style>
.price-cell{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.price-cell .left-part{
  width: 30%;
  display: flex;
  flex-direction: column;
  margin: auto;
  font-size: 16px;
}
.price-cell .center-part{
  width: 45%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.price-cell .center-part .center-child {
  margin-right: 5px;
}
.price-cell .center-part .time-rest{
  color: #666666;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.80)
}
.price-cell .right-part{
  width: 25%;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 5px 0;
}
.price-cell .right-part .main-price {
  font-size: 28rpx;
  color: #dd524d;
  text-align: right;
}
.price-cell .right-part .price-tip {
  color: #666666;
  font-size: 16rpx;
  //#ifdef H5
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.80);
  // #endif
  line-height: 10px;
  text-align: right;
  width: 100%;
}
</style>
