<template>
	<div>
		<el-dialog
			title="主图图搜"
			:visible.sync="dialogVisibleImg"
			width="55%"
			@close="cancelClick">
				<div class="container-o-box default mt10">
					<div class="com-block m-bottom10 p10">
						<div>系统有以下相似产品：</div>
						<div class="product-same" >
							<div class="produce-img" v-for="(item,index) in tableData" :key="index">
								<img :src="item.mainImageUrl"/>
								<div class="tc">spu编码:{{item.spuCode}}</div>
								<div class="tc">spu名:{{item.spuName}}</div>
								<div class="tc">标题:{{item.name}}</div>
							</div>
						</div>
					</div>
				</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="cancelClick">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	props: {
		dialogVisibleImg:{
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			tableData:[
			],
		}
	},
	methods:{
		cancelClick(){
			this.$emit('cancelClick')
		},
		startCollect(fileURL){
			console.log('fileURL --> ', fileURL);
			let that = this;
			this.axios({
				url:'assistant/systemProductSeries/imageQueryPage',
				data:{
					mainImageUrl:fileURL,
					isSpu:true
				},
				method: "post"
			}).then(res => {
				if(res.success){
					that.tableData = res.module.result;
				}
			})
		},
	}
}
</script>
<style lang="less" scoped>
.container-o-box{
	clear:both;
	.default{
		margin: 0;
		width: 100%;
	}
	.com-block {
		width: 100%;
		background-color: #fff;
		box-shadow: 0 0 0 0;
	}
	.product-same{
		display:flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.produce-img{
			border:1px solid #ccc;
			width:200px;
			height:250px;
			margin:10px 16px;
			img{
				width:100%;
				height:180px;
				vertical-align: bottom;
			}
			div{
				border-top:1px solid #ccc
			}
		}
	}
}
</style>