import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTextarea }  from 'taro-ui'
import LFormGroup from '@/c/lform/formGroup'
const HLKEY = '654mca0l38b489d9'
const CJ = require('crypto-js')
import './feedback.scss'

class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      feedback_count: '',
      formObj: {},
      imgArr: [],
    }
  }
  config = {
    navigationBarTitleText: '反馈',
  }

  componentWillMount () {
    const { eName } = this.$router.params
    if (eName) {
      Taro.setNavigationBarTitle({
        title: '纠错补图-' + eName
      })
    }
    Taro.$AHU(this)
  }

  commentChange (feedback_count) {
    this.setState({
      feedback_count
    })
  }

  saveHandle () {
    const { feedback_count, formObj, imgArr } = this.state
    const { eId } = this.$router.params
    if (feedback_count && formObj.feedback_type) {
      Taro.api.base.apifeedbackadd({
        feedback_type: formObj.feedback_type,
        contact: formObj.contact,
        feedback_count: feedback_count,
        images: imgArr.join(','),
        estate_id: eId || '',
      }).then(res => {
        Taro.$msgConfirm('反馈成功~感谢您的宝贵建议', () => {
          Taro.navigateBack({
            delta: 1
          })
        }, () => {
          Taro.navigateBack({
            delta: 1
          })
        })
      })
    } else {
      Taro.$msg('请输入提问的类型和内容')
    }
  }

  baseFormChange (key, val) {
    let { formObj } = this.state
    formObj[key] = val
    this.setState({
      formObj
    })
  }


  addImg () {
    let token = Taro.getStorageSync('APP_token')
    let { imgArr } = this.state
    const that = this
    Taro.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const tempFilePaths = res.tempFilePaths
        Taro.uploadFile({
          url: `https://api.honglouplus.com/api/upload/cloud`,
          filePath: tempFilePaths[0],
          name: 'upload',
          formData: {
            'token': token
          },
          success (res){
            const msg = res.data || ''
            const key = CJ.enc.Utf8.parse(HLKEY)
            const bytes = CJ.AES.decrypt(msg, key, {
              mode: CJ.mode.ECB,
              padding: CJ.pad.Pkcs7
            })
            const originalText = bytes.toString(CJ.enc.Utf8)
            const cData = JSON.parse(originalText)
            const curImg = cData.data.url || ''
            imgArr.push(curImg)
            that.setState({
              imgArr
            })
          }
        })
      }
    })
  }
  delImg (index) {
    let { imgArr } = this.state
    imgArr.splice(index, 1)
    this.setState({
      imgArr
    })
  }
  previewImageHandle (current, arr) {
    const { imgArr } = this.state
    Taro.previewImage({
      current,
      urls: imgArr
    })
  }

  render () {
    const { feedback_count, formObj, imgArr } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const ftMoreOptions = {arr: dictData.feedback_type}
    const addIcon = require('@img/icon_upload_img.png')
    const closeIcon = require('@img/icon_g_close.png')
    const imgItems = imgArr.map((src, index) => {
      return (
        <View className="si-op" key={index}>
          <Image src={src} className="img" onClick={this.previewImageHandle.bind(this, src)} />
          <Image src={closeIcon} className="i" onClick={this.delImg.bind(this, index)}/>
        </View>
      )
    })
    return (
      <View className="l-box">
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.feedback_type}
            valStr="feedback_type"
            keyStr="*反馈类型"
            keyStr2="请选择反馈类型"
            typeStr="select"
            moreOptions={ftMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="l-floor-pos2">
          <LFormGroup
            val={formObj.contact}
            valStr="contact"
            keyStr="手机号"
            keyStr2="请输入联系方式"
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="scoped-box">
          <View className="sb-title">*描述</View>
          <AtTextarea
            value={feedback_count}
            onChange={this.commentChange.bind(this)}
            maxLength={300}
            height={300}
            placeholder='请描述你的问题(300字以内)'
          />
        </View>
        <View className="scoped-box">
          <View className="sb-title">相关图片
            <View className="s">（最多9张）</View>
          </View>
          <View className="scoped-img">
            {imgItems}
            {
              imgArr.length < 9
              &&
              <View className="si-op" onClick={this.addImg.bind(this)}>
                <Image src={addIcon} className="img"/>
              </View>
            }
          </View>
        </View>
        <View className="l-floor-footer t2">
          <View className="lff-flex">
            <View className="lff-btn full" onClick={this.saveHandle.bind(this)}>提交</View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index