import { ScrollView, View, Image, Input } from "@tarojs/components";
import "./index.less";
import bg2 from "@/assets/bg/bg2.png";
import icon4 from "@/assets/icon/icon4.png";
import Taro, { useLoad } from "@tarojs/taro";
import { Button, Toast } from "@taroify/core";
import api from "@/services/core/api";
import { useState } from "react";
import { composeImgUrl } from "@/utils";
import services from "@/services";

export default function Index() {
  const [imgUrl, setImgUrl] = useState("");
  const [originData, setOriginData] = useState<API.TypeOfLegalPerson>();

  const [form, setForm] = useState<any>({});
  useLoad(() => {
    const params = Taro.getCurrentInstance().router?.params;
    if (params) {
      setOriginData(params as unknown as API.TypeOfLegalPerson);
    }
  });
  const chooseImage = () => {
    Taro.chooseImage({
      count: 1,
      success(result) {
        Taro.uploadFile({
          url: api.uploadUrl,
          filePath: result.tempFilePaths[0],
          name: "file",
          success: (res) => {
            if (res.statusCode === 200) {
              const data = JSON.parse(res.data);
              if (data.code === 200) {
                setImgUrl(data.data);
              }
            }
          },
        });
      },
    });
  };

  const onSubmit = () => {
    if (imgUrl.length === 0) {
      Toast.open({
        type: "fail",
        message: "请上传营业执照",
      });
      return;
    }
    if (!form.creditCode || form.creditCode.length === 0) {
      Toast.open({
        type: "fail",
        message: "请输入主体社会信用代码",
      });
      return;
    }
    if (!form.name || form.name.length === 0) {
      Toast.open({
        type: "fail",
        message: "请输入主体名称",
      });
      return;
    }
    if (!form.contact || form.contact.length === 0) {
      Toast.open({
        type: "fail",
        message: "请输入联系人",
      });
      return;
    }
    if (!form.phone || form.phone.length === 0) {
      Toast.open({
        type: "fail",
        message: "请输入联系电话",
      });
      return;
    }
    if (!/^1[3-9][0-9]{9}$/.test(form.phone)) {
      Toast.open({
        type: "fail",
        message: "请输入正确的手机号",
      });
      return;
    }

    const params = {
      name: form.name,
      unifiedSocialCreditCode: form.creditCode,
      contactName: form.contact,
      phone: form.phone,
      attachmentUrl: imgUrl,
      entityTypeId: originData?.id,
      entityTypeName: originData?.name,
    };
    services.login.submitAuthentication(params).then((res) => {
      if (res.code === 200) {
        Taro.showToast({
          title: "认证成功",
          icon: "none",
        });

        setTimeout(() => {
          Taro.navigateBack();
        }, 500);
      } else {
        Taro.showToast({
          title: "认证失败",
          icon: "none",
        });
      }
    });
  };
  return (
    <ScrollView className="container" scrollY>
      <Toast id="toast" />
      <View className="content">
        <View className="title">{originData?.name}</View>
        <View className="decorate"></View>
        <View className="uploadCard" onClick={chooseImage}>
          <View>
            <Image
              src={imgUrl.length > 0 ? composeImgUrl(imgUrl) : bg2}
              className="uploadCard_bg"
            />
            <Image src={icon4} className="uploadCard_icon"></Image>
          </View>
          <View>上传营业执照</View>
        </View>

        <View className="form-item">
          <View className="item-title">主体社会信用代码</View>
          <View>
            <View className="input-wrapper">
              <Input
                className=""
                onInput={(e) => {
                  setForm({
                    ...form,
                    creditCode: e.detail.value,
                  });
                }}
                placeholder="请输入主体社会信用代码"
              ></Input>
            </View>
          </View>
        </View>
        <View className="form-item">
          <View className="item-title">主体名称</View>
          <View>
            <View className="input-wrapper">
              <Input
                className=""
                onInput={(e) => {
                  setForm({
                    ...form,
                    name: e.detail.value,
                  });
                }}
                placeholder="输入公司或个体名称"
              ></Input>
            </View>
          </View>
        </View>
        <View className="form-item">
          <View className="item-title">联系人</View>
          <View>
            <View className="input-wrapper">
              <Input
                className=""
                onInput={(e) => {
                  setForm({
                    ...form,
                    contact: e.detail.value,
                  });
                }}
                placeholder="输入联系人姓名"
              ></Input>
            </View>
          </View>
        </View>
        <View className="form-item">
          <View className="item-title">联系电话</View>
          <View>
            <View className="input-wrapper">
              <Input
                onInput={(e) => {
                  setForm({
                    ...form,
                    phone: e.detail.value,
                  });
                }}
                className=""
                placeholder="输入联系电话"
              ></Input>
            </View>
          </View>
        </View>
        <View className="form-item" style={{ marginBottom: 40 }}>
          <Button color="primary" shape="round" block onClick={onSubmit}>
            提交
          </Button>
        </View>
      </View>
    </ScrollView>
  );
}
