<template>
  <div style="height: 100%">
    <div class="menu-title">
      Ta的推荐（{{ gorseQo.userId }}）
      <div class="icon icon-back" @click="backBtn">
        <i title="返回"></i>
      </div>
    </div>
    <div class="block_box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="gorseQo.recommendation" @change="getRecommendItem">
            <el-option :key="item.value" :value="item.value" :label="item.label"
                       v-for="item in recommendList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="种类">
          <el-select v-model="gorseQo.category" @change="getRecommendItem">
            <el-option value="" label="无"></el-option>
            <el-option :key="item.id" :value="item.name" :label="item.name"
                       v-for="item in categoryList"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="line-item-box">
        <div class="line-item" v-for="item in list" :key="item.id">
          <el-row>
            <el-col :span="23">
              <div class="title-time">
                <div>{{ item.ItemId }}  <el-button @click.native.prevent="similarItem(item)" type="text" size="small">
                  相似条目
                </el-button></div>
                <div>{{ item.Timestamp }}</div>
              </div>
              <div class="description">{{ item.Comment }}</div>
              <div class="labels">
                <el-tag v-for="(la,index) in item.Labels" :key="index">{{ la }}</el-tag>
              </div>
            </el-col>
            <el-col :span="1" style="text-align: center;padding-top: 50px">
              <i class="el-icon-star-off" @click="starItem(item)" style="font-size: 35px;cursor: pointer" title="喜欢"></i>
            </el-col>
          </el-row>
        </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: {},
      categoryList: [],
      recommendList: [{
        label: '默认推荐',
        value: '_'
      }, {
        label: '基于物品推荐',
        value: 'item_based'
      }],
      list: []
    }
  },
  mounted() {
    _this = this;
    _this.qo = _this.$route.query.qo;
    _this.gorseQo.userId = _this.$route.query.userId;
    _this.queryCategoryList();
    _this.getRecommendItem();
  },
  methods: {
    queryCategoryList() {
      request({
        url: '/category/query_list',
        method: 'post',
        data: {}
      }).then(res => {
        _this.categoryList = res.data;
      });
    },
    similarItem(item) {
      _this.$router.push({
        path: "similarItem", query: {
          itemId: item.ItemId
        }
      });
    },
    getRecommendItem() {
      request({
        url: '/gorse/get_recommend_by_user',
        method: 'post',
        data: _this.gorseQo
      }).then(res => {
        res.data.forEach(row => {
          row.labelsArr = row.labels ? row.labels.split(',') : [];
        });
        _this.list = res.data;
      });
    },
    starItem(item) {
      request({
        url: `/gorse/insert_feedback/star/${this.$store.getters.name}/${item.ItemId}`,
        method: 'post',
        data: {}
      }).then(res => {
        this.$message.success("收藏成功")
      });
    },
    backBtn() {
      this.$router.go(-1);
    },
  }
}
</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% - 88px);
  overflow-y: auto;

  .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>
