<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 || user.WeChat_UserName }}</p>
              <!--              <view class="person"> <view class="personName">{{user.DepartmentName}}</view> </view>-->
              <view class="person" v-if="user.DepartmentName">{{ 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" :isReturn="isReturn">
      </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/guestPortrait",
        //       imagePath:
        //         "https://eshangtech.com/ShopICO/ahyd-BID/user/customerGroup.svg",
        //       isNotice: "",
        //       type: 2,
        //       value: 2,
        //     },
        //     {
        //       id: "",
        //       name: "经营",
        //       homeUrl: "/pages/commercialBI/managePortrait",
        //       imagePath:
        //         "https://eshangtech.com/ShopICO/ahyd-BID/user/manage.svg",
        //       isNotice: "",
        //       type: 3,
        //       value: 2,
        //     },
        //     {
        //       id: "",
        //       name: "交易",
        //       homeUrl: "/pages/commercialBI/businessPortrait",
        //       imagePath:
        //         "https://eshangtech.com/ShopICO/ahyd-BID/user/business.svg",
        //       isNotice: "",
        //       type: 4,
        //       value: 2,
        //     },
        //     {
        //       id: "",
        //       name: "品牌",
        //       homeUrl: "/pages/commercialBI/formatPortrait",
        //       imagePath:
        //         "https://eshangtech.com/ShopICO/ahyd-BID/user/brand.svg",
        //       isNotice: "",
        //       type: 5,
        //       value: 2,
        //     },
        //   ],
        // },
        {
          name: "现场管理",
          value: 4,
          list: [
            {
              id: "",
              name: "基础信息",
              // homeUrl: "/pages/map/detail?come=user",
              homeUrl: "/pages/summaryOfPortraits/index?index=0",
              imagePath:
                "https://eshangtech.com/ShopICO/ahyd-BID/user/basicInformation.svg",
              isNotice: true,
              notice: 0,
              type: 0,
              summaryOfPortraits: true,
              value: 4,
            },
            {
              id: "",
              name: "人员管理",
              // homeUrl: "/pages/map/detail?come=user",
              homeUrl: "/pages/attendanceStatus/index",
              imagePath:
                "https://eshangtech.com/ShopICO/ahyd-BID/user/assessment.svg",
              isNotice: true,
              notice: 0,
              type: 0,
              summaryOfPortraits: true,
              value: 4,
            },
          ],
        },
      ],
      isTrue: false, //最外面一层判断是否能跳转的依据
      special: false,
      isReturn: true,
      userAvatar: "",
      useYN: 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.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;
    //       }
    //     }
    //   }
    //   if (item.id === "a927bf4d-f924-4034-b964-d1a8bd401d09") {
    //     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 = this.user
    console.log('userInfouserInfouserInfo', userInfo);

    if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] === 1) {
      this.isReturn = false;
    } else if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
      uni.redirectTo({
        url: `/pages/commercialBI/noData?type=noAuthor`,
      });
    }


    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() {
      this.$util.toNextRoute("navigateTo", "/pages/commercialBI/newsList");
    },
    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%;
  box-sizing: border-box;

  .userBg {
    width: 100%;
    height: 250px;
    // background: linear-gradient(315deg, #ff8d95 0%, #ffdca8 100%);
    background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    position: relative;

    .headerTop {
      width: 100%;
      background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
      background-size: 100vw 100vh;
      background-repeat: no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      box-sizing: border-box;
      padding: 0 15px;
      z-index: 9999998;
    }

    .news {
      width: 24px;
      height: 24px;
      position: absolute;
      left: 16px;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999999;

      .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 32rpx;
      background-size: cover;
      padding: 40rpx 32rpx;
      position: relative;
      background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
      border-radius: 16rpx;

      .userBgImg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .box {
        position: relative;
        z-index: 7;
        display: flex;
        align-items: center;
        // margin-bottom: 24px;

        .headImg {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          margin-right: 20px;
          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: #fff;
              line-height: 52rpx;
              margin-right: 8px;
            }

            .person {
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              padding: 0 5px;
              background-color: #fff;
              border-radius: 32rpx;
              color: #716F69;
              font-size: 24rpx;
              font-family: 'PingFangSC-Regular';
              font-weight: 400;
              // 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;
                border-radius: 5px;
              }
            }
          }

          .phone {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #fff;
            line-height: 36rpx;
          }

          .address {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #fff;
            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>
