<template>
    <view class="fx-col pl-40">
        <common-picker-cell v-for="(op,idx) in list" :key="idx" :selected="op.selected"
                            :title="op.text" :border="idx<list.length-1" @click.native="handleSelect(op)"/>
    </view>
</template>

<script>
import CommonPickerCell from "@/pagesOther/pages/ie/components/picker/common-picker-cell.vue";

export default {
    name: "ai-column-cells",
    components: {CommonPickerCell},
    props: {
        option: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        list() {
            return this.option.options || []
        }
    },
    methods: {
        handleSelect(op) {
            if (!op.selected && this.option.limit > 1) {
                // 多选即将新增选中时，命中选中限制判定
                const total = this.list.filter(i => i.selected).length
                if (total == this.option.limit) {
                    this.$message.error('最多选择' + this.option.limit + '项')
                    return
                }
            }
            // 禁止点击取消
            if (op.selected && this.option.disableCancel) return;
            // 单选自动切换
            if (!op.selected && this.option.limit == 1) this.list.forEach(i => i.selected = false)
            // 最终无限制时应该切换选中
            op.selected = !op.selected
            // 清除互斥选项
            if (op.selected && this.option.mutex) {
                try {
                    // 暂时只处理同组互斥，如果想没有限制，可以使用通知的形式
                    const parentVue = this.getAncestorParent('ai-group-cells') || this.getAncestorParent('ai-group-tags')
                    const mutexOp = parentVue.list?.find(op => op.filterKey == this.option.mutex)
                    mutexOp?.options?.forEach(i => i.selected = false)
                } catch (e) {
                    console.log('clear mutex option selected failed', this.option.mutex, e)
                }
            }
        }
    }
}
</script>

<style scoped>

</style>