<template>
  <div class="rate-card">
    <div class="rate-card-top">
      <image class="rate-user-photo" mode="aspectFit" lazy-load="true" :src="item.ISANONYMOUS==1|| !item.HEADIMAGEURL ?'https://eshangtech.com/ShopICO/noName.png' : item.HEADIMAGEURL"></image>
      
      <div class="top-card-center">
        <div class="rate-text" v-if="item.ISANONYMOUS==0">
          {{item.MEMBERSHIP_NAME}}
          <span v-if="item.MEMBERSHIP_LEVEL>100" class="vip-level">{{item.MEMBERSHIP_LEVEL_TEXT}}</span>
        </div>
        <div class="rate-text" v-else>匿名用户</div>
        <div style="display:flex;align-items:center;">
          <van-rate
            :value='item.MALLCOMMENT_SCORE'
            size="12"
            allow-half=true
            :color="starColor"
            void-color="#eee"
            void-icon="star"
            readonly
          >
          </van-rate>
          <span style="font-size:24rpx;" :style="{'color':starColor}">{{rateText}}</span>
        </div>
      </div>
      <div class="rate-date">{{item.CREATE_DATE}}</div>
    </div>
    <div class="rate-content">
      <div class="">{{item.MALLCOMMENT_CONTENT}}</div>
      <div class="rate-photo" v-if="item.IMAGELIST.length>0">
        <image mode="aspectFit" lazy-load="true" :src="img.IMAGE_URL" v-for="(img,i) in item.IMAGELIST" :key="i" @click="seePhoto(img.IMAGE_URL, item.IMAGELIST)"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  computed: {
    starColor () {
      let num = Math.ceil(this.item.MALLCOMMENT_SCORE)
      let colors = ['#f5bd50', '#f1b84d', '#f7a750', '#f59b3a', '#f28c44']
      return colors[num - 1]
    },
    rateText () {
      let num = Math.ceil(this.item.MALLCOMMENT_SCORE)
      let text = ['非常差', '差', '一般', '满意', '超满意,无可挑剔']
      return text[num - 1]
    }
  },
  methods: {
    seePhoto (item, list) {
      let u = []

      list.map(n => { u.push(n.IMAGE_URL) })
      mpvue.previewImage({
        current: item, // 当前显示图片的http链接
        urls: u // 需要预览的图片http链接列表
      })
    }
  }

}
</script>

<style lang="stylus" scoped>
  .rate-card+.rate-card
    border-top 1rpx solid #eee
  .rate-card
    padding 24rpx 24rpx 24rpx 0
    font-size 28rpx
    .rate-card-top
      display flex
      align-items top 
    .rate-user-photo
      height 80rpx
      width 80rpx
      border-radius 40rpx
    .top-card-center
      flex 6
      padding-left 16rpx
    .rate-text
      color #666666
      font-size 26rpx
      display flex
      align-items center
    .vip-level
      font-size 20rpx
      background #333
      color #EEDCB6
      padding 4rpx 6rpx
      margin-left 16rpx
      border-radius 4rpx
      display flex
      align-items ceneter
      position relative
      // padding-left 24rpx
      .vip-level:before
        content ''
        width 20rpx
        height 20rpx
        background url(https://eshangtech.com/ShopICO/vip-ico.png) no-repeat center
        background-size contain
        position absolute
        left 4rpx
    .rate-date
      flex 4
      color #989898
      font-size 22rpx
      text-align right 
    .rate-content
      padding-left 96rpx
      font-size 26rpx
      // padding-top 16rpx
    .rate-tag
      border-radius 4rpx
      border 1rpx solid #CF855E
      color #CF855E
      padding 4rpx 6rpx
      display inline-block
      font-size 20rpx
      margin 0 16rpx 8rpx 0
    .rate-photo
      display flex
      align-items center
      flex-wrap wrap
      image
        height 198rpx
        width 198rpx
        border-radius 4rpx
        margin 24rpx 0
      image+image
        margin-left 12rpx
</style>