<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    selected: boolean
    data?: anyObj
  }>(),
  {
    selected: false,
    data: () => ({}),
  },
)
const emits = defineEmits(['update:selected', 'change'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const selectRight = `url(${OSS_URL}/urm/option_right.svg) 100%/contain no-repeat`
const selectedRight = `url(${OSS_URL}/urm/option_selected_right.svg) 100%/contain no-repeat`
const initOptionTl = `url(${OSS_URL}/urm/init_option_tl.svg) 100%/cover no-repeat`
const initOptionSelectedTl = `url(${OSS_URL}/urm/init_option_selected_tl.svg) 100%/cover no-repeat`
const initOptionSelectedTr = `${OSS_URL}/urm/init_option_selected_tr.svg`

const isSelect = computed({
  get() {
    return props.selected
  },
  set(val) {
    emits('update:selected', val)
  },
})

function onChange() {
  emits('change', isSelect.value, props.data)
  isSelect.value = !isSelect.value
}
</script>

<template>
  <div
    :class="{
      option: true,
      'is-select': isSelect,
    }"
    @click="onChange"
  >
    <span><slot></slot></span>
    <img v-show="isSelect" :src="initOptionSelectedTr" />
  </div>
</template>

<style lang="scss" scoped>
.option {
  width: 18vh;
  height: 10.33vh;
  font-family: $font-special;
  font-size: 3.33vh;
  line-height: 1.5em;
  text-align: center;
  color: #2d39bc;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius-5;
  box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  img {
    width: 6.67vh;
    height: 4vh;
    position: absolute;
    top: 0;
    right: 0;
  }
  span {
    z-index: 1;
  }

  &::before {
    content: '';
    display: block;
    width: 12.67vh;
    height: 4.08vh;
    position: absolute;
    top: 0;
    left: 0;
    background: v-bind(initOptionTl);
  }

  &::after {
    content: '';
    display: block;
    width: 9.83vh;
    height: 11.5vh;
    position: absolute;
    right: 0;
    bottom: -4.17vh;
    opacity: 0.85;
    background: v-bind(selectRight);
  }

  &.is-select {
    color: #a13c00;
    border: 0.33vh solid #fff01f;

    &::before {
      background: v-bind(initOptionSelectedTl);
    }

    &::after {
      right: -4px;
      bottom: -4.5vh;
      background: v-bind(selectedRight);
    }
  }
}
</style>
