<template>
	<view class='c-page'>
		<view class='c-header'>
			<image src='https://ddh.yyhock.com/ddhMall/category-img.png'></image>
		</view>
		<view class='c-line' @click="cateShow">
			<view class='line-l'>
				<text class='l-icon'>*</text>
				<label class='l-text'>物品类型</label>
			</view>
			<view class="line-r">
				<input class='r-val'  disabled="true" placeholder-style="color:#9E9E9E" :value='categoryType' placeholder="请选择物品类型"/>
				<i class='r-icon'></i>
			</view>
		</view>
		
		<view class='c-line c-lines'>
			<view class='line-l'>
				<text class='l-icon'>*</text>
				<label class='l-text'>物品名称</label>
			</view>
			<view class="line-r">
				<input class='r-val'  @input="changeName($event)" placeholder-style="color:#9E9E9E" :value='categoryName' placeholder="请输入物品名称"/>
			</view>
		</view>
		
		<view class='cate-des'>
			<view class='des-name'>物品描述</view>
			<textarea class='des-contain' @input="desVal($event)" placeholder="请补充商品品牌、型号、购买渠道、购买时间、入手价格(如有)，有助于更快完成鉴定"></textarea>
		</view>
		
		<view class='cate-upload'>
			<view class='upload-title'>添加鉴定图片</view>
			<view class='upload-box'> 
				<view class='box-tips'>小建议:最多可上传三张图片</view>
				<view class='main-imgs'>
					<view class='imgs-f' @click='uploadImg'>
						<image class='f-image ' src='https://ddh.yyhock.com/ddhMall/cate-add.png'></image>
					</view>
					<view class='imgs-list' v-for="(item,index) in newList" :key="item">
						<image class='list-img' :src='item'></image>
						<i class="img-del-icon" @click="delItem(item,index)"></i>
					</view>
				</view>
				
			</view>
		</view>
		<view class='cate-footer' @click="onSubmit">立即鉴定</view>
		<view-modal :show="showperiods" @cancel="periodsCancel" :showCancel="true" class='periods-card' :title="'选择物品类型'">
			<view class='periods-card-line' v-for="item in periodsList" :key="item.id" @click='periodsCheck(item)'>
					{{item.categoryName}}
			</view>
		</view-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryType:'',
				showperiods:false,
				periodsList:[],
				categoryName:'',
				newList:[],
				desQuest:''
				
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				const self=this
				self.$request('/category/getCategoryList','POST').then((res)=>{
						self.periodsList=res.result	
					console.log(res,'9766')
				})
			},
			periodsCheck(item){
				console.log(item,'item')
				this.showperiods=false
				this.categoryType=item.categoryName
				
			},
			onSubmit(){
				const self=this
				if(self.categoryType==''){
					self.toast('请选择物品类型')
					return false
				}
				if(self.categoryName==''){
					self.toast('请填写物品名称')
					return false
				}
				if(self.categoryName.length>10){
					this.toast('不能超过10个字')
					return false
				}
				if(self.desQuest==''){
					self.toast('请填写物品描述')
					return false
				}
				if(self.desQuest.length>100){
					this.toast('不能超过100个字')
					return false
				}
				if(self.newList.length==0){
					self.toast('请上传图片')
					return false
				}
				const params={
					"desc": self.desQuest,
					"imagesUrl":self.newList,
					"name": self.categoryName,
					"type": self.categoryType
				}
				self.$request('/authenticate/save','POST',params).then((res)=>{
					self.Go('uni:/pages/application/application','redirect')
					console.log(res,'save')
				})
			},
			desVal(e){
				console.log(e.detail.value.length,'0988')
				if(e.detail.value.length>100){
					this.toast('不能超过100个字')
					return false
				}
				this.desQuest=e.detail.value
			},
			uploadImg(){
				const self=this
				if(self.newList.length==3){
					this.toast('最多上传三张哦')
					return false
				}
				//上传图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
							for(let i=0; i<res.tempFilePaths.length;i++){
									self.getoss(res.tempFilePaths[i]) 
							}
										
						}
					})
			},
			getoss(fileNames){
				const self=this
				const newFileName=fileNames[0].split('.')[1]
				console.log(newFileName,'7555')
				const params={
					fileType:'DDH/img',
					fileName:newFileName
				}
				self.$request('/oss','GET',params).then((res)=>{
					console.log(res,'getOssToken')
					const { oss }=res.result
					self.uploadimage(oss,fileNames)
				})
			},
			uploadimage(result, file){
							 
							const self=this;
							return new Promise(function(resolve, reject) {
								uni.showLoading({
									title: "图片上传中",
									mask: true
								})
								const {accessId,dir,expire,host,policy,signature}=result
								console.log(accessId,file,'沃日');
								uni.uploadFile({
									url: host, //你的接口地址 
									filePath: file, //上传返回的文件本地路径
									name: 'file', //无需修改
									formData: {
										'key': dir,
										'policy': policy,
										'OSSAccessKeyId': accessId,
										'success_action_status': '200', //让服务端返回200,不然，默认会返回204
										'signature': signature
									},
									success(res) {
										uni.hideLoading()
										
										let urlImg=host + dir
										self.newList.push(urlImg)
										console.log(urlImg,'沃日1');
										return resolve(urlImg)
									},
									fail(err) {
										uni.hideLoading()
										return resolve(false)
									}
								})
										
							})
			},
			delItem(item,index){
				console.log(item,index,'7444')
				const {newList}=this
				newList.splice(index, 1) 
			},
			cateShow(){
				this.showperiods=true
			},
			periodsCancel(){
				this.showperiods=false
			},
			changeName(e){
				console.log(e.detail.value.length)
				if(e.detail.value.length>10){
					this.toast('不能超过10个字')
					return false
				}else{
					this.categoryName= e.detail.value
				}
				
			}
		},
		onShow() {
			this.init()
		}
	}
</script>

<style src='./index.less' lang="less" scoped></style>
