<!-- 首页 -->
<template>
  <view class="content">
    <!-- 检测进行中 今日成交金额  今日订单数量 底部为总 -->
    <view class="c-top">
      <view style="width: 100%; height: 44px;"></view>
      <view class="top-ail">
        <!-- 新增 -->
        <view style="text-align: left;margin: 0 32rpx;">
          <text class="t-title">{{ user.partnerName }}</text>
        </view>
        <view class="top-two">
          <view class="dix" style="margin: 0 32rpx;margin-top: 10rpx">
            <image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;"
                   v-if="userInfo && userInfo.avatar === null" :src="defaultAvatar" mode="scaleToFill" @error="avatarErr"></image>
            <image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;" v-else
                   :src="userInfo.avatar" mode="scaleToFill" @error="avatarErr"></image>
            <view class="userInfo" @click="showUserDetail">
              <text class="userName">{{ userInfo.nickname }}</text>
              <text class="userType" >{{ userInfo.roleNames }}</text>
              <!--          <text class="userType" v-if="ifLeader">班组长</text>-->
            </view>
            <!--						<view class="touxiang">-->
            <!--							<image :src="baseImageUrl+user.partnerLogo" mode=""></image>-->
            <!--						</view>-->
            <!--						<view class="t-title">{{user.partnerName}} 欢迎您</view>-->
          </view>
          <view class="dix">
            <view class="msg-box" @click="goWarn">
              <image mode="aspectFita" class="white-image" src="@/static/imgs/msg.png"
                     style="width: 48rpx;height: 48rpx;"></image>
              <view class="msg-num" v-if="noReadNum>0">{{ noReadNum }}</view>
            </view>
            <image class="white-image" @click="showUserDetail" style="width: 48rpx;height: 48rpx"
                   src="/static/icons/more.png" mode="aspectFita"></image>
            <!--						<text class="baizi" v-if="user.isWorking == 1">营业中</text>-->
            <!--						<text class="baizi" v-if="user.isWorking == 0">休息中</text>-->
            <!--						<switch :checked="isWorking" @change="getying()" color="#3CBC6F" style="transform:scale(0.7)" />-->
          </view>
        </view>
        <view class="threebox">
          <!-- @click="gostatistics()" -->
          <view class="t-box" @click="ToToday">
			   <view class="dbai">{{ threenum.todayOrderNum }}</view>
            <view class="xbai">当日订单</view>
           
          </view>
          <view class="t-box">
			   <view class="dbai">{{ threenum.hgNum }}</view>
            <view class="xbai">合规合格</view>
           
          </view>
          <view class="t-box">
			   <view class="dbai">{{ threenum.srlNum }}</view>
            <view class="xbai">双燃料合格</view>
           

          </view>
        </view>
		<view class="new_box">
			
		<view class="dqtime">
		  <text>{{ dateStr || '' }} {{ week || '' }} {{ time || '' }}</text>
		</view>
        <view class="gangbox">
          <view class="ang-box1" @click="goindex()">
            <view class="bs-di">
              <text>功能管理</text>
           <!--   <uni-icons type="arrow-right" color="#6FA1CD" size="20"></uni-icons> -->
            </view>
            <view class="xzi">
              <!-- 	<text style="color: #6FA1CD;">检测站的信息管理</text> -->
              <text>检测站的信息管理</text>
            </view>
          <!--  <view class="icon-img" style="flex-shrink: 0">
              <image src="../../static/detection/xxgl.png" mode=""></image>
            </view> -->
          </view>
          <view class="ang-box2" @click="gostatistics()">
            <view class="bs-di">
              <text>业务管理</text>
             <!-- <uni-icons type="arrow-right" color="#CCAC63" size="20"></uni-icons> -->
            </view>
            <view class="xzi">
              <!-- <text style="color: #CCAC63;">检测站的业务统计</text> -->
              <text>检测站的业务统计</text>

            </view>
           <!-- <view class="icon-img" style="flex-shrink: 0">
              <image src="../../static/detection/ywgl.png" mode=""></image>
            </view> -->
          </view>
          <view class="ang-box3" @click="goxiaoxi()">
            <view class="bs-di">
              <text>通知提醒</text>
           <!--   <uni-icons type="arrow-right" color="#775FAE" size="20"></uni-icons> -->
            </view>
            <view class="xzi">
              <!-- 	<text style="color: #775FAE;">查看监管机构下达的通知</text> -->
              <text>查看通知、提醒</text>
            </view>
            <!-- <view class="icon-img" style="flex-shrink: 0">
              <image src="../../static/detection/jgtz.png" mode=""></image>
            </view> -->
          </view>
          <view class="ang-box4" @click="goshowMenu()">
            <view class="bs-di">
              <text>内部管理</text>
              <!-- <uni-icons type="arrow-right" color="#99D685" size="20"></uni-icons> -->
            </view>
            <view class="xzi">
              <!-- <text style="color: #FFFFFF	;">详细的操作手册</text> -->
              <text>方便 简单 快捷</text>
            </view>
            <!-- <view class="icon-img" style="flex-shrink: 0">
              <image src="../../static/detection/gsjj.png" mode=""></image>
            </view> -->
          </view>
          <!-- <view class="ang-box">
          <text>公司简介</text>
        </view> -->
        </view>
