<template>
  <div class="card">
    <div class="store-title">
      <image mode="aspectFit" lazy-load="true" :src="item.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
      <span class="name">商品评分</span>
      <div class="star-box">
        <van-rate
          data-key='item.commentScore'
          :value="item.commentScore"
          size="20"
          allow-half
          :color="starColor"
          void-color="#eee"
          void-icon="star"
          @change="changeRate"
        />
        <div class="rate-text" :style="{'color':starColor}">{{rateText}}</div>
      </div>
    </div>
    <div class="evaluate-box">
      <textarea cols="30" rows="5" placeholder="商品满足你的期待吗？说说你的使用心得，分享给想买的他们吧" v-model="item.commentContent"></textarea>

      <div class="photo-box">
        <div class="images" v-for="(item,i) in imgsList" :key="i" v-if="item">
          <image mode="aspectFit" :src='item' @click="seePhoto(item)"></image>
          <i @click="deleteImg(i)"></i>
        </div>
        <div class="add-photo" @click="choeseImg">
          <i></i>
          上传照片
        </div>
      </div>
        <hr/>
      <div class="rate-bottom">
         <van-checkbox class="isNoName" :value="item.isAnonymous" checked-color="#CAA97F" @change="isAnonymous">
          <span style="font-size:28rpx;">匿名评价</span>
        </van-checkbox>
        <div class="tip-text">
          你写的评价会以匿名的形式展示
        </div>
      </div>
      
    </div>
  </div>
</template>
<script>
export default {
  props: ['item'],
  data () {
    return {

    }
  },
  computed: {

    rateText () {
      let num = Math.ceil(this.item.commentScore) || 4
      let text = ['非常差', '差', '一般', '满意', '超满意,无可挑剔']
      return text[num - 1]
    },
    starColor () {
      let num = Math.ceil(this.item.commentScore) || 4
      let colors = ['#f5bd50', '#f1b84d', '#f7a750', '#f59b3a', '#f28c44']
      return colors[num - 1]
    }
  },
  methods: {
    changeRate (event) {
      this.$emit('changeRate', event, this.item)
    },
    isAnonymous (event) {
      this.$emit('isAnonymous', event, this.item)
    }
  }

}
</script>
<style lang="stylus">
 .card
  background #fff
  font-size 28rpx
  .store-title
    display flex
    align-items center
    border-bottom 2rpx solid #E7E7E7
    padding 16rpx 32rpx
    image
      height 76rpx
      width 76rpx
    .name
      flex 2
      font-size 26rpx
      margin-left 16rpx
    .star-box
      display flex
      align-items center
      text-align center
      flex 5
    .rate-text
      width 180rpx
      color #ee8c45
      font-size 24rpx
  
  .evaluate-box
    padding 20rpx 0
    textarea
      width 690rpx
      color #333
      height 160rpx
      padding 16rpx 32rpx
    .tip-text
      
      color #646464
     
      .tip-color
        color #ba9b6f
    .photo-box
      display flex
      align-items center
      flex-wrap wrap
      .images
        margin 16rpx 0 16rpx 13rpx
        position relative
        image
          height 160rpx
          width 160rpx
          border-radius 6rpx
          background #fff
        i 
          background #ea4848
          height 30rpx
          width 30rpx
          border-radius 50%
          position absolute
          top -15rpx
          right -10rpx
          &:after
            content ' '
            height 4rpx
            width 18rpx
            display block
            background #fff
            margin-top 14rpx
            margin-left 6rpx
            border-radius 4rpx
      .add-photo
        height 160rpx
        width 160rpx
        border-radius 8rpx
        border 1rpx dashed #B1B1B7
        margin-left 32rpx
        text-align center
        color #B5B5B5
        font-size 22rpx
        display flex
        flex-direction column
        align-items center
        justify-content center
        i 
          margin-bottom 12rpx
          width 42rpx
          height 36rpx
          background url(../../../..https://eshangtech.com/wanmeiyizhanImg/pic.png) no-repeat center
          background-size contain
  hr
    margin 24rpx 32rpx
    height 2rpx
    background #f5f5f5
  .rate-bottom
    padding 0 32rpx
    display flex
    align-items center
    justify-content space-between
</style>