<!--
 * 投币弹框
-->
<script setup lang="ts">
import { ref } from 'vue';

defineExpose({
  openModel,
});
const emit = defineEmits<{
  (e: 'onOk', value: any): void;
}>();

const show = ref(false);
const amount = ref(1);
const giveLike = ref(true);

function openModel() {
  show.value = true;
}
function onClose() {
  show.value = false;
}
function onOk() {
  emit('onOk', amount);
}
</script>
<template>
  <q-dialog v-model="show" persistent>
    <q-card style="width: 500px; max-width: 500px">
      <q-card-section class="row items-center q-pb-none">
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup @click="onClose" />
      </q-card-section>
      <div class="amount-title row justify-center">
        给UP主投上<span class="amount-box">{{ amount }}</span
        >枚硬币
      </div>

      <q-card-section style="padding-bottom: 8px">
        <div class="content" style="width: 100%">
          <div class="img-content" style="height: 300px; width: 100%">
            <div class="img-cont-box">
              <div
                class="img-main-box img-main-box-left"
                :class="[
                  amount === 1
                    ? 'img-main-box-active'
                    : 'img-main-box-unactive',
                ]"
                @click="amount = 1"
              >
                <div class="background-left"></div>
              </div>
            </div>
            <div class="img-cont-box">
              <div
                class="img-main-box img-main-box-right"
                :class="[
                  amount === 2
                    ? 'img-main-box-active'
                    : 'img-main-box-unactive',
                ]"
                @click="amount = 2"
              >
                <div class="background-right"></div>
              </div>
            </div>
          </div>
          <div>
            <q-checkbox v-model="giveLike" label="同时点赞内容" />
          </div>
          <div class="row justify-center">
            <q-btn unelevated color="primary" label="确定" @click="onOk" />
          </div>
          <div class="experience-box row justify-center">
            经验值+10（今日20/50）
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.content {
  //   background-color: pink;
}
.amount-title {
  font-size: 16px;
}
.amount-box {
  color: $primary;
  font-size: 32px;
  margin: 0 4px;
  transform: translateY(-18px);
}
.img-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.img-cont-box {
  padding: 16px;
}
.img-main-box {
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  > div {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  &::before {
    position: absolute;
    top: 12px;
    left: 15px;
    font-size: 14px;
  }
  &:hover {
    cursor: pointer;
  }
}
.img-main-box-active {
  border: 2px solid $primary;
  color: $primary;
}
.img-main-box-unactive {
  border: 2px dashed rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.2);
  > div {
    filter: grayscale(1);
  }
  &:hover {
    border: 2px dashed $primary;
    color: $primary;
  }
}
.img-main-box-left {
  &::before {
    content: '1硬币';
  }
}
.background-left {
  background: url('../icons/one.svg');
}
.img-main-box-right {
  &::before {
    content: '2硬币';
  }
}
.background-right {
  background: url('../icons/two.svg');
}
.experience-box {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 6px;
  margin-bottom: 16px;
}
</style>