/** 抽屉内部用户项（含回填所需全量字段） */
interface ExistingMember {
    id: string
    name: string
    gender: '男' | '女'
    age: number
    height: number
    weight: number
    idCard: string
    avatar?: string
    selected?: boolean
    /** history 模式额外携带，供页面构建 userInfo */
    userId?: string
    sex?: number
    birthday?: string
    relationType?: number | string | null
    /** 0=员工 1=家庭成员 */
    dataType?: number
}

/**
 * 选择已有用户抽屉组件
 * Properties: show(控制显示)
 * Events: close(关闭), select(选中用户,携带 ExistingMember)
 */
Component({
    properties: {
        /** 是否显示抽屉 */
        show: {
            type: Boolean,
            value: false
        },
        /** 需要排除的用户 ID（history 模式下排除当前查看的用户） */
        excludeUserId: {
            type: String,
            value: ''
        }
    },

    data: {
        /** 控制 wx:if，DOM 是否存在 */
        innerShow: false,
        /** 控制 --visible 类，触发 CSS transition */
        animVisible: false,
        /** 用户列表（静态假数据填充，后续接真实接口替换） */
        members: [
            {
                id: '1',
                name: '张晓敏',
                gender: '男',
                age: 36,
                height: 170,
                weight: 89.6,
                idCard: '',
                relationType: 1,
                selected: false
            },
            {
                id: '2',
                name: '李晓华',
                gender: '女',
                age: 34,
                height: 162,
                weight: 52,
                idCard: '',
                dataType: 1,
                selected: false
            },
            {
                id: '3',
                name: '王建军',
                gender: '男',
                age: 40,
                height: 175,
                weight: 68,
                idCard: '',
                dataType: 1,
                selected: false
            },
            {
                id: '4',
                name: '陈静',
                gender: '女',
                age: 28,
                height: 158,
                weight: 48,
                idCard: '',
                dataType: 0,
                selected: false
            },
            {
                id: '5',
                name: '刘洋',
                gender: '男',
                age: 30,
                height: 180,
                weight: 72,
                idCard: '',
                dataType: 0,
                selected: false
            }
        ] as ExistingMember[]
    },

    observers: {
        /**
         * 监听外部 show 变化：
         * 打开时先拉数据再展示抽屉；关闭时移除动画类后移除 DOM
         */
        show(val: boolean) {
            if (val) {
                this.setData({innerShow: true})
                setTimeout(() => {
                    this.setData({animVisible: true})
                }, 20)
            } else {
                this.setData({animVisible: false})
                setTimeout(() => {
                    this.setData({innerShow: false})
                }, 300)
            }
        }
    },

    methods: {
        /** 点击遮罩关闭 */
        onTapMask() {
            this.triggerEvent('close')
        },

        /** 点击关闭按钮 */
        onTapClose() {
            this.triggerEvent('close')
        },

        /**
         * 点击用户行，触发 select 事件
         * @param e 携带 data-member 的点击事件
         */
        onTapMember(e: WechatMiniprogram.TouchEvent) {
            const member = e.currentTarget.dataset.member as ExistingMember
            this.triggerEvent('select', member)
        }
    }
})