<template>
    <transition name="yh-setting-fade">
        <div class="setting" :class="{ settingShow: data.settingShow }" v-show="data.settingShow">
            <div class="setting_dislog" @click="data.settingShow = false">

            </div>
            <div class="setting_inner">
                <div class="setting_header">
                    设置
                </div>
                <div class="setting_body">
                    <!-- <div class="left_shu"> 实时监测</div> -->
                    <div class="left_shu"> 全局设置</div>
                    <div class="setting_item">
                        <span class="setting_label">
                            是否进行自动适配<span class="setting_label_tip">(默认分辨率1920*1080)</span>:
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="data.isScaleradio" @change="(val) => radiochange(val, 'isScale')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>

                        </div>
                    </div>
                    <div class="left_shu"> 实时监测</div>
                    <div class="setting_item">
                        <span class="setting_label">
                            设备提醒自动轮询: <span class="setting_label_tip"></span>
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="data.sbtxradio" @change="(val) => radiochange(val, 'sbtxSwiper')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>

                        </div>
                    </div>
                    <div class="setting_item">
                        <span class="setting_label">
                            实时预警轮播:
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="data.ssyjradio" @change="(val) => radiochange(val, 'ssyjSwiper')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <!-- <el-button type="primary" round size="mini">确定</el-button> -->
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script setup>
import { onMounted, onUnmounted, reactive } from 'vue';


const data = reactive({
    settingShow: false,
    sbtxradio: true,
    ssyjradio: true,
    isScaleradio: true,
})

const init = (() => {
    data.settingShow = true
})

const radiochange = ((val, type) => {
    this.$store.commit('setting/updateSwiper', { val, type })
    if (type === 'isScale') {
        // this.$router.go(0)
        // location.reload()
        // window.location.href=window.location.href+"?t="+Date.now()
    }
})

// 在组件实例化时执行
this.$store.commit('setting/initSwipers')
data.sbtxradio = this.$store.state.setting.sbtxSwiper
data.ssyjradio = this.$store.state.setting.ssyjSwiper
data.isScaleradio = this.$store.state.setting.isScale

onMounted(() => {
    document.body.appendChild(this.$el);
})

onUnmounted(() => {
    if (this.$el && this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el);
    }
})


</script>

<style lang='scss' scoped></style>