<template>
  <!-- <Login v-if="" /> -->
  <view class="Content">
    <!-- 个人信息 -->
    <view class="user">
      <view class="empty" :style="{ height: statusBarHeight + 2 + 'px' }" />
      <image class="rect" :src="staticPicture.rect" />
      <view class="user-info">
        <view class="user-left">
          <view class="user-left-userAvatarUrl">
            <open-data type="userAvatarUrl"></open-data> </view
        ></view>
        <view class="user-right">
          <view class="user-name">
            {{ userInfo.name || "代理商" }}
          </view>
          <view class="user-identity"> 代理商 </view>
        </view>
      </view>
      <!-- 园所信息 -->
      <view class="school">
        <view class="school-new">
          <view class="school-new-count">{{
            userInfo.increaseSchoolCount || 0
          }}</view>
          <view class="schoolText">今日新增开园(个)</view>
        </view>
        <!-- <view class="line"></view> -->
        <view class="school-new">
          <view class="school-new-count">{{
            userInfo.totalSchoolCount || 0
          }}</view>
          <view class="schoolText">全部园所(个)</view>
        </view>
      </view>
    </view>
    <!-- 开园审核 -->
    <view class="audit">
      <!-- 开园审核数目 -->
      <view class="audit-count" @click="jumpStartSchoolAudit">
        <image class="audit-count-left" :src="staticImg.openSchoolAudit" />
        <view class="audit-count-right">
          <view
            class="audit-count-right-count"
            v-if="waitCheckSchoolCount !== 0"
          >
            {{
              userInfo.waitCheckSchoolCount > 99 ? "99+" : waitCheckSchoolCount
            }}
          </view>
          <van-icon name="arrow" color="#999999" />
        </view>
      </view>
      <!-- 邀请码与地区园所 -->
      <!-- <view class="inviteCode-school">
        <view class="inviteCode-school-list">
          <view
            class="inviteCode-school-list-item"
            @click="hanlderInviteCodeWithSchool(item)"
            v-for="item in inviteCodeWithSchool"
            :key="item.id"
          >
            <view class="inviteCode-school-list-item-left">
              <view class="inviteCode-school-list-item-left-label">
                <image
                  :style="{
                    width:
                      item.id === 1
                        ? '220rpx'
                        : item.id === 2
                        ? '266rpx'
                        : '176rpx',
                  }"
                  class="invite-code"
                  :src="item.label"
                  mode="aspectFit"
                />
                <image
                  style="width: 16rpx; height: 28rpx"
                  :src="require('@/static/image/right-arrow.png')"
                />
              </view>
              <text class="inviteCode-school-list-item-left-desc">
                <text>{{ item.desc }}</text>
              </text>
            </view>
            <view
              class="inviteCode-school-list-item-right"
              :style="{
                width: item.width,
                height: item.height,
                right: item.right,
              }"
            >
              <image :src="item.imgUrl" mode="aspectFill" />
            </view>
          </view>
        </view>
      </view> -->
    </view>

    <!-- 邀请码与地区园所 -->
    <view class="box">
      <view class="inviteCodeBox" @click="hanlderInviteCodeWithSchool('1')">
        <image class="inviteCodeImg" :src="staticImg.inviteCodeImg" />
        <image class="inviteCodeTitle" :src="staticImg.inviteCodeTitle" />
      </view>
      <view class="regionalGarden" @click="hanlderInviteCodeWithSchool('2')">
        <image
          class="regionalGardenTitle"
          :src="staticImg.regionalGardenTitle"
        />
        <image class="regionalGardenImg" :src="staticImg.regionalGardenImg" />
      </view>
    </view>
    <view class="competitionBox" @click="hanlderInviteCodeWithSchool('3')">
      <image class="competitionTitle" :src="staticImg.competitionTitle" />
      <image class="competitionImg" :src="staticImg.competitionImg" />
    </view>

    <!-- 邀请码弹出层 -->
    <view
      class="overlay"
      v-show="inviteCodeOverlay"
      @click="inviteCodeOverlay = false"
    >
      <invite-code
        @inviteCodeOverlay="inviteCodeOverlay = false"
        v-if="inviteCodeOverlay"
        :name="userInfo.name"
        :codeUrl="userInfo.inviteQRCode"
      />
    </view>
  </view>
</template>

