<template>
  <div class="app-card" @click="goToNavDetail">
    <div style="display: flex;flex-direction: row;align-items: center">
      <el-image v-if="nav.icon" :src="nav.icon" style="width: 40px;height: 40px"></el-image>
      <div class="content-card">

        <el-tooltip v-if="nav.name" class="item" effect="dark" :content="nav.name" placement="top">
          <span v-if="nav.name" class="content-title">{{ nav.name }}</span>
        </el-tooltip>
        <el-tooltip v-if="nav.desc" class="item" effect="dark" :content="nav.desc" placement="bottom">
          <span v-if="nav.desc" class="content-desc">{{ nav.desc.substr(0, 8) + '...' }}</span>
        </el-tooltip>
      </div>
      <el-tooltip class="item" effect="dark" content="详情" placement="right" @click="goToNavDetail()">
        <i style="margin-left: 3px" class="card-icon el-icon-d-arrow-right"></i>
      </el-tooltip>
    </div>
    <!--    <div class="app-card__subtext">{{nav.desc}}</div>-->
    <div class="dividing-line"></div>
    <div class="app-card-buttons">
      <el-tooltip class="item" effect="dark" content="访问需要代理" placement="bottom">
        <i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
      </el-tooltip>
      <!--      <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->
      <el-tooltip placement="bottom" width="150"
                  trigger="hover"
                  effect="dark" close-delay="2000">
        <div class="MyPopover" slot="content">
          <span style="font-size:12px !important;">【{{ nav.name }}】手机二维码</span><br/><br/>
          <div style="width:100% ;text-align: center"><img v-if="nav.userId && nav.icon" style="width:150px"
                                                           :src="getQR(nav.urlId,nav.icon)"/>
          </div>
        </div>
        <i class="qr el-icon-s-grid"></i>
      </el-tooltip>
    </div>
  </div>
</template>
<script>

import axios from "axios";
import Vue from "vue";

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

  },
  created() {

  },
  computed: {},
  methods: {
    getQR(url_id, icon_url) {
      let _this = this;
      if(url_id && icon_url){
        axios({
          method: 'post',
          url: '/api/qrcode/qrc_return',
          data: {
            url_id: url_id,
            icon_url: icon_url
          }
        }).then(function (res) {
          if (res.data) {
            _this.imageCode = "data:image/jpg;base64," + res.data;
          }
          return false;
        }).catch((error) => {
          Vue.prototype.$notify.error({
            title: '错误',
            message: error === null ? '' : error,
            offset: 0
          });
        })
        return this.imageCode
      }else{
        return false
      }

    },
    goToNavDetail() {
      if (this.nav.urlId) {
        let pathInfo = this.$router.resolve({
          path: '/nav',
          query: {
            uid: this.nav.urlId,
            refresh: true,
          }
        })
        window.open(pathInfo.href, '_self');
      } else {
        return false;
      }
    }
  }
}
</script>
<style scoped>
.dividing-line {
  margin-top: 10px;
  border-bottom: 1px solid var(--border-color);
}

.content-card {
  display: flex;
  flex-direction: column;
}

.content-title {
  margin-left: 5px;
  font-size: 15px;
  font-weight: bold;
  width: 110px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  overflow-x: scroll;
  color: var(--theme-color);
  /*background-color: var(--theme-bg-color);*/
}

.content-desc {
  font-size: 13px;
  margin-left: 5px;
  width: 110px;
  color: #999ba5;
  height: 20px;
  margin-top: 5px;
  white-space: nowrap;
  overflow-x: scroll;
  /*background-color: var(--theme-bg-color);*/
}

.card-icon {
  font-size: 20px;
  font-weight: bold;
  color: var(--theme-color);
}

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

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