<template>
	<div class="dyndata-cmp">
		<div class="upload-control clearfix">
			<div class="upload-input">
				<el-upload
					:action="urls.dynDataUpload"
					ref="upload"
					:show-file-list="false"
					:auto-upload="true"
					:on-success="handleSuccess"
					:on-error="handleError"
					:with-credentials="true"
					:data="param"
					name="filename"
					:multiple="false"
					accept=".csv,.txt,.xls,.xlsx">
					<el-input placeholder="请选择文件" style="width:270px" :value="showUploadName">
						<template slot="append">
							<el-button class="el-bg-primary el-c-white up-btn" type="primary">选择文件</el-button>
						</template>
					</el-input>
				</el-upload>
			</div>
			<div class="upload-right">
				<el-popover
					ref="popover1"
					placement="bottom"
					trigger="hover">
					<div class="desc">
						<p><a :href="fileUrls.downloadTplCsv">下载csv格式</a></p>
						<p><a :href="fileUrls.downloadTplTxt">下载txt格式</a></p>
						<p><a :href="fileUrls.downloadTplXls">下载xls格式</a></p>
						<p><a :href="fileUrls.downloadTplXlsx">下载xlsx格式</a></p>
					</div>
				</el-popover>

				<a class="cm el-c-primary "  href="javascript:void(0);" v-popover:popover1>下载模板</a>
				<el-popover
					ref="popover2"
					placement="bottom"
					width="320"
					trigger="hover">
					<div class="desc">
						<div class="desc">
							<p>1、csv和txt格式的文件中，发送内容不能输入半角“逗号”</p>
							<p>2、首行为动态数据标题行，标题不能含有除中文、字母、数字及下划线以外的其它字符；从第二行开始为导入的动态数据内容，第一列必须为手机号码</p>
							<p>3、导入txt格式文件请注意：请用tab键/空格/分号/逗号来间隔内容，您也可以自定义分隔符间隔各列</p>
							<p>4、若您选择压缩文件上传，文件必须为rar、zip、7z格式，压缩文件中文件格式必须为CSV、TXT、XLS、XLSX</p>
						</div>
					</div>
				</el-popover>
				<a class="cm el-c-primary " href="javascript:void(0);" v-popover:popover2 >文件内容注意事项</a>
				<el-checkbox v-model="delrepeat" :true-label="0" :false-label="1">不删除重复号码</el-checkbox>
			</div>
		</div>
		<div class="upload-tips">
			超过10M大文件请使用压缩文件(支持rar,zip,7z)上传
		</div>

		<div class="dyn-btns clearfix">
			<a v-for="(item,index) in uploadResult.title"
			   class="el-button popover-btn-list-dialog-cell el-bg-primary-light el-c-primary"
			   :key="item+index"
			   @click="insertDynKey(index,item)">{{item}}
			</a>
		</div>

		<dynamic-mdn-verify-list :show.sync="showVerifyPop"
								 :dynData="uploadResTmp"
								 :showList="showList"
								 :invalidNum="uploadResTmp.invalidCount || 0"
								 @submit="dynDataConfirm"
								 @cancel="dynDataConfirmCancel"/>
	</div>
</template>

