import React from 'react';
import Taro from '@tarojs/taro';
import { View, CoverView } from '@tarojs/components';
import { CellGroup, Cell, Field, RadioGroup, Radio, Icon } from '@antmjs/vantui';
import Map from '@/components/map';
import { getTaCheckItemAnswer } from '@/services/tacheckitem';
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 setLoading = (v) => {
    if (onLoadingChange) {
      onLoadingChange(v)
    }
  }

  const setFieldChange = (key, val) => {
    onChange({
      ...answer || {},
      [key]: val,
    })
  }

  // // 获取答题主记录信息
  // React.useEffect(() => {
  //   if (checkItemInfo?.itemId) {
  //     setLoading(true);
  //     getTaCheckItemAnswer(checkItemInfo?.itemId).then((res) => {
  //       if (res) {
  //         onChange(res);
  //       }
  //       setLoading(false);
  //     }).catch(() => {
  //       setLoading(false);
  //     });
  //   }
  // }, [checkItemInfo?.itemId])

  // console.log('answer', answer);

  return (
    <View>
      <Map
        readOnly={readonly}
        location={answer?.location}
        onChange={e => setFieldChange('location', e)}
      />
      <CellGroup>
        {
          checkType == 'loc' && (
            <Cell
              title="点位"
              value={checkItemInfo?.name}
            />
          )
        }
        {
          checkType == 'survey' && (
            <Field
              label="社区"
              placeholder="请填写社区名称"
              readonly={readonly}
              value={answer?.communityName}
              onChange={e => setFieldChange('communityName', e.detail)}
            />
          )
        }
        <Field
          readonly={readonly}
          label={checkType == 'loc' ? '地址' : '小区'}
          placeholder={checkType == 'loc' ? '请输入地址' : '请填写小区名称'}
          value={answer?.addr}
          onChange={e => setFieldChange('addr', e.detail)}
        />
      </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>
        )
      }
      <CellGroup style={{ marginTop: '20px' }}>
        <Field
          value="您已完成X份"
          inputAlign="center"
          readonly
        />
      </CellGroup>
    </View >
  )
}