<template>
  <view class="main" style="padding-bottom: env(safe-area-inset-bottom)">
    <view class="userBg">
      <div class="headerTop" :style="{ height: menu.bottom + 5 + 'px'}">
        <view class="news" :style="{ top: menu.top+16 + 'px', lineHeight: menu.bottom - menu.top + 'px' }">
          <view class="box">
<!--              @click="handleNews"-->
            <image  class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/index/news.svg" @click="handleNews"></image>
            <view class="red"></view>
          </view>
        </view>
        <view class="userTitle" :style="{ top: menu.top + 'px', lineHeight: menu.bottom - menu.top + 'px' }">我的</view>
      </div>
      <div class="userBox" :style="{ top: menu.bottom + 18 + 'px' }">
        <image class="userBgImg" src="https://eshangtech.com/ShopICO/ahyd-BID/user/userBg.png"></image>
        <view class="box" v-if="user.Membership_Id">
          <view class="headImg">
            <image :src="user.Membership_Headimage"></image>
          </view>
          <view class="message">
            <view class="people">
              <p class="name">{{user.Membership_Name}}</p>
<!--              <view class="person"> <view class="personName">{{user.DepartmentName}}</view> </view>-->
              <view class="person">{{user.DepartmentName}}</view>
            </view>
            <p class="phone">{{ handleGetPhone(user.Membership_Phone) }}</p>
            <p class="address">{{user.OwnerUnitName}}</p>
          </view>
        </view>
        <view v-else>
          <p @click="handleGoEmpower">去授权</p>
        </view>
        <view class="other">
          <view v-for="(item, index) in userLists" :key="index" class="item">
            <image class="icon" :src="item.url"></image>
            <span class="name">{{ item.name }}</span>
          </view>
        </view>
      </div>
    </view>

    <view class="menu" :style="{ top: -(117 - menu.bottom) + 'px' }">
        <userList v-for="(item, index) in dataList" :key="index" :item='item' :lastDay="lastDay" ></userList>
    </view>

    <Tabbar ref="tabbar" :page="page" ></Tabbar>
  </view>
</template>

<script>
import request from '@/util/index.js'
import {mapActions, mapState} from 'vuex'
  import userList from "./components/userList.vue";
