import { css } from "@linaria/core";
import { defineComponent, reactive } from "vue";

import { useList } from "@/modules/list";
import { Button, Card, Form, Input, Radio, InputNumber } from "ant-design-vue";
const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
export default defineComponent({
  setup() {
    const { store, showModal } = useList();
    const formState = reactive({
      ...store.animate,
    });
    const submit = () => {
      console.log(1);
    };
    return () => (
      <div class={ViewStyle}>
        <Form {...layout} class={"setting_form"} onSubmit={submit}>
          <Form.Item label="滚动方向">
            <Radio.Group v-model={[formState.scrollType, "value"]}>
              <Radio.Button value="horizontal">横向</Radio.Button>
              <Radio.Button value="vertical">纵向</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="滚动条数">
            <InputNumber
              v-model={[formState.totalLines, "value"]}
              min={1}
              step={1}
            />
          </Form.Item>
          <Form.Item label="滚动速度">
            <InputNumber
              v-model={[formState.scrollSpeed, "value"]}
              min={1}
              step={1}
            />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
            <Button type="primary" htmlType="submit">
              保存设置
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  },
});

const ViewStyle = css`
  padding: 20px;
  .setting_form {
    width: 300px;
  }
`;