<template>
	<view class="wrap">
		<view class="top">
			<view class="top-list">
				<view>
					<text class="title">投诉类别</text>
					<text class="grey">（单选）</text>
					<text class="red">*</text>
				</view>
				<view class="choose">
					<text v-for="(item,index) in typeList" :key="index" class="choose-list" :class="{on:active==index}" @click="typeChange(index)">
						{{item.commentType}}
					</text>
				</view>
			</view>
			<view class="top-list">
				<view>
					<text class="title">投诉描述</text>
					<text class="red">*</text>
				</view>
				<view style="margin-top: 20rpx;">
					<u--textarea v-model="commentText" placeholder="请描述您遇到的问题,我们会尽快处理" count maxlength='400' height='200'>
						
					</u--textarea>
				</view>
				
			</view>
			<view class="top-list" style="padding-bottom: 24rpx;">
				<view>
					<text class="title">相关图片</text>
					<text class="grey">（最多三张）</text>
				</view>
				<view style="margin-top: 20rpx;">
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="3"
						width='160'
						height='160'
					></u-upload>
				</view>
			</view>
			<view class="top-list" style="border-bottom:none;">
				<view class="title">
					<text>联系手机</text>
				</view>
				<view class="phone">
					<input class="uni-input" type="number" placeholder="请输入您的手机号码" v-model="phone" />
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<text class="full-btn" @click="commit()">提交</text>
		</view>
	</view>
</template>

<script>
export default{
  data(){
    return{
      active:0,//默认下标
      merchantId:'',//商户Id
      openid:uni.getStorageSync('openid')||'',//openid
      typeList:[],//类型列表
      commentText:'',//投诉内容
      phone:'',//电话号码
      commentType:'',//投诉类别
      fileList1: [],//文件列表
      imgList:[],//上传的图片列表
    }	
  },
  onLoad(option) {
    this.merchantId=option.merchantId||''
    this.initType()
  },
  methods:{
    //---投诉类型改变
    typeChange(index){
      this.active=index
      this.commentType=this.typeList[index].commentType
    },
    //---类型加载
    initType(){
      let data={
			  merchantId:this.merchantId,//商户Id
			  submitType:0,//0-投诉，1-建议
      }
      this.$request('comment/submitConfig/loadCommentType',data).then((res)=>{
			  if(res.code=='00'){
          this.typeList=res.data||[]
          //默认取第一个
          if(this.typeList.length>0){
            this.commentType=this.typeList[0].commentType
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    //---删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    //---新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      if(event.file[0].size>1024*1024*10){
        uni.showToast({
				  title:'图片内存不能大于10M',
				  icon: 'none'
        })
        return
      }
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url:'http://picture.pangdly.com/'+result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let baseUrl=''
        if(process.env.NODE_ENV === 'development'){//开发环境
				  baseUrl='http://192.168.0.213:7888/'
        }else{
				  baseUrl= 'https://manager.pangdly.com/'
        }
        let fun = uni.uploadFile({
          url: baseUrl+'upload/file/newUpload', // 仅为示例，非真实的接口地址
          filePath:url,
          name: 'uploadFile',
          success: (res) => {
            let res1=JSON.parse(res.data)
            if(res1.code == '00'){
              resolve(res1.data)
            }
          }
        })
      })
    },
    //---提交
    commit(){
      this.imgList=this.fileList1.map(item=>{
        return {
          imgUrl:item.url,
          imgCommentType:0//0游客发起图片 1客服回复图片
        }
      })
      if(!this.commentType){
        uni.showToast({
				  title: '请选择投诉类别',
				  icon: 'none'
        })
        return
      }
      if(!this.commentText){
			  uni.showToast({
				  title: '请输入投诉内容',
				  icon: 'none'
			  })
			  return
      }
		  let data={
		    merchantId:this.merchantId,//商户Id
		    openid:this.openid,//openid
        phone:this.phone,//电话号码
        submitType:0,//0-投诉 1-建议
        commentText:this.commentText,//投诉内容
        commentType:this.commentType,//投诉类别
        handleStatus:0,//处理状态 0未处理1已处理（默认填0）
        commentImgList:this.imgList,//图片列表
		  }
		  this.$request('comment/userComment/save',data).then((res)=>{
			  if(res.code=='00'){
          uni.showToast({
					  title:'提交成功',
					  icon: 'none'
          })
          setTimeout(()=>{
            uni.navigateBack({
              delta:1 
            })
          },2000)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  })
    }
  }
}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #ffffff;
		min-height: 100%;
	}
	.top{
		padding: 0 0rpx 200rpx 40rpx;
	}
	.top-list{
		padding: 32rpx 40rpx 40rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}
	.top-list view:first-child{
		display: flex;
		align-items: center;
	}
	.title{
		color: #000000;
	}
	.grey{
		color: #999999;
	}
	.red{
		color: #F53F3F;
	}
	.choose{
		background: #F7F8FA;
		padding: 0 0 24rpx 24rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
	}
	.choose-list{
		display: inline-block;
		width: 170rpx;
		height: 70rpx;
		border-radius: 35rpx;
		background: #ffffff;
		text-align: center;
		line-height: 70rpx;
		margin: 24rpx 24rpx 0 0;
	}
	.choose-list.on{
		background: #FE6600;
		color: #ffffff;
	}
	.phone{
		margin-top: 20rpx;
		background: #F7F8FA;
		padding:32rpx;
		border-radius: 8rpx;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx 60rpx 40rpx;
		background: #ffffff;
		border-top: 1px solid #EDEDED;
		z-index: 1;
	}
	/*修改上传组件样式*/
	.top-list /deep/ .uicon-camera-fill{
		font-size: 36px !important;
		line-height: 36px !important;
	}
	.top-list /deep/ .uicon-close{
		font-size: 10px !important;
		line-height: 10px !important;
	}
	.top-list /deep/ .uicon-checkmark{
		font-size: 12px !important;
		line-height: 12px !important;
	}
	.top-list /deep/ .u-textarea{
		background:#F7F8FA;
		border: none;
	}
	.top-list /deep/ .u-upload__button{
		border-radius: 8rpx;
	}
	.top-list /deep/ .u-textarea__count{
		background: #F7F8FA !important;
	}
</style>