<template>
<view class="container">
  <Navbar title="个人中心" canBack :bgColor="'#f3f4f6'"></Navbar>
  <view class="topInfoSty">
<!--    头部信息部分-->
    <view class="topSty">
      <view class=" avatorSty">
        <u-avatar size="65" :src="userInfo.imgSrc" shape="square"></u-avatar>
      </view>
      <view class="rightSty margin-left">
        <view class="right-top">
          <view class="text-xl text-white" style="color: #333333">
            {{user.name || ""}}
          </view>
          <view class="numSty margin-left-sm">
            {{userInfo.numBh}}
          </view>
        </view>
        <view class="right-bottom margin-top-sm">
          <view class="topText">
            {{userInfo.role}}
          </view>
          <view class=" topText margin-right-sm margin-left-sm">
            |
          </view>
          <view class="topText">
            工龄:{{userInfo.workNum}}年
          </view>
        </view>
      </view>
    </view>
<!--    数据展示-->
    <view class="dataShowSty margin-top-lg">
      <data-summary></data-summary>
    </view>
  </view>
</view>
</template>

<script>
import dataSummary from "@/components/dataSummary/index"
import {
  mapState
} from 'vuex'
  export default {
    name: "index",
    components:{
      dataSummary
    },
    computed: {
      ...mapState(["user"]),
    },
    data(){
      return {
        userInfo:{
          imgSrc:'/static/images/mine/employeeAvator1.png',
          name:'张测试',
          role:'配送工',
          workNum:'7',
          numBh:'670666'
        }
      }
    },
    onLoad(){

    },
    methods:{

    }
  }
</script>

<style lang="scss" scoped>
.container{
  background-color: #f3f4f6;
}
.topInfoSty{
  padding: 0px 20rpx;
  .topSty{
    width: 100%;
    display: flex;
    //justify-content: space-between;
    .leftSty{
        display: flex;

    }
    .rightSty{
      display: flex;
      width: calc(100% - 140rpx);
      //justify-content: space-between;
      flex-direction: column;
      align-items: center;
      .right-top{
        width: 100%;
        margin-top: 10px;
        display: flex;
      }
      .right-bottom{
        width: 100%;
        //margin-top: 20px;
        display: flex;
      }
    }
  }
  .avatorSty{
    height: 136rpx;
    width: 136rpx;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .numSty{
    width: 120rpx;
    height: 50rpx;
    border-radius: 20rpx;
    background-color: #d5d8dd;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .topText{
    color: rgb(102, 102, 102);
    font-weight: 400;
    font-size: 28rpx;
  }
}

</style>