<script lang="ts" setup>
import { useAppStore } from '@/store'
import { getImageFullPath } from '@/utils'
import { systemInfo } from '@/utils/systemInfo'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})
const appStore = useAppStore()

function handleBack() {
  uni.navigateBack()
}

async function quitApp() {
  uni.showModal({
    title: '提示',
    content: '确定要退出吗？',
    success: async (res) => {
      if (res.confirm) {
        appStore.Logout()
      }
    },
  })
}
</script>

<template>
  <z-paging
    ref="paging"
    bg-color="#f9f9f9"
  >
    <template #top>
      <view class="custom_navbar" :style="{ height: `${systemInfo.statusBarHeight + 44}px` }">
        <view class="back_bar">
          <uv-icon name="arrow-left" color="#222222" size="24" @click="handleBack" />
          <text class="text">设置</text>
        </view>
      </view>
    </template>
    <view class="container">
      <view class="inner">
        <view class="row" @click="quitApp">
          <view class="row_left">
            <view class="icon">
              <uv-image :src="getImageFullPath('SHEZHI_TUICHU_IMAGE')" mode="widthFix" width="100%" />
            </view>
            <view class="text">
              退出当前账号
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
.custom_navbar {
  width: 100%;
  position: relative;
  background-color: white;

  .back_bar {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 25rpx;
    left: 30rpx;

    .text {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: #222222;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
}

.container {
  width: 100%;

  .inner {
    width: calc(100% - 40rpx);
    padding: 20rpx;

    .row {
      padding: 28rpx 20rpx;
      width: calc(100% - 40rpx);
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      &:last-child {
        margin-bottom: 0;
      }

      .row_left {
        display: flex;
        align-items: center;

        .icon {
          width: 34rpx;
          height: 34rpx;
          overflow: hidden;
        }

        .text {
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          color: #333333;
          font-weight: 400;
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>
