<template>
	<view>
		<view class="home_con_content_order u-m-t-30" v-for="(item,index) in tableData" @click="goDetail(item)"
			:key="index">
			<image style="width: 100%;height: 160rpx;" src="../../../static/images/home/1@2x.png" mode=""></image>
			<view class="order_tit">
				<view class="u-flex justify-between u-font-32">
					<span class="color_DDA973 ov_hiden">{{item.materialName}}</span>
					<span>
						<u-icon size="24" color="#fff" name="arrow-right"></u-icon>
					</span>
				</view>
				<view class="u-font-24 u-m-t-20 color_6F6F72">
					<span v-if="dataList.length>0">
					<span v-for="(itemMater,indexMater) in dataList" :key="indexMater"> <span class="u-m-r-10"
							v-if="itemMater.id==item.category"> {{itemMater.name}}</span></span></span>
					|
					<span class="u-m-l-10 u-m-r-10">{{item.clothWidth}}cm</span>
					|
					<span class="u-m-l-10">{{item.component}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tableData: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				imgUrl: this.$IMG_URL,
				dataList: []
			};
		},
		created() {
			this.$http("category.query", {}).then(res => {
				let {
					code,
					data
				} = res;
				if (code === 200) {
					this.dataList = data;

				}
			})
		},
		methods: {
			goDetail(item) {
				// console.log(333)
				this.$Router.push({
					path: "/pages/home/detail",
					query: {
						id: item.id
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.home_con_content_order {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 160rpx;
		border-radius: 8rpx;
		overflow: hidden;

		.order_tit {
			position: absolute;
			width: 75%;
			right: 0;
			flex-direction: column;
			display: flex;
			justify-content: center;
			padding: 20rpx;
			flex: 1;
			height: 100%;
			background: rgba(17, 21, 30, 0.5);
		}
	}

	.ov_hiden {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.color_DDA973 {
		color: #dda973;
	}

	.color_6F6F72 {
		color: #6f6f72;
	}
</style>
