<template>
  <u-popup :show="show" mode="right" @close="close" @open="open" closeable>
    <view style="width: 50vw" class="p20">
      <scroll-view scroll-y="true">
        <view class="x-f pb20 pt20">
          <u-avatar src=""></u-avatar>
          <view class="pl20">您好！{{ userInfo.nickname }}</view>
        </view>

        <u-cell-group>
          <u-cell icon="grid-fill" title="模块选择" :is-link="true" @click="handleTo('/pages/index/index')" />
          <u-cell icon="order" title="打印设置" :isLink="true" @click="handleTo('/pages/setting/print')"></u-cell>
          <u-cell icon="info-circle-fill" title="关于我们" :is-link="true" @click="handleTo('/pages/me/aboutMe')" />
        </u-cell-group>

        <u-button class="mt40" type="warning" plain text="退出当前账号" @click="handleLoginOut('general')" />
      </scroll-view>
    </view>

    <u-modal
      width="250px"
      :show="modalShow"
      title="提示"
      content="确定退出登录吗？"
      show-cancel-button
      async-close
      @confirm="confirm"
      @cancel="modalShow = false"
    />
  </u-popup>
</template>

<script setup>
import { ref, computed } from 'vue'
import nx from '@/nx'

// Props & Emits
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:show', 'open', 'close'])

// 响应式数据
const modalShow = ref(false)

// 计算属性
const userInfo = computed(() => nx.$store('user').userInfo)

// 方法
const handleTo = url => {
  nx.$router.go(url)
}

const handleLoginOut = () => {
  modalShow.value = true
}

const confirm = async () => {
  try {
    await nx.$store('user').logout()
  } catch (error) {
    console.error('退出登录失败:', error)
  } finally {
    modalShow.value = false
  }
}

const open = () => {
  emit('open')
}

const close = () => {
  emit('close')
  emit('update:show', false)
}
</script>

<style lang="scss" scoped></style>
