<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/ProgressBar/NumberPlate.vue
 * @Date: 2022-07-08 08:52:06
 * @Description: 数字板组件
 * @LastEditTime: 2023-02-21 16:45:03
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
const yaTheme = localStorage.getItem("YA_THEME");
interface NumberPlateProps {
  number: string | number;
}

const props = defineProps<NumberPlateProps>();
const getClass = computed(() => {
  if (unref(props.number) == 1) {
    return `number-box number-box-1`
  } else if(unref(props.number) == 2) {
    return `number-box number-box-2`
  } else if(unref(props.number) == 3) {
    return `number-box number-box-3`
  } else {
    return `number-box`
  }
  
  // if (unref(props.number) > 3)
  //   return yaTheme === "light"
  //     ? `number-box number-box-4`
  //     : `number-box number-box-dark number-box-4`;
  // return `number-box number-box-3`;
});
</script>

<template>
  <div :class="getClass">
    <span>{{ number }}</span>
  </div>
</template>

<style scoped lang="scss">
.number-box {
  width: 32px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 160, 202, 0.3);
  // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgBAMAAABQs2O3AAAAIVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt0UjBAAAAC3RSTlMzAC4HJBEpHBgMIMDuLyUAAACpSURBVDjLddO7DcJQEETRJ/6QLX+IoAPoADqADqADuwO7A7sDu1NH7zqZ2XSPtNJoNkWeT1IzG8FNginglOSUgIfcTwLwkmAOOOgLb8BWgyegkvtlZLBLcu6AvQZfQCP3iwD8JFgDzvpCD3AxAjoJVoCLvvAHHDVoATrGTQBMVwBXfaEGuBgBJkaA6wrAdQVQmBgzcF0BuK4AzMsFwMQIcC8HcF0BmJcDDCVuHnykuPw+AAAAAElFTkSuQmCC);
  background-size: 100% 100%;
  font-size: 14px;
  font-family: "DIN";
  font-weight: bold;
  color: #ffffff;
  transform: skewX(30deg);
  span {
    transform: skewX(-30deg);
  }
}

.number-box-dark {
  background: rgba(37, 160, 202, 0.3);
  // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAAXNSR0IArs4c6QAAAbNJREFUSEutlD9IG1Ecx7+/xIRgsBRcCg4dujiotFOHFgqCQx00W+4GYwbp0EuhKNZe6nCLd5FSEXvpEijWgLlsUSh0KAWhU5ciZujg4ODgKEraNLb3Ewv9p/HdL3BvfZ/3/X74Pd4jCJdmODbAphCXYYQqSUjNsG8D+AigS8ILmYM4MBAokM1aiWYy/hlAvzBYhDH8VLU4vxEooBuFFwx/WpQqhIhoreKak2e4UkB/WLjL5G8BiAizBRjtN2PfB2vL1qFSYGLiefLkSmsboBuCVCnCFKXRyor57veBSyegGbYLwJAmizhCyXPzD/5l2wroOWfY9/k9kfqKRKV/ob2v36JDm6/njpUCY08We7obP3cAXO+wQIX7RDRScc0P56ELE9ANp8TgqRDLASLXc81H7TL/E0jnFu4T09ug19Gh3G7sKHazXJ5tKAVSj62riZN4HUBfhwXq0XPkXuXV07NftO36MwE957xh5kyI5WBgqVrMz6gyfwmkjcI4wa+FWQ7gS6LRurW6ajWVAhnD7m2B6gBfC1HgRyQSvbP+cu5TUCZpOdsDIx0EdrbPjld8lpecOQXtsXhlLPRehQAAAABJRU5ErkJggg==);
  background-size: 100% 100%;
}

.number-box-1 {
  background: #B26E30;
  // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAY1BMVEUAAAD/Z2f/W13/W13/W13/W17/XF7/XV3/Xl7/YWH/XWL/YmL/XF7/XF3/W17/W17/XF7/W17/XF3/XF7/W17/XF7/XF3/XV//W13/XF//W17/XWD/XF//XGD/XV3/X1//W11dSUM7AAAAIHRSTlMADPr36+OGUighFgby3tfPx763tK2jmY9+dGpgWUU8M7gCF3AAAACySURBVEjHvdVHDsMwDERRd1uSe+/O/U+ZA0w2HwrM/RsMuCADnfMDZlAfpsDHRgMyUiBTX0TAp6EG9KRArj4nvlPvKuCjQgNWUmBRb2Lgkx8bHEmBQ/1FfKve1STg0YCN+Fm9LckGrQZMpMCu/ia+CXQaEnCr34mf1NsE+NJqwEwKbOof4munAS0JuNQfxI/qw8TzEC+kwOp5iCunAd2bh7j3fGVR8f9XZmLPVzaQAqf6L/0ZsydLwk/MAAAAAElFTkSuQmCC);
  background-size: 100% 100%;
}

.number-box-2 {
  background: #8F994F;
  // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAZlBMVEUAAADyhAHyhAHyhAHyhAHygwLzhwb4gwf/lxf/nSfxhAHxhAHyhAHyhAHxhAHyhAHygwHygwLyhALzhALzhALyhALzhALyhQP0hAPzhAPyhAP0hQTyhAT1hwX1hQryhg3/iBHxgwF6mUrNAAAAIXRSTlMA+Ovj24YoIQsG8s/Hvre0raOZj350amBZVU9FPDMZEw/dsfvHAAAAsElEQVRIx63VRxKEMBBDUTBgk3POc/9LzgG0+mV6/1QqLexAb/2Ba9SnEfCh04CEFEjU2xD4KNWAmhTY1O/EV+qzmCxoNWAkBQb1jixoXg1oSYFF/UF8yRbUuzRgIr5Xf+dkwUcDOlJgVn8SXwR6BQk41c/Ed+ofA3x+a0BPCkzqL+LjTANKEnCoX4hv1b/G8yEeSIFRvQ09F6xIgV39Rnzt+5XZ778y5/uVNaTAqv4Pj1K4tQdkO/gAAAAASUVORK5CYII=);
  background-size: 100% 100%;
}

.number-box-3 {
  background: #6057AE;
  // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAZlBMVEUAAAAAlf8Aov8Alv8Alv8Alv8Alv8Al/8Amv8Anv8AoP8Alf8Alv8Alf8Alf8Alf8Alv8Alv8Alv8Alv8Alv8Alv8Alv8Alf8Alf8Al/8AmP8AmP8Amf8Alv8Amv8AnP8Amf8Alf8oJjyYAAAAIXRSTlMA+grr47aGVyQRBPby3tfPx76to5mPfnRqYE9FPDMrHxm6giTnAAAApklEQVRIx+3Vtw3EMBQE0SPlKe+9uf6bVAEbDaRQzN9gweT/9EV/8AL11gfexBoIyYBQfWyA960GAjIgUr8QX6u3OfDm0MBABvTqzxR4L9FAQwbM6lfiK/WuIIFdAyPxnfore/iDLRkwqd+IL514V5LApgMm4lv1iQd8dmmgIwNG9TvxhdNARQKr+pn45uEPpqcGejJgUH8Y4HOrgZoMWL5T9v4puwHosrjLmuKDbQAAAABJRU5ErkJggg==);
  background-size: 100% 100%;
}
</style>
