<template>
<v-row class="mb-6">
<v-col cols="12">
<div style="font-size: 1.5em">
<samp style="color: #ee9546">{{ exhibition.rating }}</samp>
<span class="mdi mdi-star" style="color: #ee9546"></span>
<samp style="color: #9c9c9c"
>({{ exhibition.reviewCount }} reviews)</samp
>
</div>
<div
style="
background: rgba(248, 248, 248, 0.4);
border-radius: 15px;
padding: 15px;
font-size: 1.2em;
position: relative;
"
>
<div
style="
position: absolute;
border-radius: 15px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgba(248, 248, 248, 0.69);
"
></div>
<div class="reviewLogin">
<v-btn
color="warning"
class="
recommend-tag
no-text-transform
text-space-1
rounded-lg
ml-2
mt-2
"
>
Log in / Sign up
</v-btn>
</div>
<div>
<div>Write a review</div>
<p></p>
<div>
<v-rating dense half-increments readonly size="24"></v-rating>
</div>
<div>
<v-radio-group>
<v-radio label="Visitor" value="radio-1"> </v-radio>
<v-radio label="Exhibitor" value="radio-1"> </v-radio>
</v-radio-group>
</div>
<div>
<v-btn
outlined
class="
warning--text
recommend-tag
no-text-transform
text-space-1
rounded-lg
ml-4
mt-2
"
>
Variety of Products
</v-btn>
<v-btn
outlined
class="
warning--text
recommend-tag
no-text-transform
text-space-1
rounded-lg
ml-4
mt-2
"
>
Great Network Opportunity
</v-btn>
<v-btn
outlined
class="
warning--text
recommend-tag
no-text-transform
text-space-1
rounded-lg
ml-4
mt-2
"
>
Good Quality of Participants
</v-btn>
</div>
<p></p>
<div style="background: #f8f8f8; border-radius: 15px">
<div style="color: #9c9c9c; padding: 15px; height: 124px">
Tell us what do you think ...
</div>
</div>
<div class="addReviewsBtn">
<div class="addReviewsLeftBtn">
<v-btn
style="border-style: solid; border-color: #7997ff"
class="
primary--text
recommend-tag
no-text-transform
text-space-1
rounded-lg
ml-2
mt-2
"
>
<v-icon>mdi-plus</v-icon>
Add Photo
</v-btn>
</div>
<div class="addReviewsRightBtn">
<v-btn
class="
warning--text
recommend-tag
no-text-transform
text-space-1
rounded-lg
ml-2
mt-2
"
>
Clear
</v-btn>
<v-btn
color="warning"
class="
recommend-tag
no-text-transform
text-space-1
rounded-lg
ml-2
mt-2
"
>
Post
</v-btn>
</div>
</div>
</div>
</div>
<div class="reviewsSelect">
<div class="reviewsFilterSelect">
<div>Filter</div>
<div>
<v-select
v-model="filterName"
style="width: 170px"
:items="filter"
dense
outlined
></v-select>
</div>
</div>
<div class="reviewsSortbySelect">
<div>Sort by</div>
<div>
<v-select
v-model="sortByName"
style="width: 260px"
:items="sortBy"
dense
outlined
></v-select>
</div>
</div>
</div>
<!--div v-if="Array.isArray(exhibition.reviews.users)" v-for="item in exhibition.reviews.users" :key="item.id">
<div class="usersReviewsArea">
<div class="usersPeoplePic">
<div class="usersPeoplePhoto">
<v-avatar size="100">
<v-img :src="item.user.avatar"></v-img>
</v-avatar>
</div>
<p></p>
<div class="reviewsUsersName">
<div></div>
<div style="font-size: 1.5em">
<b>{{ item.user.name }}</b>
</div>
<div></div>
</div>
<div style="color: #9c9c9c" class="usersHeadline">
<div></div>
<div style="font-size: 1.5em">{{ item.user.headline }}</div>
<div></div>
</div>
</div>
<div class="usersReviewsDetail">
<div class="usersReviewsStarTitleArea">
<div class="usersReviewsStar">
<v-rating
:value="item.rating"
color="amber"
dense
:length="starLength"
half-increments
readonly
size="15"
></v-rating>
</div>
<div class="usersReviewsTitle">
<b>{{ getstarLength(item.title) }}</b>
</div>
</div>
<div class="col-md-12 col-md-offset-3 usersReviewsBtn">
<v-btn
v-for="array in item.tags"
:key="array.id"
outlined
class="
warning--text
recommend-tag
no-text-transform
text-space-1
rounded-lg
mt-2
"
>
{{ array.name }}
</v-btn>
</div>
<div>
<v-col>{{ item.comment }}</v-col>
</div>
<div>
<v-col>
<v-img
v-for="array in item.images"
:key="array.images"
:src="array"
width="90px"
height="90px"
style="display: inline-block; margin-left: 10px"
></v-img>
</v-col>
</div>
<div style="color: #9c9c9c">
<v-col>
{{ item.date }}
</v-col>
</div>
</div>
</div>
</div-->
</v-col>
</v-row>
</template>
<script>
export default {
name: "ExhibitionReviews",
props: {
exhibition: {
type: Object,
default: () => ({
rating: "",
reviewCount: "",
reviews: {},
}),
},
},
data() {
return {
filterName: "For Everyone",
filter: ["For Everyone", "For Exhibitor", "For Visitor"],
sortByName: "Date:Newest to Oldest",
sortBy: [
"With Photo",
"Date:Newest to Oldest",
"Rating(High to Low)",
"Rating(Low to High)",
],
starLength: 0,
};
},
methods: {
getstarLength: function (title) {
switch (title) {
case "Highly recommended":
this.starLength = 5;
break;
case "Worth going":
this.starLength = 4;
break;
case "Good":
this.starLength = 3;
break;
default:
this.starLength = 0;
break;
}
return title;
},
dateFormat: function (date) {
return date.replaceAll("-", "/");
},
},
};
</script>
<style>
.reviewLogin {
position: absolute;
top: 40%;
left: 40%;
}
.addReviewsLeftBtn {
grid-area: addReviewsLeftBtn;
text-align: left;
}
.addReviewsRightBtn {
grid-area: addReviewsRightBtn;
text-align: right;
}
.addReviewsBtn {
display: grid;
grid-template-areas: "addReviewsLeftBtn addReviewsRightBtn";
}
.reviewsFilterSelect {
grid-area: reviewsFilterSelect;
}
.reviewsSortbySelect {
grid-area: reviewsSortbySelect;
}
.reviewsSelect {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "reviewsFilterSelect reviewsSortbySelect";
}
.usersPeoplePic {
grid-area: usersPeoplePic;
text-align: center;
}
.usersReviewsDetail {
grid-area: usersReviewsDetail;
background: #f8f8f8;
border-radius: 15px;
padding: 15px;
margin-left: 50px;
}
.usersReviewsArea {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-areas: "usersPeoplePic usersReviewsDetail";
}
.usersReviewsStar {
grid-area: usersReviewsStar;
margin-left: 10px;
}
.usersReviewsTitle {
grid-area: usersReviewsTitle;
}
.usersReviewsStarTitleArea {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "usersReviewsStar usersReviewsTitle";
}
@media only screen and (min-width: 0px) and (max-width: 899px) {
.usersPeoplePhoto {
grid-area: usersPeoplePhoto;
}
.reviewsUsersName {
grid-area: reviewsUsersName;
vertical-align: middle;
margin-left: 30px;
display: grid;
grid-template-rows: repeat(3);
}
.usersHeadline {
grid-area: usersHeadline;
vertical-align: middle;
margin-left: 20px;
display: grid;
grid-template-rows: repeat(3);
}
.usersReviewsBtn {
display: none;
}
.usersPeoplePic {
grid-area: usersPeoplePic;
text-align: left;
padding: 50px;
margin-left: 10px;
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-areas: "usersPeoplePhoto reviewsUsersName usersHeadline";
}
.usersReviewsDetail {
grid-area: usersReviewsDetail;
background: #f8f8f8;
border-radius: 15px;
padding: 5px;
}
.usersReviewsArea {
display: grid;
grid-template-areas:
"usersPeoplePic usersPeoplePic"
"usersReviewsDetail usersReviewsDetail";
}
.usersReviewsStar {
grid-area: usersReviewsStar;
font-size: 1.5em;
}
.usersReviewsTitle {
grid-area: usersReviewsTitle;
font-size: 1.5em;
}
}
</style>