<template>
    <view class="da-dropdown-cell">
        <view
            class="da-dropdown-cell-item"
            :class="[item.checked ? 'is-actived' : '', item.disabled ? 'is-disabled' : '']"
            v-for="(item, index) in cellOptions"
            :key="index"
            @click="handleSelect(item)"
        >
            <text class="da-dropdown-cell-item--label">{{ item.label }}</text>
            <text class="da-dropdown-cell-item--suffix">{{ item.suffix }}</text>
            <text class="da-dropdown-cell-item--check" v-if="item.checked && showIcon" />
        </view>
    </view>
    <dropdown-footer @reset="handleReset" @confirm="handleConfirm" />
</template>

<script>
import { defineComponent, watch, ref } from 'vue'
import dropdownFooter from '../widgets/admin/dropdown-footer.vue'
import { deepClone } from '@/components/da-dropdown/utils'

export default defineComponent({
    components: { dropdownFooter },
    props: {
        dropdownItem: {
            type: Object,
            default: null
        },
        dropdownIndex: {
            type: Number
        }
    },
    emits: ['success', 'reset', 'confirm'],
    setup(props, { emit }) {
        const cellOptions = ref([])
        const showIcon = ref(false)
        const selectedItem = ref()

        function initData(options, value) {
            const list = deepClone(options)
            for (let i = 0; i < list.length; i++) {
                const item = list[i]
                if (item.value === value) {
                    item.checked = true
                    break
                }
                item.checked = false
                selectedItem.value = null
            }
            cellOptions.value = list
        }

        function handleSelect(item) {
            if (item.disabled) {
                return
            }
            // 取消所有选项的选中状态
            cellOptions.value.forEach(item => {
                item.checked = false
            })
            // 选中当前选项
            item.checked = true
            selectedItem.value = item

            if (props.dropdownItem?.prop) {
                const res = { [props.dropdownItem.prop]: item.value }
                emit('success', res, item, props.dropdownIndex)
            } else {
                console.error(`菜单项${props.dropdownItem.title}未定义prop，返回内容失败`)
            }
        }
        function handleReset() {
            initData(cellOptions.value)
            emit('reset')
        }
        function clearSelect() {
            initData(cellOptions.value)
        }
        function handleConfirm() {
            emit('confirm', selectedItem.value, props.dropdownIndex)
        }
        watch(
            () => props.dropdownItem,
            v => {
                if (v?.options?.length) {
                    initData(v.options, v.value)
                } else {
                    cellOptions.value = []
                }
                showIcon.value = v?.showIcon || false
            },
            { immediate: true, deep: true }
        )

        return {
            cellOptions,
            showIcon,
            handleSelect,
            handleReset,
            handleConfirm,
            clearSelect
        }
    }
})
</script>

<style lang="scss" scoped>
// 下拉列表
.da-dropdown-cell {
    --cell-height: 80rpx;

    width: 100%;
    max-height: 60vh;
    overflow: hidden auto;

    &-item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: var(--cell-height);
        padding: 0 24rpx;
        overflow: hidden;
        // font-size: 28rpx;
        color: var(--dropdown-text-color);
        white-space: nowrap;
        border-bottom: 1rpx solid #dedede;

        &:last-child {
            border-bottom: none;
        }

        &--label {
            flex-grow: 1;
            max-width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            // #ifdef H5
            :deep(> span) {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            // #endif
        }

        &--suffix {
            flex-grow: 1;
            margin-left: 10px;
            overflow: hidden;
            font-size: 24rpx;
            color: #999;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;

            // #ifdef H5
            :deep(> span) {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            // #endif
        }

        &--check {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            width: var(--cell-height);
            height: var(--cell-height);

            &::after {
                /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
                font-family: 'iconfont' !important;
                font-size: calc(var(--cell-height) / 3 * 2);
                font-style: normal;
                content: '\e677';
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }

        &.is-actived {
            color: $blue1;
        }

        &.is-disabled {
            color: #aaa;
            background: #efefef;
        }
    }
}
</style>
