<template>
  <view class="mine">
    <view class="mine-container" >
      <view class="contacts">
        <image src="@/assets/logo/avatar1.png" mode="scaleToFill" class="image" />
      </view>
      <view class="tips-text">
        <view style="font-size: 15px;">名字</view>
        <view style="font-size: 12px;">
          <text style="margin-right: 5px">保安部门 </text>
          <text>未选择单位</text>
        </view>
      </view>
    </view>
    <!-- 用户信息 -->
    <view class="userIndex">
      <view class="exit"  v-for="item in datalist" :key="item.value" @click="addExit(item.value)">
        <view class="exitItem">
<!--          <view class="exitItemIndex">-->
<!--            <image :src="item.url" mode="scaleToFill" class="image" />-->
<!--          </view>-->
          <text style="margin-left: 30rpx;font-size: 12px;">{{ item.name }}</text>
        </view>
        <view style="margin-right: 40rpx">
          <text class="microscope"></text>
        </view>
      </view>
    </view>
<!--    退出弹框-->
    <nut-dialog
      content="是否退出登录?"
      v-model:visible="visible" @cancel="visible = false" @ok="onOk"
    />
  </view>
</template>

<script setup lang="ts">
import './index.scss'
import {ref} from "vue";
import {useUserStore} from "@/store/userStore";
import {useTabBarStore} from "@/store/tabBarStore"
import Taro from "@tarojs/taro";

const {setSelected} = useTabBarStore()
const {resetUserInfo} = useUserStore()
const visible = ref<boolean>(false)
const datalist = ref([
  {
    value: 0,
    name: '小程序简介',
  },
  {
    value: 1,
    name: '退出登录',
  },
  {
    value: 2,
    name: '修改用户信息',
  },
  {
    value: 3,
    name: '意见收集',
  },
])

const addExit = (index:number)=>{
  switch (index) {
    case 1:
      visible.value = true
    break;
  }
}
const onOk = ()=>{
  resetUserInfo()
  setSelected(0)
  Taro.navigateTo({
    url: "/pages/login/login",
  });
}

</script>