<template>
    <view>
<!--        <cu-custom bgColor="bg-white" :isBack="false">-->
<!--            <block slot="backText"></block>-->
<!--            <block slot="content">我的评价</block>-->
<!--            <block slot="right"></block>-->
<!--        </cu-custom>-->
      <view class="cu-bar fixed padding flex align-center" :style="[{height:CustomBar + 'rpx'}]" style="background-color: #EDEDED ;">
        <view class="action" @tap="backPage" >
          <text class="cuIcon-close" style="color: #666666;"></text>
        </view>
        <view class="content" style="font-weight: bold;">
          我的评价
        </view>
        <view  class="cuIcon-more" style="font-size: 40rpx;">
        </view>
      </view>
      <z-paging ref="paging" v-model="commentList" @query="queryList" :default-page-size="pageSize"
                show-refresher-when-reload :hide-empty-view="true" >
        <view class="comment-user-box" style="margin-top: 60px;">
            <view v-for="(item,commentindex) in commentList" :key="commentindex">
                <view class="user-comment bg-ff">
                    <view class="flex align-center color-99 order-num">
                        <view class="margin-right-sm">订单编号</view>
                        <view>{{item.orderIndex}}</view>
                    </view>
                    <view class="comment-item flex margin-top-sm">
                        <image class="user-header" src=""></image>
                        <view class="flex-sub padding-bottom-lg">
                            <view class="comment-time flex align-center flex-sub">
                                <view class="name text-bold font-30">{{item.phone | phoneFormat}}</view>
                                <view class="time flex-sub color-99">{{item.createTime | dataFormat}}</view>
                            </view>
                            <view class="comment-score text-df text-main flex ">
                                <view class="margin-right-sm"><span> 评分</span><span class="text-bold">{{item.score | numFilter }}</span></view>
                                <u-rate :current="item.score" :disabled="true" active-color="#fc6035"></u-rate>
                            </view>
                            <view class="flex rate-box text-sm margin-tb-sm" >
                                <view class="rate-item color-99" style="width: auto;padding: 0 5px;" v-for="grade in item.gradeList">{{ grade.name }} <span class="color-11 text-bold" style="margin-left:18rpx;">{{ grade.score | numFilter }}</span></view>
                            </view>
                            <view class="comment-txt text-df">{{ item.content }}</view>
                            <view class="comment-img-box flex flex-wrap">
                              <view v-for="(img,imgindex) in item.resourceList" :key="imgindex" class="img-box" @tap="swiperClick(img.url,imgindex,item.resourceList)">
                                <u-image class="comment-img" width="180rpx" height="180rpx" v-if="img.type=='001'" :src="img.url" :border-radius="10" ></u-image>
                                <u-image class="comment-img" width="180rpx" height="180rpx" v-if="img.type=='002'" :src="img.faceImg" :border-radius="10" ></u-image>
                                <image src="../../static/common/play.png" v-if="img.type=='002'" class="play-btn-img"></image>
                              </view>
                           </view>
                           
                            <view class="store-back">
                                <view class="back-time flex justify-between color-99">
                                    <view>
                                        商家回复：
                                        <u-icon name="arrow-down" class="down-img text-sm" v-if="!item.reDown" @tap="item.reDown=!item.reDown" ></u-icon>
                                        <u-icon name="arrow-up" class="down-img text-sm" v-if="item.reDown" @tap="item.reDown=!item.reDown" ></u-icon>
                                    </view>
                                    <view class="time">{{ item.replyTime | dataFormat}}</view>
                                </view>
                                <view class="back-txt text-df color-11" v-show="item.reDown">{{ item.reply }}</view>
                            </view>

                            <view class="store-back store-com">
                                <view class="back-time add-com flex justify-between color-99">
                                    <view class="back-title">
                                        追评：
                                        <u-icon name="arrow-down" class="down-img text-sm" v-if="!item.isDown" @tap="item.isDown=!item.isDown"></u-icon>
                                        <u-icon name="arrow-up" class="down-img text-sm" v-if="item.isDown" @tap="item.isDown=!item.isDown"></u-icon>
                                    </view>
                                    <view class="time">{{item.reContentTime |dataFormat}}</view>
                                </view>
                                <view class="back-txt text-df color-11"  v-show="item.isDown">{{ item.reContent }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
      </z-paging>
      <com-swipwe-video :maskShow="maskShow" :tempList="tempList" :swiperIndex="swiperIndex" @closeSwiper="closeSwiper"></com-swipwe-video>

    </view>
</template>

<script>
import comSwipweVideo from '../../components/comSwipweVideo/comSwipweVideo.vue';
export default {
    filters: {
      nameFormat(item) {
        console.log(item)
        if (item == null || item == undefined || item == '') {
          return '';
        }
        let str = item;
        if (str.length == 2) {
          str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g, '$1*')
        } else if (str.length == 3) {
          str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g, '$1*$3')
        } else if (str.length == 4) {
          str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,2})([^\x00-\xff])/g, '$1**$3')
        } else if (str.length > 4) {
          str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,3})([^\x00-\xff])/g, '$1***$3')
        } else {
        }
        // str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{1,3})([^\x00-\xff])/g , '$1**$3')
        return str;
      },
      numFilter(value) {
        let realVal = Number(value).toFixed(1)
        return realVal
      },
      phoneFormat(value) {
        if (value == null || value == undefined || value == '') {
          return '';
        }
        return value.substr(0, 3) + '****' + value.substr(7)
      },
      dataFormat(time) {
        if (time == null || time == undefined || time == '') {
          return '';
        }
        return time.substring(0, 10);
      },
      timeFormat(time) {
        if (time == null || time == undefined || time == '') {
          return '';
        }
        return time.substring(time.length, time.length - 5);
      },
    },
    data() {
        return {
          commentList:[],
          pageSize: 20,
          serverId:'',
          maskShow: false,
          tempList: [],
          swiperIndex: 0,
        };
    },
  components: {
    comSwipweVideo
  },
    onLoad(option) {
      var that = this;
      that.serverId = uni.getStorageSync('userInfo').serverId;
      if (that.serverId == undefined || that.serverId == null || that.serverId == '') {
        uni.reLaunch({
          url: '../login/indexChoice'
        })
      }
    },
    onUnload() {

    },
    onShow() {},
    created() {},
    methods: {
      backPage(){
        uni.redirectTo({
          url: '../index/index'
        });
      },
      closeSwiper() {
        this.maskShow = false;
        this.tempList = [];
        this.swiperIndex = 0;
      },
      swiperClick(url,index,list) {
        let imgArr = JSON.parse(JSON.stringify(list));
        // console.log(imgArr)
        if(url.toUpperCase().indexOf('MP4')!=-1) {
          let arr = [];
          let current = index;
          imgArr.map(item=>{
            if(item.type=='002') {
              arr.push(item)
            }
          })
          for(let i=0;i<index+1;i++) {
            if(imgArr[i].type=='001') {
              current--
            }
          }
          this.showSwiper(arr,current);
        } else {
          let arr = [];
          let current = index;
          imgArr.map(item=>{
            if(item.type=='001') {
              arr.push(item.url)
            }
          })
          for(let i=0;i<index+1;i++) {
            if(imgArr[i].type=='002') {
              current--
            }
          }
          uni.previewImage({
            current: current,
            urls:arr
          });
        }
      },
      showSwiper(list,index) {
        this.tempList = list;
        this.swiperIndex = index;
        this.maskShow = true;
      },
      queryList(pageNo, pageSize) {
        var that = this;
        let params = {
          pageNum: pageNo,
          pageSize: pageSize,
          serverId: that.serverId,
        };
        this.$u.api.getCommentList(params).then(res => {
          if (res.code === 200) {
            res.rows.map(item=>{
              item.isDown = true;
              item.reDown = true;
            })
            this.total = res.total;
            this.$refs.paging.complete(res.rows);
          } else {
            this.$refs.paging.complete(false);
          }
        });
      },

    },
};
</script>

