<template>
  <div class="single-review fullwidth">
    <div class="single-review-wrapper fullwidth">
        <img class="single-img" :src="reviewitem.avatar.replace('/s40-', '/s60-')"/>
          <img class="google-icon" src="https://www.made2web.com/google-reviews-icon.png"/>
          <div class="single-rating-name fullwidth">
            <p>{{reviewitem.name}}</p>
            <p class="single-date">há {{reviewitem.date}}</p>
          </div>
          <div class="single-rating-content fullwidth">
            <MoreLess :text="reviewitem.comment" words=20 moreLink="ver mais" lessLink="ver menos"></MoreLess>
          </div>
          <div class="single-rating-stars fullwidth">
            <img :src="'https://www.made2web.com/'+reviewitem.stars+'_star.png'" alt="rating" />
          </div>
      </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';

import MoreLess from './MoreLess.vue';

export default Vue.extend({
  name: 'Review',
  components: { MoreLess },
  props: {
    reviewitem: {
      type: Object
    },
  }
})
</script>

<style>
#gmb-reviews{ width: 100%; float: left;}
  .reviews-container{width: 100%;margin: auto;max-width: 1280px;padding: 0 40px;}
  .single-review{ padding: 40px 20px 20px;}
  .single-review-wrapper{ border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; background-color: #f0f0f0;background-image: url('https://www.made2web.com/quote.png'); background-repeat: no-repeat; background-size: 30px; background-position: 95% 90%;padding:30px 20px 20px; position: relative;}
  .single-review-wrapper .google-icon{ position: absolute; right: 5px; top: 5px; width: 18px;}
  .single-review-wrapper .single-img{ position: relative;  margin-top: -55px; margin-left: 5px; margin-bottom: 20px; width:60px;float: left;}
  #gmb-reviews .single-review .single-rating-name p{ font-size: 16px; line-height: 22px; margin: 0 0 0px;font-weight: bold; text-align: left;}
  #gmb-reviews .single-review .single-rating-name p.single-date{ font-size: 12px; line-height: 18px; margin: 0 0 10px; font-weight: 300;text-align: left; color: #ccc;}
  #gmb-reviews .single-review .single-rating-content{min-height: 90px; padding-bottom: 40px;}
  #gmb-reviews .single-review .single-rating-content,  #gmb-reviews .single-review .single-rating-content p{ font-size: 16px; line-height: 22px; margin: 0 0 0px; text-align: left;position: relative;}
  #gmb-reviews .single-review .single-rating-stars{text-align: left;}
  #gmb-reviews .morelink{ color: blue; text-decoration: none;font-size: 16px; line-height: 22px; margin: 0px;text-align: left;font-weight: 400; display: block;outline:0;outline:none; cursor: pointer; position: absolute; left: 0; bottom: 15px;}
  </style>