<template>
  <view>
    <view class="commentlist">
      <view class="cmt-share">
        <view class="cmt-share-mask" :class="{shareMask: cmtShare, shareMaskHide: !cmtShareMask}" @click="cmtShareH"></view>
        <view class="cmt-share-d" :class="{cmtShareShow: cmtShare}">
          <view class="cmt-share-i">
            <button hover-class="none" plain="true" open-type="share" @click="cmtShareH">
              发送好友
            </button>
          </view>
					<!--
          <view class="cmt-share-i">
            <navigator class="a" url="/pagesOther/creatcard/index" hover-class="none" @click="cmtShareH">生成卡片</navigator>
          </view>
					-->
          <view class="cmt-share-i cancel" @click="cmtShareH">
            取消
          </view>
        </view>
      </view>
			<view class="commentlist-d">
				<view class="cmtlist-i" v-for="(item, key) in commentList" :key="key">
					<view class="cmtlist-i-link-d">
						<navigator class="a cmtlist-i-link" :url="'/pagesComment/commentdetail/index?i='+item.id+'&state='+item.praise_type" hover-class="none" v-if="!cmtdtl"></navigator>
						<view class="cmtlist-i-t1">
							<view class="cmtlist-i-t1-l">
								<view class="cmtlist-i-t1-l-face"><image class="image" :src="item.headimg" mode="aspectFill"></image></view>
							</view>
							<view class="cmtlist-i-t1-r">
								<view class="h1">
									<view class="h1-l">{{ item.nickname }}</view>
									<view class="h1-r">{{ item.createtime }}</view>
								</view>
								<view class="p"><view class="i icon iconfont icon-favor_fill_light" v-for="(item2, key2) in item.star" :key="key2"></view></view>
							</view>
						</view>
						<view class="cmtlist-i-t2">{{ item.text }}</view>
						<view class="cmtlist-i-t3" v-if="item.pic !== '' && item.pic !== null">
							<view :class="'list-img-list list-img-list'+item.pic.length" v-if="!cmtdtl && item.pic.length && item.pic.length > 0 && item.pic !== '' && item.pic !== null">
								<view class="list-img-i" v-for="(item3, key3) in item.pic" :key="key3" v-if="item3 && item3 !== '' && item3 !== null"><image class="image" :src="item3" mode="aspectFill"></image></view>
							</view>
							<view class="list-img-list listImgList10" v-if="cmtdtl">
								<view class="list-img-i" v-for="(item3, key3) in item.pic" :key="key3" v-if="item3 && item3 !== '' && item3 !== null"><image class="image" :src="item3" mode="aspectFill" @click="previewImg(item3, item.pic)"></image></view>
							</view>
						</view>
					</view>
					<view class="cmtlist-i-t4" v-if="!rushdtl">
						<navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.goods_id+'&c='+item.plugin" hover-class="none" v-if="item.goods_id !== '' && item.goods_id !== null">
							<view class="cmtlist-i-t4-d">
								<view class="cmtlist-i-t4-l">
									<image class="image" :src="item.goods_logo" mode="aspectFill"></image>
								</view>
								<view class="cmtlist-i-t4-r">
									<view class="h1">{{ item.goods_name }}</view>
									<view class="p">
										<view class="p-l">{{ item.goods_price }}元</view>
										<view class="p-r">购买</view>
									</view>
								</view>
							</view>
						</navigator>
						<navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.rush_id+'&c='+item.plugin" hover-class="none" v-if="item.goods_id == '' || item.goods_id == null">
							<view class="cmtlist-i-t4-d">
								<view class="cmtlist-i-t4-l">
									<image class="image" :src="item.goods_logo" mode="aspectFill"></image>
								</view>
								<view class="cmtlist-i-t4-r">
									<view class="h1">{{ item.goods_name }}</view>
									<view class="p">
										<view class="p-l">{{ item.goods_price }}元</view>
										<view class="p-r">购买</view>
									</view>
								</view>
							</view>
						</navigator>
					</view>
					<view class="cmtlist-i-t5" v-if="!cmtdtl">
						<view class="cmtlist-i-t5-l" :class="{isagree: item.fabulousState}" @click="agree(item.id, key)" v-if="item.fabulousNum > 0"><view class="i icon iconfont icon-zan1"></view>{{ item.fabulousNum }}</view>
						<view class="cmtlist-i-t5-l" :class="{isagree: item.fabulousState}" @click="agree(item.id, key)" v-if="item.fabulousNum == 0"><view class="i icon iconfont icon-zan1"></view></view>
						<view class="cmtlist-i-t5-r" @click="cgShare(item.nickname, item.storename, item.star, item.id, item.praise_type, item.goods_logo)" v-if="!rushdtl">
							<button hover-class="none" plain="true" @click="cmtShareS()">
								<view class="i icon iconfont icon-fenxiang"></view>分享
							</button>
						</view>
					</view>
				</view>
			</view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { CMTSHAREAPPMSG } from '@/store/mutation-types'

