<style>
@import url("../assets/views/index.css");
</style>
<template>
  <div class="data-show">
    <audio ref="audio" autoplay>您的浏览器不支持 audio 元素。</audio>
    <div class="box">
      <div class="title">
        <h1>印象之旅销售数据平台</h1>
        <!-- <h6>MAGE · Data Services</h6> -->
        <div class="time">
          {{times.length==2?(times[0].length==1?'0'+times[0]:times[0]):""}}<span style="font-family:pingfang;font-size:40px;color:#666;margin-left:-2px;">:</span>{{times.length==2?(times[1].length==1?'0'+times[1]:times[1]):""}}
        </div>
      </div>
      <div class="show" v-if='isReady'>
        <div class="show-left-content">
          <div class="block line">
            <div class="circel go-right"></div>
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <div class="title">线路销售</div>
            <div class="content">
              <line-rank :data='data.lineGuestRank'></line-rank>
            </div>
          </div>
          <div class="block">
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <div class="title">销售部门排名</div>
            <div class="content">
              <departHorizontalRank :data='data.salesDepartmentRank'></departHorizontalRank>
            </div>
          </div>
          <div class="block outbind">
            <div class="circel go-left"></div>
            <div class="circel go-right"></div>
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <div class="title">收客平台</div>
            <div class="content">
              <platformPieRank :data='data.platformGuest'></platformPieRank>
            </div>
          </div>
          <div class="block ad">
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <div class="title">今日广告</div>
            <div class="content">
              <div class="item">
                <div class="num">{{advert.new}}</div>
                <div>今日新增</div>
              </div>
              <div class="item">
                <div class="num">{{advert.forward?advert.forward:'0'}}</div>
                <div>今日转发</div>
              </div>
            </div>
          </div>
          <div class="block mini">
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <div class="title">同行热度</div>
            <div class="content">
              <lineMemberRank></lineMemberRank>
            </div>
          </div>
          <div class="block long">
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <div class="title">营业额走势图</div>
            <div class="content">
              <sellTrade :data='data.turnoverTrend'></sellTrade>
            </div>
          </div>
        </div>
        <div class="show-center-content">
          <!-- <i class="l-t"></i>
                    <i class="r-t"></i>
                    <i class="l-b"></i>
          <i class="r-b"></i>-->
          <div class="count-box">
            <div class="cloub-tag-box">
              <tags :hotWord="hotWord"></tags>
            </div>
            <div class="sell-count-box">
              <div class="sell-count">
                <number
                  title="今日销售额"
                  :count="(data.sales/10000).toFixed(2)"
                  unit="W"
                  color="#2a9e9e"
                  :decimal="true"
                  iconColor="#2a9e9e"
                ></number>
              </div>
            </div>
            <div class="people-count">
              <number
                title="今日收客数"
                :count="data.guestNum.toString()"
                unit="人"
                color="#2a73fe"
                :decimal="false"
                iconColor="#2a73fe"
              ></number>
            </div>
          </div>
          <div class="map-box">
            <centerMp></centerMp>
          </div>
        </div>
        <div class="show-right-content">
          <div class="up">
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <sellTopRank :data='data.empSalesRank'></sellTopRank>
          </div>
          <div class="down">
            <div class="circel go-left"></div>
            <i class="l-t"></i>
            <i class="r-t"></i>
            <i class="l-b"></i>
            <i class="r-b"></i>
            <!-- <div class="title">销售部门排名</div>
                        <div class="content">
                            <departHorizontalRank></departHorizontalRank>
            </div>-->
            <newOrder :data='data.signInfo'></newOrder>
          </div>
        </div>
      </div>
    </div>
    <div class="video_box" :class="movieShow ? 'video_box_show' : ''">
      <video v-if="movieShow" @ended="nextVideo(true)" style="width:100%;height:100%;" ref="video" :src="movie[movieNum]" autoplay="autoplay" controls="controls">您的浏览器不支持视频播放</video>
    </div>
  </div>
</template>
<script>
import centerMp from "../components/sellDashboard/map/index";
import tags from "../components/sellDashboard/tagCloub/index";
import number from "../components/sellDashboard/number/index";
import lineRank from "../components/sellDashboard/lineRank";
import lineMemberRank from "../components/sellDashboard/lineMemberRank";
import platformPieRank from "../components/sellDashboard/platformPieRank";
import departHorizontalRank from "../components/sellDashboard/departHorizontalRank";
import sellTopRank from "../components/sellDashboard/sellTopRank";
import newOrder from "../components/sellDashboard/newOrder";
import sellTrade from "../components/sellDashboard/sellTrade";

