<template>
    <!-- htmlcs-disable -->
    <view class="sel-wrap">
        <scroll-view
            scroll-y
            :scroll-into-view="toView"
            :scroll-with-animation="isAnimation"
            :style="ctnSty"
            :class="question.type === 'multiSelectionBtn' ? 'scroll-area-small' : 'scroll-area'"
        >
            <!-- 选项列表 -->
            <view
                v-for="(item, i) in items"
                :id="'item-' + i"
                :key="i"
                :class="{'checked-item': chks.indexOf(item) > -1}"
                :style="{
                    color: item.isChk || (item.exclude && item.exclude === '3') ? '#00C8C8' : baseColor,
                    backgroundColor: item.isChk 
                        || (item.exclude && item.exclude === '3') ? 'rgba(0,200,200,0.10)' : '#F5F5F5',
                }"
                class="
                    sel-tip
                    c-font-medium
                "
                @tap="onTap(item, i)"
            >{{ item.name || item.text }}</view>
        </scroll-view>
        <!-- 多选确定按钮 -->
        <view 
            v-if="question.type === 'multiSelectionBtn'" 
            class="submit-btn-wrap"
        >
            <view 
                class="submit-btn" 
                :class="{'submit-btn-clickable': chks.length > 0}"
                @tap="onMultiSubmit"
            >{{ question.btnText || '确定' }}</view>
        </view>
    </view>
</template>

<script>
/**
 * @file im-单多选
 * @author haoyan
 */
import {extend, getQueryObject, throttle} from '../../utils/core';
import {contentType, answerType} from '../../utils/constant';
export default {
    config: {
        component: true
    },
    props: {
        baseColor: {
            type: String,
            default: '#1F1F1F'
        },
        question: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            items: [],
            chks: [], // 选中项
            // 滚动标识
            toView: '',
            // 区域滚动时，是否使用动画
            isAnimation: true,
            ctnSty: {
                height: '',
                visibility: 'visible'
            },
        };
    },
    watch: {
        question(v) {
            this.items = v.list;
            this.$mpUpdated(() => {
                this.toView = v.defaultIndex ? 'item-' + v.defaultIndex : 'item-0';
            });
            // 每次更新需清空上一次的选中项
            this.chks = [];
        },
        chks(v, ov) {
            this.updateChk();
        }
    },
    created() {
        this.items = this.question.list;
        this.$mpUpdated(() => {
            this.toView = this.question.defaultIndex ? 'item-' + this.question.defaultIndex : 'item-0';
        });
    },
    methods: {
        onTap(item, i) {
            // 多选不做防抖处理，单选需要防抖
            if (this.question.type === 'multiSelectionBtn') {
                this.onTapSelect(item, i);
            } else {
                this.submitSelect(item, i);
            }
        },
        submitSelect: throttle(function (item, i) {
            this.onTapSelect(item, i);
        }, 800),
        onTapSelect(item, i) {
            const { type = '', callback = '', method = '' } = this.question;
            if (type === 'multiChoiceBtn' || type === 'ai_radio' && item.exclude !== '2') {
                // 单选
                this.chks = [item];
                if (method === 'post') {
                    // 如果是性别、年龄，则走系统回复消息逻辑，即发送post请求，先这样处理后面让rd新增标志字段
                    this.$emit('questionReply', {
                        callbackUrl: callback,
                        value: item.value,
                        name: item.name,
                    });
                } else {
                    // 其他正常的回答问题消息统一发送Get请求
                    this.onTapSubmit();
                }
            } else if (type === 'multiSelectionBtn' || type === 'ai_multi' || 
                (type === 'ai_radio' && item.exclude === '2')) {
                // 多选
                if (!item.isChk) {
                    // 是否选了互斥项,exclude 0与1、2互斥，2在互斥的同时吊起输入键盘
                    if (item.exclude === '1' || item.exclude === '2') {
                        this.chks = [item];
                    } else {
                        // 选择了互斥项，清空互斥选项
                        this.chks = this.chks.filter(o => o.exclude !== '1' && o.exclude !== '2').concat(item);
                    }
                } else {
                    // 删除重复项
                    this.chks = this.chks.filter(o => o.text !== item.text);
                }
                
            }
        },
        onTapSubmit() {
            if (this.chks && this.chks.length <= 0) {
                return;
            }
            const params = getQueryObject(this.question.callback);
            const value = this.chks.map(o => o.text).join('，');
            // 发送消息时执行
            this.$emit('send', {
                callbackUrl: this.question.callback,
                resetUrl: this.question.resetUrl || '',
                params: extend({
                    content: value,
                    answerType: answerType.USER,
                    contentType: contentType.TEXT
                }, {
                    content: params.value,
                    answerType: params.answerType,
                    contentType: params.contentType
                })
            });
        },
        onMultiSubmit: throttle(function () {
            this.onTapSubmit();
        }, 800),
        updateChk() {
            // 更新选中项
            this.items = this.items.map(o =>
                extend(o, {
                    isChk: this.chks.map(c => c.value).indexOf(o.value) > -1
                })
            );
        }
    }
};
</script>

<style scoped lang="less">
.sel-wrap {
    min-height: 92px; /* trick：解决智能导诊显示该组件时，高度无法撑开的问题 */
    background: #fff;
    height: 100%;
    position: relative;
    .scroll-area {
        height: 100%;
        &-small {
            height: calc(100% - .59rem);
        }
    }
    .sel-tip {
        width: 100%;
        background: #F5F5F5;
        border-radius: 6px; 
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #1F1F1F;
        text-align: center;
        line-height: .18rem;
        margin-bottom: .12rem;
        padding: .13rem;
        box-sizing: border-box;
        &.checked-item {
            background: rgba(0,200,200,0.10);
            color: #00C8C8;
        }
    }
    .submit-btn-wrap {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-top: .15rem;
        box-sizing: border-box;
        background: #fff;
        .submit-btn {
            height: .44rem;
            background: #00C8C8;
            border-radius: 6px;
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #FFFFFF;
            line-height: .44rem;
            font-weight: 500;
            text-align: center;
            opacity: 0.5;
            &-clickable {
                opacity: 1;
            }
        }
    }
}
</style>
