<template>
    <view class="settings-section">
        <view class="settings-section__inner">
            <text class="settings-section__title">设置与安全</text>
            <view class="settings-section__list">
                <view class="settings-section__list-inner">
                    <view
                        v-for="(item, index) in items"
                        :key="item.key"
                    >
                        <view v-if="index > 0" class="settings-section__item-divider"></view>
                        <view
                            class="settings-section__item"
                            :class="{ 'settings-section__item--tall': item.subtitle }"
                            hover-class="mi-tap-row--hover"
                            :hover-stay-time="150"
                            @tap="$emit('setting', item.key)"
                        >
                            <view class="settings-section__item-inner">
                                <view
                                    class="settings-section__item-icon-wrap"
                                    :class="item.iconWrapClass"
                                >
                                    <image
                                        class="settings-section__item-icon"
                                        :src="item.icon"
                                        mode="aspectFit"
                                    />
                                </view>
                                <view
                                    v-if="item.subtitle"
                                    class="settings-section__item-texts"
                                >
                                    <text class="settings-section__item-title">{{ item.label }}</text>
                                    <text class="settings-section__item-desc">{{ item.subtitle }}</text>
                                </view>
                                <text
                                    v-else
                                    class="settings-section__item-label"
                                    :class="item.labelClass"
                                >
                                    {{ item.label }}
                                </text>
                                <image
                                    class="settings-section__item-arrow"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright10.png"
                                    mode="aspectFit"
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'

defineEmits(['setting'])

const items = ref([
    {
        key: 'notify',
        label: '通知设置',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
        iconWrapClass: ''
    },
    {
        key: 'password',
        label: '修改密码',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
        iconWrapClass: 'settings-section__item-icon-wrap--blue'
    },
    {
        key: 'privacy',
        label: '隐私政策',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
        iconWrapClass: 'settings-section__item-icon-wrap--green'
    },
    {
        key: 'nfc',
        label: 'NFC 门禁卡',
        subtitle: '已绑定',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
        iconWrapClass: ''
    },
    {
        key: 'delete',
        label: '注销账户',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
        iconWrapClass: 'settings-section__item-icon-wrap--red',
        labelClass: 'settings-section__item-label--danger'
    }
])
</script>

<style lang="scss">
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-settings.css';
</style>