</view>
        
		

      </view>

    </view>
    <u-modal :show="show" :title="titlemodeal" confirmText="确定" @confirm="confirms">
      <scroll-view scroll-y style="height: 400px;">
        <view v-for="(item,index) in warnMsg " :key="index" style="margin-bottom: 10px;">
          <view style="font-weight: bold;">{{ item.title || '系统维护中' }}:</view>
          <view style="font-size: 16px; color: #606266;">{{ item.content || '' }}</view>
        </view>
      </scroll-view>
    </u-modal>
    <!-- 底部 -->
    <view style="width: 100%; height: 50px;"></view>
    <tabBar :msg="msg "></tabBar>
  </view>
</template>

<script>
import request from '../../utils/request';
import tabBar from '../../components/tabBar/tabBar.vue'
import {getStorageWithExpiry, setStorageWithExpiry} from "../../utils/auth";
import config from '@/config'
import userInfo from "./UserInfo.vue";

export default {
  computed: {
    userInfo() {
      return userInfo
    }
  },
  data() {
    return {
      msg: '1',
      warnMsg: [],
      chuan: '',
      titlemodeal: '通知',
      show: false,
      isWorking: false,
      user: {},
      baseUrl: '',
      animate: false,
      partnerId: '',
      threenum: {},
      showScroll: true,
      scrollDuration: 3000, // 滚动间隔时间，单位为毫秒
      items: [],
      ping: [],
      dateStr: '',
      week: '',
      is_mandatory: false,
      url: 'http://159.75.168.143:88/apk/lanan.apk',
      title: '版本升级',
      contents: '新版本上线了，根据您自己的选择是否升级',
      appAndPick: {
        appointNum: 0,
        pickNum: 0
      },
      baseImageUrl: this.$baseImageUrl,
      noReadNum: 1,
      userInfo: {},
      defaultAvatar: require('@/static/icons/avatar.png'),

    }
  },
  onLoad() {
    this.baseUrl = this.$baseUrl
    let times = new Date()
    this.timeday = this.timeWeekFormat(times)
  },
  onShow() {
    this.getAppointAndPickNum()
    this.getindex()
    // this.getwarnMsglist()
    this.getbottom()
    this.getUserInfo()
    this.getWarnCount()
  },
  components: {
    tabBar,
  },
  methods: {
    getWarnCount(){
      request({
        url: '/warnMsg/warnMsg/getCount',
        method: 'get',
      }).then(res => {
        if (res.data){
          this.noReadNum = res.data
        }
      })
    },
    showUserDetail(){
      uni.navigateTo({
        url: '/pages/index/UserInfo'
      })
    },
    avatarErr(err) {
      console.log('err', err)
      this.userInfo.avatar = this.defaultAvatar
    },
    getUserInfo() {
      let roleNames = getStorageWithExpiry("roleNames")
      if (!roleNames){
        request({
          url: '/inspection/util/getRoleName',
          method: 'get'
        }).then(res => {
          roleNames = res.data
          setStorageWithExpiry("roleNames", roleNames)
        })
      }
      const data = getStorageWithExpiry("userInfo")
      if (!data) {
        request({
          url: '/system/user/profile/get',
          method: 'get'
        }).then(res => {
          this.userInfo = res.data
          if (this.userInfo.avatar) {
            this.userInfo.avatar = config.baseImageUrl + this.userInfo.avatar
          }
          this.userInfo.roleNames = roleNames
          setStorageWithExpiry("userInfo", this.userInfo)
        })
      } else {
        this.userInfo = data
      }
    },
    ToToday() {
      uni.navigateTo({
        url: '/pages/index/TodayTable'
      })
    },
    goshowMenu() {
      uni.navigateTo({
        url: '/pages/manage/manage'
      })

    },

    timeWeekFormat(times) {
      //定义一个日期对象;
      var dateTime = new Date(times);
      //获得系统年份;
      var year = dateTime.getFullYear();
      //获得系统月份;
      var month = dateTime.getMonth() + 1;
      //获得系统当月分天数;
      var day = dateTime.getDate();
      //获得系统小时;
      var hours = dateTime.getHours();
      //获得系统分钟;
      var minutes = dateTime.getMinutes();
      //获得系统秒数;
      var second = dateTime.getSeconds();
      //获得系统星期几;
      var dayCycle = dateTime.getDay();
      //使用数组更改日期样式;
      var dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
      for (var i = 0; i < 7; i++) {
        if (dayCycle == i) {
          //将dayCycleArray的数赋值到系统星期几里面中去;
          dayCycle = dayCycleArray[i];
        }
      }
      month < 10 ? month = '0' + month : month;
      day < 10 ? day = '0' + day : day;
      hours < 10 ? hours = '0' + hours : hours;
      minutes < 10 ? minutes = '0' + minutes : minutes;
      second < 10 ? second = '0' + second : second;
      //打印完整的系统日期;
      this.dateStr = year + '-' + month + '-' + day + ' ';
      this.week = '星期' + dayCycle
      this.time = hours + ':' + minutes
      // return dateStr;
    },


    // 底部消息
    async getbottom() {
      let data = {
        partnerId: uni.getStorageSync('partnerId')
      }
      let res = await request({
        url: '/appInspection/news/newMsgNum',
        method: 'get',
        params: data
      })
      if (res.code == 200) {
        this.chuan = res.data
      }
    },
    async getAppointAndPickNum() {
      let res = await request({
        url: '/partnerOwn/partner/getAppointAndPickNum',
        method: 'get'
      })
      if (res.code == 200) {
        this.appAndPick = res.data
      }
    },
    async getwarnMsglist() {
      let res = await request({
        url: '/warnMsg/warnMsg/list',
        method: 'get',

      })
      if (res.code == 200) {
        this.warnMsg = res.data
        if (this.warnMsg && this.warnMsg.length > 0) {
          this.show = true
        }
      }
    },
    //初始化获取
    async getindex() {
      // 首页信息
      let res = await request({
        url: '/partnerOwn/partner/shopInfo',
        method: 'get',
      })
      this.user = res.data
      this.partnerId = res.data.partnerId
      uni.setStorageSync('partnerId', res.data.partnerId)
      if (res.data.isWorking == "0") {

        this.isWorking = false
      }
      if (res.data.isWorking == "1") {
        this.isWorking = true
      }
      // 中间统计
      let reszj = await request({
        url: '/partnerOwn/partner/statisticsInfo?partnerId=' + this.partnerId,
        method: 'get',
      })
      let nums = {
        orderAmount: reszj.data.orderAmount / 100,
        orderNum: reszj.data.orderNum,
        todayOrderAmount: reszj.data.todayOrderAmount / 100,
        todayOrderNum: reszj.data.todayOrderNum,
        workedNum: reszj.data.workedNum,
        workingNum: reszj.data.workingNum,
        srlNum: reszj.data.srlNum,
        hgNum: reszj.data.hgNum,

      }
      this.threenum = nums


      // 下方订单信息
      // let resxf = await request({
      // 	url:'/partnerOwn/partner/orderInfo?partnerId='+this.partnerId,
      // 	method: 'get',
      // })
      // this.items = resxf.data
      // 热销产品
      let resrx = await request({
        url: '/partnerOwn/partner/hotGoodsList?partnerId=' + this.partnerId,
        method: 'get',
      })
      this.ping = resrx.data
      // this.getswitch()
    },
    goindex() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    reservations() {
      uni.navigateTo({
        url: "/pages/order/reservationlist",

      })
    },
    gostatistics() {
      uni.navigateTo({
        url: '/pages/statistics/statistics'
      })
    },
    goxiaoxi() {
      uni.navigateTo({
        url: '/pages/xiaoxi/xiaoxi'
      })
    },
    goWarn() {
      uni.navigateTo({
        url: '/pages/xiaoxi/xiaoxi?index=1'
      })
    },
    gorwm() {
      uni.navigateTo({
        url: '/pages/my/rwm'
      })
    },
    confirms() {
      this.show = false
    },
    gohomecar() {
      uni.navigateTo({
        url: '/pages/index/homecar'
      })
    },
    getswitch() {
      if (this.user.isWorking == "0") {
        this.isWorking = false
      }
      if (this.user.isWorking == "1") {
        this.isWorking = true
      }
    },
    async getying() {

      let data = {
        partnerId: this.partnerId
      }
      let res = await request({
        url: '/partnerOwn/partner/startOrEnd',
        method: 'post',
        params: data
      })
      this.getindex()
    },

    startScrolling() {
      this.showScroll = true;
      setInterval(() => {
        this.scrollItems();
      }, this.scrollDuration);
    },
    scrollItems() {
      this.items.push(this.items.shift());
    }
  }
}
</script>

