<script setup lang="ts">
import { toRefs, ref, watch } from 'vue';
import LightIcon from './LightIcon.vue';
import DarkIcon from './DarkIcon.vue';

const props = defineProps({
  mode: {
    type: String,
    required: false,
    default: 'light',
  },
  customClass: {
    type: String,
    required: false,
    default: '',
  },
  customId: {
    type: String,
    required: false,
    default: '',
  },
});
const { mode, customClass } = toRefs(props);
const emits = defineEmits(['change']);
const checked = ref('light');

function change(value: string) {
  if (checked.value === value) {
    return;
  }
  emits('change', value);
  checked.value = value;
}
watch(mode, newVal => {
  checked.value = newVal;
});
</script>

<template>
  <div :id="customId" class="change-mode-btns" :class="customClass">
    <div
      class="item light"
      :class="checked === 'light' && 'check-mode-item'"
      @click="change('light')"
    >
      <div class="inner-light inner">
        <el-icon size="16px">
          <LightIcon />
        </el-icon>
        <div class="text">亮色模式</div>
      </div>
    </div>

    <div class="item dark" :class="checked === 'dark' && 'check-mode-item'" @click="change('dark')">
      <div class="inner-dark inner">
        <el-icon size="16px">
          <DarkIcon />
        </el-icon>
        <div class="text">暗色模式</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.change-mode-btns {
  display: flex;
  align-items: center;

  .item {
    padding: 7px;
    margin-left: 16px;
    cursor: pointer;
    border-radius: 2px;
    background-color: transparent;
    .inner {
      width: 92px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 2px;
    }
    .inner-light {
      background: #f4f6fa;
    }
    .inner-dark {
      background: #2a2f37;
    }

    .text {
      margin-top: 4px;
    }
    &:hover {
      padding: 6px;
      border: 2px solid var(--o-color-primary-secondary);
    }
  }

  .light {
    margin-left: 0;
    border: 1px solid #576372;
    .text {
      color: rgba(96, 107, 123, 1);
    }
  }

  .dark {
    border: 1px solid #c3cedf;

    .text,
    .el-icon {
      color: rgba(241, 241, 241, 1);
    }
  }

  .check-mode-item {
    padding: 6px;
    border: 2px solid var(--o-color-primary);
  }
}
</style>
