<template>
    <!-- htmlcs-disable -->
    <view v-if="isShow" class="sel-wrap">
        <view>
            <view v-if="msg.title" class="sel-title">{{ msg.title }}</view>
            <!-- 选项列表 -->
            <view
                v-for="(item, i) in items"
                :key="i"
                class="
                    new-sel-tip
                    c-font-medium
                "
                :class="{'checked-item': item.isChk, 'sel-margin-bottom': i < items.length - 1}"
                @tap="onTap(item, i)"
            >{{ item.name || item.text }}</view>
            <!-- 选项数目太长显示展开按钮 -->
            <view 
                v-if="showAllBtn" 
                class="spread-items"
                :class="{'radio-gap': msg.type === 'multiChoiceBtn'}"
                @tap="showAll"
            >
                <text class="text-gap-right">展开</text>
                <c-icon 
                    name="down" 
                    class="down-icon" 
                    font-size="15px"
                />
            </view>
            <!-- 多选确认按钮 -->
            <view 
                v-if="msg.btnText"
                class="btn-submit" 
                :class="{
                    'btn-submit-clickable': chks.length > 0, 
                    'btn-submit-gap-top': !showAllBtn, 
                    'btn-submit-active': btnActive
                }"
                @tap="onTapMulti"
                @touchstart="touchStart"
                @touchend="touchEnd"
            >{{ msg.btnText }}</view>
        </view>
    </view>
</template>

<script>
/**
 * @file im-新单/多选组件
 * @author quyang
 */
import {extend, getQueryObject, throttle} from '../../utils/core';
import {contentType, answerType} from '../../utils/constant';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        msg: {
            type: Object,
            default() {
                return {};
            }
        },
        maxLen: {
            type: Number,
            default: 6
        }
    },
    data() {
        return {
            items: [], // 选项
            allItems: [],
            chks: [], // 选中项
            isShow: true, // 回答问题后选项不再显示
            showAllBtn: false, // 展开按钮是否显示
            btnActive: false
        };
    },
    computed: {
    },
    watch: {
        chks(v, ov) {
            this.updateChk();
        }
    },
    created() {
        if (this.msg.list.length > this.maxLen) {
            this.items = this.msg.list.slice(0, this.maxLen);
            this.showAllBtn = true;
        } else {
            this.items = this.msg.list;
        }
    },
    methods: {
        onTap(item, i) {
            // 如果是多选不做防抖处理，单选不做防抖处理
            if (this.msg.type === 'multiSelectionBtn') {
                this.onTapSelect(item, i);
            } else {
                this.submitSelect(item, i);
            }
        },
        submitSelect: throttle(function (item, i) {
            this.onTapSelect(item, i);
        }, 500),
        onTapSelect(item, i) {
            const { type = '', callbackUrl = '', method = '' } = this.msg;
            if (type === 'multiChoiceBtn' && item.exclude !== '2') {
                // 单选
                this.chks = [item];
                if (method === 'post') {
                    setTimeout(() => {
                        this.isShow = false;
                        // 发送post请求,出发消息
                        this.$emit('questionReply', {
                            callbackUrl,
                            value: item.value,
                            name: item.name || item.text,
                        });
                    }, 100);
                } else {
                    // 其他正常的问题消息统一发送Get请求
                    this.onTapSubmit();
                }
            } else if (type === 'multiSelectionBtn' || (type === 'multiChoiceBtn' && 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.length <= 0) {
                return;
            }
            const params = getQueryObject(this.msg.callbackUrl);
            const value = this.chks.map(o => o.text).join('，');
            setTimeout(() => {
                this.isShow = false;
                this.$emit('onZcSend', {
                callbackUrl: this.msg.callbackUrl,
                resetUrl: this.msg.resetUrl,
                params: extend({
                    content: value,
                    answerType: answerType.USER,
                    contentType: contentType.TEXT
                }, {
                    content: params.value,
                    answerType: params.answerType,
                    contentType: params.contentType
                })
            });
            }, 100);
        },
        onTapMulti: throttle(function (item, i) {
            this.onTapSubmit();
        }, 800),
        touchStart(e) {
            this.btnActive = true;
        },
        touchEnd(e) {
            this.btnActive = false;
        },
        updateChk() {
            // 更新选中项
            this.items = this.items.map(o =>
                extend(o, {
                    isChk: this.chks.map(c => c.value).indexOf(o.value) > -1
                })
            );
        },
        // 展开按钮，显示全部选项
        showAll() {
            // 更新全部选项的选中状态后再赋值给items
            this.items = this.msg.list.map(o =>
                extend(o, {
                    isChk: this.chks.map(c => c.value).indexOf(o.value) > -1
                })
            );
            this.showAllBtn = false;
        }
    }
};
</script>

<style scoped lang="less">
.sel-wrap {
    min-height: 92px; /* trick：解决智能导诊显示该组件时，高度无法撑开的问题 */
    background: #fff;
    padding: .15rem .12rem;
    border-radius: 8px;
}
.sel-title {
    font-size: 14px;
    line-height: 14px;
    color: #858585;
    margin-bottom: .12rem;
}
.sel-tip {
    background-color: #fff;
    display: inline-block;
    border-radius: 0.19rem;
    min-width: 32px;
    line-height: 16px;
    padding-top: 0.11rem;
    padding-bottom: 0.11rem;
    text-align: center;
}
.spread-items {
    font-size: 14px;
    color: #00C8C8;
    text-align: center;
    line-height: 14px;
    margin: .15rem;
    &.radio-gap {
        margin-bottom: 0;
    }
    .text-gap-right {
        margin-right: 3px;
    }
    .down-icon {
        display: inline-block;
        vertical-align: middle;
    }
}
.new-sel-tip {
    width: 100%;
    background: #F5F5F5;
    border-radius: 6px; 
    font-family: PingFangSC-Regular;
    font-size: 15px;
    line-height: 20px;
    color: #1F1F1F;
    text-align: center;
    padding: 9px 12px;
    width: 100%;
    box-sizing: border-box;
    &.sel-margin-bottom {
        margin-bottom: .12rem;
    }
}
.btn-submit {
    width: 100%;
    height: .38rem;
    background: #00C8C8;
    border-radius: 6px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: .38rem;
    font-weight: 500;
    text-align: center;
    opacity: 0.5;
    &-gap-top {
        margin-top: .12rem;
    }
    &-clickable {
        opacity: 1;
    }
    &-active {
        opacity: 0.8;
    }
}
.checked-item {
    background: rgba(0,200,200,0.10);
    color: #00C8C8;
}
</style>
