<template>
  <div class="wrapper">
    <LeftSide :category="category"></LeftSide>
    <div class="DefinedPage">
      <div class="LeftPart" style="overflow: auto">
        <div class="JustBack"
             style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
          <div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap">
            <div class="card" style="width: 180px;height:180px;margin-top:50px;background-color: var( --theme-bg-color)"
                 @click="ToURL()">
              <img :src="UrlObj.icon">
            </div>
            <div id="IconGroup"
                 style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
              <div class="little-Triangle" style=" margin-left:15px;">
                <el-tooltip placement="bottom" width="150"
                            trigger="hover"
                            effect="dark" close-delay="2000">
                  <div class="MyPopover" slot="content">
                    <span style="font-size:12px !important;">【{{ UrlObj.name }}】完整URL</span><br/><br/>
                    <div style="width:100% ;text-align: center">{{ UrlObj.url }}</div>
                  </div>
                  <i class="el-icon-link" id="little-Circle-content"
                     style="font-weight:550;padding:5px;font-size:15px!important;margin-top:5px">完整URL</i>
                </el-tooltip>
              </div>
              <div class="little-Triangle" style=" margin-left:15px;">
                <el-tooltip placement="bottom" width="150"
                            trigger="hover"
                            effect="dark" close-delay="2000">
                  <div class="MyPopover" slot="content">
                    <span style="font-size:12px !important;">【{{ UrlObj.name }}】手机二维码</span><br/><br/>
                    <div style="width:100% ;text-align: center"><img style="width:150px"
                                                                     :src="getQR(UrlId,UrlObj.icon)"></div>
                  </div>
                  <i class="el-icon-picture" id="little-Circle-content"
                     style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
            <span style="font-size:30px;font-family: STHupo">{{ UrlObj.name }}</span><br/>
            <div class="NavInfo">
              <span style="width:200px">创建时间：{{ Cdate }}</span><br/>
              <span style="width:200px">创建用户：{{}}</span><br/>
              <span style="width:200px">所属标签：｛小视频｝</span><br/>
              <div style="display: flex;flex-direction: row">
                <div class="little-Circle" id="readNum" style=" margin-left:15px;">
                  <el-tooltip placement="top" width="150"
                              trigger="hover"
                              effect="dark" close-delay="2000">
                    <div class="MyPopover" slot="content">
                      <span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
                      <div style="width:100% ;text-align: center">{{ UrlObj.views }} 次</div>
                    </div>
                    <i class="el-icon-s-custom" id="little-Circle-content" style=" padding:5px;"></i>
                  </el-tooltip>
                </div>
                <div class="little-Circle" id="Rank" style="margin-left:15px;">
                  <el-tooltip placement="top" width="150"
                              trigger="hover"
                              effect="dark" close-delay="2000">
                    <div class="MyPopover" slot="content">
                      <span style="font-size:12px !important;">【91视频网站】总星级</span><br/><br/>
                      <div style="width:100% ;text-align: center;">
                        <span style="font-size:20px">★★★☆☆</span>
                        <br/>
                        <span>评分： 3.8分</span>
                      </div>
                    </div>
                    <i class="el-icon-star-on" id="little-Circle-content" style=" padding:5.5px; "></i>
                  </el-tooltip>
                </div>
                <div class="little-Circle" id="Rank" style="margin-left:15px;" @click="WarnToAdmin()">
                  <el-tooltip placement="top" width="150"
                              trigger="hover"
                              effect="dark" close-delay="2000">
                    <div class="MyPopover" slot="content">
                      <span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
                    </div>
                    <i class="el-icon-warning" id="little-Circle-content" style=" padding:5px; "></i>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  标签详情-->
        <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
          <!--文章详情-->
          <div style="width:670px;color: var(--theme-color)">
            <div class="HeadLine">
              <div class="HeadSquare"></div>
              <div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
            </div>
            <div class="ArticleContent">
              {{ UrlObj.desc }}
            </div>
          </div>
          <!--导航评论-->
        </div>
        <!--热度趋势-->
        <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
          <div style="width:670px;color: var(--theme-color)">
            <div class="HeadLine" style="margin-top:50px">
              <div class="HeadSquare"></div>
              <div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div>
            </div>
            <div class="ArticleContent">
              <div id="ManuEchart" style="width:550px;height:300px;"></div>
            </div>
          </div>
        </div>
        <!--用户评论-->
        <div class="JustBack" style="width:670px;height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
          <div style="width:670px;color: var(--theme-color)">
            <div class="HeadLine" style="margin-top:30px">
              <div class="HeadSquare"></div>
              <div class="TitleFont"><i class="el-icon-s-comment"></i>用户评论</div>
            </div>
            <div class="ArticleContent" style="margin-left:6px !important;width:580px !important;">
              <el-card style="background-color: var(--theme-comment-color)">

                <UserComment></UserComment>

              </el-card>

            </div>
          </div>
        </div>
      </div>
      <div class="RightPart" style="overflow: auto;display: flex;flex-direction: column">
        <hot-recomment></hot-recomment>
        <NewRecomment></NewRecomment>
        <RandomRecomment></RandomRecomment>
      </div>
    </div>

  </div>
</template>
<script>
import HotRecomment from "@/components/detail/HotRecomment.vue";
import NewRecomment from "@/components/detail/NewRecomment.vue";
import RandomRecomment from "@/components/detail/RandomRecomment.vue";
import UserComment from "@/components/detail/UserComment.vue";
import Vue from "vue";
import * as echarts from 'echarts'
import axios from "axios";
import LeftSide from "@/components/home/LeftSide.vue";

