<template>
  <div class="main" >
    <div style="display: flex;align-items: center;">
      <el-image style="width: 30px" :src="searchResults.icon">
        <div slot="error" class="image-slot">
          <img style="width: 28px" :src="require('@/assets/img/null.png')" alt="图标">
        </div>
      </el-image>
    </div>
    <div style="display: flex;margin-left: 10px;flex-direction: row;align-items: center;width: 200px">
      <el-tooltip v-if="searchResults.name" class="item" effect="dark" :content="searchResults.name" placement="top">
      <span style="font-size: 18px;font-weight: bold;overflow-x: scroll;width: 200px;white-space: nowrap;">
        {{ searchResults.name }}
      </span>
      </el-tooltip>

      <el-tooltip effect="dark"  placement="bottom">
        <div  slot="content">
          <span v-if="searchResults.name" style="font-size:12px !important;">【{{ searchResults.name }}】手机二维码</span><br/><br/>
          <div style="width:100% ;text-align: center"><img v-if="searchResults.id" style="width:150px"
                                                           :src="getResultsQR(searchResults.id)"></div>
        </div>
        <i style="margin-left: 10px" class="qr el-icon-s-grid"></i>
      </el-tooltip>

      <el-tooltip effect="dark" content="详情" placement="right" >
        <i style="margin-left: 10px" class="card-icon el-icon-d-arrow-right" @click="goToDetail(searchResults.id)"></i>
      </el-tooltip>

    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "SearchResults",
  props: {
    searchResults: Object,
  },
  data() {
    return {
      imageCode:'',
    }
  },
  mounted() {

  },
  created() {

  },
  computed: {},
  methods: {
    getResultsQR(url_id) {
      let _this = this;
      if(url_id!==''){
        axios({
          method: 'post',
          url: '/api/qrcode/qrc_return',
          params: {
            url_id: url_id,
          }
        }).then(function (res) {
          if (res.data!==''){
            _this.imageCode = "data:image/jpg;base64," + res.data;
          }
        }).catch((error) => {
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: error === null ? '' : error,
          //   offset: 0
          // });
        })
      }else{
        return false
      }
      return this.imageCode;
    },
    goToDetail(id){
      if(id){
          let pathInfo = this.$router.resolve({
            path: '/nav',
            query: {
              uid: id,
            }
          })
          window.open(pathInfo.href, '_self');
        } else {
          return false;
        }
    },
  }

}
</script>
<style scoped>
.main {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 270px;
  background-color: var(--content-bg);
  border-radius: 14px;
  border: 1px solid var(--theme-bg-color);
  padding: 10px;
  cursor: pointer;
  transition: 0.3s ease;
  margin-top: 10px;
}
.card-icon {
  font-size: 20px;
  font-weight: bold;
}

.card-icon:hover {
  color: #5ddcff;
}

.qr:hover {
  color: #5ddcff;
}
</style>