import { css } from "@linaria/core";
import { isPc } from "@queenjs/utils";
import { onMounted, ref } from "vue";
import { any } from "vue-types";
import { options } from ".";
import { Text } from "../..";
import { createUIComp } from "../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    value: any<typeof options.value>().isRequired,
  },
  setup(props) {
    const elRef = ref();

    onMounted(() => {
      elRef.value.style.height = isPc()
        ? "12.8rem"
        : document.documentElement.clientHeight + "px";
    });

    return () => {
      return (
        <div class={compStyle} ref={elRef}>
          <Text.Component
            class="title"
            v-model={[props.value.title, "value"]}
          />
          <div class="arrow">↓</div>
        </div>
      );
    };
  },
});

const compStyle = css`
  .title {
    margin-top: 1.4rem;
  }
  .arrow {
    position: absolute;
    left: 50%;
    bottom: 0.42rem;
    width: 0.7rem;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: center;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
  }
`;