<template>
  <view class="pageBox _my_page">
    <view class="main">
      <view class="user">
        <view class="th5">{{ EXEC.user_name }}</view>
        <view class="th6">{{ EXEC.user_id || '未知ID' }}</view>
        <view class="select-ul">
          <view class="comp"  hover-class="hover">
            <picker @change="changeComp" :value="compIndex" :range="compArray" range-key="text">
              <view class="uni-input">
                <text>{{EXEC.comp_name}}</text>
                <iconfont icon="swap"/>
              </view>
            </picker>
          </view>
          <view class="user-type" v-if="identityArray.length>1"  hover-class="hover" >
            <picker @change="changeIdentity" :value="identityIndex" :range="identityArray" range-key="identity_role_name">
              <view class="uni-input">
                <text>{{EXEC.identity_role_name}}</text>
                <iconfont icon="swap"/>
              </view>
            </picker>
          </view>
        </view>
      </view>
      <view class="ul">
        <view class="li" hover-class="hover" @click="clearCache()">
          <view class="text"><iconfont icon="reload" /> {{translate('clear cache')}}</view>
          <view class="right"><iconfont icon="right" /></view>
        </view>
        <view class="li" hover-class="hover">
          <view class="text"><iconfont icon="lock-fill" /> {{translate('reset password')}}</view>
          <view class="right"><iconfont icon="right" /></view>
        </view>
        <view class="li" hover-class="hover">
          <view class="text"><iconfont icon="xinwenzixun-xianxing" /> {{translate('font size')}}</view>
          <view class="right"><iconfont icon="right" /></view>
        </view>
      </view>
      <view class="ul">
        <view class="li" hover-class="hover" @click="login_out">
          <view class="text"><iconfont icon="logout" /> {{translate('sign out')}}</view>
          <view class="right"><iconfont icon="right" /></view>
        </view>
      </view>
    </view>
    <tab-bar active="my"/>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import Storage from '@/common/utils/storage/index'
import EXEC from '@/common/utils/exec';
import { menusStore } from '@/common/stores/menus'
import { translate } from '@/common/utils/language/index'
import { gotoPage, gotoPageDynamic } from '@/common/utils/router/index'
import { saveMenus, set_db } from "@/common/utils/create"
import { login_out_unbind } from '@/common/apis/base'



const identityArray = <any>ref([])
const identityIndex = ref(0)
const changeIdentity = (e:any) => {
  identityIndex.value = e.detail.value
  EXEC.identity_role = identityArray.value[identityIndex.value].identity_role
  EXEC.identity_role_name = identityArray.value[identityIndex.value].identity_role_name
  Storage.set('identity_role',{
    identity_role: identityArray.value[e.detail.value].identity_role,
    identity_role_name: identityArray.value[e.detail.value].identity_role_name
  })
  saveMenus()
}


const compArray = <any>ref([])
const compIndex = ref(0)
const changeComp = async (e:any) => {
  compIndex.value = e.detail.value

  let active_system_id = EXEC.system_id
  let active_db_code = EXEC.db_code

  EXEC.comp_id = compArray.value[e.detail.value].value
  EXEC.comp_name = compArray.value[e.detail.value].text
  let system_isInside = false
  let db_isInside = false
  for(let item of compArray.value[e.detail.value].children){
    if(item.value == active_system_id){
      system_isInside = true
      for(let db of item.children){
        if(db.value == active_db_code){
          db_isInside = true
        }
      }
    }
  }
  if(!system_isInside){
    EXEC.system_id  = compArray.value[e.detail.value].children[0].value
  }
  if(!db_isInside){
    EXEC.db_code = compArray.value[e.detail.value].children[0].children[0].value
  }

  Storage.remove('identity_role')

  await set_db().then(()=>{
    identityArray.value = EXEC.identity_roles_arr
    if(identityArray.value.length>0){
      identityIndex.value = 0
      EXEC.identity_role = identityArray.value[0].identity_role
      EXEC.identity_role_name = identityArray.value[0].identity_role_name
      Storage.set('identity_role',{
        identity_role: identityArray.value[0].identity_role,
        identity_role_name: identityArray.value[0].identity_role_name
      })
      saveMenus()
    } else{
      identityIndex.value = 0
      EXEC.identity_role = ''
      EXEC.identity_role_name = ''
      Storage.remove('identity_role')
      saveMenus()
    }
  })
}


const clearCache = () => {
  Storage.remove('Options')
  uni.showToast({
      icon: 'success',
      title: '缓存已清除',
  })
}
const login_out = () => {
  login_out_unbind({}).then(()=>{
    uni.showToast({
      icon: 'success',
      title: '已退出登录',
    })
    let timer = setTimeout(()=>{
      uni.reLaunch({
        url: '/common/views/pages/index/index'
      });
      clearTimeout(timer)
    },1000)
  })
}

onBeforeMount(async() => {
  uni.hideHomeButton();
  uni.setNavigationBarTitle({
    title: translate('my')
  });
})
onMounted(()=>{
  identityArray.value = EXEC.identity_roles_arr
  compArray.value = EXEC.list_arr
})
onUnmounted(() => {
})





</script>

<style lang="scss">
._my_page{
  background: #eaf1f7;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  >.main{
    width: 100vw;
    padding: 20rpx 20rpx 90rpx;
    box-sizing: border-box;
    
    >.ul{
      border-radius: 30rpx;
      background: #fff;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      margin-top: 20rpx;
      >.li{
        display: flex;
        justify-content: space-between;
        border-bottom: #dedede 1rpx solid;
        line-height: 90rpx;
        height: 90rpx;
        padding: 0 0 0 40rpx ;

        &.hover{
          background: #f5f5f5;
        }
        >.text{
          display: flex;
          view{
            font-size: 14px;
            margin-right: 20rpx;
          }
          font-size: 13px;
          color: #666;
        }
        >.right{
          padding-right: 30rpx;
          view{
            color: #ccc;
            font-size: 14px;
          }
        }
        &:last-child{
          border-bottom: none;
        }
      }
    }
    >.user{
      border-radius: 30rpx;
      background: #fff;
      width: 100%;
      box-sizing: border-box;
      padding: 30rpx;
      position: relative;
      >.th5{
        font-size: 42rpx;
        font-weight: 600;
        height: 60prx;
        line-height: 60rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      >.th6{
        font-size: 28rpx;
        color: #999;
        line-height: 30rpx;
        height: 30rpx;
      }
      >.select-ul{
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        >view{
          font-size: 24rpx;
          border-radius: 10rpx;
          padding: 10rpx 15rpx;
          border: 2rpx solid #ddd;
          display: flex;
          margin-left: 10rpx ;
          &.hover{
            opacity: 0.8;
          }
          &.comp{
            background: $success-color;
            color: #fff;
            .uni-input{
              display: flex;
            }
          }
          &.user-type{
            background: $primary-color;
            color: #fff;
            .uni-input{
              display: flex;
            }
          }
        }
      }
    }
  }
}
</style>
