<script>
import FormTmp from './FormTmp';
import { diffData } from 'nimble-lib';
export default {
    extends: FormTmp,
    props: {
        /**
         * 不选中时的值
         */
        noValue: {
            default: null
        },
        diffKey: {
            type: Array
        },
        /**
         * 未选中的图标
         */
        icon: {
            type: String,
            default: '\ue60b'
        },
        /**
         * 图标class
         */
        iconClass: {
            type: String,
            default: 'nu_icon'
        },
        /**
         * 表单标签名
         */
        label: {
            type: String,
            default: ''
        },
        /**
         * 是否强制多选或单选
         */
        multiple: {
            type: Boolean,
            default: null
        }
        // /**
        //  * 是否选中
        //  */
        // checked: {
        //     type: Boolean,
        //     default: false
        // }
    },
    // data() {
    //     let _that = this;
    //     return {
    //         /**
    //          * 是否选中
    //          */
    //         myCheckd: _that.checked,
    //         /**
    //          * 当前选中的值
    //          */
    //         myValue: _that.mValue
    //     };
    // },
    // watch: {
    //     /**
    //      * 传入的选择状态
    //      * @param {*} nowVal 当前的值
    //      */
    //     checked(nowVal) {
    //         this.myCheckd = nowVal;
    //     },
    //     /**
    //      * 选择状态
    //      * @param {*} nowVal 当前的值
    //      */
    //     myCheckd(nowVal) {
    //         this.$emit('update:checked', nowVal);
    //     },
    //     /**
    //      * 传入的数据发生改变
    //      * @param {*} nowVal 当前的值
    //      */
    //     mValue (nowVal) {
    //         let _that = this;
    //         _that.myValue = nowVal;
    //     }
    // },
    computed: {
        /**
         * 显示前缀
         * @return {boolean}
         */
        isPrefix() {
            let _that = this;
            let hookfix = _that.$slots.hook_prefix;
            // let list = [];
            // if (hookfix instanceof Function) {
            //     list = hookfix();
            // }
            // return (hookfix && hookfix.length > 0 || list.length > 0) || false;
            return _that._isSlots(hookfix);
        },
        /**
         * 显示后缀
         * @return {boolean}
         */
        isExtfix() {
            let _that = this;
            let hookfix = _that.$slots.hook_suffix;
            // let list = [];
            // if (hookfix instanceof Function) {
            //     list = hookfix();
            // }
            // return (hookfix && hookfix.length > 0 || list.length > 0) || false;
            return _that._isSlots(hookfix);
        },
        /**
         * 显示默认
         * @return {boolean}
         */
        isDefalut() {
            let _that = this;
            let hookfix = _that.$slots.default || _that.$scopedSlots.default;
            // let list = [];
            // if (hookfix instanceof Function) {
            //     list = hookfix();
            // }
            // return (hookfix && hookfix.length > 0 || list.length > 0) || false;
            return _that._isSlots(hookfix);
        }
    },
    methods: {
        _isSlots(hookfix) {
            let list = [];
            if (hookfix instanceof Function) {
                list = hookfix();
            }
            return ((hookfix && hookfix.length > 0) || list.length > 0) || false;
        },
        /**
         * 比较两个值是否想等
         * @param {*} myValue 当前选中的值
         * @param {*} value 当前项的值
         * @return {Boolean}
         */
        _diffValue(myValue, value) {
            return diffData(myValue, value, this.diffKey);
        }
    }
};
</script>
<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_checktmp{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0 6px;
    user-select: none;
    outline: none;
    color: $nucheck-color;
    box-sizing: content-box;
    *,:before,:after{
        color: inherit;
        border-color: inherit;
    }
    input{
        @include resetIphone();
        display: inline-block;
        position: absolute;
        z-index: -10;
        top: 0;
        opacity: 0;
        &:checked+.nu_check{
            color: $nucheck-checked-icon-color;
            .nu_lable{
                color: $nucheck-checked-color;
            }
            .nu_check-icon{
                &:after{
                    content: attr(data-icon-active);
                }
            }
        }
    }
    .nu_check{
        // display: inline-block;
        line-height: 1.6;
        // vertical-align: middle;
        display: flex;
        align-items: center;
    }
    .nu_check-icon{
        line-height: 1.44;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        &:before{
            position: absolute;
            content: '\20';
            left: -6px;
            top: -6px;
            right: -6px;
            bottom: -6px;
        }
        &:after{
            font-size:inherit;
            content: attr(data-icon);
            vertical-align: middle;
        }
    }

    .nu_lable{
        display: inline-block;
        vertical-align: middle;
        padding-left: 8px;
        line-height: 1.44;
        white-space: normal;
        text-align: left;
        &.nu_lable-pre{
            padding-left: 0;
            padding-right: 8px;
        }
    }
    &.nu_disabled {
        color: $nucheck-disabled-color;
        * {
            filter: grayscale(100%);
            filter: gray;
            &:active {
                opacity: 1;
            }
        }
    }
}
</style>
