import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import Page from '@/layouts/index';
import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
import Map from '@/components/map';
import Uploader from '@/components/Uploader/index';
import mapIcon from '@/assets/icons/marker.png';
import { warn } from '@/utils/message';
import { postTaFeedback } from '@/services/tafeedback';
import { geocoder } from '@/utils/map';

export default (props) => {
  const readOnly = false;

  const [loading, setLoading] = React.useState(false);
  const fmRef = React.useRef({
    typeId: undefined,
    typeName: undefined,
    locId: undefined,
    locName: undefined,
    location: undefined,
    addr: undefined,
    content: undefined,
    attachList: [],
  });
  const [formData, setFormData] = React.useState(fmRef.current);

  const setFieldChange = (field, value) => {
    const data = {
      ...fmRef.current,
      [field]: value,
    };

    fmRef.current = data;
    setFormData(data);
  }

  const onSubmit = () => {
    console.log(formData)
    try {
      warn(!formData.addr, '请填写地址')
      warn(!formData.content, '请填写问题描述')
      warn(!formData.attachList || formData.attachList.length < 1, '请上传照片')
    } catch (e) {
      return;
    }

    setLoading(true)
    postTaFeedback(formData).then(() => {
      setLoading(false);
      Taro.navigateBack({
        delta: 1,
        fail: () => {
          Taro.reLaunch({
            url: '/pages/home/index'
          })
        } 
      });
    }).catch(() => {
      setLoading(false);
    })

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

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


  return (
    <Page tabBar="feedback">
      <Map
        readOnly={readOnly}
        location={formData.location}
        onChange={onLocationChange}
      />

      <CellGroup>
        <Field
          placeholder="请填写当前位置"
          value={formData.addr}
          leftIcon={mapIcon}
          readonly={readOnly}
          onChange={e => setFieldChange('addr', e.detail)}
        />
      </CellGroup>

      <CellGroup style={{ marginTop: '20px' }}>

        <Cell title="问题描述" size="large" border={false} />

        <Field
          type="textarea"
          placeholder="请输入问题描述"
          readonly={readOnly}
          autosize={{ minHeight: '120px' }}
          value={formData.content}
          onChange={e => setFieldChange('content', e.detail)}
        />
      </CellGroup>

      <CellGroup style={{ marginTop: '20px' }}>
        <Cell title="拍照" size="large" border={false} />

        <Cell
          renderTitle={
            <Uploader
              value={formData.attachList}
              disabled={readOnly}
              onChange={e => setFieldChange('attachList', e)}
            />
          }
        />
      </CellGroup>

      <View style={{ padding: 'var(--main-space)', background: '#fff' }}>
        <Button block type="primary" onClick={onSubmit}>提交</Button>
      </View>
    </Page>
  )
}