<template>
    <div class="main">
        <div class="backgrounds">
            <img class="background-img" :src="avatarUrl"/>
        </div>
        <div class="infos">
            <div class="info">
                <div class="info-logos">
                    <img class="info-logo" :src="avatarUrl"/>
                </div>
                <div class="info-msgs">
                    <div class="msg">
                        <div class="msg-title">未完成任务</div>
                        <div class="msg-num">
                            <div class="msg-num-red">15</div>
                        </div>
                    </div>
                    <div class="msg msg-latest">
                        <div class="msg-title">未完成任务</div>
                        <div class="msg-num">
                            <div class="msg-num-blue">5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lists">
            <!-- <div class="list">
              <div class="list-title">我的客户</div>
              <img class="list-icon" :src="cache.icon.arrowRightDark" />
            </div> -->
            <div class="list" @click="listTaskClick">
                <div class="list-title">任务列表</div>
                <img class="list-icon" :src="cache.icon.arrowRightDark"/>
            </div>
            <div class="list">
                <div class="list-title">我的收益</div>
                <img class="list-icon" :src="cache.icon.arrowRightDark"/>
            </div>
            <div class="list list-latest" @click="handleDetail('message')">
                <div class="list-title">我的消息</div>
                <img class="list-icon" :src="cache.icon.arrowRightDark"/>
            </div>
        </div>

        <div class="main-menuBar">
            <div class="menuBar-menu" @click="menuBarClick('MainSale')">
                <img class="menuBar-icon" :src="menuBarInfo.icon.now['1']"/>
                <div class="menuBar-title">活动</div>
            </div>
            <div class="menuBar-menu" @click="menuCase()">
                <img class="menuBar-icon" :src="menuBarInfo.icon.now['2']"/>
                <div class="menuBar-title">案例</div>
            </div>
            <div class="menuBar-menu" @click="menuProfit()">
                <img class="menuBar-icon" :src="menuBarInfo.icon.now['3']"/>
                <div class="menuBar-title  menuBar-title-ac">收益</div>
            </div>
            <div class="menuBar-menu" @click="menuTask()">
                <img class="menuBar-icon" :src="menuBarInfo.icon.now['4']"/>
                <div class="menuBar-title">任务</div>
            </div>
            <div class="menuBar-menu" @click="menuBarClick('Me')">
                <img class="menuBar-icon" :src="menuBarInfo.icon.now['5']"/>
                <div class="menuBar-title">我的</div>
            </div>
        </div>
    </div>
</template>

<script>
  import {configWx, getUserInfo} from "@/utils/aCommon"
  import {getUserInfoByUserId} from "@/api/sidebar/voucher";
  import axios from "axios"
  import {editStore} from "@/api/sidebar/voucher";

  export default {
    name: "me",
    data() {
      return {
        avatarUrl: '',
        cache: {
          icon: {
            testImg: "/mainSale/test-city.png",
            arrowRightLight: "/mainSale/icon-arrow-right-light.png",
            arrowRightDark: "/mainSale/icon-arrow-right-dark.png"
          }
        },
        userInfo: '',
        menuBarInfo: {
          list: {
            main: [
              {
                name: "",
                iconUaUrl: "",
                iconAcUrl: ""
              }
            ]
          },
          icon: {
            now: {
              "1": "",
              "2": "",
              "3": "",
              "4": "",
              "5": ""
            },
            ua: {
              "1": "/mainSale/icon-menuBar-1-ua.png",
              "2": "/mainSale/icon-menuBar-2-ua.png",
              "3": "/mainSale/icon-menuBar-3-ua.png",
              "4": "/mainSale/icon-menuBar-4-ua.png",
              "5": "/mainSale/icon-menuBar-5-ua.png"
            },
            ac: {
              "1": "/mainSale/icon-menuBar-1-ac.png",
              "2": "/mainSale/icon-menuBar-2-ac.png",
              "3": "/mainSale/icon-menuBar-3-ac.png",
              "4": "/mainSale/icon-menuBar-4-ac.png",
              "5": "/mainSale/icon-menuBar-5-ac.png"
            }
          }
        },
        zcache: {
          nowUrl: "",
          preAuthCodeUrl: "",
          code: "",
          userId: "",
          userInfoResOld: "",
          userInfoResNew: ""
        },
      };
    },
    mounted() {

      this.avatarUrl = sessionStorage.getItem("avatar")
      this.checkNowMenuBar()

    },
    methods: {
      checkNowMenuBar() {
        let inData = "5";
        this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
        this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
      },
      menuBarClick(inData) {
        this.$router.push(inData);
      },
      listTaskClick() {
        this.$router.push("Task");
      },
      menuProfit() {
        this.$router.push({path: "/profitList"});
      },
      menuTask() {
        this.$router.push({path: "/taskList"});
      },
      menuCase() {
        this.$router.push({path: "/case"});
      },
      handleDetail(type){
        if(type === 'message'){
          this.$router.push('/message')
        }
      }
    }
  };
