<template>
  <view class="help-container">
    <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="常见问题" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
      <template #left>
        <view class="u-navbar__content__left__item">
          <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
        </view>
      </template>
    </u-navbar>

    <view class="oa-header-section"></view>
    <view class="oa-content-section">
      <view class="uni-list" v-for="(item, findex) in list" :key="findex" :title="item.title">
        <view class="uni-list-title">
          <view :class="item.icon"></view>
          {{ item.title }}
        </view>
        <view class="uni-list-child">
          <view class="uni-list-child-item" hover-class="hover" v-for="(child, zindex) in item.childList" :key="zindex" @click="handleText(child)">
            <view class="uni-list-child-item-title">{{ child.title }}</view>
            <view class="uni-list-child-item-line" v-if="zindex !== item.childList.length - 1"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, computed, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/

/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  list: [
    {
      icon: "iconfont oaIcon-Help",
      title: "其他问题",
      childList: [
        {
          title: "如何退出登录？",
          content: "请点击[我的] - [应用设置] - [退出登录]即可退出登录",
        },
        {
          title: "如何修改用户头像？",
          content: "请点击[我的] - [选择头像] - [点击提交]即可更换用户头像",
        },
        {
          title: "如何修改登录密码？",
          content: "请点击[我的] - [应用设置] - [修改密码]即可修改登录密码",
        },
      ],
    },
  ],
});

const { list } = toRefs(state);

function handleText(item) {
  proxy.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`);
}

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss" scoped>
.help-container {
  .oa-content-section {
    padding: 15px;

    .uni-list {
      margin-bottom: 15px;

      &-title {
        display: flex;
        color: #303133;
        font-size: $uni-font-size-lg;
        font-weight: bold;
        margin-left: 5px;

        .iconfont {
          font-size: $uni-font-size-lg;
          margin: auto 5px auto 0;
        }
      }

      &-child {
        background: #ffffff;
        box-shadow: 0px 0px 5px rgba(193, 193, 193, 0.2);
        border-radius: 8px;
        margin-top: 5px;

        &-item {
          color: #606266;
          font-size: $uni-font-size-base;

          &-title {
            font-size: $uni-font-size-base;
            padding: 12px;
          }

          &-line {
            width: 100%;
            height: 0.5px;
            background-color: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
