<template>
	<ciy-header ref="header" title="ciy-upload组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">多文件上传选择器</view>
			<view class="content">
				自由指定文件来源拍摄、相册、会话。<br/>
				支持文件大小限制、尺寸压缩、水印、指定云、指定API。<br />
			</view>
		</view>
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-upload v-model="formvalue" path="demo" num="5" name="ciy1" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>value绑定</label>
				<view>
					<ciy-upload left :value="formvalue" path="demo" name="ciy2" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>只能拍照</label>
				<view>
					<ciy-upload name="ciy3" path="demo" num="9" imgwidth="1000" sourcetype="camera" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>上传文档</label>
				<view>
					<ciy-upload name="ciy4" path="demo" num="20" filetype="all" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>方形头像</label>
				<view>
					<ciy-upload name="ciy5" path="demo" showwh="100%" imgwidth="1000" imgheight="1000" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>限制大小</label>
				<view>
					<ciy-upload name="ciy6" path="demo" maxkb="200" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>图像压缩</label>
				<view>
					<ciy-upload name="ciy7" path="demo" zipjpg="60" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>右下文字</label>
				<view>
					<ciy-upload name="ciy8" path="demo" zipjpg="60" watertext="水电费|第二行" waterfont="36px Arial" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>满屏水印</label>
				<view>
					<ciy-upload name="ciy9" path="demo" zipjpg="60" watertext="众产(杭州)科技有限公司" waterfont="36px Arial" watertype="full" waterpadding="10" waterangle="20" wateralpha="0.8" watercolors="#ff0000,#00ff00" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>上传到云</label>
				<view>
					<ciy-upload name="ciy10" path="demo" stor="A" zipjpg="60" imgwidth="1000" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>SaaS上传</label>
				<view>
					<ciy-upload left name="ciy11" saas="s10224" path="demo" stor="/" zipjpg="60" imgwidth="1000" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>固定比例拍照</label>
				<view>
					<ciy-upload name="ciy12" path="demo" cammaskpng="/img/maskcamera.png" camheight="70" imgwidth="1000" sourcetype="rehcam" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>自定比例拍照</label>
				<view>
					<ciy-upload name="ciy13" path="demo" imgwidth="1000" sourcetype="rehcam,album" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-upload name="ciy14" disabled :value="formvalue" @change="chglog('change', $event)"></ciy-upload>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue='/img/face.png'">改变值</button>
			</view>
			<view class="ciy-card formcard" v-if="formdata">
				<view class="content">
					<view v-html="tobr(formdata, true)" class="formdata"></view>
				</view>
			</view>
		</form>

		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">name,value,v-model</view>
				<view class="hr"></view>
				<view class="prp">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">initevent</view>
				<view class="tip">
					是否产生初始事件。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">left</view>
				<view class="tip">
					是否左侧显示。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">action</view>
				<view class="tip">
					http开头，指向绝对API。<br />
					upload类路径[.微服务码]，指向本服务器API。<br />
					jsnurl + 'z/?func=' + upload类路径 + '/upload.';
				</view>
				<view class="hr"></view>
				<view class="prp">sourcetype</view>
				<view class="tip">
					文件选择来源，多个用逗号分隔。<br />
					单个直接触发，多个出现上滑菜单。<br />
					　camera 拍摄<br />
					　album 从相册选择<br />
					　message 从会话选择<br />
					　rehcam 比例相机。<br />
					默认 camera,album,message
				</view>
				<view class="hr"></view>
				<view class="prp">camheight</view>
				<view class="tip">
					{比例相机} 设置固定高度，使用vw单位。<br />
					如果为空，则出现各种比例高度的选择功能，按name缓存高度。<br />
					如果设置数字，则固定高度，无选择功能。<br />
					默认 空
				</view>
				<view class="hr"></view>
				<view class="prp">cammaskpng</view>
				<view class="tip">
					{比例相机} 蒙版png图片。
				</view>
				<view class="hr"></view>
				<view class="prp">filetype,ext</view>
				<view class="tip">
					上传文件类型，all全部，image图片，video视频。<br />
					如果是message上传方式，ext，可指定扩展名，逗号分隔。<br />
					默认 image
				</view>
				<view class="hr"></view>
				<view class="prp">num</view>
				<view class="tip">
					上传文件最多数量。<br />
					默认 1
				</view>
				<view class="hr"></view>
				<view class="prp">stor</view>
				<view class="tip">
					指定存储服务器，指向位置在app.vue的storlist中配置。<br />
					默认 / 本地服务器
				</view>
				<view class="hr"></view>
				<view class="prp">imgwidth, imgheight</view>
				<view class="tip">
					指定图片尺寸宽高，二选一为等比例缩放，两个都设置不等比例缩放。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">maxkb</view>
				<view class="tip">
					最大可上传文件尺寸，单位KB。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">zipjpg</view>
				<view class="tip">
					图片压缩、水印、截取时，jpg压缩比，0-1。<br />
					默认 0.7
				</view>
				<view class="hr"></view>
				<view class="prp">waterfont</view>
				<view class="tip">
					水印文字字体字号。<br />
					默认 28px Arial
				</view>
				<view class="hr"></view>
				<view class="prp">watertext</view>
				<view class="tip">
					水印文字，可用竖线换行。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">watertype</view>
				<view class="tip">
					水印类型，支持左下角、full 满屏文字水印。<br />
					默认 空 (左下角多行文字)
				</view>
				<view class="hr"></view>
				<view class="prp">watercolors</view>
				<view class="tip">
					水印颜色，多个用小写,分隔。<br />
					左下角，第一个颜色是主色，第二个是边框色。<br />
					满屏文字，多色随机选择。<br />
					默认 白,黑
				</view>
				<view class="hr"></view>
				<view class="prp">wateralpha</view>
				<view class="tip">
					水印透明度。<br />
					默认 full 0.1，左下角1
				</view>
				<view class="hr"></view>
				<view class="prp">waterpadding</view>
				<view class="tip">
					{full满屏专用} 水印间距。<br />
					默认 30
				</view>
				<view class="hr"></view>
				<view class="prp">waterangle</view>
				<view class="tip">
					{full满屏专用} 水印角度，自动随机+5度。<br />
					默认 -20
				</view>
				<view class="hr"></view>
				<view class="prp">showwh</view>
				<view class="tip">
					已上传图片显示宽度。<br />
					默认 4em
				</view>
				<view class="hr"></view>
				<view class="prp">path</view>
				<view class="tip">
					存入/ud/YYYY/MMDD/[path]。<br />
					如果saas>0，则存入<br/>
					/ud/字母1000/00/YYYY/MMDD/[path]。<br/>
					例如s1013，存入/ud/s1/13/Y/MD/[path]<br/>
					默认 nopath
				</view>
				<view class="hr"></view>
				<view class="prp">saas</view>
				<view class="tip">
					存入独立用户空间目录，例 S394。<br />
					一位字母+用户saasID<br/>
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change, update:modelValue</view>
				<view class="tip">
					数值变更事件<br />
					from: init,del<br/>
					rehcam,camera,album,message,h5<br/>
					toleft,toright
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				formvalue: ''
			}
		},
		onLoad() {
			this.getauth();
		},
		methods: {
		}
	}
</script>
