<template>
	<div class="mdnVerifyList-cmp">
		<el-dialog title="导入结果" :visible="show" @update:visible="dialogClose">
			<div>
				<div class="text-warning m-b-10 pull-left" style="width: 75%;">
					<div class="com-info-box el-bg-primary-light el-c-primary font-12">
						您已导入{{dynData.totalCount}}条数据（仅预览十条）
						<span
							v-if="dynData.validityCount < dynData.totalCount">，其中异常信息{{dynData.totalCount - dynData.validityCount}}条（已标红），异常信息为手机号错误</span>
					</div>
				</div>
				<el-button
					size="small"
					v-if="dynData.validityFilePath"
					type="primary"
					@click="download"
					class="pull-right m-r-10 m-b-10">
					下载错误号码
				</el-button>
				<el-table :data="gridData" height="300" :row-class-name="tableRowClassName">
					<el-table-column
						:prop="String(i)"
						:label="t"
						align="center"
						v-for="(t, i) in dynData.title"
						:key="t"></el-table-column>
				</el-table>
			</div>
			<div slot="footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="handleSubmit">{{dynData.validityFilePath ? '忽略并完成' : '完成'}}
				</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import Vue from 'vue'
	import {Dialog, TableColumn, Table, Button} from 'element-ui'

	Vue.use(Dialog).use(TableColumn).use(Table).use(Button)
	export default {
		props: {
			/**
			 * 输入
			 */
			//动态数据
			dynData: {
				type: Object,
				default: function () {
					return []
				}
			},
			//是否显示
			show: {
				type: Boolean,
				required: true
			},
			//全部数据
			showList: {
				type: Array
			},
			//不合法个数
			invalidNum: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {}
		},
		computed: {
			gridData() {
				//return this.dynData.validityList || []
				//未上传文件的时候，不做处理
				if (Object.keys(this.dynData).length === 0) {
					return [];
				}
				let data = []
				this.showList.forEach((item) => {
					let obj = {}
					for (let n = 0; n < item.length; n++) {
						obj[n] = item[n]
					}
					data.push(obj)
				})
				return data
			}
		},
		methods: {
			download() {
				//location.href = this.urls.downloadMdn
			},
			dialogClose(s) {
				if (s === false) {
					this.$emit('cancel');
				}
			},
			cancel() {
				this.$emit('cancel')
			},
			handleSubmit() {
				this.$emit('submit')
			},
			tableRowClassName(row, index) {
				return index < this.invalidNum ? 'bg-danger-light' : ''
			}
		},
		watch: {}
	}
</script>

<style>
	.mdnVerifyList-cmp .bg-danger-light {
		background: #ff5151;
	}
</style>
