<style lang="less">
page {
  height: 100%;
  overflow: hidden;
  background: rgba(235, 245, 250, 1);
}
.overflow-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-left: 40rpx;
  padding-right: 40rpx;
  padding-top: 136rpx;
  padding-bottom: 208rpx;
  overflow-y: auto;
  .bind-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx 48rpx;
    margin: 0 auto;
    margin-top: 24rpx;
    background: #ffffff;
    border-radius: 20px;
    &:nth-child(1) {
      margin-top: 34rpx;
    }
    .checked-icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 56rpx;
      height: 56rpx;
    }
    .tenant-name {
      font-family: PingFang SC;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 50rpx;
      letter-spacing: 0px;
    }
    .tenant-identity {
      display: flex;
      padding-top: 8rpx;
      justify-content: space-between;
      font-family: PingFang SC;

      .info {
        font-size: 28rpx;
        font-weight: 400;
        padding: 8rpx;
        //styleName: 14/常规;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8b949e;
      }
      image {
        width: 112rpx;
        height: 40rpx;
      }
    }
  }
  .check-item {
    background: #3dcbcc4d;
  }
  .bind-btn-box {
    position: fixed;
    z-index: 333;
    bottom: 0;
    left: 0;
    height: 208rpx;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(235, 245, 250, 0) 0%,
      #ebf5fa 44.97%
    );
    button {
      margin-top: 20px;
      width: 670rpx;
      height: 100rpx;
      line-height: 100rpx;
      border: none;
      border-color: transparent;
      color: #fff;
      border-radius: 28px;
      background: #3dcbcc;
    }
  }
}
</style>
<template>
 <div class="overflow-wrap">
  <page-top-bar title="公司身份选择" 
  titleColor="#1B2129" 
  bgColor="#EBF5FA"></page-top-bar>
   <div class="bind-item" 
     @click="changeTent(item)"
     :class="{'check-item':selecItem.id==item.id}"
     :key="index+'tent'"
      v-for="(item,index) in tenantData">
      <div class="tenant-name">{{ item.name }}</div>
      <div class="tenant-identity">
        <div class="info">正式员工</div>
        <image class="logo-icon" v-if="item.logo" src="{{h5StaticPath+'/page-bind-tenant/logo_icon.svg'}}"/>
      </div>
      <image class="checked-icon" 
       v-if="selecItem.id==item.id"
      src="{{h5StaticPath+'/page-bind-tenant/checked.svg'}}"/>
   </div>
   

   <div class="bind-btn-box">
    <button @click.stop="bindTent">确认</button>
   </div>
 </div>
</template>

<script>
import wepy from '@wepy/core';
import { mapState } from '@wepy/x';
import store from '@/store';
import config from '@/config';
import {
  getCompanyDataByPhone,
  getAvatar,
  wxLogin,
  checkLoginNew,
  checkTokenIsValid
} from '@/service/user';
import { register } from '@/api/user';

wepy.page({
  store,
  config: {
    navigationBarTitleText: 'test'
  },
  data: {
    pageTopBarHeight: 48,
    tenantData: [
      {
        name: '科技公司1'
      }
    ],
    selecItem: {},
    h5StaticPath: config.h5StaticPath
  },
  computed: {
    ...mapState({
      userPhone: state => state.user.userPhone,
      token: state => state.user.token
    })
  },
  onLoad() {
    this.getPageCompanyByPhone();
  },
  onShow() {
    if (checkTokenIsValid() !== 3) {
      checkLoginNew();
    }
  },
  methods: {
    changeTent(item) {
      this.initTentData();
      item.isChecked = true;
      this.selecItem = item;
    },
    // 直接注册
    registerTent(params) {
      register(params)
        .then(res => {
          if (res.result == 'success') {
            wxLogin().then(res => {
              this.goHome();
            });
          } else {
            this.returnLogin();
          }
        })
        .catch(error => {
          this.returnLogin();
        });
    },
    // 注册
    bindTent() {
      let params = {
        phone: this.userPhone,
        defaultCompanyId: this.selecItem.id,
        headImage: getAvatar()
      };
      if (checkTokenIsValid() == 3) {
        // 未过期直接注册
        this.registerTent(params);
      } else {
        // token过期续约后-注册
        checkLoginNew().then(res => {
          if (res.data && res.data.isActivated == 1) {
            this.registerTent(params);
          } else {
            wx.navigateTo({
              url: '/pages/index'
            });
          }
        });
      }
    },
    // 初始化租户
    initTentData() {
      this.tenantData.map(item => {
        item.isChecked = false;
      });
    },
    // 获取租户数据
    getPageCompanyByPhone() {
      getCompanyDataByPhone().then(res => {
        console.log(res);
        let data = res;
        if (data && data.length) {
          this.tenantData = data;
          this.initTentData();
          this.selecItem = this.tenantData[0];
        } else {
          wx.showToast({
            title: '未获得公司服务权限!',
            duration: 5000,
            icon: 'none'
          });
          this.goHome();
        }
      });
    },
    getUserPhone() {
      let phone = wx.getStorageSync('userPhone');
      console.log(`phone==${phone}`);
    },
    goHome() {
      wx.navigateTo({
        url: '/packagesEnv/pages/home/index'
      });
    },
    returnLogin() {
      wx.navigateTo({
        url: 'pages/index'
      });
    },
    goEnv() {
      wx.navigateTo({
        url:
          '/packagesEnv/pages/officehome/index?spaceId=Sp1101080259b3510e26e7dd4dd9bf9784f06f3feb68'
      });
    }
  },
  created() {}
});
</script>
<config>
{
  "navigationBarTitleText": "公司身份选择",
  "backgroundColor": "#EBF5FA",
  navigationStyle:"custom",
  usingComponents: {
    'page-top-bar': '~@/components/common/page-top-bar',      
  },
  componentPlaceholder:{
    'page-top-bar': 'view'
  }
}
</config>
