import React from 'react';
import Taro from '@tarojs/taro';
import { View, RichText, Text } from '@tarojs/components';
import { CellGroup, Cell, Field, Radio, RadioGroup, Button } from '@antmjs/vantui';
import Uploader from '@/components/Uploader/index';
import { getTaCheckAnswerItem } from '@/services/tacheckansweritem';


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

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

  const setFieldChange = (key, val) => {
    // console.log('--------answerItem----------->', answerItem);
    // console.log('--------key----------->', key);
    // console.log('--------val----------->', val);


    if (readonly) return;

    onChange({
      ...(answerItem || {}),
      quId: quInfo.quId,
      [key]: val,
    })
  }

  // React.useEffect(() => {
  //   if (quInfo?.quId) {
  //     setLoading(true);
  //     getTaCheckAnswerItem({ quId: quInfo.quId, isMine: true }).then(res => {
  //       if (res && res[0]) {
  //         onChange(res[0]);
  //       }
  //       setLoading(false);
  //     }).catch(() => {
  //       setLoading(false);
  //     });
  //   }
  // }, [quInfo?.quId]);
  console.log('------------>h');
  return (
    <View>
      <RadioGroup value={answerItem?.answerCode}>
        <CellGroup>
          <Cell
            border={false}
            renderTitle={(
              <View style={{ fontWeight: 'bold' }}>
                <Text>{quInfo?.sortNo}、</Text>
                <Text>{quInfo?.title}</Text>
              </View>
            )}
          />
          {
            quInfo?.quType == 'fill' && (
              <Field
                label="答案:"
                clearable
                readonly={readonly}
                value={answerItem?.answer}
                placeholder="填写数字"
                renderButton={quInfo?.fillUnit}
                onChange={(e) => setFieldChange('answer', e.detail - 0)}
              />
            )
          }
          {
            (quInfo?.answerList || []).map((it) => {
              return (
                <Cell
                  key={it.answerId}
                  title={it.answer}
                  clickable
                  border={false}
                  onClick={() => setFieldChange('answerCode', it.answerCode)}
                  renderRightIcon={<Radio checkedColor="var(--main-bg-color)" readonly={readonly} name={it.answerCode}></Radio>}
                />
              );
            })
          }
        </CellGroup>
      </RadioGroup>
      {
        checkType != 'survey' && (
          <>
            <CellGroup style={{ marginTop: '20px' }}>
              <Cell title="测评标准" />
              <Cell
                renderTitle={
                  <RichText nodes={quInfo?.stand} />
                }
              />
            </CellGroup>
            <CellGroup style={{ marginTop: '20px' }}>
              <Cell renderTitle={
                <><Text style={{ color: 'red' }}>*</Text> <Text>拍照或视频</Text></>
              }
                border={false}
              />

              <Cell
                renderTitle={
                  <Uploader
                    disabled={readonly}
                    value={answerItem?.attachList}
                    onChange={e => setFieldChange('attachList', e)}
                  />
                }
              />
            </CellGroup>
          </>
        )
      }
    </View>
  )
}