<script>
import { CustomNavbar } from "@/components/CustomNavbar";
import { staticPicture } from "@/utils/global.js";

import { waitCheckCount } from "@/api/audit";
import InviteCode from "@/components/inviteCode";
import Tip from "@/utils/tip.js";
import Login from "@/pages/index/index";
import { getUserInfo } from "@/api/user";
const inviteCodeWithSchool = Object.freeze([
  {
    id: 1,
    label: staticPicture.inviteCode,
    desc: "MY INVITATION CODE",
    imgUrl: staticPicture.codeBg,
    width: "208rpx",
    height: "180rpx",
    right: "10rpx",
  },
  {
    id: 2,
    label: staticPicture.school,
    desc: "MY REGIONAL GARDEN OFFICE",
    imgUrl: staticPicture.schoolBg,
    width: "166rpx",
    height: "178rpx",
    right: "28rpx",
  },
  {
    id: 3,
    label: staticPicture.competition,
    desc: "COMPETITION SITUATION",
    imgUrl: staticPicture.competitionBg,
    width: "166rpx",
    height: "178rpx",
    right: "28rpx",
  },
]);
const staticImg = {
  openSchoolAudit: require("@/static/image/openSchoolAudit.png"),
  inviteCodeImg: require("@/static/image/inviteCodeImg.png"),
  inviteCodeTitle: require("@/static/image/inviteCodeTitle.png"),
  regionalGardenTitle: require("@/static/image/regionalGardenTitle.png"),
  regionalGardenImg: require("@/static/image/regionalGardenImg.png"),
  competitionTitle: require("@/static/image/competitionTitle.png"),
  competitionImg: require("@/static/image/competitionImg.png"),
};

