<template>
    <view class="info">
        <div class="left">
            <div class="icon">
            <image
                style="width: 100%; height: 100%; border-radius: 50%"
                :src="default_src"
                mode="aspectFill"
            ></image>
            </div>
            <div class="info_name">
            <div v-if="userList.data">{{ userList.data.userName }}</div>
            <div v-if="userList.data">
                {{ userList.data.orgList[0].orgName || "" }}
            </div>
            </div>
        </div>
        <div class="right">
            <div>{{ monthDay }}</div>
            <div>{{ dataType[dayOfWeek] }}</div>
        </div>
    </view>
</template>

<script>
const dataType = {
  Monday: "星期一",
  Tuesday: "星期二",
  Wednesday: "星期三",
  Thursday: "星期四",
  Friday: "星期五",
  Saturday: "星期六",
  Sunday: "星期天",
};

import moment from "moment";
export default {
    data() {
        return {
            monthDay: "",
            dayOfWeek:"",
            dataType,
            default_src: uni.getStorageSync("avatar"),
            userList: {},
        };
    },
    methods: {
        async getSwiperList() {
            try {
                const res = await uni.$http.get("/getLoginInfo");
                console.log("--c-", res.data);
                
                this.userList = res.data;

                console.log("--cb-", this.userList);
            } catch (e) {
                uni.$showMsg();
            }
        },
        getDataTime() {
            this.monthDay = moment().format("MM月DD日");
            this.dayOfWeek = moment().format("dddd");
        },
    },
    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
    created() {
        this.getSwiperList();
        this.getDataTime();
    },
};
</script>

<style lang="scss" scoped>
.info {
  height: 100rpx;
  background-color: #007afd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  color: #fff;
}
.left {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  color: #007afd;
  line-height: 50px;
}
.info_name {
  margin-left: 16rpx;
}
.right {
  text-align: center;
}
</style>
  