<template>
  <div class="detail_page">
    <ul>
      <li v-if="info.sensitiveFlag">
        <p>敏感词</p>
        <p>{{ info.sensitiveKeywordList.join() }}</p>
      </li>
      <li
        v-for="(item,index) in list" :key="index" :class="[{'active_li': info.additionalComment && index === 2}]"
        :time="time"
      >
        <p v-if="item.show">{{ item.name }}</p>
        <p v-if="item.show">
          <span v-if="item.type===1">{{ item.value }}</span>
          <span v-else>
            <img v-for="(ob, i) in item.imgList" :key="i" :src="ob" alt="" />
          </span>
        </p>
      </li>
    </ul>
    <div class="btn_list">
      <el-button type="primary" @click="confirm">{{ info.hideFlag ? '显示' : '隐藏' }}</el-button>
      <el-button class="delete" @click="deletes">删除</el-button>
    </div>
  </div>
</template>

<script>
import { getIntervalTime } from '@/utils/date'
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: [
        {
          name: '评论',
          value: '商品好看有实用，强烈推荐购买。这台电脑买来不是玩游戏的，没那爱好。主要用来给孩子上网课，大人偶尔会看看电影视频这些，所以配的4K显示器。京东快递很麻利，从山东调货，隔天就到了，非常感谢。',
          type: 1,
          fields: 'commentText'
        },
        {
          name: '图片',
          value: '商品好看有实用，强烈推荐购买。这台电脑买来不是玩游戏的，没那爱好。主要用来给孩子上网课，大人偶尔会看看电影视频这些，所以配的4K显示器。京东快递很麻利，从山东调货，隔天就到了，非常感谢。',
          type: 2,
          imgList: [
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg',
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg',
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg',
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg',
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg',
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg'
          ],
          fields: 'commentImgs'
        },
        {
          name: '追评',
          value: '机器外观精致小巧，性能也足够家用。',
          type: 1,
          fields: 'additionalComment',
          fieldsItem: 'commentText'
        },
        {
          name: '图片',
          value: '机器外观精致小巧，性能也足够家用。',
          type: 2,
          imgList: [
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg',
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg',
            'http://cereshop.oss-cn-shenzhen.aliyuncs.com/admin/2020/07/6b0d6d7a-8ec8-4fdd-b75d-8b6590683543.jpg'
          ],
          fields: 'additionalComment',
          fieldsItem: 'commentImgs'
        }
      ],
      time: ''
    }
  },
  watch: {
    info: {
      handler() {
        this.getList()
      },
      deep: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      const _ = this
      _.list.map(item => {
        if (_.info[item.fields]) {
          item.value = _.info[item.fields]
          item.show = true
          if (item.fields === 'additionalComment') {
            item.value = _.info.additionalComment[item.fieldsItem]
            if (item.fieldsItem === 'commentImgs') {
              item.imgList = _.info.additionalComment.commentImgsFlag ? _.info.additionalComment.commentImgs.split(',') : []
              item.show = _.info.additionalComment.commentImgsFlag
            }
          }

          if (item.fields === 'commentImgs') {
            item.imgList = _.info.commentImgsFlag ? _.info.commentImgs.split(',') : []
            item.show = _.info.commentImgsFlag
          }
        }
      })
      if (_.info.additionalComment) {
        _.time = `${getIntervalTime(_.info.createTime, _.info.additionalComment.createTime)}后追加评论`
      }
    },
    deletes() {
      this.$emit('deletes')
    },
    confirm() {
      this.$emit('handle')
    }
  }
}
</script>

<style lang='less' scoped>
.detail_page {
 ul {
     overflow: hidden;
     li {
        overflow: hidden;
        p {
             overflow: hidden;
             font-size: 16px;
             float: left;
             &:nth-child(1) {
                 font-weight: 600;
                 width: 70px;
             }
             &:nth-child(2) {
                 width: calc(100% - 75px);
                 img {
                     float: left;
                     width: calc(25% - 8px);
                     height: 135px;
                     border-radius: 4px;
                     margin-right: 8px;
                     margin-bottom: 10px;
                 }
             }
         }
     }
     .active_li {
       border-top: 1px solid #E0E5EB;
       padding-top: 50px;
       position: relative;
       &:after {
         content: attr(time);
         position: absolute;
         top: 10px;
         left: 0;
         display: block;
         color: #F18B48;
         font-size: 16px;
       }
     }
 }
 .btn_list {
     text-align: center;
     .delete {
         margin-left: 20px !important;
     }
 }
}
</style>
