<template>
    <!-- htmlcs-disable -->
    <view class="sel-wrap">
        <view
            v-for="(item, i) in items"
            :key="i"
            class="
                sel-tip
                c-font-medium
                c-gap-inner-left-large
                c-gap-inner-right-large
                c-gap-bottom
                c-gap-right
            "
            :style="{
                color: item.isChk || (item.exclude && item.exclude === '3') ? '#fff' : baseColor,
                backgroundColor: item.isChk || (item.exclude && item.exclude === '3') ? baseColor : '#fff',
            }"
            @tap="onTap(item, i)"
        >{{ item.text }}</view>
    </view>
</template>

<script>
/**
 * @file im-单多选
 * @author haoyan
 */
import {send} from '../../utils/log';
import {extend} from '../../utils/core';
export default {
    config: {
        component: true
    },
    props: {
        type: {
            // 选择类型：radio-单选；multi-多选
            type: String,
            default: 'multi'
        },
        list: {
            // 选项列表
            type: Array,
            default() {
                return [];
            }
        },
        checked: {
            type: Array,
            default() {
                return [];
            }
        },
        baseColor: {
            type: String,
            default: '#00C8C8'
        }
    },
    data() {
        return {
            items: [], // 选项
            chks: [] // 选中项
        };
    },
    watch: {
        list(v) {
            this.items = this.list;
        },
        checked(v, ov) {
            this.chks = v;
            this.updateChk();
        }
    },
    created() {
        this.items = this.list;
    },
    methods: {
        onTap(item, i) {
            if (this.type === 'radio' || this.type === 'ai_radio' && item.exclude !== '2') {
                // 单选
                this.chks = [item];
            } else if (this.type === 'multi' || this.type === 'ai_multi' || 
                (this.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);
                }
                
            }
            if (this.type !== 'upload_opt') {
                // 图片上传选项，不需要返回具体选中值，直接通过eachTagTap控制其中item的exclude=3为上传图片，exclude=4为发送按钮选项（如"取消上传"）
                /**
                 * 按钮点击，返回当前选中按钮
                 */
                this.$emit('tapTag', this.chks);
            }
            /**
             * 单个按钮点击
             */
            this.$emit('eachTagTap', item);
            send({
                type: 'b',
                action: 'inputSel',
                extra: {
                    name: item.text
                }
            });
        },
        updateChk() {
            // 更新选中项
            this.items = this.items.map(o =>
                extend(o, {
                    isChk: this.chks.map(c => c.text).indexOf(o.text) > -1
                })
            );
        },
        subSelectGroup(){
            this.$emit('mulitSub');
        }
    }
};
</script>

<style scoped lang="less">
.sel-wrap {
    min-height: 92px; /* trick：解决智能导诊显示该组件时，高度无法撑开的问题 */
}
.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;
}
.sel-tip.chk {
    color: #fff;
}
</style>
