import { computed, defineComponent, inject, onMounted, reactive } from "vue";
import { Select } from "ant-design-vue";
import { css } from "@linaria/core";
import { Form } from "queenjs/ui";
import { Input } from "ant-design-vue";
import Upload from "./components/upload";
import UploadFile from "./components/uploadFile";
import _ from "lodash";
import UploadModel from "./components/uploadModel";
import UploadMat from "./components/uploadMat";
import DescEditor from "./components/descEditor";

export default defineComponent({
  setup(props: any) {
    const state = reactive({
      type: "",
    });

    const formCtx = inject("formContext") as any;
    onMounted(() => {
      let type = _.get(formCtx.state, "type");
      state.type = type || "";
    });

    return () => {
      return (
        <div class={modalStyle}>
          <div class="content">
            <Form.Item
              path="thumbnail"
              label="封面图"
              error={"封面图不能为空"}
              child={(value, emitChange, error, values) => (
                <Upload
                  value={value ? [value] : undefined}
                  onChange={(v) => {
                    emitChange(v ? v[0] : v);
                  }}
                />
              )}
            />
            <Form.Item
              path="name"
              label="文物名称"
              error={"名称不能为空"}
              child={(value, emitChange, error, values) => (
                <Input
                  value={value}
                  onChange={(v) => {
                    emitChange(v.target.value);
                  }}
                />
              )}
            />
            <Form.Item
              path="subName"
              label="副标题"
              required={false}
              child={(value, emitChange, error, values) => (
                <Input
                  value={value}
                  onChange={(v) => {
                    emitChange(v.target.value);
                  }}
                />
              )}
            />
            <Form.Item
              path="type"
              label="展示形式"
              error={"展示形式不能为空"}
              child={(value, emitChange, error, values) => (
                <Select
                  value={value}
                  style={{ width: "100%" }}
                  placeholder="请选择展示形式"
                  onChange={(value) => {
                    state.type = value as string;
                    emitChange(value);
                  }}
                >
                  <Select.Option value={"img"}>图片</Select.Option>
                  <Select.Option value={"video"}>视频</Select.Option>
                  <Select.Option value={"3D"}>3D模型</Select.Option>
                </Select>
              )}
            />

            {state.type == "img" && (
              <Form.Item
                key={"images"}
                path="images"
                label="轮播图"
                required={false}
                child={(value, emitChange, error, values) => (
                  <Upload
                    value={value}
                    maxNumber={6}
                    onChange={(v) => {
                      emitChange(v);
                    }}
                  />
                )}
              />
            )}
            {state.type == "video" && (
              <Form.Item
                key={"video"}
                path="videoUrl"
                label="视频地址"
                error={"视频地址不能为空"}
                child={(value, emitChange, error, values) => (
                  <UploadFile
                    value={value}
                    onChange={(v) => {
                      emitChange(v);
                    }}
                  />
                )}
              />
            )}
            {state.type == "3D" && (
              <Form.Item
                key={"3D"}
                path="meshId"
                label="模型Id"
                error={"模型Id不能为空"}
                child={(value, emitChange, error, values) => (
                  <Input
                    value={value}
                    onChange={(v) => {
                      emitChange(v.target.value);
                    }}
                  />
                )}
              />
            )}
            <Form.Item
              path="desc"
              label="文物简介"
              required={false}
              child={(value, emitChange, error, values) => (
                <DescEditor value={value} onChange={emitChange} />
                // <Input.TextArea
                //   placeholder={"请输入文物简介"}
                //   value={value}
                //   onChange={(e) => {
                //     emitChange(e.target.value);
                //   }}
                // />
              )}
            />
          </div>
        </div>
      );
    };
  },
});

const modalStyle = css`
  width: 100%;
  .content {
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: left;
  }
`;