<style lang="scss" scoped>
page {
    background: #f3f3f3;
}
.container {
    min-height: 100vh;
}

.order-num {
    border-bottom: 2rpx solid #eee;
    margin: 0 9rpx;
    height: 80rpx;
}

.comment-user-box {
    padding: 0 20rpx 38rpx 20rpx;
}
.user-comment {
    padding: 0 22rpx;
    margin-top: 15rpx;
    border-radius: 20rpx;
    .user-header {
        width: 60rpx;
        height: 60rpx;
        margin-right: 18rpx;
        border-radius: 50%;
        background: #111111;
    }
    .comment-item {
        margin-left: 17rpx;
        .comment-time {
            .name {
                max-width: 36%;
                display: -webkit-box;
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
            .tag {
                border: 2rpx solid #111111;
                border-radius: 4rpx;
                padding: 4rpx 13rpx;
                margin-left: 19rpx;
            }
            .time {
                text-align: right;
                font-size: 22rpx;
            }
        }
        .comment-score {
            margin-top: 8rpx;
        }
        .rate-item {
            width: 131rpx;
            height: 41rpx;
            line-height: 41rpx;
            text-align: center;
            background: #FFFFFF;
            border-radius: 8rpx;
            border: 2rpx solid #EEEEEE;
            margin-right: 25rpx;
        }
        .comment-txt {
            margin: 26rpx 0;
        }
        .comment-img-box {
            .comment-img {
                width: 180rpx;
                height: 180rpx;
                border-radius: 10rpx;
                margin-right: 12rpx;
            }
            .img-box {
                position: relative;
                margin-bottom: 10rpx;
            }
            .play-btn-img {
                position: absolute;
                top: calc(50% - 30rpx);
                left: calc(50% - 30rpx);
                width: 60rpx;
                height: 60rpx;
            }
        }
 
        .store-back {
            .back-time {
                padding-top: 24rpx;
                .down-img {
                    margin-left: 20rpx;
                }
                .time {
                    font-size: 22rpx;
                }
            }
            .back-txt {
                margin-top: 22rpx;
            }
            .add-com {
                border-top: 2rpx solid #eee;
            }
        }
        .store-com {
            .back-time {
                margin-top: 26rpx;
                padding-top: 24rpx;
            }
        }       
    }
}
span {
    display: inline-block;
}
</style>