export default {
  props: ['commentList', 'cmtdtl', 'rushdtl'],
  data () {
    return {
      cmtShare: false,
      cmtShareMask: false
    }
  },
	computed: {
		...mapState([
			'cmtShareAppMsg'
		])
	},
  methods: {
		...mapMutations([
			CMTSHAREAPPMSG
		]),
    cmtShareS () {
      this.cmtShare = true
      this.cmtShareMask = true
    },
    cmtShareH () {
      var that = this
      that.cmtShare = false
      setTimeout(() => {
        that.cmtShareMask = false
      },300)
    },
		previewImg (current, urls) {
			wx.previewImage({
				current: current,
				urls: urls
			})
		},
		agree(id, key){
			var that = this
			var mid = ""
			var token = ""
			if(that.$store.state.userInfo !== '' && typeof(that.$store.state.userInfo.uid) !== 'undefined'){
				mid = that.$store.state.userInfo.uid
				token = that.$store.state.userInfo.token
			}
			uni.request({
				url: that.$util.util.url('Fabulous'),
				data: {mid: mid,'class': 1,id: id, token: token},
				success: (res) => {
					//console.log(res)
					if(res.data.errno == 0){
						if(that.commentList[key].fabulousState){
							that.commentList[key].fabulousState = false
							that.commentList[key].fabulousNum += -1
						}else{
							that.commentList[key].fabulousState = true
							that.commentList[key].fabulousNum += 1
						}
					}else if(res.data.errno == 1){
						if(res.data.message == "未登录"){
							uni.navigateTo({
								url: '/pagesIndex/login/index'
							})
						}
					}
				}
			})
		},
		cgShare (nickname, storename, starnum, id, praise_type, imgurl) {
			var cmtShareAppMsgList = {}
			cmtShareAppMsgList.nickname = nickname
			cmtShareAppMsgList.storename = storename
			cmtShareAppMsgList.starnum = starnum
			cmtShareAppMsgList.id = id
			cmtShareAppMsgList.praise_type = praise_type
			cmtShareAppMsgList.imgurl = imgurl
			this[CMTSHAREAPPMSG](cmtShareAppMsgList)
		}
  }
}
</script>

