<template>
  <section class="kf-panels">
    <kSwitch :value="value" :label="label" :options="options" height="30px" @click-handle="handleClick"></kSwitch>
  </section>
</template>

<script setup>
import kSwitch from '@/components/publish/kSwitch.vue';
import dataModel from '@/components/ui/model/data.js';

import { computed, ref, toRefs, watch } from 'vue';

const props = defineProps(['config', 'confData', 'label']);
const { config, confData, label } = toRefs(props);

// 处理enums
const options = computed(() => {
  let ops = [];
  if (config.value.enumItems) {
    ops = config.value.enumItems.map(it => {
      return { label: it.label.zhCN, value: it.value };
    });
  }
  return ops;
});

const value = ref(config.value.value);

const handleClick = (value) => {
  const props = {
    props: { deviceId: confData.value.deviceId },
  };
  dataModel.doControl(props, confData.value.model, null, value.value, config.value.name);
};

watch(props, () => {
  value.value = config.value.value;
});

</script>

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