<template>
  <section class="kf-pub-switch" :style="{ width: props.width === '70%' ? '100%' : props.width, height: props.height }">
    <span class="kf-pub-switch-label" v-if="props.label !== ''">{{ label }}</span>
    <div class="kf-pub-switch-body" :style="{ height: props.height }">
      <span :class="getAcClass(item)" v-for="item in options" :key="item.value" @click="switchHandle(item)"
        :title="item.label">
        <i class="iconfont" :class="item.icon" v-if="item.icon"></i>
        <div v-else class="kf-pub-switch-label">{{ item.label }}</div>
      </span>
      <span class="cool-switch-input-active" :style="updateActiveStyle"></span>
    </div>
  </section>
</template>

<script setup>
import { onMounted, reactive, toRefs, watch, computed } from "vue";

const state = reactive({
  isActive: 0,
});
const props = defineProps({
  label: {
    type: String,
    default: () => Kf.t('DefaultLabel'),
  },
  options: {
    type: Array,
    default: () => [
      {
        label: Kf.t('Enable'),
        value: 1,
      },
      {
        label: Kf.t('Disable2'),
        value: 0,
      },
    ],
  },
  value: {
    default: () => 0,
  },
  width: {
    type: String,
    default: "100%",
  },
  bodyWidth: {
    type: String,
    default: "49%",
  },
  height: {
    type: String,
    default: "35px",
  },
  themeColor: {
    type: String,
    default: () => "#2978ec"
  }
});
const { isActive } = toRefs(state);

const emits = defineEmits(["update:value", "clickHandle"]);

onMounted(() => {
  if (props.options.length > 0) {
    if (props.label === Kf.t('Duration')) {
      isActive.value = props.options[props.options.length - 4].value;
    } else {
      isActive.value = props.value == null ? false : props.value;
    }
  }
});

watch(
  () => props.value,
  (newVal) => {
    if (props.label === Kf.t('Duration')) {
      // isActive.value = props.options[props.options.length - 4].value;
    } else {
      isActive.value = newVal;
    }
  }
);

const switchHandle = (param) => {
  isActive.value = param.value;
  emits("update:value", param.value);
  emits("clickHandle", param);
};


const getAcClass = (item) => {
  let classList = ['kf-pub-switch-input'];
  if (isActive.value === item.value) {
    classList.push('kf-pub-switch-input-active');
  }
  return classList;
}

const updateActiveStyle = computed(() => {
  let style = { width: `calc(100% / ${props.options.length})` };
  const activeIndex = props.options.findIndex(ops => ops.value === isActive.value);
  if (activeIndex !== -1) {
    style.left = `calc(100% / ${props.options.length} * ${activeIndex} + 2px)`;
  }
  return style;
});

</script>

<style lang="scss" scoped>
.kf-pub-switch {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;

  .kf-pub-switch-label {
    color: #aaa;
    font-weight: 500;
    letter-spacing: 1.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;
    width: 100px;
  }

  .kf-pub-switch-body {
    width: calc(100% - 100px);
    height: 35px;
    padding: 2px;
    border-radius: 3px;
    border: 2px solid #212121;
    background-color: #121212;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 0;

    .kf-pub-switch-input {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 100%;
      color: #aaa;
      text-align: center;
      border-radius: 3px;
      transition: all 0.3s;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      z-index: 0;
    }

    .kf-pub-switch-input:hover {
      color: #fff;
      cursor: pointer;
    }

    .kf-pub-switch-input-active {
      color: #fff;
      transition: left 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
    }

    .kf-pub-switch-label {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding: 0 5px;
      font-size: 12px;
    }
  }

  .cool-switch-input-active {
    display: block;
    height: calc(100% - 3px);
    color: #fff;
    background-color: #2978ec;
    border-radius: 3px;
    position: absolute;
    transition: left 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
    z-index: -1;
  }
}
</style>
