import { useEditor } from "@/modules/editor";
import { css, cx } from "@linaria/core";
import { watch } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { Text } from "../../../basicUI";
import { createUIComp } from "../../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { helper } = useEditor();
    const { value } = useCompData(props.compId);

    watch(
      () => [value.columns],
      () => {
        const { columns, list } = value;
        const offset = columns - list.length;
        if (offset > 0) {
          Array.from({ length: offset }, () => {
            list.push({ label: "标题", content: "内容" });
          });
        } else {
          list.splice(columns, offset * -1);
        }
      }
    );

    return () => (
      <div class={rootStyles}>
        {value.list.map((d) => (
          <div
            class="flex items-center text-primary px-0.1rem"
            style={{
              margin: helper.designToNaturalSize(value.gap),
            }}
          >
            <div
              class={cx(
                "py-0.08rem px-0.1rem",
                value.showBackground ? "label text-white" : "text-secondary"
              )}
              style={{
                width: helper.designToNaturalSize(value.width),
              }}
            >
              <Text.Component
                v-model={[d.label, "value"]}
                class="text text-center"
              />
            </div>
            <Text.Component
              v-model={[d.content, "value"]}
              class="flex-1 ml-0.3rem"
            />
          </div>
        ))}
      </div>
    );
  },
});

const rootStyles = css`
  .label {
    position: relative;
    z-index: 1;
    .text {
      position: relative;
      z-index: 1;
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 4%;
      width: 92%;
      height: 100%;
      background-color: #333;
      transform: skewX(347deg);
      z-index: 0;
    }
  }
`;