import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import { AtImagePicker } from 'taro-ui'
import dayjs from 'dayjs'

import { getProfileDetail, editDocumentVerify } from '@services/user'

import { uploadFiles } from '@utils/request'

import "taro-ui/dist/style/components/image-picker.scss";
import "taro-ui/dist/style/components/icon.scss";
const add = require('@assets/add.png')
const img = require('@assets/shop/banner1.jpg')
const closeImg = require('@assets/close.png')

// import { connect } from '@tarojs/redux'


// @connect(state => state.city)
export default class Profile extends Component {
  config = {
    navigationBarTitleText: '审核详情'
  }

  state = {

    imgList: [],
    documentTitle: '',
    detail: {}


  }

  componentDidMount() {
    this.initPage()
  }
  initPage() {
    let id = this.$router.params.id

    if (id) {

      getProfileDetail(id).then(res => {
        this.setState({
          detail: res,
          imgList: res.imgList || [],
          documentTitle: res.documentTitle,
        })
      })
    }

  }

  // 选择图片
  bindAlbumClick(e) {
    e.stopPropagation()
    Taro.showLoading({
      title: '上传中',
    })
    Taro.chooseImage({
      sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
      success: res => {
        uploadFiles(res.tempFilePaths).then(data => {
          let arr = []
          data.map((item, index) => {
            arr.push({ img: item, sort: index })
          })
          const imgList = this.state.imgList.concat(arr)
          this.setState({
            marginTop: 0,
            messageType: 'image',
            imgList: imgList || []
          }, this.onSendMsg)
        })
      },
      complete: res => {
        Taro.hideLoading()
      }
    })
  }
  // 删除图片
  deleteImg(inx) {

    const imgList = this.state.imgList;
    imgList.splice(inx, 1);
    this.setState({
      imgList: imgList || []
    })
  }


  // 提交资料审核
  commitBtn() {
    if (this.state.imgList.length == 0) {
      Taro.showToast({ icon: 'none', title: '请先上传图片' });
    } else if (this.state.documentTitle == "") {
      Taro.showToast({ icon: 'none', title: '资料说明不能为空' });
    } else {

      const payload = {
        documentTitle: this.state.documentTitle,
        imgList: this.state.imgList,
        id: this.state.detail.documentVerifyId
      }

      editDocumentVerify(payload).then(res => {
        this.setState({
          detail: res,
          imgList: res.imgList || [],
          documentTitle: res.documentTitle,
        })
        Taro.showToast({ icon: 'none', title: '提交成功' });

      }).catch((err) => {
        Taro.showToast({ icon: 'none', title: err.errMsg || '提交失败' });
        console.error(err);
      });
    }
  }
  // 输入资料说明
  onInputText = e => {
    this.setState({
      documentTitle: e.detail.value
    })
  }
  // 查看大图
  onPreview = (item, e) => {
    let urls = []
    this.state.imgList.map((ele, index) => {
      urls.push(ele.img)
    })
    e.stopPropagation()
    e.preventDefault()
    Taro.previewImage({
      current: item.img,
      urls: urls
    })
  }
  // 上传资料模块
  renderUpImages() {
    return (
      <Block>
        <View className="up-btn" onClick={this.bindAlbumClick}>
          <Image className="add-img" src={add} />
          上传资料
        </View>
      </Block>
    )
  }
  // 资料审核列表模块
  // 审核状态 0未审核  1审核通过  2审核不通过 verifyStatus


  render() {
    const { imgList, documentTitle, detail } = this.state

    return (
      <View className="profile-page" style="background:#f4f4f4">
        <ScrollView scrollY scrollWithAnimation style="height: 100vh">

          {
            detail.verifyStatus == 2 &&
            <View>
              <View className="reject-reason" >驳回原因:{detail.rejectReason || ''}</View>

              <View className="desc-box">
                资料说明：
              <Input className='inputDesc' value={documentTitle || ''} onInput={this.onInputText.bind(this)} type='text' placeholder='请填写资料说明' />
              </View>
              <View style="padding:10px 20px">
                {this.renderUpImages()}
              </View>
              <View className="image-box">
                {imgList.length &&
                  imgList.map((item, inx) => {
                    return (
                      <View className="image-con" key={`img-${inx}`}>
                        <Image className="close-btn" src={closeImg} onClick={this.deleteImg.bind(this, (inx))} />
                        <Image className="img" src={item.img} onClick={this.onPreview.bind(this, (item))} />
                      </View>
                    )
                  })
                }

              </View>
              <View className="commit-btn" onClick={this.commitBtn}>重新提交</View>

            </View>
          }
          {
            detail.verifyStatus != 2 &&
            <View>
              <View className="detail-title" >{detail.documentTitle || '资料审核'}</View>
              {
                detail.verifyStatus == 1 && <View className="commit-text" >审核通过</View>
              }
              {
                detail.verifyStatus == 0 && <View className="verfying" >审核中</View>
              }
              <View className="image-box">
                {imgList.length &&
                  imgList.map((item, inx) => {
                    return (
                      <View className="image-con" key={`img-${inx}`}>
                        <Image className="img" src={item.img} onClick={this.onPreview.bind(this, (item))} />
                      </View>
                    )
                  })
                }

              </View>
            </View>
          }

        </ScrollView>
      </View>
    )
  }
}
