import Modal from "@/components/Provider/Modal";
import { useArticle } from "@/modules";
import UploadImage from "@/modules/components/UploadImage";
import { css } from "@linaria/core";
import {
  Button,
  Form,
  FormInstance,
  Input,
  RadioButton,
  RadioGroup,
} from "ant-design-vue";
import { RightOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, ref, nextTick, onMounted } from "vue";
import { object } from "vue-types";
import ArticleList from "./ArticleList";
import { uploader } from "@/modules/objects";

export default defineComponent({
  props: {
    data: object<BannerItem>(),
  },
  setup(props) {
    const modal = Modal.use();
    const artStore = useArticle();
    const state = reactive({
      formData: {
        ...{
          aid: "",
          name: "",
          cover: "",
          url: "",
          sort: 0,
          isHome: false,
        },
        ...props.data,
      },
      type: "url",
      article: {} as any,
    });

    const formRef = ref<FormInstance>();
    onMounted(async () => {
      if (state.formData.aid) {
        state.type = "article";
        const res = await artStore.listController.itemDetail(
          state.formData.aid
        );
        state.article = res.result || {};
      }
    });
    const submit = () => {
      formRef.value?.validate().then(async () => {
        await uploader.uploadBlobImages(state.formData);
        modal.submit(state.formData);
      });
    };
    const changeThumb = (v: string) => {
      state.formData.cover = v;
    };
    const selectArt = async () => {
      const res: any = await Modal.show(
        <ArticleList current={state.article} />,
        {
          title: "选择站内文章",
        }
      );
      if (res) {
        state.article = res;
        state.formData.aid = res._id;
        state.formData.name = res.title;
        if (res.cover) {
          state.formData.cover = res.cover;
        }
      }
    };
    return () => {
      return (
        <div>
          <div class={ModalPage}>
            <div class={"form_box"}>
              <Form
                ref={formRef}
                model={state.formData}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
              >
                <RadioGroup
                  class={"radio_g"}
                  value={state.type}
                  buttonStyle="solid"
                  onChange={(e) => {
                    state.type = e.target.value;
                    formRef.value?.resetFields();
                  }}
                >
                  <RadioButton value="url">站外链接</RadioButton>
                  <RadioButton value="article">站内文章</RadioButton>
                </RadioGroup>
                {state.type == "url" && (
                  <Form.Item
                    label={"链接地址"}
                    name={"url"}
                    rules={[
                      {
                        required: true,
                        message: "链接地址不能为空",
                        trigger: "change",
                      },
                    ]}
                  >
                    <Input
                      placeholder={"请输入链接地址"}
                      value={state.formData.url}
                      onChange={(e) => {
                        state.formData.url = e.target.value || "";
                        state.formData.aid = "";
                      }}
                    />
                  </Form.Item>
                )}
                {state.type == "article" && (
                  <Form.Item
                    label={"站内文章"}
                    name={"aid"}
                    rules={[
                      {
                        required: true,
                        message: "请选择站内文章",
                        trigger: "change",
                      },
                    ]}
                  >
                    <div class={"select_inp"} onClick={selectArt}>
                      <Input
                        placeholder={"请选择站内文章"}
                        value={state.article.title}
                        readonly
                        suffix={<RightOutlined style={{ color: "#d9d9d9" }} />}
                      />
                    </div>
                  </Form.Item>
                )}
                <Form.Item
                  label={"轮播名称"}
                  name={"name"}
                  rules={[
                    {
                      required: true,
                      message: "轮播名称不能为空",
                      trigger: "change",
                    },
                  ]}
                >
                  <Input
                    placeholder={"请输入轮播名称"}
                    v-model={[state.formData.name, "value"]}
                  />
                </Form.Item>
                <Form.Item
                  label={"轮播图片"}
                  name={"cover"}
                  rules={[
                    {
                      required: true,
                      message: "请上传轮播图片",
                      trigger: "change",
                    },
                  ]}
                >
                  <UploadImage
                    data={state.formData.cover}
                    text={"上传轮播图"}
                    onChange={changeThumb}
                  ></UploadImage>
                </Form.Item>
              </Form>
            </div>
            <div class={"footer"}>
              <Button type="primary" block onClick={submit}>
                保存
              </Button>
            </div>
          </div>
        </div>
      );
    };
  },
});
const ModalPage = css`
  width: 500px;
  .radio_g {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
  }
  .select_inp {
    cursor: pointer;
    input {
      cursor: pointer;
    }
  }
`;