import Tabbar from "../../components/tabbar/tabbar.vue";
	export default {
		data() {
      const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
			return {
        page:'/pages/userCenter/userCenter',
        statusBarHeight:'',
        menu:'',
        lastDay:lastDay,
        userLists:[  { url: 'https://eshangtech.com/ShopICO/ahyd-BID/user/position.svg', name: '我的服务区', value: 1 },
          { url: 'https://eshangtech.com/ShopICO/ahyd-BID/user/limit.svg', name: '我的权限', value: 2 },],
        dataList :[
          {
            name: '商业经营',
            value: 1,
            list: [
              {
                id:'74934d31-385a-4eed-80bb-9c9ed7da29b5',
                name: '每日营收',
                homeUrl: '/pages/everdayRenven/index',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/dailyRevenue.svg',
                bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/user/firstBg_1.png',
                isNotice:true,
                value: 1,
              },
              {
                id:'',
                name: '节日特刊',
                homeUrl: `/pages/nationalPage/index?time=${lastDay}&type=true`,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/festival.svg',
                bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/user/firstBg_2.png',
                isNotice:true,
                value: 1,
              },
              {
                id:'4a34e1d4-47c9-4c06-8e8e-f38c6bd9450b',
                name: '经营报表',
                homeUrl: '/pages/operatingStatements/index',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/reportForms.svg',
                bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/user/firstBg_3.png',
                isNotice:true,
                value: 1,
              },
            ],
          },
          {
            name: '商业画像',
            value: 2,
            list: [
              {
                id:'',
                name: '车流',
                homeUrl: '/pages/commercialBI/carPortrait',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/traffic.svg',
                isNotice:'',
                value: 2,
              },
              {
                id:'',
                name: '客群',
                homeUrl: '/pages/commercialBI/guestPortrait',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/customerGroup.svg',
                isNotice:'',
                value: 2,
              },
              {
                id:'',
                name: '经营',
                homeUrl: '/pages/commercialBI/managePortrait',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/manage.svg',
                isNotice:'',
                value: 2,
              },
              {
                id:'',
                name: '交易',
                homeUrl: '/pages/commercialBI/businessPortrait',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/business.svg',
                isNotice:'',
                value: 2,
              },
              {
                id:'',
                name: '品牌',
                homeUrl: '/pages/commercialBI/formatPortrait',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/brand.svg',
                isNotice:'',
                value: 2,
              },
            ],
          },
          {
            name: '业务审批',
            value: 3,
            list: [
              {
                id:'1a2907bd-c2f5-4ef9-9ead-70496650ace6',
                name: '财务审批',
                homeUrl: '/pages/expenseApproval/expenseApproval',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/financialApproval.svg',
                notice:0,
                value: 3,
                isNotice:false
              },
              {
                id:'916cdbb5-f05b-4624-b6c4-9f111d4389fc',
                name: '招标投标',
                homeUrl: '/pages/tender/tender',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/bidding.svg',
              },
              {
                id:'8fea5036-d67e-476e-9e56-5f379ba6ae18',
                name: '服务区报销',
                homeUrl: '/pages/serviceAreaReimbursement/serviceAreaReimbursement',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/serviceAreaReimbur.svg',
              },
              {
                id:'ac661db4-1af1-4732-88db-76bc05eec335',
                name: '合同审批',
                homeUrl: '/pages/contract/contract',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/contractApproval.svg',
              },
              {
                id:'056b29d7-4721-47ee-ad25-660814e1f3a9',
                name: '商品审批',
                homeUrl: '/pages/businessApproval/businessApproval',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/productApproval.svg',
              },
              {
                id:'2290e96d-c6d7-4dde-b5b7-e699b615ff2f',
                name: '招商审批',
                homeUrl: '/pages/investment/investment',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/promotionApproval.svg',
              },
              {
                id:'c802a38f-3bbd-4db0-89b6-34e404c8d8cc',
                name: '权限审批',
                homeUrl: '/pages/authorityApproval/index',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/authorityApproval.svg',
              },
              {
                id:'b0b63a75-56c9-4f1d-aacb-a26e62b47e3e',
                name: '数据校验',
                homeUrl: '/pages/dataSummary/dataSummary',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/dataVerification.svg',
              },
              {
                id:'b0b63a75-56c9-4f1d-aacb-a26e62b47e3e',
                name: '分润切换',
                homeUrl: '/pages/projectWarning/index',
                notice:0,
                value: 3,
                isNotice:false,
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/index/changeMoney.svg',
              },
            ],
          },
          {
            name: '现场管理',
            value: 4,
            list: [
              {
                id:'',
                name: '基础信息',
                homeUrl: '/pages/map/detail?come=user',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/basicInformation.svg',
                isNotice:true,
                notice:0,
                value: 4,
              },
              {
                id:'30f0e7d0-4e01-4a63-a65b-613e1f427335',
                name: '考评考核',
                homeUrl: '/pages/examine/index',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/assessment.svg',
                isNotice:false,
                notice:0,
                value: 4,
              },
              {
                id:'d405ae13-3388-41c0-a5f6-d11194d0a943',
                name: '投诉建议',
                homeUrl: '/pages/suggestion/suggestion',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/complaintSuggest.svg',
                isNotice:false,
                notice:0,
                value: 4,
              },
              {
                id:'ebd8cae4-d36d-4ea0-a7e9-61e566bf9e24',
                name: '收银稽查',
                homeUrl: '/pages/cashAudit/list',
                imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/cashierInspection.svg',
                isNotice:false,
                notice:0,
                value: 4,
              },
            ],
          },
        ],
        isTrue:false,//最外面一层判断是否能跳转的依据
        special:false
      };
		},
    components:{
      userList,Tabbar
    },
		computed: {
			...mapState({
        toDoMsg:(state)=>{return state.toDoMsg},
				user: (state)=>{ return state.userData},
				phone: (state)=>{
					let phoneStr = state.userData.Membership_Phone
					if(phoneStr){
						return phoneStr.substr(0,3)+' **** '+phoneStr.substr(phoneStr.length-2,phoneStr.length-1)
					}else {
						return ''
					}
				},

			})
		},
    onLoad(){
      // 获取手机参数 对页面进行自适应
      let systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      //拿到登录用户有权限的内容
      this.menu = uni.getMenuButtonBoundingClientRect()
      this.handleGetWarningList()
        this.dataList[2].list.forEach(item=>{
          for(let key in this.user.AuthorityInfo){
            if (key === item.id){
              if (this.user.AuthorityInfo[key]===1){
                item.isNotice = true
              }
            }
          }
        })
      //拿到登录用户有权限的内容 判断是否有角标
      this.dataList[3].list.forEach(item=>{
        for(let key in this.user.AuthorityInfo){
          if (key === item.id){
            if (this.user.AuthorityInfo[key]===1){
              item.isNotice = true
            }
          }
        }
      })
      //拿到登录用户有权限的内容 判断是否有角标
      this.dataList[2].list.forEach(item=>{
        for(let key in this.toDoMsg){
          if (key === item.id){
            item.notice = this.toDoMsg[key]
          }
        }
      })
      this.dataList[3].list.forEach(item=>{
        for(let key in this.toDoMsg){
          if (key === item.id){
            item.notice = this.toDoMsg[key]
          }
        }
      })
      //通过权限来判断是否可以点击跳转
      let userInfo = uni.getStorageSync('vuex')
      if (userInfo.userData.AuthorityInfo['89a1f248-2113-4d57-84b1-c2e6edb9e8ee']===1){
          this.isTrue = true
      }else{
        this.isTrue = false
        uni.navigateTo({
          url:`/pages/commercialBI/noData?type=index`
        })
      }

    },
      onShow(){
          uni.hideTabBar()
      },
    onUnload() {
       this.$util.addUserBehavior()
    },
		methods:{
      ...mapActions(['getTodoList']),
			toPage(url) {
        if (this.isTrue === true){
          this.$util.toNextRoute('navigateTo', url)
        }else{
          uni.showToast({
            title: '暂无权限请联系管理员',
            icon: 'none'
          })
        }
			},
      //格式化电话的方法
      handleGetPhone(value) {
        return value.substring(0, 3) + '****' + value.substring(7)
      },
      handleGoEmpower(){
        this.$util.toNextRoute('navigateTo', '/pages/register/register')
      },
      handleNews(){
        if (this.special){
          this.$util.toNextRoute('navigateTo', '/pages/commercialBI/specialCase')
        }
      },
      handleGetWarningList(){
        const date = new Date()
        // 拿到当前小时的前一小时
        let h = date.getHours() - 1
        const req= {
          // this.single
          StatisticsDate: this.lastDay,
          StatisticsHour:h,
          StatisticsType:1,
          ShowCount:20
        }
        request.$webGet('CommercialApi/BigData/GetBayonetWarning',req).then(res=>{
          if (res.Result_Data.List.length>0){
            this.special = true
          }
        })
      },
		},
	}
