<template>
  <section class="homeTopContanier">
    <section class="homeWelcome">
      <div class="hwLeft">
          <span class="hwLTitle"><strong>{{$root.user.name}}锛寋{greetings}}</strong><em v-if="!bjzw"><span v-if='hiredDate'>鎮ㄥ凡鍏ヨ亴{{hiredDateToNow}}锛�</span>鎰熻阿鎮ㄧ殑浠樺嚭~</em></span>
          <span class="hwLAd"><img src="~@/assets/images/other/adicon.png"/><em @click="AnnouncementRedirect" v-if='getAnnouncementFirst.title'>{{getAnnouncementFirst.title}}</em><em v-else>鏆傛棤閫氱煡</em></span>
      </div>
      <div class="hwRight" v-if="homeTemplateBoradType!='rtpayTemplate'">
          <span class="hwRWt" v-if="city"><img :src="weatherImg"/></span>
          <span class="hwRDate"><em>{{nowDate}}</em><b>{{nowTime}}</b><i v-if="city">{{cityInfo.city}} {{cityInfo.weather}} {{cityInfo.temperature}}鈩�</i></span>
      </div>
    </section>
    <section class="homeAdvert" v-if='bannerArr.length'>
       <el-carousel :interval="5000" arrow="always" height="200">
                <el-carousel-item v-for="(item,index) in bannerArr" :key="index">
                <img :src="item.pic" @click="applidetaillink(item)"/>
                </el-carousel-item>
            </el-carousel>
    </section>
  </section>  