Vue.prototype.$echarts = echarts;
export default {
  name: "NavDetail",
  // eslint-disable-next-line vue/no-unused-components
  components: {LeftSide, HotRecomment, NewRecomment, RandomRecomment, UserComment},
  data() {
    return {
      category: [],
      visible: false,
      //返回数据：时间列表
      TimeList: [],
      //返回数据：浏览量
      PageView: [],
      //Echart图
      ManuChart: null,
      // 获取urlId:
      UrlId: null,
      //   获取标签对象：
      UrlObj: Object,
      //   创建时间：
      UnDate: null,
      Cdate: null,
      //   时间趋势对象：
      viewByTime: null,
      // 处理后的时间对象：
      //   横轴时间：
      xTime: [],
      //   y轴阅读量：
      YView: [],
      imageCode: null,
    }
  },
  mounted() {
    this.initPage();
    this.getQR(this.UrlId, this.UrlObj.icon);

  },
  created() {

  },
  computed: {},
  methods: {
    // 日访问：
    ViewByTime(id) {
      let _this = this;
      axios.get('/api/getUrlAccess', {
        params: {
          urlId: id
        }
      }).then(function (res) {
        _this.viewByTime = res.data;
        // console.log(_this.viewByTime)
        Object.keys(_this.viewByTime).forEach(key => {
          _this.xTime.push(_this.viewByTime[key].time);
          _this.YView.push(_this.viewByTime[key].views);
        })
        _this.initEchart(_this.xTime,_this.YView);
      }).catch((error) => {
        Vue.prototype.$notify.error({
          title: '错误',
          message: error,
          offset: 0
        });
      })
    },
    // 获取二维码：
    getQR(url_id, icon_url) {
      let _this = this;
      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
    },
    // 跳转：
    ToURL() {
      var that = this;
      window.open(that.UrlObj.url, '_blank')
    },
    // 时间转换：
    getFormatDate() {
      var that = this;
      console.log(this.UnDate + "传入时间戳");
      var date = new Date(this.UnDate);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '年';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
      var D = date.getDate() + '日 ';
      // var h = date.getHours() + ':';
      // var m = date.getMinutes() + ':';
      // var s = date.getSeconds();
      that.Cdate = "" + Y + M + D;
    },


    // 初始化页面
    initPage() {
      this.UrlId = this.$route.query.uid;
      this.GetNav(this.UrlId);

      // this.initEchart();
    },
    //   初始化Echart图
    initEchart(xline,yline) {
      // var that = this;
      var myChart = this.$echarts.init(
          document.getElementById('ManuEchart')
      );
      var MyOption = {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          },
          dataZoom: [{
            type: 'slider', // 设置为滑动条型式
            show: true, // 显示dataZoom组件
            start: 0, // 默认显示的起始位置为0
            end: 30, // 默认显示的结束位置为100
            handleSize: 8, // 滑动条的手柄大小
            handleStyle: {
              color: '#DCE2E8' // 滑动条的手柄颜色
            },
            xAxisIndex: [0], // 表示控制第一个x轴
            filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
          }]
          ,
          backgroundColor: '#fff', // 悬浮框背景色
          borderColor: '#000', // 悬浮框边框颜色
          borderWidth: 1, // 悬浮框边框宽度
          textStyle: { // 悬浮框文字样式
            color: '#000',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          data: xline,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#76aaff',
              width: 2,
              type: "solid"
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#76aaff',
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#76aaff',
              width: 2,
              type: "solid"
            }
          },
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: '#76aaff',
              margin: 15
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          }
        },
        series: [
          {
            data: yline,
            type: 'line',
            label: {//文字的显示
              show: true, //默认  显示文字
            }
          },
          {
            data: yline,
            type: 'bar'
          },
        ],
        dataZoom: {
          yAxisIndex: [0],
          type: 'inside',
          start: 0,
          end: 100,
          zoomLock: true,
        }
      }
      myChart.setOption(MyOption, true);
    },
    // 获取标签对象
    GetNav(id) {
      let that = this;
      axios({
        method: 'post',
        url: '/api/UrlAndCate/clickUrl',
        params: {
          urlId: id
        }
      }).then((res) => {
        that.UrlObj = res.data.data;
        that.UnDate = that.UrlObj.createtime;
      }).catch((error) => {
        Vue.prototype.$notify.error({
          title: '错误',
          message: error === null ? '' : error,
          offset: 0
        });
      });
      this.getFormatDate();
    },
    //   向管理员反馈
    WarnToAdmin() {
      console.log(this.xTime);
    }
  }

}
</script>
<style lang="css">
.DefinedPage {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: auto;
}
</style>


<style scoped>
/**标签详情**/
.ArticleContent {
  width: 80%;
  margin-left: 50px;
  margin-top: 15px;
  font-weight: 550;
  font-size: 18px;
  color: var(--theme-color);
}

/**趋势图**/
.LookNumEchart {
  width: 80%;
  margin-left: 60px;
  margin-top: 15px;
  font-weight: 550;
  font-size: 18px;
  color: var(--theme-color);
}


@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}


body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}


.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  font-weight: 700;
  cursor: pointer;
  font-family: fantasy;
}

.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}

.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}


.card::before {
  content: "";
  width: 108%;
  height: 108%;
  border-radius: 8px;
  background-image: linear-gradient(
      var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  position: absolute;
  z-index: -1;
  //top: -1%;
  //left: -2%;
  animation: spin 2.5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
      var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}
</style>