<template>
  <view class="page-wrapper global-wrapper bgF2">
    <JHeaderTitle title="设置" bgColor="#f2f2f2"></JHeaderTitle>
    <block v-for="(v, i) in list" :key="i">
      <view class="setting-wrapper bgF" @tap="phoneOpen(v.title), jumpPage(v.url)">
        <view class="setting-main" :class="[v.isBorder]">
          {{ v.title }}
          <image src="/static/iconImg/right-arrow.svg" mode="aspectFill" />
        </view>
      </view>
    </block>
    <view class="login-uot bgF" @tap="logOut.open('账号退出后，系统不会主动删除任何数据，您仍可使用本账号再次登录。')"
      >退出登录</view
    >
  </view>

  <JPopup ref="phone" type="center" dir="center">
    <callPhone @cancel="phone.close()" :phoneNumber="phoneNumber" @tap.stop></callPhone>
  </JPopup>
  <JDeletedTips ref="logOut" @confirm="confirm" />
</template>

<script setup>
import { reactive, ref } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import user from "@/hooks/user.js"
import { $getCompanyInfo } from "@/http/apiManager.js"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import JCard from "@/components/newComponents/JCard/JCard"
import JButton from "@/components/newComponents/JButton/JButton"
import callPhone from "@/components/newComponents/callPhone/callPhone"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
import JDeletedTips from "@/components/newComponents/JDeletedTips/JDeletedTips"
import { clearRulesArray } from "@/hooks/rules"
onLoad(() => {
  getPhoneNumber()
})
const logOut = ref(null)
const list = reactive([
  {
    title: "账号设置",
    url: "/pageWork/setUp/accountSetting",
  },
  {
    title: "密码与安全",
    url: "/pageWork/setUp/pwSetting",
  },
  {
    title: "注销账号",
  },
  {
    title: "关于我们",
    url: "/pageWork/setUp/aboutUs",
    isBorder: "isBorder",
  },
])
const loginOut = ref()
const phone = ref()
const phoneNumber = ref("")
const confirm = () => {
  user.logout()
  uni.showToast({
    icon: "none",
    title: "退出成功",
  })
}
const phoneOpen = (v) => {
  if (v === "注销账号") return phone.value.open()
}
const getPhoneNumber = () => {
  $getCompanyInfo().then(({ bizData }) => {
    phoneNumber.value = bizData.companyTel
  })
}
const jumpPage = (url) => {
  if (!url) return
  clearRulesArray()
  uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  font-size: 33rpx;
  .setting-wrapper {
    padding-left: 32rpx;
    .setting-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 110rpx;
      border-bottom: 1rpx solid #f2f2f2;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 50rpx;
      }
    }
    .isBorder {
      border: none;
    }
  }
  .login-uot {
    height: 110rpx;
    line-height: 110rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #ff4433;
  }
}
</style>
