<template>
  <div style="height: 100%">
    <div class="menu-title">
      正向反馈历史（{{ gorseQo.userId }}）
      <div class="icon icon-back" @click="backBtn">
        <i title="返回"></i>
      </div>
    </div>
    <div class="block_box">
      <div class="line-item-box">
        <div class="line-item" v-for="(item,index) in list" :key="index">
          <div class="title-time">
            <div>{{ item.ItemId }}</div>
            <div>{{ item.Timestamp }}</div>
          </div>
          <div class="description">{{ item.Comment }}</div>
          <div class="labels">
            <el-tag v-for="la in item.Labels">{{ la }}</el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

var _this;
export default {
  name: "RecommendItem",
  data() {
    return {
      qo: "",
      gorseQo: {
        userId: '',
        n: 10,
        recommendation: '_',
        category: ''
      },
      user: {},
      list: []
    }
  },
  mounted() {
    _this = this;
    _this.qo = _this.$route.query.qo;
    _this.gorseQo.userId = _this.$route.query.userId;
    _this.getFeedbackList();
  },
  methods: {
    getFeedbackList() {
      request({
        url: '/gorse/get_feedback_list/' + _this.gorseQo.userId + "/like",
        method: 'get'
      }).then(res => {
        res.data.forEach(row => {
          row.Labels = row.Item.Labels;
          row.ItemId = row.Item.ItemId;
          row.Comment = row.Item.Comment;
          if(_this.list.length < 20) {
            _this.list.push(row);
          }
        });
      });
      request({
        url: '/gorse/get_feedback_list/' + _this.gorseQo.userId + "/star",
        method: 'get'
      }).then(res => {
        res.data.forEach(row => {
          row.Labels = row.Item.Labels;
          row.ItemId = row.Item.ItemId;
          row.Comment = row.Item.Comment;
          if(_this.list.length < 20) {
            _this.list.push(row);
          }
        });
      });
    },
    backBtn() {
      _this.$router.back();
    },
  }
}
</script>
<style src="../../../css/back.css" scoped></style>
<style scoped lang="scss">

.block_box {
  margin: 25px 25px 0 25px;
  background: #FFFFFF;
  border-radius: 3px;
  height: calc(100% - 120px);

  .title {
    border-bottom: 1px solid #ccc;
    padding: 15px 25px;
  }

}

.demo-form-inline {
  padding: 25px 25px 0 25px;
}

.line-item-box {
  height: calc(100% - 40px);
  overflow-y: auto;
  width: 100%;

  .line-item {
    font-size: 14px;
    line-height: 32px;
    padding: 0 25px 10px 25px;
    margin: 20px 0;
    border-bottom: 1px solid #dee0e2;


    .title-time {
      display: flex;

      div:first-child {
        font-weight: bold;
        font-size: 18px;
        color: #9da2a8;
      }

      div:last-child {
        margin-left: auto;
        color: #bbbcbd;
      }
    }

    .description {
      color: #bbbcbd;
    }

    .labels {
      color: #9da2a8;

      .el-tag {
        margin: 0 10px 10px 0;
      }
    }
  }

}
</style>
