import Taro, { Component } from '@tarojs/taro'
import { View, Text, } from '@tarojs/components'
import { bindActionCreators } from 'redux'
import { connect } from '@tarojs/redux'
import Layout from 'layout'
import { } from './redux'

import 'assets/style/customer-ui.scss'
import style from './index.module.scss'
import { AtRate, AtImagePicker } from 'taro-ui'
import Evaluation from 'components/Evaluation'
import Toast from 'utils/toast'
import LINK from 'utils/link'
import api from 'config/api'
import rental from 'services/rental'

class ShortRentEvaluation extends Layout {

config = {
navigationBarTitleText: '订单评价'
}

state = {
starCfg: [
{ label: '手续办理', fieds: 'procedures_level', value: 0 },
{ label: '服务态度', fieds: 'service_quality_level', value: 0 },
{ label: '车辆整洁', fieds: 'clean_level', value: 0 },
{ label: '车辆状态', fieds: 'vehicle_condition_level', value: 0 },
],
files: []
}

sameDidMount() { }

async sameDidShow() {
if (!this.$router.params.id) { // url 中订单id检测
await Toast({
title: '参数错误',
icon: 'error',
duration: 1300,
})
Taro.redirectTo({ url: LINK.INDEX })
}
}

/**

• 点击星星
  */
  starChange(fields, value) {
  let starCfg = [...this.state.starCfg]
  starCfg.forEach(item => {
  if (item.label === fields) {
  item.value = value
  }
  })
  this.setState({ starCfg })
  }

onChange(files) {
console.log(files);
console.log(files[0].url);

Taro.uploadFile({
  url: api.uploadCommentsImages, //仅为示例，非真实的接口地址
  filePath: files[0].url,
  name: 'file',
  formData: {
    'user': 'test'
  },
  success (res){
    const data = res.data
    //do something
  }
})
this.setState({
  files
})

}
onFail(mes) {
console.log(mes)
}
onImageClick(index, file) {
console.log(index, file)

}

/**

• 提交
  */
  confirm = async res => {
  let data = {
  description: res.msg,
  }
  this.state.starCfg.forEach(item => {
  data[item.fieds] = item.value
  })

await rental.comments(this.$router.params.id, data)
await Toast({
  title: '感谢评价！',
  duration: 1300
})
Taro.navigateTo({
  url: LINK.HOME,
})

}

render() {

const { starCfg } = this.state

return <View className={`page-wrap`}>
  <View className={style.tit}><Text>请对本次服务进行评价</Text></View>
  {/* 星级 */}
  <View className={style.stars}>
    {
      starCfg.map(item =>
        <View className={style.starRow}>
          <Text>{item.label}</Text><AtRate onChange={e => this.starChange(item.label, e)} value={item.value} margin={20} />
        </View>
      )
    }
  </View>

  {/* 输入框和选择标签 */}
  <Evaluation
    tags={['车内整洁', '取还车便捷', '驾驶体验不错', '车内有异味', '服务体验不好',]}
    onConfirm={this.confirm}
  />

  <View className={style.AtImagePicker}> 
    <AtImagePicker
      multiple
      count={5}
      files={this.state.files}
      onChange={this.onChange.bind(this)}
      onFail={this.onFail.bind(this)}
      onImageClick={this.onImageClick.bind(this)}
    />
  </View>    
</View>

}
}

export default connect(
state => {
return {
// TODO...
}
},
dispatch => bindActionCreators(
{
// TODO...
},
dispatch,
),
)(ShortRentEvaluation)

//问题描述
我上传图片的时候想要下面的

但是现在我上传图片确实这样的，导致后台接收有问题