<template>
  <view class="gift">
    <view class="gift-remark">不同网点兑换积分不同</view>
    <view class="gift-select">
      <view class="select-list">
        <view class="list-item"
          >{{ locale == 'zh' ? userInfo.countryTitleZh : userInfo.countryTitleEn }}
          <uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
        </view>
        <view class="list-item"
          >{{ locale == 'zh' ? userInfo.cityTitleZh : userInfo.cityTitleEn }}
          <uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
        </view>
      </view>
      <view class="select-right">
        请选择网点
        <uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
      </view>
    </view>
    <view class="gift-content">
      <view class="gift-item" v-for="item in 7" :key="item" @click="toMail">
        <view class="gift-image-box">
          <image class="gift-image" mode="cover" src="../../../static/img/wallet.png"></image>
          <view class="gift-tag">
            <view class="tags">
              <image class="tag-image" src="../../../static/img/score.png"></image>
              <view class="tag-text">{{ item }}</view>
            </view>
          </view>
          <view class="foot-tag">剩余99份</view>
        </view>
        <view class="gift-name">商品名称</view>
        <view class="gift-menu">
          <view class="gift-menu-text">包邮</view>
          <view class="gift-menu-text">到付</view>
          <view class="gift-menu-text">自提</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  computed: {
    locale() {
      return this.$lang.locale == 'zh' ? 'zh' : 'en'
    }
  },
  methods: {
    toMail() {
      uni.navigateTo({
        url: '/pages/order_mail/order_mail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.gift {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.gift-remark {
  padding: 0 32upx;
  width: 100%;
  height: 42upx;
  display: flex;
  align-items: center;
  justify-content: right;
  box-sizing: border-box;
  font-size: 20upx;
  color: red;
}

.gift-select {
  padding: 0 32upx;
  display: flex;
  width: 100%;
  height: 70upx;
  color: #b3b3b3;
  box-sizing: border-box;
  align-items: center;
  border-bottom: 2upx solid #e7e7e7;
}
.select-list {
  font-size: 20upx;
  display: flex;
  align-items: center;
}
.list-item {
  display: flex;
  align-items: center;
  margin-right: 20upx;
  &:last-child {
    margin-right: 0;
  }
}
.list-icon {
  font-weight: 600;
  margin-left: 50upx;
  &:last-child {
    margin-left: 20upx;
  }
}
.select-right {
  margin-left: auto;
  font-size: 24upx;
}
.gift-content {
  width: 100%;
  height: calc(100% - 152upx);
  padding: 32upx 32upx;
  gap: 2%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
}
.gift-item {
  display: flex;
  flex-direction: column;
  width: 49%;
  box-sizing: border-box;
  // background-color: red;
}
.gift-image {
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.gift-name {
  margin: 0;
  display: flex;
  height: 60upx;
  font-size: 24upx;
  color: #000000;
  align-items: center;
}
.gift-menu {
  display: flex;
  height: 58upx;
  font-size: 20upx;
  color: #b3b3b3;
  align-items: center;
}
.gift-menu-text {
  padding: 4upx 4upx;
  border: 2upx solid #ef8d15;
  font-size: 24upx;
  color: #ef8d15;
  border-radius: 20upx;
  margin-right: 10upx;
  &:last-child {
    margin-right: 0;
  }
}
.gift-image-box {
  position: relative;
}
.gift-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80upx;
  height: 32upx;
  background: linear-gradient(#ef7e1a, #f1b009);
  transform: skewX(15deg);
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
.tag-image {
  width: 24upx;
  height: 24upx;
}
.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-15deg);
}
.tag-text {
  margin-left: 4upx;
  font-weight: 500;
  color: #fff;
  font-size: 24upx;
}
.foot-tag {
  position: absolute;
  padding: 0 8upx;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110upx;
  height: 32upx;
  color: #fff;
  font-size: 22upx;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
</style>
