"use client";

import React, {
  useState,
  useRef,
  useEffect,
  useCallback,
  useMemo,
  Fragment,
} from "react";
import {
  Toast,
  Space,
  Radio,
  Button,
  Picker,
  Selector,
  TextArea,
  Avatar,
  Divider,
  Image,
  Mask,
  SpinLoading,
} from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
  faSortDown,
  faAngleRight,
  faInfoCircle,
  faL,
} from "@fortawesome/free-solid-svg-icons";
import OwnInput from "@/components/OwnInput";
import requireAPI from "@/utils/requireAPI";
import { get } from "@/utils/storeInfo";
import UploadImgs from "@/components/UploadImgs";
import { multiUploadImage } from "@/utils/upload";
import { getVideoBase64 } from "@/utils/tools";
const constellations = [
  { label: "白羊座", value: "白羊座" },
  { label: "金牛座", value: "金牛座" },
  { label: "双子座", value: "双子座" },
  { label: "巨蟹座", value: "巨蟹座" },
  { label: "狮子座", value: "狮子座" },
  { label: "处女座", value: "处女座" },
  { label: "天秤座", value: "天秤座" },
  { label: "天蝎座", value: "天蝎座" },
  { label: "射手座", value: "射手座" },
  { label: "摩羯座", value: "摩羯座" },
  { label: "水瓶座", value: "水瓶座" },
  { label: "双鱼座", value: "双鱼座" },
];
const provinces = [
  { label: "北京市", value: "北京市" },
  { label: "天津市", value: "天津市" },
  { label: "河北省", value: "河北省" },
  { label: "山西省", value: "山西省" },
  { label: "内蒙古自治区", value: "内蒙古自治区" },
  { label: "辽宁省", value: "辽宁省" },
  { label: "吉林省", value: "吉林省" },
  { label: "黑龙江省", value: "黑龙江省" },
  { label: "上海市", value: "上海市" },
  { label: "江苏省", value: "江苏省" },
  { label: "浙江省", value: "浙江省" },
  { label: "安徽省", value: "安徽省" },
  { label: "福建省", value: "福建省" },
  { label: "江西省", value: "江西省" },
  { label: "山东省", value: "山东省" },
  { label: "河南省", value: "河南省" },
  { label: "湖北省", value: "湖北省" },
  { label: "湖南省", value: "湖南省" },
  { label: "广东省", value: "广东省" },
  { label: "广西壮族自治区", value: "广西壮族自治区" },
  { label: "海南省", value: "海南省" },
  { label: "重庆市", value: "重庆市" },
  { label: "四川省", value: "四川省" },
  { label: "贵州省", value: "贵州省" },
  { label: "云南省", value: "云南省" },
  { label: "西藏自治区", value: "西藏自治区" },
  { label: "陕西省", value: "陕西省" },
  { label: "甘肃省", value: "甘肃省" },
  { label: "青海省", value: "青海省" },
  { label: "宁夏回族自治区", value: "宁夏回族自治区" },
  { label: "新疆维吾尔自治区", value: "新疆维吾尔自治区" },
  { label: "台湾省", value: "台湾省" },
  { label: "香港特别行政区", value: "香港特别行政区" },
  { label: "澳门特别行政区", value: "澳门特别行政区" },
];
export default function CompleteStreamerInformation() {
  const router = useRouter();
  const ref = useRef(null);
  const [frameImageUrl, setFrameImageUrl] = useState(null);
  const [isWaitingReview, setIsWaitingReview] = useState(false);
  const [formData, setFormData] = useState({
    wechatPrice: 0,
    gender: [""],
    age: [""],
    height: [""],
    weight: [""],
    constellation: [""],
    province: [""],
    tags: [],
    info: "",
    autoResponse: "",
    wechat: "",
    wechatAddWay: 1,
    fans: 0,
    imageAssets: [],
    displayImage: [],
    displayVideo: [],
  });
  const [spacePriceAble, setSpacePriceAble] = useState(false);
  // const [wechatAddWay, setWechatAddWay] = useState("0");
  const [data, setData] = useState({});
  //正在提交状态
  const [isSubmitting, setIsSubmitting] = useState(false);
  //生成年龄、身高、体重、胸围、腰围、臀围、星座、省份数组
  const generateItems = useCallback((min, max) => {
    const items = [];
    for (let i = min; i <= max; i++) {
      items.push({ label: i.toString(), value: i.toString() });
    }
    return items;
  }, []);
  const ages = useMemo(() => generateItems(18, 60), []);
  const heights = useMemo(() => generateItems(140, 200), []);
  const weights = useMemo(() => generateItems(35, 100), []);
  //控制填写微信的输入框是否出现1不出现，0出现
  const [wechatInputShow, setWechatInputShow] = useState(1);
  //展示旧相册图片组件
  const [oldPhotos, setOldPhotos] = useState([]);
  useEffect(() => {
    getData();
  }, []);
  useEffect(() => {
    // console.log("setFormData", data?.streamer);

    if (data?.streamer?.tag) {
      const {
        fans,
        wechat_coin_price,
        gender,
        age,
        height,
        weight,
        constellation,
        city,
        tag,
        bio,
        auto_response_message,
        wechat_lock_type,
        wechat_contact,
        cover,
        shorts,
      } = data?.streamer;
      setFormData((old) => ({
        ...old,
        fans,
        wechatPrice: wechat_coin_price / 10,
        gender: [`${gender}`],
        age: [`${age}`],
        height: [`${height}`],
        weight: [`${weight}`],
        constellation: [`${constellation}`],
        province: [`${city}`],
        tags: tag,
        info: bio,
        autoResponse: auto_response_message,
        wechatAddWay: wechat_lock_type,
        wechat: wechat_contact,

        displayImage: [
          {
            notChanged: true,
            image_ids: cover.image_ids,
            url: cover.images[0].urls[0],
          },
        ],
        displayVideo: [
          {
            notChanged: true,
            video_ids: shorts?.video_ids,
            url: shorts?.videos[0]?.cover_urls[0],
          },
        ],
      }));
    }
  }, [data]);
  useEffect(() => {
    setFormData((old) => ({ ...old, imageAssets: oldPhotos }));
  }, [oldPhotos]);
  const superSingles = [
    { key: 1, text: "主动添加对方" },
    { key: 0, text: "向对方展示微信" },
  ];
  const [fieldNamesOptions, setFieldNamesOptions] = useState([]);
  const ListItemWithCheckbox = ({ superSingle }) => {
    const checkboxRef = useRef(null);
    return (
      <li
        className="mt-4"
        // onClick={() => {
        //   checkboxRef.current?.toggle();
        // }}
      >
        <div onClick={(e) => e.stopPropagation()}>
          <Radio value={superSingle.key}>{superSingle.text}</Radio>
        </div>
      </li>
    );
  };
  const getData = async () => {
    setIsSubmitting(true);
    const account = await get("account");
    try {
      // //获取所有的标签
      const allTags = await requireAPI("POST", "/api/streamer_tag/list", {});
      if (allTags.ret === -1) {
        Toast.show({
          icon: "fail",
          content: allTags.msg,
          position: "top",
        });
        return;
      }
      const tagNamesOptions = Object.values(allTags.data)?.map(
        (item, index) => ({
          labelT: item,
          valueT: item,
        })
      );
      setFieldNamesOptions(tagNamesOptions);
      //获取当前审批状态
      const statusData = await requireAPI(
        "POST",
        "/api/streamer_auth_approval/get_statuses",
        {}
      );
      if (statusData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: statusData.msg,
          position: "top",
        });
        return;
      }

      if (statusData?.data?.details_status === 0) setIsWaitingReview(true);
      if (statusData?.data?.details_status !== 2) {
        setData({ ...account, streamer: {} });
        return;
      }
      //获取已填信息
      const _data = await requireAPI(
        "POST",
        "/api/streamer_auth_approval_his/list_details",
        {}
      );
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }

      setData({ ...account, streamer: _data.data.list[0] });
      setWechatInputShow(_data.data.list[0].wechat_lock_type);
      if (_data.data.list[0]) {
        setFormData((old) => ({
          ...old,
          displayImage: [
            {
              notChanged: true,
              image_ids: _data.data.list[0].cover.image_ids,
              url: _data.data.list[0].cover.images[0].urls[0],
            },
          ],
          displayVideo: [
            {
              notChanged: true,
              video_ids: _data.data.list[0].shorts?.video_ids,
              url: _data.data.list[0].shorts?.videos[0]?.cover_urls[0],
            },
          ],
        }));
        setOldPhotos(
          _data.data.list[0].album.images.map((it) => ({
            id: it.id,
            url: it.urls[0],
          }))
        );
      }

      // setIsloading(false);
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };
  const handSubmit = async (values) => {
    const account = await get("account");
    const {
      fans,
      gender,
      wechatAddWay,
      wechatPrice,
      info,
      age,
      height,
      weight,
      constellation,
      province,
      autoResponse,
      tags,
      wechat,
      imageAssets,
      displayImage,
      displayVideo,
    } = values;
    if (
      !fans ||
      !gender ||
      //   !wechatAddWay ||
      !wechatPrice ||
      !info ||
      !age ||
      !height ||
      !weight ||
      !constellation ||
      !province ||
      !autoResponse ||
      tags.length === 0 ||
      displayImage.length === 0 ||
      displayVideo.length === 0
    ) {
      Toast.show({
        icon: "fail",
        content: "请完善信息后提交",
        position: "top",
      });
      return;
    }
    if (isNaN(fans) || fans < 1) {
      Toast.show({
        icon: "fail",
        content: "请输入有效的全网粉丝量（大于等于1的整数）",
        position: "top",
      });
      return;
    }
    const price = parseInt(wechatPrice, 10);
    if (isNaN(price) || price < 1) {
      Toast.show({
        icon: "fail",
        content: "请输入有效的微信价格（大于等于1的整数）",
        position: "top",
      });
      return;
    }
    if (wechatAddWay === 0 && wechat.trim() == "") {
      Toast.show({
        icon: "fail",
        content: "请填写微信号",
        position: "top",
      });
      return;
    }
    //相册不得低于2张
    if (imageAssets.length < 2) {
      Toast.show({
        icon: "fail",
        content: "相册至少需要上传2张照片哦！",
        position: "top",
      });
      return;
    }
    //相册不得超过9张
    if (imageAssets.length > 9) {
      Toast.show({
        icon: "fail",
        content: "相册最多只能上传9张照片哦！",
        position: "top",
      });
      return;
    }
    setIsSubmitting(true);
    const cover =
      displayImage[0]?.image_ids?.length > 0
        ? displayImage[0]
        : await multiUploadImage(displayImage[0].file, 1);
    const shorts =
      displayVideo[0]?.video_ids?.length > 0
        ? displayVideo[0]
        : await multiUploadImage(displayVideo[0].file, 2);
    const newMedia = imageAssets.filter((it) => it.id == undefined);
    const media = await multiUploadImage(newMedia, 1);
    const album = {
      image_ids: [
        ...imageAssets.filter((it) => it.id != undefined).map((it) => it.id),
        ...media.image_ids,
      ],
    };
    if (
      !cover.image_ids.length ||
      !shorts.video_ids.length ||
      !album.image_ids.length
    ) {
      Toast.show({
        icon: "fail",
        content: "上传失败，请联系客服进行上传",
        position: "top",
      });
      setIsSubmitting(false);
      return;
    }
    //上传表单
    const body = {
      mid: account?.mid,
      gender: parseInt(gender[0], 10),
      wechat_contact: wechat,
      bio: info,
      album: album,
      age: parseInt(age[0], 10),
      height: parseInt(height[0], 10),
      weight: parseInt(weight[0], 10),
      constellation: constellation[0],
      city: province[0],
      tag: tags,
      wechat_lock_type: wechatAddWay,
      fans: parseInt(fans, 10),
      wechat_coin_price: parseInt(wechatPrice, 10) * 10,
      auto_response_message: autoResponse,
      cover: cover,
      shorts: shorts,
    };
    // console.log("formData", body);
    try {
      const streamerData = await requireAPI(
        "POST",
        "/api/streamer_auth_approval/create_details",
        {
          body,
        },
        false,
        100000
      );
      if (streamerData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: streamerData.msg,
          position: "top",
        });
        return;
      }
      //提交成功后toast提示并返回“我的”页面
      Toast.show({
        icon: "success",
        content: "提交成功，请耐心等待审核",
        position: "top",
      });
      router.back();
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };
  const handleUploadImage = async (e, type) => {
    let file = e.target.files[0];
    if (!file) return;
    if (type == 1) {
      setFormData((old) => ({
        ...old,
        displayImage: [
          {
            url: URL.createObjectURL(file),
            file: Array.from(e.target.files),
          },
        ],
      }));
    } else {
      const url = URL.createObjectURL(file);
      getVideoBase64(url).then((src) => {
        setFrameImageUrl(src);
        setFormData((old) => ({
          ...old,
          displayVideo: [
            {
              url: src,
              file: Array.from(e.target.files),
            },
          ],
        }));
      });
    }
  };
  //审核中的情况
  if (isWaitingReview) {
    return (
      <div>
        {/* 头部标题 */}
        <div className="p-4 fixed top-0 z-10 w-full bg-black">
          <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
            <FontAwesomeIcon
              icon={faAngleLeft}
              style={{ maxWidth: "12px" }}
              size="xl"
              onClick={() => {
                router.back();
              }}
            />
          </div>
          <p className="text-base text-center leading-9">完善资料</p>
        </div>
        {/* 内容 */}
        <div className="pt-16 p-4 flex justify-center">
          <div className="flex flex-col items-center p-4 mt-16">
            {/* <Icon
          name="information-circle"
          type="ionicon"
          color="#27F5B7"
          size={100}
        /> */}
            <FontAwesomeIcon
              icon={faInfoCircle}
              color="#27F5B7"
              style={{ maxWidth: "100px", width: "100px", height: "100px" }}
              //   size="xl"
            />
            <span className="text-2xl mt-4 font-medium">
              正在审核中，请耐心等待
            </span>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div>
      {/* 头部标题 */}
      <div className="p-4 fixed top-0 z-10 w-full bg-black">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">完善资料</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        {data.streamer?.remarks && (
          <div className="mb-4">
            <div className="p-4 rounded-2xl bg-[#FFFFFF1A]">
              <p className="text-sm font-medium">
                <span className="text-[#F53030]">驳回原因：</span>
                {data.streamer?.remarks}
              </p>
            </div>
          </div>
        )}
        <div>
          <div className="flex justify-between items-center h-[40px]">
            <p className="text-sm">
              <span>头像（需在“我的”修改）</span>
              <span className="text-[#f00]">*</span>
            </p>
            <Avatar
              src={data?.avatar?.images[0]?.urls[0]}
              fit="cover"
              style={{ "--border-radius": "100px", "--size": "32px" }}
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>昵称（需在“我的”修改）</span>
              <span className="text-[#f00]">*</span>
            </p>
            <span>{data?.name}</span>
          </div>
        </div>

        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>性别</span>
              <span className="text-[#f00]">*</span>
            </p>
            <Picker
              columns={[
                [
                  { label: "女", value: "1" },
                  { label: "男", value: "0" },
                ],
              ]}
              value={formData.gender}
              onConfirm={(v) => {
                setFormData((old) => ({ ...old, gender: v }));
              }}
            >
              {(items, { open }) => {
                return (
                  <Space
                    align="center"
                    direction="horizontal"
                    justify="center"
                    onClick={open}
                  >
                    {items.every((item) => item === null)
                      ? "未选择"
                      : items.map((item) => item?.label ?? "未选择").join("")}
                    <FontAwesomeIcon
                      icon={faSortDown}
                      style={{ maxWidth: "12px", marginBottom: 6 }}
                      size="lg"
                    />
                  </Space>
                );
              }}
            </Picker>
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>年龄（岁）</span>
              <span className="text-[#f00]">*</span>
            </p>
            <Picker
              columns={[ages]}
              value={formData.age}
              onConfirm={(v) => {
                setFormData((old) => ({ ...old, age: v }));
              }}
            >
              {(items, { open }) => {
                return (
                  <Space
                    align="center"
                    direction="horizontal"
                    justify="center"
                    onClick={open}
                  >
                    {items.every((item) => item === null)
                      ? "未选择"
                      : items.map((item) => item?.label ?? "未选择").join("")}
                    <FontAwesomeIcon
                      icon={faSortDown}
                      style={{ maxWidth: "12px", marginBottom: 6 }}
                      size="lg"
                    />
                  </Space>
                );
              }}
            </Picker>
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>身高（cm）</span>
              <span className="text-[#f00]">*</span>
            </p>
            <Picker
              columns={[heights]}
              value={formData.height}
              onConfirm={(v) => {
                setFormData((old) => ({ ...old, height: v }));
              }}
            >
              {(items, { open }) => {
                return (
                  <Space
                    align="center"
                    direction="horizontal"
                    justify="center"
                    onClick={open}
                  >
                    {items.every((item) => item === null)
                      ? "未选择"
                      : items.map((item) => item?.label ?? "未选择").join("")}
                    <FontAwesomeIcon
                      icon={faSortDown}
                      style={{ maxWidth: "12px", marginBottom: 6 }}
                      size="lg"
                    />
                  </Space>
                );
              }}
            </Picker>
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>体重（kg）</span>
              <span className="text-[#f00]">*</span>
            </p>
            <Picker
              columns={[weights]}
              value={formData.weight}
              onConfirm={(v) => {
                setFormData((old) => ({ ...old, weight: v }));
              }}
            >
              {(items, { open }) => {
                return (
                  <Space
                    align="center"
                    direction="horizontal"
                    justify="center"
                    onClick={open}
                  >
                    {items.every((item) => item === null)
                      ? "未选择"
                      : items.map((item) => item?.label ?? "未选择").join("")}
                    <FontAwesomeIcon
                      icon={faSortDown}
                      style={{ maxWidth: "12px", marginBottom: 6 }}
                      size="lg"
                    />
                  </Space>
                );
              }}
            </Picker>
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>星座</span>
              <span className="text-[#f00]">*</span>
            </p>
            <Picker
              columns={[constellations]}
              value={formData.constellation}
              onConfirm={(v) => {
                setFormData((old) => ({ ...old, constellation: v }));
              }}
            >
              {(items, { open }) => {
                return (
                  <Space
                    align="center"
                    direction="horizontal"
                    justify="center"
                    onClick={open}
                  >
                    {items.every((item) => item === null)
                      ? "未选择"
                      : items.map((item) => item?.label ?? "未选择").join("")}
                    <FontAwesomeIcon
                      icon={faSortDown}
                      style={{ maxWidth: "12px", marginBottom: 6 }}
                      size="lg"
                    />
                  </Space>
                );
              }}
            </Picker>
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>所在地</span>
              <span className="text-[#f00]">*</span>
            </p>
            <Picker
              columns={[provinces]}
              value={formData.province}
              onConfirm={(v) => {
                setFormData((old) => ({ ...old, province: v }));
              }}
            >
              {(items, { open }) => {
                return (
                  <Space
                    align="center"
                    direction="horizontal"
                    justify="center"
                    onClick={open}
                  >
                    {items.every((item) => item === null)
                      ? "未选择"
                      : items.map((item) => item?.label ?? "未选择").join("")}
                    <FontAwesomeIcon
                      icon={faSortDown}
                      style={{ maxWidth: "12px", marginBottom: 6 }}
                      size="lg"
                    />
                  </Space>
                );
              }}
            </Picker>
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>添加标签</span>
              <span className="text-[#f00]">*</span>
            </p>
            <div className="flex items-center"></div>
          </div>
          <div className="mt-2">
            <Selector
              options={fieldNamesOptions}
              fieldNames={{
                label: "labelT",
                value: "valueT",
                disabled: "disabledT",
              }}
              // defaultValue={["1"]}
              multiple
              onChange={(arr, extend) => {
                if (arr.length >= 4) {
                  Toast.show({
                    content: "最多只能选择3个标签",
                    position: "top",
                  });
                  return;
                }
                setFormData((old) => ({ ...old, tags: arr }));
              }}
              showCheckMark={false}
              value={formData.tags}
              style={{
                "--border-radius": "100px",
                "--border": "solid #ffffff80 1px",
                "--checked-border": "solid #FF669E 1px",
                "--padding": "4px 12px",
                "--text-color": "#ffffff80",
                "--checked-text-color": "#FF669E",
                "--checked-color": "none",
              }}
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>添加微信方式</span>
              <span className="text-[#f00]">*</span>
            </p>
            <div className="flex items-center"></div>
          </div>
          <Space direction="vertical" block>
            <Radio.Group
              value={formData.wechatAddWay}
              onChange={(value) =>
                setFormData((old) => ({ ...old, wechatAddWay: value }))
              }
            >
              <ul>
                {superSingles.map((item) => (
                  <Fragment key={item.key}>
                    <ListItemWithCheckbox superSingle={item} />
                  </Fragment>
                ))}
              </ul>
            </Radio.Group>
            {formData.wechatAddWay == 0 && (
              <div className="mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
                <div>
                  <OwnInput
                    value={formData.wechat}
                    placeholder="对方付费购买后展示"
                    onChange={(value) =>
                      setFormData((old) => ({ ...old, wechat: value }))
                    }
                  />
                </div>
              </div>
            )}
          </Space>
        </div>
        <div className="mt-4">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>全网粉丝量（万）</span>
              <span className="text-[#f00]">*</span>
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="number"
              placeholder="请输入真实有效数据"
              value={formData.fans}
              onChange={(value) => {
                setFormData((old) => ({ ...old, fans: value }));
              }}
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>加微信价格（元）</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs"></p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <div className="flex items-center">
              <span className="mr-1 text-[#ffffffae] text-sm">¥</span>
              <OwnInput
                id="addWeChatPrice"
                type="number"
                value={formData.wechatPrice}
                onChange={(value) =>
                  setFormData((old) => ({ ...old, wechatPrice: value }))
                }
              />
            </div>
            <label
              htmlFor="addWeChatPrice"
              className="text-[#ffffffae] text-xs whitespace-nowrap"
              onClick={() => setSpacePriceAble(true)}
            >
              点击编辑
            </label>
          </div>
        </div>

        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>个性签名</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs"></p>
          </div>
          <div className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <TextArea
              style={{ "--font-size": `16px` }}
              value={formData.info}
              placeholder="点此输入，文案将在“主页”展示"
              onChange={(value) =>
                setFormData((old) => ({ ...old, info: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>私信自动回复</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs"></p>
          </div>
          <div className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <TextArea
              style={{ "--font-size": `16px` }}
              value={formData.autoResponse}
              placeholder="文案将自动发送给点开私信的用户"
              onChange={(value) =>
                setFormData((old) => ({ ...old, autoResponse: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>照片墙</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs"></p>
          </div>
          <div className=" my-2 py-4 bg-[#FFFFFF1A] px-3 rounded-2xl">
            <ul>
              <li className="flex justify-between items-center">
                <p className="text-base font-medium">
                  <span className="text-[#F53030]">*</span>
                  封面图
                </p>
                <label htmlFor="uploadBtn1">
                  <div className="flex items-center">
                    {formData?.displayImage[0] ? (
                      <Image
                        width={36}
                        height={36}
                        className="rounded-lg"
                        src={formData.displayImage[0]?.url}
                        fit="cover"
                      />
                    ) : (
                      <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
                        请尽量选择横屏照片
                      </span>
                    )}
                    <div className="ml-2">
                      <FontAwesomeIcon
                        icon={faAngleRight}
                        style={{ maxWidth: "12px" }}
                        size="xl"
                      />
                    </div>
                  </div>
                </label>
                <div className="hidden">
                  <input
                    type="file"
                    accept="image/png, image/jpeg, image/jpg"
                    ref={ref}
                    id="uploadBtn1"
                    onChange={(e) => handleUploadImage(e, 1)}
                  />
                </div>
              </li>
              <Divider />
              <li className="flex justify-between items-center">
                <p className="text-base font-medium">
                  <span className="text-[#F53030]">*</span>
                  展示视频
                </p>
                <label htmlFor="uploadBtn2">
                  <div
                    // onClick={() => pickDisPlayImage()}
                    className="flex items-center"
                  >
                    {formData?.displayVideo[0] ? (
                      <Image
                        width={36}
                        height={36}
                        className="rounded-lg"
                        src={frameImageUrl || formData.displayVideo[0]?.url}
                        fit="cover"
                      />
                    ) : (
                      <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
                        请尽量选择横屏照片
                      </span>
                    )}
                    <div className="ml-2">
                      <FontAwesomeIcon
                        icon={faAngleRight}
                        style={{ maxWidth: "12px" }}
                        size="xl"
                      />
                    </div>
                  </div>
                </label>

                <div className="hidden">
                  <input
                    type="file"
                    accept="video/*"
                    ref={ref}
                    id="uploadBtn2"
                    onChange={(e) => handleUploadImage(e, 2)}
                  />
                </div>
              </li>
              <Divider />
              <li>
                <div className="flex justify-between items-center">
                  <p className="text-base font-medium">
                    <span className="text-[#F53030]">*</span>
                    相册
                  </p>
                  <div
                  // onClick={() => pickDisPlayImage()}
                  >
                    <span className="text-xs text-[#FFFFFF80] font-medium">
                      请上传2～9张照片
                    </span>
                  </div>
                </div>
                <div className="mt-2">
                  <UploadImgs
                    type={1}
                    existImages={oldPhotos}
                    assets={formData.imageAssets}
                    getImgs={(imgs) => {
                      setFormData((old) => ({ ...old, imageAssets: imgs }));
                    }}
                  />
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-10 flex justify-center">
          <Button
            size="middle"
            shape="rounded"
            style={{
              "--background-color": "#FF669E",
              paddingLeft: "32px",
              paddingRight: "32px",
            }}
            disabled={isSubmitting}
            onClick={() => handSubmit(formData)}
          >
            {isSubmitting ? "正在提交..." : "提交"}
          </Button>
        </div>
      </div>
      <Mask visible={isSubmitting}>
        <div className="w-full h-screen flex justify-center items-center">
          <SpinLoading color="default" />
        </div>
      </Mask>
    </div>
  );
}