import React, { useState } from 'react'
import { Picker, View, Image, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtCurtain } from 'taro-ui'
import type { modalProps, formProps } from './data'
import './index.scss'
import { addReport } from '../../api/report'

const channelList = ['园所', '网店', '柜台', '经销商', '其他']

// 填写的表单
const ReportPiracyForm: React.FC<formProps> = ({ formData, regionErr, channelErr, phoneErr, changeForm, submit }) => {

  const [selectorChecked, setSelectorChecked] = useState<string>('')
  const [region, setRegion] = useState<string>('')

  // 修改渠道
  const changeChannel = (e) => {
    changeForm('channel', channelList[e.detail.value])
    setSelectorChecked(channelList[e.detail.value])
  }

  // 修改详细地址
  const changeAddress = (e) => {
    changeForm('address', e.detail.value)
  }

  // 修改手机号
  const changePhone = (e) => {
    changeForm('phone', e.detail.value)
  }

  const onChange = (e) => {
    const { value } = e.detail
    let name = ''
    value.map(i => name += i)
    setRegion(name)
    changeForm('province', value[0])
    changeForm('city', value[1])
    changeForm('region', value[2])
  }

  return (
    <View className='ReportPiracyForm'>
      <View className='item'>
        <View className='label'>
          <View className='required'>*</View>
          <View>举报地区</View>
        </View>
        <View className='content'>
          <Picker className='picker' mode='region' onChange={onChange} >
            <View className={region ? '' : 'placeholder'}>
              {region ? region : '请填写举报地区'}
            </View>
          </Picker>
        </View>
      </View>
      <View className='hint'>{regionErr ? '*请填写举报地区' : ''}</View>

      <View className='address'>
        <Input value={formData.address} name='address' type='text' placeholder='详细地址（选填）' onInput={changeAddress} />
      </View>

      <View className='item'>
        <View className='label'>
          <View className='required'>*</View>
          <View>盗版发现渠道</View>
        </View>
        <View className='content'>
          <Picker className='picker' mode='selector' range={channelList} onChange={changeChannel}>
            <View className={selectorChecked ? '' : 'placeholder'}>
              {selectorChecked || '请选择'}
            </View>
          </Picker>
        </View>
      </View>
      <View className='hint'>{channelErr ? '*请填写盗版发现渠道' : ''}</View>

      <View className='item'>
        <View className='label'>
          <View className='required'>*</View>
          <View>联系方式</View>
        </View>
        <View className='content'>
          <Input type='number' value={formData.phone} placeholder='请填写' maxlength='11' onInput={changePhone} />
        </View>
      </View>
      <View className='hint'>{phoneErr ? '*请填写联系方式' : ''}</View>

      <View className='submitBtn' onClick={submit}>提交审核</View>
    </View >
  )
}

const HotLineList = [{
  id: 'landline',
  phone: '400-680-7300'
}, {
  id: 'phone',
  phone: '18511949815'
}]

// 热线电话
const HotLine: React.FC = () => {
  return (
    <View className='HotLine'>
      <View className='name'>举报热线：</View>
      <View className='tels'>
        {
          HotLineList.map(item => (
            <View className='tel' key={item.id}>
              <Image src={require(`../../assets/ReportPiracy/${item.id}.png`)} className='imgUrl' mode='aspectFill'></Image>
              <View className='phone'>{item.phone}</View>
            </View>
          ))
        }

      </View>
    </View>
  )
}

// 最下方的提示
const Remark: React.FC = () => {
  return (
    <View className='Remark'>
      <View className='firstLine'>如您发现盗版请立即举报，我们将保护您的个人隐私，</View>
      <View className='secondLine'>为您的善举提供有偿的奖励。</View>
    </View>
  )
}

// 提交成功弹窗
const SubmitModel: React.FC<modalProps> = ({ visable, closeModal }) => {

  return (
    <AtCurtain
      className='AtCurtain'
      isOpened={visable}
      onClose={closeModal}
    >
      <View className='model'>
        <Image src={require('../../assets/ReportPiracy/close.png')} className='close' mode='aspectFill' onClick={closeModal}></Image>
        <View className='tip'>提交成功</View>
        <View className='line firstLine'>感谢您的善举，我们将保护您的个人隐私</View>
        <View className='line secondLine'>中德智慧工作人员会及时与您联系</View>
        <View className='ok' onClick={closeModal}>好的</View>
      </View>
    </AtCurtain>
  )
}

const ReportPiracy: React.FC = () => {

  const [visable, setVisable] = useState<boolean>(false)
  const [regionErr, setRegionErr] = useState<boolean>(false)
  const [channelErr, setChannelErr] = useState<boolean>(false)
  const [phoneErr, setPhoneErr] = useState<boolean>(false)
  const [formData, setFormData] = useState<Record<string, any>>({
    province: '',
    city: '',
    region: '',
    address: '',
    channel: '',
    phone: ''
  })

  // 打开弹窗
  const openModal = () => setVisable(true)

  // 关闭
  const closeModal = () => {
    setVisable(false)
    Taro.navigateBack({
      delta: 1
    })
  }

  const changeForm = (key, value) => {

    let newObj = {}

    newObj[key] = value

    const data = Object.assign(formData, newObj)

    setFormData(data)
    console.log(formData, 'formData');
  }

  // 验证
  const beforeSubmit = () => {
    if (!formData.province) {
      setRegionErr(true)
      return false
    }
    if (!formData.channel) {
      setChannelErr(true)
      return false
    }
    const myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;

    if (!formData.phone || !myreg.test(formData.phone)) {
      setPhoneErr(true)
      return false
    }
    return true
  }

  // 提交
  const submit = () => {
    if (!beforeSubmit()) return
    add()
  }

  const add = async () => {
    const { region, city, province, address, channel, phone } = formData
    const params = {
      province: province,
      city: city,
      region: region,
      address: address,
      channel: channel,
      phone: phone
    }

    const data = await addReport(params)

    console.log(data, 'data');

    openModal()
  }

  return (
    <View className='ReportPiracy'>
      <Image src={require('../../assets/ReportPiracy/title.png')} className='title' mode='aspectFill'></Image>
      <ReportPiracyForm formData={formData} regionErr={regionErr} channelErr={channelErr} phoneErr={phoneErr} changeForm={changeForm} submit={submit}></ReportPiracyForm>
      <HotLine />
      <Remark />
      <SubmitModel visable={visable} closeModal={closeModal}></SubmitModel>
    </View>
  )
}
export default ReportPiracy
