<template>
    <label
        class="nus_switch nus_checktmp"
        :class="[disabled && 'nu_disabled']"
        @click="_onClick($event)"
        @tap="_onTap($event)">
        <input
            :disabled="disabled"
            @input="_onChange"
            v-model="myChecked"
            type="checkbox"
            :value="value"/>
        <div
            class="nu_check">
            <!-- <span
                class="nu_lable nu_lable-pre"
                v-if="label || isPrefix">
                <slot
                    name="hook_prefix">
                </slot>
                {{ label }}
            </span> -->
            <slot
                name="hook_switch">
                <span
                    class="nu_switch">
                </span>
            </slot>
            <!-- <span
                class="nu_lable"
                v-if="isDefalut || isPrefix">
                <slot></slot>
                <slot
                    name="hook_suffix">
                </slot>
            </span> -->
        </div>
    </label>
</template>

<script>
import { diffData, callFn } from 'nimble-lib';
import CheckTmp from '../_comm/CheckTmp';
import vModel from '../../../Mixins/vModel';
import attrSync from '../../../Mixins/attrSync';

export default {
    extends: CheckTmp,
    name: 'NuSwitch',
    props: {
        /**
         * 内容文本
         */
        value: {
            default: true
        }
    },
    data() {
        let _that = this;
        let isArray = _that.mValue instanceof Array;
        if (typeof _that.multiple === 'boolean') {
            isArray = _that.multiple;
        }
        return {
            isArray: isArray
        };
    },
    mixins: [
        vModel({
            mValueChange(nowVal) {
                let _that = this;
                _that.myValue = nowVal;
                _that._setMyCheck();
                return false;
            },
            myValueChange() {
                return false;
            }
        }),
        attrSync('checked', {
            myValueChange() {
                this._setMyValue();
                // return false; // 注掉后.sync时才能获取到值
            }
        })
    ],
    // watch: {
    //     /* 选中 */
    //     myChecked() {
    //         this._setMyValue();
    //     },
    //     /* 传入的数据发生改变 */
    //     mValue (nowVal) {
    //         let _that = this;
    //         _that.myValue = nowVal;
    //         _that._setMyCheck();
    //     }
    // },
    created() {
        let _that = this;
        if (_that.myChecked) {
            _that._setMyValue();
        } else {
            _that._setMyCheck();
        }
    },
    methods: {
        /**
         * 设置myChecked的值
         */
        _setMyCheck() {
            let _that = this;
            let _cValue = _that.value;
            let _mValue = _that.mValue;
            _that.myChecked = _that.isArray ? (_that._hasItem(_mValue, _cValue) > -1) : _that._diffValue(_mValue, _cValue);
        },

        /**
         * 设置myValue的值
         */
        _setMyValue() {
            let _that = this;
            if (_that.isArray) {
                _that._setMyValueList(_setMyValue);
            } else {
                _that._setMyValueObj(_setMyValue);
            }

            /**
             * 设置myValue
             * @param {*} value 需要设置的值
             */
            function _setMyValue(value) {
                if (typeof _that.value === 'boolean' && !value) {
                    value = false;
                }
                _that.myValue = value;
                _that._valueChange();
            }
        },

        /**
         * 设置非列表值
         * @param {Function} cb 回调
         */
        _setMyValueObj(cb) {
            let _that = this;
            let checked = _that.myChecked;
            let _cValue = _that.value;
            let _isSame = _that._diffValue(_that.myValue, _cValue);
            if (checked && !_isSame) {
                callFn(cb, [_cValue]);
            } else if (!checked && _isSame) {
                callFn(cb, [_that.noValue]);
            }
        },
        /**
         * 设置列表值
         * @param {Function} cb 回调
         */
        _setMyValueList(cb) {
            let _that = this;
            let checked = _that.myChecked;
            let _myValue = _that.myValue || [];
            let _cValue = _that.value;
            let _index = _that._hasItem(_myValue, _cValue);
            if (checked && _index < 0) {
                _myValue.push(_cValue);
                callFn(cb, [_myValue]);
            } else if (!checked && _index > -1) {
                _myValue.splice(_index, 1);
                callFn(cb, [_myValue]);
            }
        },
        /**
         * 设置列表
         * @param {Array} list 当前选中列表
         * @param {*} item 当前项值
         * @return {Number} 返回索引
         */
        _hasItem(list, item) {
            let _that = this;
            let _index = -1;
            if (list instanceof Array) {
                list.every((_item, key) => {
                    if (_that._diffValue(item, _item)) {
                        _index = key;
                        return false;
                    }
                    return true;
                });
            }
            return _index;
        },
        /**
         * 比较两个值是否想等
         * @param {*} myValue 当前选中的值
         * @param {*} value 当前项的值
         * @return {Boolean}
         */
        _diffValue(myValue, value) {
            let _that = this;
            if (typeof _that.value === 'boolean' || _that.value === null || _that.value === undefined) {
                value = _that.value || false;
            }
            return diffData(myValue, value, _that.diffKey);
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';
.nus_switch {
    $height: $nuswitch-height;
    font-size: 20px;
    height: $height;
    border-color: $brEee;
    width: $nuswitch-width;
    .nu_check{
        height: 100%;
        box-sizing: border-box;
        width: 100%;
    }
    .nu_switch{
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
        // border: 1px solid $brEee;
        border-width: 1px;
        border-style: solid;
        background:$nuswitch-bg-color no-repeat center center;
        border-radius: 1em;
        &:before,&:after{
            content: '';
            position: absolute;
            top: 0;
            border-radius: inherit;
            height: 100%;
            left: 0;
        }
        &:before{
            width: 100%;
            background:$nuswitch-bg-close-color no-repeat center center;
            transition: transform .3s;
        }
        &:after{
            background:$nuswitch-bg-close-color no-repeat center center;
            width: 1em;
            box-shadow: $nuswitch-shadow;
            transition: left .3s,right .0s;
        }
    }
    input{
        &:checked+.nu_check{
            .nu_switch{
                background-color: $nuswitch-bg-open-color;
                &:before{
                    transform: scale(0);
                }
                &:after{
                    transition: left .0s,right .3s;
                    left: auto;
                    right: -1px;
                    box-shadow: $nuswitch-open-shadow;
                }
            }
        }
    }
    &.nu_disabled{
        .nu_switch{
            &:before{
                display: none;
            }
        }
    }
}
</style>