<style scoped lang="scss">
.jbBox {
  width: 100px;
  height: 100px;
  background-color: #909193;
  border-radius: 15px;
}

.content {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh);
  // background-color: #F4F4F4;
  background-color: cornflowerblue;
  background: linear-gradient( 180deg, rgba(1,116,246,0.7) 0%, rgba(1,116,246,0) 100%);
  // background: url('http://www.nuoyunr.com/lananRsc/jcbjt.png') center no-repeat;
  // background: url('../../static/detection/mybj.png') no-repeat;
  // background-size: 100% 100%;
  // position: relative;
}

.c-top {
  width: 100%;
  height: 283px;

}

.cnm-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;

  image {
    width: 100%;
    height: 100%;
  }
}

.top-ail {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.dix {
  display: flex;
  align-items: center;
}

.top-two {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xzi {
  font-size: 12px;
  // margin-top: 10px;

}

.icon-img {
  margin-top: 10px;
  margin-left: 80px;
  width: 50px;
  height: 50px;

  image {
    width: 100%;
    height: 100%;
  }
}

.touxiang {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background-color: whitesmoke;

  image {
    width: 100%;
    height: 100%;
  }
}

.t-title {
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
  margin-left: 5px;
}
.new_box{
	 background: #fff;
	 margin-top: 15px;
	 border-radius: 6px;
}
.gangbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
  background: #fff;
  box-sizing: border-box;
  padding: 10px;

}

.ang-box {
  width: 49%;
  box-sizing: border-box;
  padding: 15px;
  background-color: white;
  height: 100px;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
}

.ang-box1 {
  width: 49%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #d0e5ff;
  height: 90px;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
  background: url('../../static/imgs/new1.png') no-repeat;
  background-size: 100% 100%;
  color: #fff;
  // position: relative;
  
}

.ang-box2 {
  width: 49%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #fdfcd4;
  height: 90px;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
  background: url('../../static/imgs/new2.png') no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

.ang-box3 {
  width: 49%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #ede6ff;
 height: 90px; border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
  background: url('../../static/imgs/new3.png') no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

.ang-box4 {
  width: 49%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #c9f9af;
   height: 90px;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
  background: url('../../static/imgs/new4.png') no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

.san-box {
  width: 30%;
  box-sizing: border-box;
  padding: 5px 0px;
  background-color: #eaf9e4;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 12px;
  position: relative;

}

.san-box3 {
  width: 30%;
  box-sizing: border-box;
  padding: 5px 0px;
  background-color: #ffeee6;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
  position: relative;
}

.j-icon {
  position: absolute;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  background: red;
  border-radius: 50%;
  justify-content: center;
  color: white;
  top: -5px;
  right: -5px;
  z-index: 999;
  font-size: 12px;

}

.san-box2 {
  width: 30%;
  box-sizing: border-box;
  padding: 5px 0px;
  background-color: #ffeeef;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: bold;
}


.dqtime {
 
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dedede;
  box-sizing: border-box;padding: 15px;
  
  
}

.baizi {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
}

.threebox {
  width: 100%;
  display: flex;
  background: #fff;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  box-sizing: border-box;
padding: 10px;
}

.t-box {
  width: 33%;
  text-align: center;
}

.xbai {
  font-size: 15px;
  font-weight: 400;
  color: #000;
  margin-bottom: 5px;
}

.xxbai {
  font-size: 13px;
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 15px;

}

.dbai {
  font-size: 25px;
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
}

.t-bottom {
  width: 100%;
  z-index: 999;
  background: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px;
  background-color: white;
  margin-top: 8px;

}

.x-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

.jgbox {
  width: 42px;
  height: 42px;
  background: #EFF2FC;
  border-radius: 50%;

  margin-bottom: 5px;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;

  }
}

.bs-di {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 22px;
  justify-content: space-between;
  margin-bottom: 15px;
}

.f-box {
  width: 25%;
  margin-bottom: 10px;
  text-align: center;
}

.fourbox {
  width: 100%;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.h-text {
  font-size: 13px;
  font-weight: 400;
  color: #333333;
}

.bai-box {
  width: 100%;
  // height: 121px;
  background: #FFFFFF;
  border-radius: 8px;
  margin: 0 auto;

  box-sizing: border-box;
  padding: 15px;
}

.hui-box {
  width: 100%;
  background: #E7E8FD;
  border-radius: 8px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-top: 160px;
}

.hui-top {
  box-sizing: border-box;
  padding: 15px;
}

.l-bai {
  width: 100%;
  height: 220px;
  box-sizing: border-box;
  padding: 15px;
  background: #FFFFFF;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
}

.l-box {
  margin-top: 5px;
  width: 100%;
  border-bottom: 1px solid #EEEEEE;
}

.l-text {
  font-size: 15px;
  font-weight: 400;
  color: #333333;
  margin-bottom: 10px;
}

.time {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  margin-bottom: 10px;
}

.mubu {
  background-color: #F4F4F4;
  box-sizing: border-box;
  padding: 15px;
  z-index: -9;
}

.bottom-box {
  width: 100%;
  background-color: white;
  border-radius: 8px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 15px;

}

.x-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  margin: 15px auto;
}

.x-cont {
  margin: 10px auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dix-zuo {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dix-you {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .zuo {
    width: 50%;
    text-align: center;
  }

  .you {
    width: 50%;
    text-align: center;
  }
}

.jzuo {
  width: 50%;
  font-size: 15px;
  font-weight: 400;
  color: #333333;
  text-align: center;
}

.ju {
  width: 50%;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  color: #FF571A;
}

.paim {
  width: 15%;
  text-align: center;
}

.paim-you {
  width: 80%;
}

.v-icon {
  width: 30px;
  height: 30px;

  image {
    width: 100%;
    height: 100%;
  }
}

.white-image {
  width: 48rpx;
  height: 48rpx;
  filter: invert(100%) grayscale(100%);
}

.msg-box {
  position: relative;
  margin-right: 40rpx;

  .msg-num {
    position: absolute;
    right: -15rpx;
    color: white;
    background: #d74a43;
    width: 35rpx;
    height: 35rpx;
    line-height: 35rpx;
    text-align: center;
    font-weight: 800;
    font-size: 11px;
    border-radius: 50%;
    top: -15rpx;
  }
}

.userInfo {
  flex: 1;
  //width: 0;
  .userName {
    font-weight: bold;
    font-size: 36rpx;
    color: white;
    display: block;
    margin-bottom: 16rpx;
    margin-left: 10rpx;
  }

  .userType {
    font-size: 24rpx;
    color: white;
    display: inline-block;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 1rpx solid white;
    padding: 8rpx 16rpx;
    margin-left: 10rpx;
  }
}
</style>