</template>
<script>
import {getNowFormatDateCN,currDateTimeHMS,getNowFormatDate,diffDate} from '@/utils/global.js'
export default {
    inject:['addTab'],
    data(){
        return{
           city:'',
           cityInfo:{},
           weatherImg:'',
           network: true,
           sun:require('@/assets/images/other/sun.png'),
           cloud:require('@/assets/images/other/cloud.png'),
           cloudy:require('@/assets/images/other/cloudy.png'),
           dust:require('@/assets/images/other/dust.png'),
           haze:require('@/assets/images/other/haze.png'),
           hail:require('@/assets/images/other/hail.png'),
           rain:require('@/assets/images/other/rain.png'),
           rainsnow:require('@/assets/images/other/rainsnow.png'),
           ray:require('@/assets/images/other/ray.png'),
           snow:require('@/assets/images/other/snow.png'),
           nowDate:'',
           nowTime:'',
           timer: "",//瀹氫箟涓€涓畾鏃跺櫒鐨勫彉閲�,
           greetings:'',//闂€欒
           hiredDateToNow:'',
           hiredDate:'',
           getAnnouncementFirst:{title:''},
           bannerArr:[], //骞垮憡
           homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'payTemplate',
           bjzw:null,
        }
    },
    created() {
        console.log(this.$root.user)
        this.network = __network__
        if(this.network){
            this.getLocation();   
        }
        this.timer=setInterval(()=>{
                this.nowDate=getNowFormatDateCN()
                this.nowTime=currDateTimeHMS()
                this.greetingsStr() //闂€欒                                        
        },1000)       
       this.employeesInfo()//鍦ㄨ亴鍛樺伐淇℃伅
       this.getAnnouncementList()//鑾峰彇宸ヤ綔鍙�3.0鍏憡

       this.AppMarketBannerlist()//骞垮憡鍒楄〃       
       
    },
    mounted() {
       if(location.hostname.indexOf('bj.baibaodun.cn')>-1){//鍖椾含鏀垮姟澶栫綉闅愯棌鎮ㄥ凡鍏ヨ亴涓€琛屽瓧绗�
           this.bjzw=true
       }else{
           this.bjzw=false
       }
    },
    beforeDestroy(){
       if (this.timer) {
            clearInterval(this.timer); // 鍦╒ue瀹炰緥閿€姣佸墠锛屾竻闄ゆ垜浠殑瀹氭椂鍣�
        }
    },
    methods: {
        greetingsStr(){
            let HH=this.nowTime.split(":")[0]
            if(HH>='0'&&HH<='05'){
                this.greetings='鍑屾櫒濂斤紒'
            }else if(HH>='06'&&HH<='11'){
                this.greetings='涓婂崍濂斤紒'
            }else if(HH>='12'&&HH<='13'){
                this.greetings='涓崍濂斤紒'
            }else if(HH>='14'&&HH<='17'){
                this.greetings='涓嬪崍濂斤紒'
            }else if(HH>='18'&&HH<='23'){
                this.greetings='鏅氫笂濂斤紒'
            }
        },
        employeesInfo(){
            let data={
                organizationId:localStorage.getItem("domainId")||'',
                id:localStorage.getItem("employeeId")||''
            }
            this.$api.v3employeesInfoApi(data,{
                onSucess: response => {
                   if(response.data.data){
                       this.hiredDate=response.data.data.hiredDate
                       console.log(this.hiredDate)
                       this.hiredDateToNow=diffDate(response.data.data.hiredDate,getNowFormatDate())
                   }
                }
            })
        },
        getAnnouncementList(){
            let data={
                organizationId:localStorage.getItem("domainId")||'',
                id:localStorage.getItem("employeeId")||''
            }
            this.$api.getAnnouncement({
                onSucess: response => {
                   if(response.data.data){
                      console.log(response.data.data)
                      if(response.data.data.datas.length){
                         this.getAnnouncementFirst=response.data.data.datas[0]
                      }else{
                         this.getAnnouncementFirst={} 
                      }
                   }
                }
            })
        },
        AnnouncementRedirect(){
             var param={
               id:"ad",
               name:'鍏憡',
               linkType:'ad',
                actionContent:"",
                notice:this.notice,
                icon:"",
                key:""
             }
             this.addTab(param)
        },
        getLocation(){
            let self = this;
            AMap.plugin('AMap.Geolocation', function () {
                var geolocation = new AMap.Geolocation({
                // 鏄惁浣跨敤楂樼簿搴﹀畾浣嶏紝榛樿锛歵rue
                enableHighAccuracy: true,
                // 璁剧疆瀹氫綅瓒呮椂鏃堕棿锛岄粯璁わ細鏃犵┓澶�
                timeout: 10000
                });
        
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);
                AMap.event.addListener(geolocation, 'error', onError);
        
                function onComplete (data) {
                    // data鏄叿浣撶殑瀹氫綅淇℃伅
                    console.log('瀹氫綅鎴愬姛淇℃伅锛�', data.addressComponent.city);
                    self.city = data.addressComponent.city;
                    AMap.plugin('AMap.Weather', function() {
                        console.log(self.city)
                        var weather = new AMap.Weather();
                            weather.getLive(self.city, function(err, data) {
                            if (!err) {
                                console.log(data)
                                self.cityInfo=data
                                if(data.weather.indexOf('鏅�')>-1){
                                    self.weatherImg=self.sun
                                }else if(data.weather.indexOf('浜�')>-1){
                                    self.weatherImg=self.cloud
                                }else if(data.weather.indexOf('闃�')>-1){
                                    self.weatherImg=self.cloudy
                                }else if(data.weather.indexOf('娌�')>-1){
                                    self.weatherImg=self.dust
                                }else if(data.weather.indexOf('闆�')>-1){
                                    self.weatherImg=self.haze
                                }else if(data.weather.indexOf('闇�')>-1){
                                    self.weatherImg=self.haze
                                }else if(data.weather.indexOf('闆�')>-1){
                                    self.weatherImg=self.hail
                                }else if(data.weather=='闆ㄥす闆�'){
                                    self.weatherImg=self.rainsnow
                                }else if(data.weather=='闆烽洦'){
                                    self.weatherImg=self.ray
                                }else if(data.weather.indexOf('闆�')>-1){
                                    self.weatherImg=self.snow
                                }else if(data.weather.indexOf('闆�')>-1){
                                    self.weatherImg=self.rain
                                }else{
                                    self.weatherImg=self.cloud
                                }
                            }
                        })
                    }) 
                }
        
                function onError (data) {
                    // 瀹氫綅鍑洪敊
                    console.log('瀹氫綅澶辫触閿欒锛�', data);
                    self.city=''//瀹氫綅澶辫触闅愯棌
                    // 璋冪敤IP瀹氫綅
                    self.getLngLatLocation();
                }
            });           
        },
        getLngLatLocation () {// 閫氳繃IP鑾峰彇褰撳墠浣嶇疆
            AMap.plugin('AMap.CitySearch', function () {
                var citySearch = new AMap.CitySearch();
                citySearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // 鏌ヨ鎴愬姛锛宺esult鍗充负褰撳墠鎵€鍦ㄥ煄甯備俊鎭�
                    console.log('閫氳繃ip鑾峰彇褰撳墠鍩庡競锛�', result);
                    // 閫嗗悜鍦扮悊缂栫爜
                    AMap.plugin('AMap.Geocoder', function () {
                    var geocoder = new AMap.Geocoder({
                        // city 鎸囧畾杩涜缂栫爜鏌ヨ鐨勫煄甯傦紝鏀寔浼犲叆鍩庡競鍚嶃€乤dcode 鍜� citycode
                        city: result.adcode
                    });
        
                    var lnglat = result.rectangle.split(';')[0].split(',');
                    geocoder.getAddress(lnglat, function (status, data) {
                        if (status === 'complete' && data.info === 'OK') {
                        // result涓哄搴旂殑鍦扮悊浣嶇疆璇︾粏淇℃伅
                        console.log(data);
                        }
                    });
                    });
                }
                });
            });
        },

        AppMarketBannerlist(){//骞垮憡鍒楄〃
            // let options={
            //      target:document.querySelector(".homeAdvert"),                 
            //      text: '鍔犺浇涓�...',
            //      spinner: 'el-icon-loading',
            // }
            // const loading = Loading.service(options);//寮€濮嬪姞杞�
            this.$api.AppMarketBannerlistApi({},{                
                onSucess: response => {
                //    this.$nextTick(() => { // 浠ユ湇鍔＄殑鏂瑰紡璋冪敤鐨� Loading 闇€瑕佸紓姝ュ叧闂�
                //        loading.close();//鍏抽棴鍔犺浇
                //    });
                   console.log('banner______________',response.data.data.data)
                   if(response.data.data.data){
                       let Arry=[]
                       response.data.data.data.forEach(item=>{
                           var obj={}
                               obj.name=item.items['__f1dc2wtiu1VnfSPzQse'].value //鏍囬
                               obj.pic=item.items['__cMLE2QENXQjNp1sWHE6'].value&&JSON.parse(item.items['__cMLE2QENXQjNp1sWHE6'].value)[0].path //鍥剧墖
                               obj.appid=item.items['__qPv375wKiySlNqrRlEi'].value //搴旂敤id-璺宠浆鍒拌鎯呴〉闈�
                               obj.imgsort=item.items['__XkErrW7l1lWDQVE29vq'].value //鍥剧墖鎺掑簭
                           Arry.push(obj)    
                       })
                       this.bannerArr=Arry
                       console.log(this.bannerArr)
                   }
                }
            })
        },
        applidetaillink(obj){//杩涘叆璇︽儏
           var param={
            id:"applicationMarket",
            name:'搴旂敤甯傚満',
            linkType:'applicationMarket',
            actionContent:"",
            icon:"-1",
            key:""
          }
          this.addTab(param)//鐩戝惉浼犻€掔粰鐖跺厓绱�---閲嶈鐖跺瓙浼犻€�         
        }, 

    },
}
</script>
<style lang="scss" scoped>
.commBoxBg{
     background: #FFFFFF;
     box-shadow: 0px 2px 6px -4px rgba(0, 0, 0, 0.12), 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
     border-radius: 8px;
}
.homeTopContanier{
    display: flex;
    width: 100%;
    .homeWelcome{
        display: flex;
        padding: 25px 37px 10px 16px;
        flex:1;
        @extend .commBoxBg;
        height: 115px;    
        box-sizing: border-box;
        .hwLeft{
        flex:1;
        padding-right:48px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        white-space: nowrap;
        .hwLTitle{
            strong{font-size: 20px;color: #3c4766;}
            em{font-size: 14px;margin-left:12px;}
        }
        .hwLAd{
            background: rgba(15, 113, 255, 0.04);
            margin-top: 20px;
            display: flex;
            align-items: center;
            img{
                width: 24px;height: 24px;  
                margin:0 8px;             
            }
            em{
                color: #808191;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 80%;
                cursor: pointer;
            }
        }
        }
        .hwRight{      
            padding-left:48px;
            border-left:1px solid #E9E9E9;
            display: flex;
            align-items: center;
            .hwRWt{
            img{width: 68px; height:69px;}           
            }
            .hwRDate{
                display: flex;
                flex-direction: column;
                text-align: center;
                color: #000;
                font-size: 14px;
                margin-left:16px;
            }
        }
    }
    .homeAdvert{
        @extend .commBoxBg;
        width: 690px;
        height: 115px;
        margin-left:20px;
        z-index: 0;//淇敼灞傜骇
        img{height: 115px;width: 690px;cursor: pointer;border-radius: 8px;}
        .el-carousel__container{height: 115px!important;}    
    }
}
</style>