export default {
  components: {
    centerMp,
    tags,
    number,
    lineRank,
    platformPieRank,
    departHorizontalRank,
    lineMemberRank,
    sellTopRank,
    newOrder,
    sellTrade,
    
  },
  data() {
    return {
      baiduToken: "",
      mqData: [],
      endVideo: '',
      data: {},
      isReady: false,
      times:[],
      socket: null,
      advert: {
        forward: 0,
        new: 0
      },
      hotWord: null,
      movie: [],
      movieNum: 0,
      movieShow: false,
      movieTime: 0,
      movieTimmer: null,
      fiveMinutes: 300,
    };
  },
  mounted() {
    for (let i = 0; i < 26; i ++){  // 生成视频数据
      this.movie.push(`http://192.168.1.254/${i+1}.mp4`)
      // this.movie.push(`http://img.oytour.com/video/${i+1}.mp4`)
    }
    this.nextVideo();
    this.mq();
    this.initVideo();
    this.bus.$on("addVideo", txt => {
      this.addVideo(txt);
    });
    let audio=this.$refs.audio
    let _this=this
    audio.addEventListener('ended', function () {
        console.log(_this.endVideo)
        if(_this.endVideo&&_this.endVideo!=''){
            audio.src=_this.endVideo
            _this.endVideo=''
        }else{
          _this.mq()
        }
    }, false);
    this.init()
    this.movieTimmer = setInterval(() => { 
      this.getMovieTimmer()
    }, 1000)
    this.getTime()
    setInterval(() => {
      this.getTime()
    }, 1000)
    setTimeout(() => {
      this.connec();
    }, 1000);
  },
  methods: {
    getMovieTimmer: function () {
      if (this.movieTime < this.fiveMinutes) {
        this.movieTime += 1
      } else if (this.movieTime >= this.fiveMinutes && !this.movieShow) {
        this.movieShow = true
      } else {
        return
      }
    },
    nextVideo: function (f) {
      if (f) {  // 根据f 删除一播放的数据
        this.movie.splice(this.movieNum, 1)
      }
      let maxNum = this.movie.length  // 最大随机数
      let mathRound = Math.floor(Math.random()*maxNum) // 生成随机数
      if (maxNum === 1){ // 如果随机数为1 说明是最后提条数据 重新生成数据 
        this.movie = []
        for (let i = 0; i < 26; i ++){
          this.movie.push(`http://192.168.1.254/${i+1}.mp4`)
          // this.movie.push(`http://img.oytour.com/video/${i+1}.mp4`)
        }
        this.nextVideo()
      } else {
        this.movieNum = mathRound
      }
    },
    connec(){
      let _this=this
      let url = 'http://dataapi.oytour.com/data_server'
      // let url = 'http://192.168.2.215:5000/data_server'
      let userInfo = this.getLocalStorage()
      // if (userInfo) {
      //   url +='?id=' + userInfo.ImAccount
      //   url +='&token=' + userInfo.token
        this.socket = this.$socketio.connect(url)
      // }
      //报名信息
      this.socket.on('sign_info', function (msg) {
        _this.data.signInfo = msg.data
        _this.movieTime = 0
        _this.movieShow = false
        console.log("sign_info",msg,"_this.movieTime",_this.movieTime,"_this.movieShow",_this.movieShow)
      });
      //销售排行榜
      this.socket.on('emp_sales_rank', function (msg) {
        _this.data.empSalesRank = msg.data
        console.log("emp_sales_rank",msg)
      });
      //销售额
      this.socket.on('sales', function (msg) {
        _this.data.sales=msg.data
       
      });
      //测试
      this.socket.on('server_response', function (msg) {
        // console.log(msg)
      });
      //收客数
      this.socket.on('guest_num', function (msg) {
        _this.data.guestNum=msg.data
         console.log('guest_num',msg)
      });
      //平台收客
      this.socket.on('platform_guest', function (msg) {
        _this.data.platformGuest=msg.data
      });
      //销售部门排名
      this.socket.on('sales_department_rank', function (msg) {
        _this.data.salesDepartmentRank=msg.data
      });
      //销售线路排名
      this.socket.on('line_guest_rank', function (msg) {
        _this.data.lineGuestRank=msg.data
      });
      //营业额走势图
      this.socket.on('turnover_trend', function (msg) {
         _this.data.turnoverTrend=msg.data
      });
      //广告    
      this.socket.on('advert', function (msg) { 
        _this.advert = msg.data
      });
      //热词
      this.socket.on('hot_word', function (msg) {
        _this.hotWord = msg.data
      });
    },
    getTime(){
      var d = new Date();
      this.times=[]
      let h=d.getHours()
      let m=d.getMinutes()
      h=h.length==1?`0${h}`:h.toString()
      m=m.length==1?`0${m}`:m.toString()
      this.times.push(h)
      this.times.push(m)
    },
    init(){
      // this.apipost('')
      let url='http://dataapi.oytour.com/api/user/get_init_data'
      let msg={
        tdsourcetag:'s_pcqq_aiomsg'
      }
      this.apiRequest(url,msg,r=>{
        this.data=r.data.data
        console.log(this.data)
        this.hotWord=this.data.hotWord
        this.advert=this.data.advertInfo
        this.isReady=true
      });
    },
    //消息队列
    async mq() {
      if (this.mqData.length == 0) {
        await this.sleep(1000);
        this.mq();
      } else {
        this.playVideo(this.mqData[0].txt);
        if(this.mqData[0].endVideo&&this.mqData[0].endVideo!='')
            this.endVideo=this.mqData[0].endVideo
        this.mqData.splice(0, 1);
      }
    },
    sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    initVideo() {
      let msg = {
        appkey: "4gR6yRX5O3PN8hGC5FaNh5d5",
        secrity: "QG70I08RXronkrRlGNqAxNRwEt27Ys7f"
      };
      this.apipost(
        "thridparty_baiduvideo_gettoken",
        msg,
        r => {
          this.baiduToken = r.data.data.token;
          setTimeout(() => {
              this.playVideo("大家好，我系二狗同鞋");
          }, 2000);
        },
        null
      );
    },
    playVideo(txt) {
      let url = `http://tsn.baidu.com/text2audio?tex=${encodeURIComponent(
        txt
      )}&tok=${
        this.baiduToken
      }&cuid=00-E0-4C-01-80-B4&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3`;
      this.$refs.audio.src = url;
    },
    addVideo(obj) {
      this.mqData.push(obj);
    }
  }
};
</script>