</script>

<style scoped>
    .main {
        /*border: 1px solid red;*/
        background-color: rgba(248, 248, 248, 1);
        width: 100%;
        height: auto;
        min-height: 100%;
        /*padding: ;*/
        padding-bottom: 94px;
        display: flex;
        flex-direction: column;
        justify-content: start;

        overflow: auto;
    }

    .backgrounds {
        /*border: 1px solid dodgerblue;*/
        width: 100%;
        height: 124px;
        overflow: hidden;
        background-color: rgba(10, 10, 10, 0.5);
    }

    .background-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(2px);
    }

    .infos {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 44px;
        margin-top: 12px;
    }

    .info {
        /*border: 1px solid red;*/
        width: 100%;
        height: 148px;
        padding: 0px 16px;

        position: relative;
        bottom: 106px;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
    }

    .info-logos {
        /*background-color: #96CEDC;*/
        width: 100%;
        height: 48px;
    }

    .info-logo {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid white;
        object-fit: cover;
    }

    .info-msgs {
        width: 100%;
        height: 80px;
        margin-bottom: 12px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
        padding: 14px 19px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .msg {
        width: 50%;
        height: 100%;
        /*border: 1px solid red;*/
        border-right: 1px solid rgba(238, 238, 238, 1);

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .msg-latest {
        border-right: none;
        align-items: flex-end;
    }

    .msg-title {
        width: 120px;
        height: 14px;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        color: rgba(45, 71, 106, 1);
        text-align: center;
    }

    .msg-num {
        width: 120px;
        height: 32px;
        border-radius: 16px;
        background-color: rgba(248, 248, 248, 1);

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .msg-num-red {
        color: rgba(208, 2, 27, 1);
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
        text-align: center;
    }

    .msg-num-blue {
        color: rgba(117, 178, 253, 1);
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
        text-align: center;
    }

    .lists {
        /*border: 1px solid red;*/
        width: 100%;
        height: auto;
        padding: 0px 0px 0px 16px;
        background-color: rgba(255, 255, 255, 1);

        box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
    }

    .list {
        /*border: 1px solid dodgerblue;*/
        width: 100%;
        height: 44px;

        border-bottom: 1px solid rgba(221, 221, 221, 1);

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .list-latest {
        border-bottom: none;
    }

    .list-title {
        width: auto;
        height: 16px;
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        color: rgba(45, 71, 106, 1);
    }

    .list-icon {
        margin-right: 16px;
        width: 8px;
        height: 13px;
        object-fit: cover;
    }

    .main-menuBar {
        /*border: 1px solid darkviolet;*/
        box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
        width: 100%;
        height: 82px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        background-color: #fafafa;
        padding: 0px 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .menuBar-menu {
        /*background-color: greenyellow;*/
        width: 48px;
        height: 47px;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .menuBar-icon {
        width: 24px;
        height: 24px;
        object-fit: cover;
    }

    .menuBar-title {
        width: auto;
        height: 12px;
        font-size: 10px;
        font-weight: bold;
        color: rgba(67, 119, 188, 0.4);
        text-align: center;
    }

    .menuBar-title-ac {
        color: rgba(67, 119, 188, 1);
    }
</style>
