<template>
    <view class="diy-form-switch main-between cross-center" :style="cRadioStyle">
        <view class="diy-form-label cross-center" :style="cTitleStyle">
            <view>
                <view>{{data.title}}</view>
                <text v-if="data.is_required == '1' && data.title">*</text>
            </view>
        </view>
        <view @click="toggleSwitch" class="evan-switch" :style="{width:2*size+'px',height:switchHeight,borderRadius:size+'px',backgroundColor:is_open===true?data.open_color:data.close_color}">
            <view class="evan-switch__circle" :style="{width:radiusSize+'px',height:radiusSize+'px',transform:is_open===true?`translateX(${size}px)`:`translateX(0)`,margin: margin}"></view>
        </view>
        <view class="switch-dialog main-center cross-center" v-if="is_show" :style="{'padding': '0 ' +data.inputPadding + 'rpx'}">
            <view v-if="data.open_text && data.close_text" class="main-center cross-center" :style="cDialogStyle">{{is_open ? data.open_text : data.close_text}}</view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'diy-form-switch',
        data() {
            return {
                size: 20,
                radiusSize: 13,
                is_show: false,
                is_open: false,
                data: {
                    is_required: '0',
                    title: '开关',
                    open_text: '',
                    close_text: '',
                    default: 0,
                    height: 100,
                    inputPadding: 24,
                    radius: 10,
                    margin: 0,
                    open_color: '#4798EB',
                    close_color: '#C8C8C8',
                    title_color: '#545B60',
                    tips_color: '#FFFFFF',
                    fill_color: '#99A1AA',
                    bg_color: '#FFFFFF'
                }
            }
        },
        props: {
            index: [Number, String],
            value: {
                type: Object
            }
        },
        watch: {
            newList: {
                handler(newVal) {
                    this.is_open = newVal
                }
            }
        },
        computed: {
            cDialogStyle() {
                let style = `background-color:${this.data.fill_color};color:${this.data.tips_color};border-radius:${this.data.radius}rpx;height:${this.data.height}rpx;`;
                return style;
            },
            cRadioStyle() {
                let style = `background-color:${this.data.bg_color};width:100%;padding: 0 ${this.data.margin}rpx;`;
                return style;
            },
            cTitleStyle() {
                let style = `color:${this.data.title_color};`;
                return style;
            },
            switchHeight() {
                return this.size + 'px'
            },
            margin() {
                let margin = (+this.size - +this.radiusSize) / 2 + 'px';
                return margin;
            }
        },
        created() {
            this.data = this.value;
            this.is_open = this.data.default == 1 ? true : false;
            console.log(this.data.close_text)
            console.log(this.data.open_text)
            this.$emit('updateValue', {
                index: this.index,
                value: this.is_open,
            });
        },
        methods: {
            toggleSwitch() {
                if(this.is_show) {
                    return false;
                }
                this.is_open = !this.is_open;
                this.is_show = true;
                setTimeout(()=>{
                    this.is_show = false;
                },1000)
                this.$emit('updateValue', {
                    index: this.index,
                    value: this.is_open,
                });
            },
        },
        // inject: ['goodsForm'],
    }
</script>

<style scoped lang="scss">
    .evan-switch {
        position: relative;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.1);
        border-style: solid;
        transition: background-color 0.3s;
        box-sizing: content-box;
    }

    .evan-switch__circle {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
        transition: transform 0.3s;
    }
    .diy-form-switch {
        height: 82rpx;
        font-size: 24rpx;
        position: relative;
        .diy-form-label {
            flex-shrink: 0;
            font-size: 30rpx;
            margin-right: 20rpx;
            max-width: 80%;
            >view {
                position: relative;
                display: inline-block;
                text {
                    color: #FF4544;
                    position: absolute;
                    right: -16rpx;
                    top: 0;
                }
            }
        }
        .switch-dialog {
            position: fixed;
            top: 40%;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 28rpx;
            z-index: 1000;
            >view {
                width: 100%;
                padding: 2% 10%;
                overflow: hidden;
                word-break: break-all;
            }
        }
    }
</style>
