<template>
  <label class="checkbox" :style="checkboxStyle" :class="{ checked }">
    <span class="checkbox-symbol">
      <svg class="icon-checkbox" :class="iconStyle" :width="iconStyle.width" :height="iconStyle.height" viewBox="0 0 28 28">
        <path d="M4 14l8 7L24 7"></path>
      </svg>
    </span>
  </label>
</template>

<script setup lang="ts">
  import type { CSSProperties } from 'vue';

  const props = defineProps({
    /** 按钮是否选中 */
    checked: { type: Boolean, default: false },
    /** 按钮的尺寸 */
    size: { type: Number, default: 24 },
  });

  const checkboxStyle = computed<CSSProperties>(() => ({
    width: `${props.size}px`,
    height: `${props.size}px`,
  }));
  const iconStyle = computed<CSSProperties>(() => ({
    width: `${props.size * 0.7}px`,
    height: `${props.size * 0.7}px`,
  }));
</script>

<style lang="scss" scoped>
  .checkbox {
    --border-width: 1px;
    --c-bg: #ffffff;
    --c-checked-bg: #ffffff;
    --c-primary: #749cf1;
    --c-border-color: #e5e5e5;
    --c-checked-border-color: #ffffff;
    --t-base: 0.4s;
    --t-fast: 0.2s;
    --e-in: ease-in;
    --e-out: cubic-bezier(0.11, 0.29, 0.18, 0.98);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--c-bg);
    border: var(--border-width) solid var(--c-border-color);
    border-radius: 50%;

    .checkbox-symbol {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      .icon-checkbox {
        display: inline-block;
        margin: auto;
        color: var(--c-primary);
        fill: none;
        stroke: currentcolor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
        stroke-width: 4;

        path {
          stroke-dasharray: 30px, 31px;
          stroke-dashoffset: 31px;
          transition: stroke-dashoffset var(--t-fast) var(--e-in);
        }
      }
    }

    &.checked {
      background: var(--c-checked-bg);
      border-color: var(--c-checked-border-color);

      .icon-checkbox path {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset var(--t-base) var(--e-out);
      }
    }
  }
</style>