<script type="text/javascript">
	import Vue from 'vue'
	import {Button, Popover, Upload,Tooltip} from 'element-ui'
	import DynamicMdnVerifyList from './DynamicMdnVerifyList.vue'

	Vue.use(Button).use(Popover).use(Upload).use(Tooltip)
	export default {
		components: {
			DynamicMdnVerifyList
		},
		props: {
			/**
			 * 输入
			 */
			urls: {
				type: Object,
				validator: function (url) {
					return url.dynDataUpload && url.dynDataTplDownload
				}
			},
			fileUrls: {
				type: Object
			},
			title: {
				type: String,
				default: '导入文件'
			},

			/**
			 * 输出
			 */
			value: {
				type: Object
			}
		},
		methods: {
			dynDataConfirmCancel() {
				this.showVerifyPop = false;
				this.$emit('close')
			},
			dynDataConfirm() {
				this.showVerifyPop = false;
				this.uploadResult = this.uploadResTmp;
				this.$emit('change:dyndata',this.uploadResult);
			},
			download() {
				window.location.href = this.urls.dynDataTplDownload
			},
			//上传成功回调
			handleSuccess(res, file, fileList) {
				this.showUploadName = file.name;
				this.uploadResTmp = res;
				this.showVerifyPop = true;
			},

			handleError(res) {
				this.showUploadName = '';
				this.$message({
					type: 'error',
					message: '上传失败'
				})
			},
			insertDynKey(index, item) {
				this.$emit('insertDynKey', {title: '{' + item + '}', maxVal: this.uploadResult.colMaxValMap[index]});
			}
		},
		data() {
			return {
				showUploadName: '',//上传文件时候，显示的文件名字
				showVerifyPop: false,//打开动态数据确认框
				uploadResTmp: {},//上传成功后临时存放
				uploadResult: {},//上传成功后存放
				delrepeat: 1,//不删除重复号码
				param: {type: '1'}
			}
		},
		computed: {
			showList() {
				//根据上传成功后的数据列表，进行数据拼装，将无效数据排在最上面

				if (this.uploadResTmp.totalCount) {
					this.uploadResTmp.validityFilePath = this.uploadResTmp.validityFilePath
						? this.urls.downloadPrefix + this.uploadResTmp.validityFilePath
						: ''
					let invalidList = this.uploadResTmp.invalidList.slice()
					invalidList.forEach((item) => {
						item.isValid = true
					})
					let len = invalidList.length
					return len > 10
						? invalidList.slice(0, 9)
						: invalidList.slice().concat(this.uploadResTmp.validityList.slice(0, 10 - len))
				} else {
					return [];
				}

			}
		}
	}
</script>

<!-- 由于dialog位置与app并列，无法使用组件命名空间 -->
<style >
	.el-popover {
		border:1px solid #fcd2a7;
		background-color: #fffcef;
		font-family: "Microsoft YaHei";
		color: #bc7f53;
		min-width: 80px;
	}
</style>

<style type="text/css" scoped>
	.dyndata-cmp {
		border: 1px solid #fcc89f;
		background-color: #fef4ec;
		/*height: 108px;*/
		padding: 15px 15px 0px;
		box-sizing: border-box;
	}

	.upload-control {
		margin-bottom: 15px;
	}

	.upload-input {
		width: 270px;
		float: left;
		height: 32px;
		margin-right: 15px;
	}

	.upload-right {
		float: left;
		height: 32px;
		display: flex;
		align-items: center;
		position:relative;
	}

	.upload-right .cm {
		margin-right: 15px;
	}

	.up-btn {
		border-radius: 0;
	}

	.upload-tips {
		box-sizing: border-box;
		height: 46px;
		border-top: 1px dashed #eacdb6;
		padding-top: 10px;
		font-family: "Microsoft YaHei";
		color: #a9a9a9;
	}

	.dyn-btns a {
		margin: 0px;
		margin-right: 10px;
		float: left;
		margin-bottom: 10px;
	}
	.upload-right > div {
		border:1px solid #fcd2a7;
		background-color: #fffcef;
		font-family: "Microsoft YaHei";
		color: #bc7f53;
	}
	.file-content-tip {
		position: absolute;
		top:30px;
		left:-20px;
		padding: 9px 9px 9px 13px;
		z-index: 200;
	}
	.world-arrow-content {
		position: absolute;
		left: 124px;
		top: -8px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 8px 7.7px 8px;
		border-color: transparent transparent #FDD2A7 transparent;
	}
	.world-arrow-tip {
		position: absolute;
		top: -7px;
		left: 289px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 8px 7.7px 8px;
		border-color: transparent transparent #FDD2A7 transparent;
	}
	.desc p{
		margin:0px;
		padding:0px;
	}
	.desc >p >a {
		color: #bc7f53;
	}
	.desc >p >a:hover{
		text-decoration: underline ;
	}

</style>
