<template>
	<view class="vip-component-upload-image-drag">

		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>可拖拽图片上传</tn-nav-bar>

		<!-- 页面内容 -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="drag__wrap tn-margin-top">
				<tn-image-upload-drag ref="imageUpload" :action="action" :height="220" :width="220" :formData="formData"
					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" />
				<view class="tn-flex tn-margin-top-xs tn-flex-row-center">
					<tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
					<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx"
						@tap="clear">清空列表</tn-button>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		name: 'VipComponentUploadImageDrag',
		data() {
			return {
				action: 'https://www.hualigs.cn/api/upload',
				// action: '',
				formData: {
					apiType: 'this,ali',
					token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
					image: null
				},
				fileList: [{
					url: 'https://resource.tuniaokj.com/images/shop/bag1.jpg'
				}],
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: true,
				deleteable: true,
				customStyle: false,
				maxCount: 9,
				disabled: false,
			}
		},
		onLoad() {
			this.pushFileList().then(res=>{
				this.fileList=[...this.fileList,...res]
			})
		},
		methods: {
			//模拟异步获取数据
			async pushFileList() {
				return [{
					url: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
				}, {
					url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
				}, {
					url: 'https://resource.tuniaokj.com/images/shop/cup2.jpg'
				}]
			},
			// 手动上传文件
			upload() {
				this.$refs.imageUpload.upload()
			},
			// 手动清空列表
			clear() {
				this.$refs.imageUpload.clear()
			},
			// 图片拖拽重新排序
			onSortList(list) {
				console.log(list);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drag {
		&__wrap {
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
	}
</style>