<template>
    <!-- components/mp-switch/mp-switch.wxml -->
	 <!-- :style="'--mp-switch-width: '+(width)+'px;--mp-switch-height: '+(height)+'px;--mp-switch-text: ''+(item.checked?trueText:falseText)+'';'" -->
    <view class="mp-switch">
        <view :class="'wx-switch-input ' + (item.checked ? 'wx-switch-input-checked' : '')" @tap="onChange"></view>
    </view>
</template>

<script>
// components/mp-switch/mp-switch.js
export default {
    data() {
        return {
            checked: ''
        };
    },
    props: {
        trueText: {
            type: String,
            default: '开'
        },
        falseText: {
            type: String,
            default: '关'
        },
        // 传进来的对象
        item: {
            type: Object,
            default: () => ({})
        },
        width: {
            type: Number,
            default: 72
        },
        height: {
            type: Number,
            default: 32
        }
    },
    methods: {
        onChange() {
            console.log(this.item);
            this.setData(
                {
                    checked: !this.item.checked
                },
                () => {
                    this.$emit('change', {
                        detail: {
                            value: this.item
                        }
                    });
                }
            );
        }
    },
    created: function () {}
};
</script>
<style>
@import './mp-switch.css';
</style>
