import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
import { defineComponent } from "vue";
import { any } from "vue-types";
import { createColorOpts } from "../../defines/formOpts/createColorOpts";
import { PageMusic } from "./PageMusic";

import { css } from "@linaria/core";
import MusicSelect from "./MusicSelect";
import screen from "./screen";
const styleColumns = (): ColumnItem[] => {
  return [
    {
      label: "背景颜色",
      dataIndex: "layout.background.color",
      ...createColorOpts(true),
    },
    {
      label: "背景音乐",
      dataIndex: "value.music",
      component: MusicSelect,
    },
    // {
    //   label: "页面模式",
    //   dataIndex: "value.pageMode",
    //   component: Select,
    //   props: {
    //     class: "w-full flex-1 overflow-hidden",
    //     options: [{ label: "H5长页", value: "long" }, { label: "翻页", value: "short" }],
    //   },
    // },
    {
      dataIndex: "value.music",
      component: PageMusic,
      isVisible: (value, data) => {
        const music = data?.value?.music || "";
        return music != "";
      },
    },
    {
      component: screen,
    },
  ];
};
export const PageForm = defineComponent({
  props: {
    component: any<DesignComp>().isRequired,
  },
  setup(props) {
    const { actions, helper } = useEditor();
    function changeVal(e: { dataIndex: string; value: any }) {
      actions.updateCompData(props.component, e.dataIndex, e.value);
    }

    return () => {
      return (
        <div class={formStyle}>
          <div class="text-white">作品属性</div>
          <FormUI
            data={props.component}
            columns={styleColumns()}
            onChange={changeVal}
          />
        </div>
      );
    };
  },
});

const formStyle = css`
  .item_label {
    color: #a9abaf !important;
  }
  & > div {
    padding: 0;
  }
`;