<template>
  <el-drawer
    v-model="settingStore.settingShow"
    direction="rtl"
    size="360px"
    class="setting-drawer"
    title="设置"
    append-to-body
    destroy-on-close
  >
    <el-scrollbar class="layout-breadcrumb-setting-bar">
      <el-divider content-position="left">全局设置</el-divider>
      <div class="layout-breadcrumb-setting-bar-flex mt15">
        <div class="layout-breadcrumb-setting-bar-flex-label">
          是否进行自动适配 (默认分辨率1920*1080)
        </div>
        <div class="layout-breadcrumb-setting-bar-flex-value">
          <el-switch
            v-model="isScaleRadio"
            size="small"
            @change="(flag)=>isScaleChange(flag as boolean)"
          ></el-switch>
        </div>
      </div>
      <el-divider content-position="left">实时监测</el-divider>
      <div class="layout-breadcrumb-setting-bar-flex mt15">
        <div class="layout-breadcrumb-setting-bar-flex-label">
          设备提醒自动轮询
        </div>
        <div class="layout-breadcrumb-setting-bar-flex-value">
          <el-switch
            v-model="leftBottomRadio"
            size="small"
            @change="(flag)=>indexRadioChange(flag as boolean)"
          ></el-switch>
        </div>
      </div>
      <div class="layout-breadcrumb-setting-bar-flex mt15">
        <div class="layout-breadcrumb-setting-bar-flex-label">实时预警轮播</div>
        <div class="layout-breadcrumb-setting-bar-flex-value">
          <el-switch
            v-model="rightBottomRadio"
            size="small"
            @change="(flag)=>indexRadioChange(flag as boolean)"
          ></el-switch>
        </div>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>
<script setup lang="ts">
import { useSettingStore } from "@/stores/setting";
import { ref } from "vue";
import { storeToRefs } from "pinia";
const isScaleRadio = ref(false);
const leftBottomRadio = ref(true);
const rightBottomRadio = ref(true);
const settingStore = useSettingStore();
const { indexConfig } = storeToRefs(settingStore);

const init = () => {
  settingStore.initSetting();
  isScaleRadio.value = settingStore.isScale;

  leftBottomRadio.value = indexConfig.value.leftBottomSwiper;
  rightBottomRadio.value = indexConfig.value.rightBottomSwiper;
};
init();
const isScaleChange = (flag: boolean) => {
  settingStore.setIsScale(flag);
};
const indexRadioChange = (flag: boolean) => {
  settingStore.setIndexConfig({
    leftBottomSwiper: leftBottomRadio.value, //左轮播
    rightBottomSwiper: rightBottomRadio.value, //右下轮播
  });
};
</script>
<style lang="scss">
.setting-drawer {
  .layout-breadcrumb-setting-bar {
    height: calc(100vh - 50px);
    padding: 0 15px;
    .layout-breadcrumb-setting-bar-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .layout-breadcrumb-setting-bar-flex-label {
        font-size: 14px;
      }
      .layout-breadcrumb-setting-bar-flex-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  --el-drawer-padding-primary: unset !important;
  .el-drawer__header {
    padding: 0 15px !important;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--el-border-color);
    color: var(--el-text-color-primary);
    .el-drawer__title {
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>
