import { Toast, Switch, Space, Button } from "@taroify/core";
import { ScrollView, View } from "@tarojs/components";
import "./index.less";
import { Textarea } from "@taroify/core";
import UploadImg from "@/components/UploadImg";
import Taro from "@tarojs/taro";
import { useMemo, useState } from "react";
import { Success } from "@taroify/icons";
import services from "@/services";
import useGlobalStore from "@/store";
/** 建议 */
export default function () {
  const params = Taro.getCurrentInstance().router?.params;
  const { userInfo } = useGlobalStore();
  const [isAnonymity, setIsAnonymity] = useState(false);
  const [imgList, setImgList] = useState<string[]>([]);
  const [content, setContent] = useState("");
  const info = useMemo(() => {
    const type = params?.type;

    switch (type) {
      case "建议":
        return {
          title: "建议",
          desc: "我们非常重视您的宝贵建议",
          placeholder: "请说出您的建议吧",
        };
      case "咨询":
        return {
          title: "咨询",
          desc: "我们十分珍视您的每一次咨询",
          placeholder: "请说出您想要咨询的问题吧",
        };
      case "投诉":
        return {
          title: "投诉",
          desc: "我们极其重视您的每一条投诉",
          placeholder: "请说出您想要投诉的问题吧",
        };
      case "举报":
        return {
          title: "举报",
          desc: "我们高度关注您的每一次举报",
          placeholder: "请说出您想要举报的问题吧",
        };
      default:
        return undefined;
    }
  }, [params]);

  /** 提交 */
  const submit = () => {
    const type =
      params?.type === "投诉"
        ? 1
        : params?.type === "建议"
        ? 2
        : params?.type === "咨询"
        ? 3
        : 4;

    const reqParams = {
      type: type,
      content,
      annex1: imgList?.[0] ?? "",
      annex2: imgList?.[1] ?? "",
      annex3: imgList?.[2] ?? "",
      anonymousFlag: isAnonymity ? 1 : 0,
    };
    /** 校验 */
    if (reqParams.content.length === 0) {
      Taro.showToast({
        title: "请输入内容",
        icon: "none",
      });
      return;
    }
    /** 是否登录 */
    if (userInfo?.id) {
      services.report.submitUserReport(reqParams as any).then((res) => {
        if (res.code === 200) {
          Taro.navigateTo({
            url: "/pages/Success/index?sourceType=report",
          });
        }
      });
    } else {
      Taro.showToast({
        title: "请先登录",
        icon: "none",
      });
    }
  };

  return (
    <ScrollView className="container" scrollY>
      <Toast id="toast" />
      <View className="content">
        <View className="title">{info?.title}</View>
        <View className="decorate"></View>
        <View>{info?.desc}</View>
        <View className="textareaWrap">
          <Textarea
            style={{ height: 100 }}
            limit={200}
            value={content}
            onInput={(e) => setContent(e.detail.value)}
            placeholder={info?.placeholder}
          />
        </View>
        <View className="uploadWrap">
          <UploadImg onChange={setImgList} />
        </View>
        <Space className="publicitySwitch" align="center">
          匿名
          <Switch
            checked={isAnonymity}
            className="custom-color"
            onChange={setIsAnonymity}
            size={16}
          />
        </Space>
        <Button
          icon={<Success />}
          onClick={submit}
          block
          color="primary"
          shape="round"
        >
          提交
        </Button>
      </View>
    </ScrollView>
  );
}
