<template>
    <view
        :class="['m-checkbox', disabled ? 'disabled' : '']"
        :style="checkStyle"
        @tap="checkTap"
    >
        <c-icon
            v-if="isChecked"
            :color="disabled ? '#ddd' : checkedColor"
            :font-size="size"
            :style="{
                height: size,
            }"
            name="yixuanzhong-solid"
        />
        <c-icon
            v-else
            :color="color"
            :font-size="size"
            :style="{
                height: size,
            }"
            name="xuanze"
        />
    </view>
</template>

<script>
/**
 * @file checkbox
 * @author zhangeryi@baidu.com
 * @categories 通用组件
 * @tags [component]
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components:{
        'CIcon': Icon,
    },
    props: {
        /**
         * 文字选中颜色
         */
        checkedColor: {
            'type': String,
            'default': '#ff6050'
        },
        /**
         * 文字默认颜色
         */
        color: {
            'type': String,
            'default': '#ccc'
        },
        /**
         * 大小
         */
        size: {
            'type': String,
            'default': '17px'
        },
        /**
         * 是否选中
         */
        checked: {
            'type': [Boolean, Number, String],
            'default': false
        },
        /**
         * 选中样式
         */
        checkStyle: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 是否禁用
         */
        disabled: {
            'type': [Boolean, Number],
            'default': false
        },
        /**
         * 单选
         */
        radio: {
            'type': Boolean,
            'default': false
        },
        /**
         * 组件内部控制状态
         */
        controlBycomponent: {
            'type': Boolean,
            'default': true
        }
    },
    data() {
        return {
            isChecked: +this.checked
        };
    },
    watch: {
        checked(newVal) {
            this.isChecked = +newVal;
        }
    },
    methods: {
        checkTap() {
            if (this.disabled) {
                return;
            }
            if (this.radio) {
                this.isChecked = true;
            }
            else if (this.controlBycomponent) {
                this.isChecked = !this.isChecked;
            }
            /**
             * change事件
             */
            this.$emit('change', this.isChecked);
        }
    }
};
</script>
<style lang="less" scoped>
.m-checkbox {
    display: inline-block;
    vertical-align: middle;
    padding-right: 2px;
    box-sizing: border-box;
    .m-icon {
        line-height: 1;
        border-radius: 100%;
        background: #fff;
    }
    &.disabled {
        .m-icon-checkbox {
            background: #f0f0f0;
        }
    }
}
</style>


