import { useEditor } from "@/modules/editor"
import { Select } from "ant-design-vue"
import { defineComponent } from "vue"

export default defineComponent({
    setup(props, ctx) {
        const editor = useEditor();
        const ctrl = editor.controls.screenCtrl;

        return ()=>{
            return (
                <div class="px-16px">
                    <div class="flex items-center">
                        <span class="w-70px">屏幕类型</span>
                        <Select value={ctrl.state.screen.useFor} onChange={(v)=>{
                            const s = {useFor: v, pageMode: ctrl.state.screen.pageMode, pageSizeType: ctrl.state.screen.pageSizeType}
                            ctrl.saveScreenPage();
                            ctrl.state.setScreen(s as any);

                        }} class = "flex-1 overflow-hidden" options={[{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }]}  />
                    </div>
                    <div  class="flex items-center mt-5px">
                        <span class="w-70px">页面模式</span>
                        <Select onChange={(v)=>{
                            ctrl.saveScreenPage();
                            const s = {useFor: ctrl.state.screen.useFor, pageMode:v, pageSizeType: ctrl.state.screen.pageSizeType} 
                            if( v == "long") {
                                s.pageSizeType = "normal";
                            }
                            ctrl.state.setScreen(s as any);
                            editor.controls.editorCtrl.autoInScreen();

                        }} value={ctrl.state.screen.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "长页", value: "long" }, { label: "翻页", value: "short" }]}  />
                    </div>
                    {
                        ctrl.state.screen.pageMode == "short" && <div  class="flex items-center mt-5px">
                           <span class="w-70px">屏幕长度</span>
                           <Select onChange={(v)=>{
                               ctrl.saveScreenPage();
                               const s = {useFor: ctrl.state.screen.useFor, pageMode:ctrl.state.screen.pageMode, pageSizeType: v}
                               ctrl.state.setScreen(s as any);
                           }} value={ctrl.state.screen.pageSizeType} class = "flex-1 overflow-hidden" options={[{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}]}  />
                       </div>
                    }
                 
                </div>
            )
        }
    },
})