<template>
  <!-- 切换角色页面 -->
  <view class="container">
    <image class="bg-image" src="/static/packages/my/image/login_bg.png" />
    <view class="title">请选择您的身份</view>
    <view class="status">
      <block v-if="roles.length > 1">
        <block v-for="(item, index) in roles" :key="index">
          <!-- 社区居民 -->

          <view class="status-item" @tap="onGoHome" :data-id="index" :data-role="item">
            <view class="status-item-icon">
              <view class="icon-item person" v-if="item == 'resident'">
                <image src="/static/packages/my/image/person.png"></image>
              </view>
              <view class="icon-item worker" v-else-if="item == 'worker'">
                <image src="/static/packages/my/image/worker.png"></image>
              </view>
            </view>
            <view class="status-title">
              <view class="status-title_child">社区</view>
              <view class="status-title_child" v-if="item == 'resident'">居民</view>
              <view class="status-title_child" v-else-if="item == 'worker'">工作人员</view>
            </view>
          </view>
        </block>
      </block>
      <!-- 社区工作人员 -->
      <!-- <view class="status-item" bindtap="onGoHome" data-id="2">
      <view class="status-item-icon">
        <image src="/images/work_perosn_icon.png"></image>
      </view>
      <view class="status-title">
        <view class="status-title_child">社区</view>
        <view class="status-title_child">工作人员</view>
      </view>
    </view> -->
    </view>
  </view>
</template>

<script>
  // ['worker', 'resident', 'tourist']
  // const app = getApp();
  // const { globalApi } = app.globalData.api;
  import * as globalApi from '@/api/consult';
  export default {
    data() {
      return {
        roles: []
      };
    },
    async onLoad(options) {
      const roles = uni.getStorageSync('userRoles');
      this.setData({
        roles
      });
    },
    methods: {
      onGoHome(e) {
        console.log(e);
        //const roles = ["resident", "worker"]
        const {
          id,
          role
        } = e.currentTarget.dataset;
        uni.setStorageSync('role', role);
        if (role == 'worker') {
          const userInfo = uni.getStorageSync('userInfoData');
          uni.setStorageSync('orgCode', userInfo.orgCode);
        } else {
          // const isNormal = wx.getStorageSync('isNormal')
          //正常进入
          // if (isNormal) {
          //   wx.navigateTo({
          //     url: `/packages/mine/pages/grid/grid`
          //   })
          //   return false
          // }
        }
        uni.switchTab({
          url: `/pages/index/index`
        });
      }
    }
  };
</script>
<style lang="less">
  /* pages/userStatus/index.wxss */

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    // background-color: rgb(5, 39, 213);
    background-size: contain;
    overflow: hidden;
  }

  .bg-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }

  .title {
    z-index: 200;
    /* margin-top: 210rpx; */
    width: 100%;
    text-align: center;
    font-size: 52rpx;

    font-weight: 400;
    color: #ffffff;
    line-height: 60rpx;
    letter-spacing: 1rpx;
    margin-bottom: 100rpx;
  }

  .status {
    z-index: 200;
    width: 100%;
    /* margin-top: 265rpx; */
    display: flex;
    justify-content: center;
  }

  .status-item {
    /* background-color: blueviolet; */
    background: linear-gradient(180deg, rgba(2, 110, 251, 0.6) 0%, rgba(0, 68, 185, 0) 100%);
    position: relative;
    width: 260rpx;
    height: 657rpx;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    margin-right: 30rpx;
    border-radius: 130rpx 130rpx 0 0;
  }

  .status-item:last-child {
    margin-right: 0;
  }

  .status-item-icon {
    /* position: absolute; */
    top: -130rpx;
    left: 0;
    width: 260rpx;
    height: 260rpx;
    border-radius: 50%;
    /* background-color: goldenrod; */
    margin-bottom: 30rpx;
  }

  .status-item-icon .icon-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .status-item-icon .person {
    background: linear-gradient(360deg, #8e5aff 0%, #6e63f9 100%);
  }

  .status-item-icon .worker {
    background: linear-gradient(180deg, #0090fc 0%, #1ab5bd 100%);
  }

  .status-item-icon .icon-item image {
    width: 135rpx;
    height: 168rpx;
    display: inline-block;
    border: none;
  }

  .status-title_child {
    font-size: 42rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #ffffff;
    line-height: 68rpx;
    text-align: center;
  }
</style>