<style scoped>
.cmtlist-i {
  padding: 0 30px;
  position: relative;
}
.cmt-share-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: opacity .3s;
}
.shareMaskHide {
  display: none;
}
@keyframes shareMaskAni {
  0%    {opacity: 0;}
  100%  {opacity: 1.0;}
}
.shareMask {
  opacity: 1.0;
  animation: shareMaskAni .3s;
}
.cmt-share-d {
  width: 100%;
  background-color: #EDEDED;
  position: fixed;
  left: 0;
  bottom: -100%;
  transition: all .3s;
  z-index: 101;
}
.cmtShareShow {
  bottom: 0;
}
.cmt-share-i {
  height: 120px;
  line-height: 120px;
  font-size: 36px;
  text-align: center;
  margin-bottom: 2px;
  background-color: #fff;
}
.cmt-share-i:active {
  background-color: #ECECEC;
}
.cmt-share-i button {
  height: 120px;
  line-height: 120px;
  font-size: 36px;
  border: none;
}
.cmt-share-d .cancel {
  margin-top: 8px;
  margin-bottom: 0;
}
.cmtlist-i-link-d {
  position: relative;
}
.cmtlist-i-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.cmtlist-i:first-child .cmtlist-i-t1 {
  border-top: none;
}
.cmtlist-i-t1 {
  padding: 40px 0 30px 0;
  border-top: 1px solid #f3f3f3;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
}
.cmtlist-i-t1-l {
  width: 72px;
  height: 72px;
  padding: 4px;
  border-radius: 50%;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.cmtlist-i-t1-l-face {
  width: 72px;
  height: 72px;
}
.cmtlist-i-t1-l .image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.cmtlist-i-t1-r {
  padding-left: 20px;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmtlist-i-t1-r .h1 {
  height: 42px;
  line-height: 42px;
  font-size: 30px;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmtlist-i-t1-r .h1-l {
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmtlist-i-t1-r .h1-r {
  color: #999;
  font-size: 24px;
  padding-left: 10px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.cmtlist-i-t1-r .p {
  height: 40px;
  line-height: 40px;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
}
.cmtlist-i-t1-r .p .i {
  color: #FF7F18;
  font-size: 32px;
}
.cmtlist-i-t2 {
  line-height: 48px;
  font-size: 30px;
}
.cmtlist-i-t3 {
  margin-top: 30px;
}
.list-img-list .list-img-i {
	background-color: #f3f3f3;
	float: left;
}
.list-img-list:after {
	content: "";
	display: block;
	clear: both;
}
.list-img-i .image {
  width: 100%;
  height: 100%;
}
.list-img-list1 .list-img-i {
	width: calc(100vw - 60px);
	height: calc(100vw - 60px);
}
.list-img-list2 .list-img-i {
  width: calc((100vw - 72px) / 2);
	height: calc((100vw - 72px) / 2);
}
.list-img-list2 .list-img-i:nth-child(2) {
  margin-left: 12px;
}
.list-img-list3 .list-img-i:first-child {
  width: calc(((100vw - 84px) / 3) * 2 + 12px);
	height: calc(((100vw - 84px) / 3) * 2 + 12px);
}
.list-img-list3 .list-img-i:nth-child(2), .list-img-list3 .list-img-i:nth-child(3) {
  width: calc((100vw - 84px) / 3);
	height: calc((100vw - 84px) / 3);
  margin-left: 12px;
}
.list-img-list3 .list-img-i:nth-child(3) {
  margin-top: 12px;
}
.list-img-list4 .list-img-i {
  width: calc((100vw - 72px) / 2);
	height: calc((100vw - 72px) / 2);
}
.list-img-list4 .list-img-i:nth-child(2), .list-img-list4 .list-img-i:nth-child(4) {
  margin-left: 12px;
}
.list-img-list4 .list-img-i:nth-child(3), .list-img-list4 .list-img-i:nth-child(4) {
  margin-top: 12px;
}
.list-img-list5 .list-img-i {
  width: calc(((100vw - 72px) / 2 - 12px) / 2);
	height: calc(((100vw - 72px) / 2 - 12px) / 2);
  margin-left: 12px;
}
.list-img-list5 .list-img-i:nth-child(1) {
  width: calc((100vw - 72px) / 2);
	height: calc((100vw - 72px) / 2);
  margin-left: 0;
}
.list-img-list5 .list-img-i:nth-child(4), .list-img-list5 .list-img-i:nth-child(5) {
  margin-top: 12px;
}
.list-img-list6 .list-img-i {
  width: calc((100vw - 84px) / 3);
	height: calc((100vw - 84px) / 3);
}
.list-img-list6 .list-img-i:nth-child(2), .list-img-list6 .list-img-i:nth-child(5) {
  margin: 0 12px;
}
.list-img-list6 .list-img-i:nth-child(4), .list-img-list6 .list-img-i:nth-child(5), .list-img-list6 .list-img-i:nth-child(6) {
  margin-top: 12px;
}
.list-img-list7 .list-img-i {
  width: calc(((100vw - 72px) / 2 - 12px) / 2);
	height: calc(((100vw - 72px) / 2 - 12px) / 2);
  margin-left: 12px;
}
.list-img-list7 .list-img-i:nth-child(1), .list-img-list7 .list-img-i:nth-child(6), .list-img-list7 .list-img-i:nth-child(7) {
  width: calc((100vw - 72px) / 2);
	height: calc((100vw - 72px) / 2);
  margin-left: 0;
  margin-top: 12px;
}
.list-img-list7 .list-img-i:nth-child(1) {
  margin-top: 0;
}
.list-img-list7 .list-img-i:nth-child(7) {
  margin-left: 12px;
}
.list-img-list7 .list-img-i:nth-child(4), .list-img-list7 .list-img-i:nth-child(5) {
  margin-top: 12px;
}
.list-img-list8 .list-img-i {
  width: calc((100vw - 96px) / 4);
	height: calc((100vw - 96px) / 4);
  margin-left: 12px;
  margin-top: 12px;
}
.list-img-list8 .list-img-i:nth-child(1) {
  width: calc(((100vw - 96px) / 4) * 3 + 24px);
	height: calc(((100vw - 96px) / 4) * 3 + 24px);
  margin-top: 0;
  margin-left: 0;
}
.list-img-list8 .list-img-i:nth-child(2) {
  margin-top: 0;
}
.list-img-list8 .list-img-i:nth-child(5) {
  margin-left: 0;
}
.list-img-list9 .list-img-i {
  width: calc((100vw - 84px) / 3);
	height: calc((100vw - 84px) / 3);
  margin-top: 12px;
}
.list-img-list9 .list-img-i:nth-child(2), .list-img-list9 .list-img-i:nth-child(5), .list-img-list9 .list-img-i:nth-child(8) {
  margin: 12px 12px 0 12px ;
}
.list-img-list9 .list-img-i:nth-child(4), .list-img-list9 .list-img-i:nth-child(5), .list-img-list9 .list-img-i:nth-child(6) {
  margin-top: 12px;
}
.list-img-list9 .list-img-i:nth-child(1), .list-img-list9 .list-img-i:nth-child(2), .list-img-list9 .list-img-i:nth-child(3) {
  margin-top: 0;
}
.listImgList10 .list-img-i {
  width: calc(100vw - 60px)!important;
	height: calc(100vw - 60px)!important;
  margin: 0!important;
  margin-bottom: 20px!important;
  display: block;
  float: none;
}
.listImgList10 .list-img-i:last-child {
  margin-bottom: 0;
}
.cmtlist-i-t4 {
  margin-top: 30px;
}
.cmtlist-i-t4-d {
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 16px #d9d9d9;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
}
.cmtlist-i-t4-l {
  width: 144px;
  height: 144px;
  border-radius: 8px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.cmtlist-i-t4-l .image {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.cmtlist-i-t4-r {
  padding-left: 30px;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmtlist-i-t4-r .h1 {
  height: 72px;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cmtlist-i-t4-r .p {
  height: 60px;
  line-height: 60px;
  margin-top: 12px;
  color: #FF5050;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
.cmtlist-i-t4-r .p .p-l {
  font-size: 32px;
  font-weight: 600;
}
.cmtlist-i-t4-r .p .p-r {
  height: 57.6px;
  line-height: 57.6px;
  padding: 0 46px;
  border: 1.2px solid #FF5050;
  border-radius: 100px;
}
.cmtlist-i-t5 {
  color: #979797;
  height: 42px;
  line-height: 42px;
  font-size: 30px;
  padding: 40px 0;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
.cmtlist-i-t5 .i {
  font-size: 36px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: -2px;
}
.isagree {
	color: #FF7F18;
}
.cmtlist-i-t5-l .i {
  font-size: 44px;
}
.cmtlist-i-t5-r button {
	height: 42px;
	line-height: 42px;
	color: #979797;
	font-size: 28px;
	border: none;
}






</style>
