<template>
  <div>
    <div class="menu-title">
      全部用户
    </div>
    <div class="menu-content">
      <div>
        <el-form :inline="true" :model="qo" class="demo-form-inline">
          <el-form-item label="用户ID：">
            <el-input v-model="qo.LIKES_fid" placeholder="请输入用户ID" clearable style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryDataById()">搜 索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryData(-1)">上一页</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryData(1)">下一页</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="result.records" style="width: 100%" v-loading="loading">
          <el-table-column type="index" label="行号" width="60"></el-table-column>
          <el-table-column prop="UserId" label="用户ID"></el-table-column>
          <el-table-column prop="Labels" label="标签">
            <div slot-scope="scope">
              <template v-if="scope.row.Labels">
                <template v-for="(tag,index) in scope.row.Labels">
                  <el-tag :key="index" v-if="index < 5">{{ tag }}</el-tag>
                </template>
                <el-tag v-if="scope.row.Labels.length > 5">...</el-tag>
              </template>
            </div>
          </el-table-column>
          <el-table-column label="业务" width="80">
            <template slot-scope="scope">
              <el-button @click.native.prevent="followUser(scope.row)" type="text" size="small">
                关注
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button @click.native.prevent="feedbackHistory(scope.row)" type="text" size="small">
                Ta的喜欢
              </el-button>
              <el-button @click.native.prevent="linkUser(scope.row)" type="text" size="small">
                Ta的好友
              </el-button>
              <el-button @click.native.prevent="similarUser(scope.row)" type="text" size="small">
                相似用户
              </el-button>
              <el-button @click.native.prevent="recommendItem(scope.row)" type="text" size="small">
                Ta的推荐
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import request, {getBaseUrl} from '@/utils/request';

var _this;
var _index = 0;
export default {
  name: "allUsers",
  data() {
    return {
      qo: {
        pageNo: 1,
        pageSize: 10,
        LIKES_fid: '',
      },
      result: {
        records: [],
        total: 0
      },
      loading: false,
      cursorArr: [''], // 分页游标
    }
  },
  mounted() {
    _this = this;
    let _qo = _this.$route.query.qo;
    if (_qo) {
      _this.qo = JSON.parse(_qo);
    }
    _this.queryData(0);
  },
  methods: {
    queryDataById() {
      if (this.qo.LIKES_fid.length > 0) {
        this.loading = true;
        request({
          url: '/gorse/query_user/' + this.qo.LIKES_fid,
          method: 'get',
        }).then(res => {
          let user = res.data;
          if (!user) {
            _this.result.records = [];
          } else {
            _this.result.records = [user];
          }

          this.loading = false;
        });
      } else {
        this.cursorArr = [''];
        this.queryData(1);
      }
    },
    queryData(index) { // index -1 上一页，0刷新， 1下一页
      this.loading = true;
      this.cursorArr = this.cursorArr.slice(0, this.cursorArr.length - 1 + index);
      this.cursorArr = this.cursorArr.length === 0 ? [''] : this.cursorArr;
      request({
        url: '/gorse/query_users?cursor=' + this.cursorArr[this.cursorArr.length - 1],
        method: 'get',
      }).then(res => {
        this.cursorArr.push(res.data.Cursor);
        _this.result.records = res.data.Users;
        this.loading = false;
      });
    },
    feedbackHistory(item) {
      _this.$router.push({
        path: "feedbackHistory", query: {
          userId: item.UserId,
          cursorArr: JSON.stringify(_this.cursorArr)
        }
      });
    },
    linkUser(item) {
      _this.$router.push({
        path: "linkUser", query: {
          userId: item.UserId,
          qo: JSON.stringify(_this.qo)
        }
      });
    },
    similarUser(item) {
      _this.$router.push({
        path: "similarUser", query: {
          userId: item.UserId,
          qo: JSON.stringify(_this.qo)
        }
      });
    },
    recommendItem(item) {
      _this.$router.push({
        path: "recommendItem", query: {
          userId: item.UserId,
          qo: JSON.stringify(_this.qo)
        }
      });
    },
    followUser(item) {
      _this.$confirm('是否关注此用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.loading = true;
        //  添加节点
        request({
          url: '/nebula_operate/insertvertex/user_relation/tag_252150072',
          method: 'post',
          data: {
            ob: {name: item.UserId},
            vid: item.UserId
          }
        }).then(res => {
          request({
            url: '/nebula_operate/insertvertex/user_relation/tag_252150072',
            method: 'post',
            data: {
              ob: {name: _this.$store.getters.name},
              vid: _this.$store.getters.name
            }
          }).then(res => {
            request({
              url: '/nebula_operate/insertedgeline/user_relation/edge_768395026',
              method: 'post',
              data: {
                dstId: item.UserId,
                srcId: _this.$store.getters.name
              }
            }).then(res => {
              _this.loading = false;
              _this.$message.success("关注成功");
            });
          });
        });
      }).catch(() => {
      });
    },
  }
}
</script>

<style lang="scss">
</style>