export default {
  name: "Content",
  components: {
    CustomNavbar,
    InviteCode,
    Login,
  },
  computed: {
    statusBarHeight() {
      return this.$store.state.systemInfo.statusBarHeight;
    },
  },
  onReady() {},
  onShow() {
    this.waitCheckCount();
    this.getUserInfo();
  },
  data() {
    return {
      staticImg,
      staticPicture,
      inviteCodeWithSchool, // 邀请码与地区园所
      inviteCodeOverlay: false,
      userInfo: {},
      waitCheckSchoolCount: 0,
    };
  },
  methods: {
    // 获取用户个人信息
    async getUserInfo() {
      const { data, status } = await getUserInfo();
      if (status === 200) {
        console.log(data);
        this.userInfo = data;
      }
    },
    // 获取园所审核数量
    async waitCheckCount() {
      const { data, status } = await waitCheckCount();
      console.log(data, status);
      if (status === 200) {
        this.waitCheckSchoolCount = data;
      }
    },
    // 跳转开园审核
    jumpStartSchoolAudit() {
      uni.navigateTo({
        url: "/pages/audit/index",
      });
    },
    // 点击邀请码与地区园所
    async hanlderInviteCodeWithSchool(id) {
      const { data, status } = await getUserInfo();

      if (status !== 200) return;

      switch (id) {
        case "1":
          uni.navigateTo({
            url: "/pages/invitePage/index",
          });
          break;
        case "2":
          uni.navigateTo({
            url: "/pages/districtGarden/index",
          });
          break;
        case "3":
          uni.navigateTo({
            url: "/pages/competition/index",
          });
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Content {
  width: 100vw;
  // overflow: auto;
  .user {
    width: 100%;
    padding: 72rpx 32rpx 32rpx;
    box-sizing: border-box;
    position: relative;
    .rect {
      width: 100vw;
      height: 83.2vw;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      object-fit: cover;
    }
    .user-info {
      display: flex;
      margin-top: 54rpx;
      .user-left {
        width: 126rpx;
        height: 126rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 1.1rpx solid rgba(255, 255, 255, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        .user-left-userAvatarUrl {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .user-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 46rpx;
        box-sizing: border-box;
        .user-name {
          height: 74rpx;
          line-height: 74rpx;
          font-size: 52rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
        }
        .user-identity {
          margin-top: 6rpx;
          width: 148rpx;
          height: 48rpx;
          background: rgba(255, 255, 255, 0.78);
          border-radius: 24rpx;
          border: 2rpx solid #1677ff;
          font-size: 32rpx;
          font-family: PingFangSC-Light, PingFang SC;
          font-weight: 400;
          color: #1677ff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .school {
      display: flex;
      align-items: center;
      margin-top: 52rpx;
      width: 686rpx;
      height: 160rpx;
      background: #ffffff;
      border-radius: 32rpx;
      opacity: 0.98;

      &-new {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        &-count {
          font-size: 44rpx;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #1677ff;
        }

        .schoolText {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #749ed8;
        }
      }
    }
  }
  .audit {
    position: relative;
    z-index: 1;
    .audit-count {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      width: 686rpx;
      height: 78rpx;
      background: #eaf4ff;
      border-radius: 64rpx;
      box-sizing: border-box;
      &-left {
        margin-left: 42rpx;
        width: 161rpx;
        height: 34rpx;
        object-fit: cover;
      }
      &-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 30rpx;
        &-count {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 6rpx;
          width: 60rpx;
          height: 36rpx;
          background: #fa5d70;
          border-radius: 20rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          /deep/ .van-icon-arrow {
            display: block;
          }
        }
      }
    }
    // 邀请码与地区园所
    .inviteCode-school {
      margin-top: 58rpx;
      &-list {
        &-item {
          width: 694rpx;
          height: 200rpx;
          background: #ffffff;
          box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(184, 184, 184, 0.27);
          border-radius: 60rpx;
          margin-bottom: 28rpx;
          padding: 44rpx 34rpx 30rpx 46rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          &-left {
            &-label {
              display: flex;
              align-items: center;
              image {
                display: block;
              }
              text {
                font-size: 48rpx;
                font-family: "Helvetica Neue", Helvetica, Arial,
                  "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC",
                  "WenQuanYi Micro Hei", sans-serif;
                color: #3b4c6e;
                margin-right: 32rpx;
              }
            }
            &-desc {
              width: 210rpx;
              height: 28rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(59, 76, 110, 0.5);
            }
          }
          &-right {
            height: 183rpx;
            width: 180rpx;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 46rpx 32rpx;
    .inviteCodeBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 320rpx;
      height: 382rpx;
      background: linear-gradient(137deg, #62a3ff 0%, #abc9ff 100%);
      border-radius: 42rpx;
      .inviteCodeImg {
        width: 274rpx;
        height: 192rpx;
        object-fit: cover;
      }
      .inviteCodeTitle {
        margin-top: 10rpx;
        width: 252rpx;
        height: 100rpx;
        object-fit: cover;
      }
    }
    .regionalGarden {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 320rpx;
      height: 382rpx;
      background: linear-gradient(134deg, #c08eff 0%, #d1baff 100%);
      border-radius: 42rpx;
      .regionalGardenTitle {
        width: 266rpx;
        height: 94rpx;
        object-fit: cover;
      }
      .regionalGardenImg {
        margin-top: 10rpx;
        width: 274rpx;
        height: 192rpx;
        object-fit: cover;
      }
    }
  }
  .competitionBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 686rpx;
    height: 246rpx;
    background: linear-gradient(227deg, #ff867f 0%, #ffccc1 100%);
    border-radius: 42rpx;
    .competitionTitle {
      width: 394rpx;
      height: 100rpx;
      object-fit: cover;
    }
    .competitionImg {
      margin-left: 10rpx;
      width: 216rpx;
      height: 194rpx;
      object-fit: cover;
    }
  }
}

// 邀请码弹出层
.inviteCode-wrapper {
  width: 652rpx;
  height: 890rpx;
  background: #ffffff;
  border-radius: 40rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  &-header {
    width: 652rpx;
    height: 246rpx;
    background: url("../../static/image/invitePop.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 34rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-teacher {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #9c9aab;
      margin-bottom: 12rpx;
    }
    &-company {
      font-size: 52rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #666666;
    }
  }
  &-qrcode {
    width: 362rpx;
    height: 360rpx;
    margin: 0 auto;
    text-align: center;
    image {
      width: 100%;
      height: 100%;
      margin-bottom: 40rpx;
    }
    &-tip {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9c9aab;
    }
  }
  /deep/ .van-icon-close {
    position: absolute;
    bottom: -88rpx;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.9;
  }
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(73, 73, 76, 0.9);
  z-index: 2;
}

.invite-code {
  width: 220rpx;
  height: 38rpx;
  margin-right: 44rpx;
}
</style>