import React from "react";
import Taro from "@tarojs/taro";
import { View, CoverView } from "@tarojs/components";
import {
  CellGroup,
  Cell,
  Field,
  RadioGroup,
  Radio,
  Icon,
  Loading,
} from "@antmjs/vantui";
import Map from "@/components/map";
import { getTaCheckItemAnswer } from "@/services/tacheckitem";
import { getTaCheckAnswer } from "@/services/tacheckanswer";
import { geocoder } from "@/utils/map";
import mapIcon from "@/assets/icons/marker.png";
import AgePicker from "./AgePicker";

export default (props) => {
  const {
    checkItemInfo,
    checkType,
    answer,
    readonly,
    onChange,
    onLoadingChange,
  } = props;

  const [showAgePicker, setShowAgePicker] = React.useState(false);
  const answerRef = React.useRef();
  answerRef.current = answer;

  const setLoading = (v) => {
    if (onLoadingChange) {
      onLoadingChange(v);
    }
  };

  const setFieldChange = (key, val) => {
    const newAnswer = {
      ...(answerRef.current || {}),
      [key]: val,
    };

    answerRef.current = newAnswer;
    onChange(newAnswer);
  };

  const onLocationChange = (loc) => {
    setFieldChange("location", loc);

    if (checkType == "loc" && loc) {
      // 交换经纬度位置
      const [x, y] = loc.split(",");
      const reLoc = [y, x].join(",");
      geocoder(reLoc)
        .then((e) =>
          setFieldChange(
            "addr",
            e?.address_component?.street_number || e?.address
          )
        )
        .catch(console.error);
    }
  };

  return (
    <View>
      <Map
        readOnly={readonly}
        location={answer?.location}
        onChange={onLocationChange}
      />
      {/* <View style={{ position: 'fixed', zIndex: '3000', top: '50%', color: 'red', display: 'grid', width: '50px', height: '50px' }}>
        <Loading type="spinner" vertical />
      </View> */}
      <CellGroup>
        {checkType == "loc" && (
          <Cell title="点位" value={checkItemInfo?.name} />
        )}
        {checkType == "survey" && <Cell title="文明用语" value={checkItemInfo?.cultureTerm} />}
        {checkType == "survey" && (
          <Field
            key="01"
            label="社区"
            placeholder="请填写社区名称"
            readonly={readonly}
            value={answer?.communityName}
            onChange={(e) => setFieldChange("communityName", e.detail)}
          />
        )}
        <Field
          key="02"
          readonly={readonly}
          label={checkType == "loc" ? "地址" : "小区"}
          placeholder={checkType == "loc" ? "请输入地址" : "请填写小区名称"}
          value={answer?.addr}
          onChange={(e) => setFieldChange("addr", e.detail)}
        />
        {checkType == "loc" && (
          <Field
            key="03"
            readonly={readonly}
            label="名称"
            placeholder="请输入名称"
          />
        )}
      </CellGroup>
      {checkType == "survey" && (
        <CellGroup style={{ marginTop: "20px" }}>
          <Cell title="性别">
            <View style={{ textAlign: "right" }}>
              <RadioGroup
                disabled={readonly}
                direction="horizontal"
                value={answer?.sex}
                style={{ display: "inline-flex" }}
                onChange={(e) => setFieldChange("sex", e.detail)}
              >
                <Radio name="1" checkedColor="var(--main-bg-color)">
                  男
                </Radio>
                <Radio name="2" checkedColor="red">
                  女
                </Radio>
              </RadioGroup>
            </View>
          </Cell>
          <Cell
            title="年龄"
            isLink
            value={answer?.age}
            onClick={() => !readonly && setShowAgePicker(true)}
          />
          <AgePicker
            show={showAgePicker}
            onShowChange={setShowAgePicker}
            onChange={(e) => setFieldChange("age", e)}
          />
        </CellGroup>
      )}

      {checkType == "survey" && (
        <CellGroup style={{ marginTop: "20px" }}>
          <Cell title="已完成" value={`${checkItemInfo?.answerNum || 0} 份`} />
        </CellGroup>
      )}
    </View>
  );
};