<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>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    emits: ['setting'],
    data() {
        return {
            items: [
                {
                    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>
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-settings.css';
</style>