</script>

<style scoped lang="scss">
.main {
  height: 100vh;
  width: 100%;

  .userBg {
    width: 100%;
    height: 280px;
    background: linear-gradient(315deg, #ff8d95 0%, #ffdca8 100%);
    position: relative;
    .headerTop{
      width: 100%;
      background: linear-gradient(260deg, #FEA199 0%, #FFD6A7  100%);
      position: fixed;
      top: 0;left:0;
      box-sizing: border-box;
      padding: 0 15px;
      z-index:9999999;
    }
    .news{
      width: 24px;
      height: 24px;
      position: absolute;
      left: 16px;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      .box{
        width: 100%;
        height: 100%;
        position: relative;
        .img{
          width: 100%;
          height: 100%;
        }
        .red{
          position: absolute;
          width: 8px;
          height: 8px;
          background: #D7000F;
          border-radius: 50%;
          right:0;top: 4px;
        }
      }
    }
    .userTitle {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 34rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #091732;
      line-height: 48rpx;
    }
    .userBox {
      width: calc(100% - 32px);
      height: 147px;
      box-sizing: border-box;
      margin: 0 16px;
      background-size: cover;
      padding: 16px 0 0 16px;
      position: relative;
      .userBgImg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .box {
        position: relative;
        z-index: 7;
        display: flex;
        margin-bottom: 24px;
        .headImg {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          margin-right: 8px;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .message {
          flex:1;
          .people {
            display: flex;
            align-items: center;
            .name {
              font-size: 36rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #782717;
              line-height: 52rpx;
              margin-right: 8px;
            }
            .person {
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 5px;
              overflow: hidden;
              padding: 0 5px;
              border:1px solid #FEA001;
              //background: linear-gradient(134deg, rgba(255, 165, 0, 1), rgba(220, 55, 7, 1));
              .personName {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #782717;
                border-radius: 5px;
                background: #ffede1;
              }
            }
          }
          .phone {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            line-height: 36rpx;
          }
          .address {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            line-height: 36rpx;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
      .other {
        width: 100%;
        height: 40px;
        background: linear-gradient(315deg, rgba(255, 141, 149, 0.2), rgba(255, 220, 168, 0.2));
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        left: 0;
        bottom: 0;
        .item {
          width: 49%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          .icon {
            width: 28px;
            height: 20px;
          }
          .name {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            line-height: 40rpx;
          }
        }
        .item:first-child:after {
          content: '';
          width: 1px;
          height: 24px;
          background: #782717;
          opacity: 0.08;
          position: absolute;
          right: 0;
          top: 20%;
        }
      }
    }
  }
  .menu {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 24px 16px calc(env(safe-area-inset-bottom) + 82px) 16px;
    position: relative;
    border-radius: 32rpx 32rpx 2rpx 2rpx;
    .main{
      .title {
        font-size: 34rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 48rpx;
        margin-bottom: 12px;
      }
      .first {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 28px;
        .useListItem {
          width: 30%;
          height: 72px;
          position: relative;
          box-sizing: border-box;
          padding: 8px 11px;
          border-radius: 4px;
          .name {
            font-size: 28rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #55277d;
            line-height: 40rpx;
          }
          .img {
            width: 30px;
            height: 30px;
            position: absolute;
            bottom: 9px;
            right: 14px;
          }
        }
        .firstBg_1 {
          background: url('https://eshangtech.com/ShopICO/ahyd-BID/index/firstBg_1.png');
        }
        .firstBg_2 {
          background: url('https://eshangtech.com/ShopICO/ahyd-BID/index/firstBg_2.png');
        }
        .firstBg_3 {
          background: url('https://eshangtech.com/ShopICO/ahyd-BID/index/firstBg_3.png');
        }
      }
      .second {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 28px;
        .useListItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          .img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(22, 0, 2, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            image {
              width: 30px;
              height: 30px;
            }
          }
          .name {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 40rpx;
          }
        }
      }
      .third {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .useListItem {
          width: 25%;
          position: relative;
          margin-bottom: 16px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .img {
            width: 30px;
            height: 30px;
            margin-bottom: 6px;
          }
          .name {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 40rpx;
          }
          .notice {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            position: absolute;
            right: 4px;
            top: 0;
            color: #fff;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .fourth {
        width: 100%;
        display: flex;
        .useListItem {
          width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
          .img {
            width: 30px;
            height: 30px;
            margin-bottom: 8px;
          }
          .name {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #091732;
            line-height: 40rpx;
          }
          .notice {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: red;
            position: absolute;
            right: 8px;
            top: -4px;
            color: #fff;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
