<template>
	<view>
		<view class="consult">
			<dHeader :title="$lang.lang.complaintAdd.complaint"></dHeader>
		</view>
		<view class="start-bar"></view>
		<view class="consultAdd">
			<view class="consult-item">
				<view class="consult-item-label">
					<image src="../../static/img/consulta-1.png" mode=""></image>
					<text>{{$lang.lang.complaintAdd.titel}}</text>
				</view>
				<view class="consult-item-put">
					<input class="consolt_title" v-model="params.title" type="text" :placeholder="$lang.lang.notices.title">
				</view>			
			</view>
			<view class="consult-item">
				<view class="consult-item-label">
					<image src="../../static/img/consulta-1.png" mode=""></image>
					<text>{{$lang.lang.complaintAdd.type}}</text>
				</view>
				<view class="consult-item-put">
					<picker :class="typeCdx == 1 ? 'v-picker v-picker-2' : 'v-picker'" :value="typeIndex" :range="typeData" @change="typeChange" v-if="typeData.length > 0">
						<view class="uni-input">{{typeData[typeIndex]}}</view>
					</picker>
					<image src="../../static/img/rgt.png" mode=""></image>
				</view>			
			</view>
			<view class="consult-item">
				<view class="consult-item-label">
					<image src="../../static/img/consulta-3.png" mode=""></image>
					<text>{{$lang.lang.complaintAdd.name}}</text>
				</view>
				<view class="consult-item-put">
					<input v-model="params.contacter" disabled type="text" >
				</view>
			</view>
			<view class="consult-item">
				<view class="consult-item-label">
					<image src="../../static/img/consulta-4.png" mode=""></image>
					<text>{{$lang.lang.complaintAdd.phone}}</text>
				</view>
				<view class="consult-item-put">
					<input v-model="params.contactPhone" type="number" disabled>
				</view>
			</view>
			<view class="consult-item">
				<view class="consult-item-label">
					<image src="../../static/img/consulta-5.png" mode=""></image>
					<text>{{$lang.lang.complaintAdd.orderNo}}</text>
				</view>
				<view class="consult-item-put">
					<input class="consolt_title" v-model="params.orderId" type="text" :placeholder="$lang.lang.notices.orderNo">
				</view>
			</view>
			<view class="consult-item-2">
				<view class="consult-item-label-2">
					<image src="../../static/img/consulta-6.png" mode=""></image>
					<text>{{$lang.lang.complaintAdd.content}}</text>
				</view>
				<view class="consult-item-put-2">
					<textarea class="textarea" v-model="params.content" :placeholder="$lang.lang.notices.content" id="" cols="30" rows="5"></textarea>
				</view>
			</view>
		</view>
		<view class="consult-btn">
			<view class="" @click="submitForm">{{$lang.lang.complaintAdd.sumbit}}</view>
			<view class="" @click="resetForm">{{$lang.lang.complaintAdd.reset}}</view>
		</view>
	</view>
</template>

<script>
	import dHeader from '../../components/dHeader/index.vue'
	export default {
		components: {
			dHeader
		},
		data() {
			return {
				typeCdx: 1,
				typeIndex: 0,
				typeData: [this.$lang.lang.notices.type],
				typeValue: [0],
				params: {
					title: '',
					type: 0,
					contacter: '',
					contactPhone: '',
					orderId: '',
					content: '',
				},
				rules: {
					title: this.$lang.lang.notices.title,
					type:this.$lang.lang.notices.type,
					content: this.$lang.lang.notices.content,
				},
				userInfo: {},
			}
		},
		onLoad () {
			this.getUserInfo()
			let that = this
			that.$request.getConfig('customer_complaint_type').then(res => {
				if(res.code == 0&&res.data&&res.data.list.length > 0){
					let d = res.data.list
					for(let i in d){
						if(that.$lang.locale=='zh'){
							that.typeData.push(d[i].label)
						}else{
							that.typeData.push(d[i].labelEn)
						}					
						
						that.typeValue.push(d[i].value)
					}
					that.params.type = that.typeValue[that.typeIndex]
				}
			})
		},
		methods: {
			getUserInfo() {
				this.$request.get('/app-api/member/user/get').then(res => {
					if(res.code == 0&&res.data){
						this.userInfo = res.data
						this.params.contacter = res.data.nickname
						this.params.contactPhone = res.data.mobile
					}

				})
			},
			typeChange (e) {
				this.typeIndex = e.detail.value
				this.params.type = this.typeValue[e.detail.value]
				this.typeCdx = e.detail.value == 0 ? 1 : 2
			},
			submitForm () {
				if(!this.$request.checkFormData(this.params, this.rules)){
					return false
				}
				this.params.memberUserId = this.userInfo.id
				this.$request.post('/app-api/ecw/customer-complaint/create', this.params).then(res => {
					if(res.code == 0&&res.data){
						uni.showToast({
							title: this.$lang.lang.notices.success,
							icon: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			resetForm(){
				for(let i in this.params){
					this.params[i] = (i == 'type') ? 0 : ''
				}
				this.typeChange()
			}
		}
	}
</script>

<style>
	@import url("../../static/css/consult_add.css");
</style>
