<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
+----------------------------------------------------------------------
| 组件-供需列表 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="component-demand" :style="{'--theme-color': themeColor}">
		<view class="demand-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
			<view class="item-top">
				<view class="top-order flex align-items-center" v-if="showType == 2">
					<view class="order-number flex-item">编号：{{item.number}}</view>
					<view class="order-status">
						<view class="status-label" style="color: #FF9100;" v-if="item.state == 1">审核中</view>
						<view class="status-label" :style="{ color: themeColor }" v-else-if="item.state == 2">发布中</view>
						<view class="status-label" style="color: #FF626E;" v-else-if="item.state == 3">已驳回</view>
					</view>
				</view>
				<view class="top-info flex align-items-center" v-else>
					<image class="info-avatar" :src="item.member.avatar" mode="aspectFill"></image>
					<view class="info-box flex-item">
						<view class="title text-ellipsis">{{ item.member.name }}</view>
						<view class="subtitle text-ellipsis">{{ item.member.level_name }} | {{ item.time }}</view>
					</view>
					<view class="info-btn" @click.stop="onContact(item.member.mobile)">联系TA</view>
				</view>
			</view>
			<view class="item-center">
				<view class="center-title text-ellipsis">{{ item.title }}</view>
				<view class="center-content text-ellipsis-more">{{ item.content }}</view>
				<view class="center-image" :class="{'special-image': (item.images.length < 3 || item.images.length === 4)}" v-if="item.images.length">
					<view class="image-box" v-for="(img, num) in item.images" :key="num" @click.stop="previewImage(item.images, num)">
						<image class="image" :src="img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="item-bottom">
				<view class="bottom-order" v-if="showType == 2">
					<view class="order-box flex justify-content-between align-items-center" v-if="item.address || item.page_view">
						<view class="box-label flex-item">
							<view class="label-box inline-flex align-items-center" v-if="item.address">
								<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
								<text class="box-text flex-item text-ellipsis">{{item.address}}</text>
								<view class="box-bg"></view>
							</view>
						</view>
						<view class="box-btn flex align-items-center">
							<image class="icon" src="/static/see.png" mode="aspectFit"></image>
							<text class="text">{{ item.page_view }}</text>
						</view>
					</view>
					<view class="order-btn flex justify-content-end">
						<view class="btn" style="background: #FFB656;" @click.stop="handleEdit(item.id)">修改</view>
						<view class="btn" style="background: #FF626E;" @click.stop="handleDelete(item.id)">删除</view>
					</view>
				</view>
				<view class="bottom-info flex justify-content-between align-items-center" v-else>
					<view class="info-label flex-item">
						<view class="label-box inline-flex align-items-center" v-if="item.address">
							<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
							<text class="box-text flex-item text-ellipsis">{{item.address}}</text>
							<view class="box-bg"></view>
						</view>
					</view>
					<view class="info-other flex align-items-center">
						<view class="other-item flex align-items-center">
							<image class="icon" src="/static/see.png" mode="aspectFit"></image>
							<text class="text">{{ item.page_view }}</text>
						</view>
						<button open-type="share" class="other-item clear flex align-items-center" @click.stop="setShareData(item)">
							<image class="icon" src="/static/share.png" mode="aspectFit"></image>
							<text class="text">分享</text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import svgData from "@/common/svg.js"
	export default {
		name: "componentDemand",
		props: ["showData", "showType"],
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				iconAddress: state => {
					return svgData.svgToUrl("address", state.app.themeColor)
				},
			})
		},
		methods: {
			// 跳转详情
			toDetails(id) {
				if (this.showType == 2) {
					this.$util.toPage({
						mode: 1,
						path: `/pagesDemand/demand/publish?id=${id}`
					})
				} else {
					this.$util.toPage({
						mode: 1,
						path: `/pagesDemand/demand/details?id=${id}`
					})
				}
			},
			// 联系ta 
			onContact(phone) {
				// 获取商圈限制
				this.$util.request("demand.businessLimit", {
					type: 2
				}).then(res => {
					if (res.code == 1) {
						if (res.data.show_status == 1) {
							this.$util.toPage({
								mode: 6,
								phone: phone,
							})
						} else {
							if (uni.getStorageSync("token")) {
								uni.showModal({
									title: "系统提示",
									content: "联系电话需成为会员后可拨打!",
									confirmColor: this.themeColor,
									confirmText: "去加入",
									success: (res) => {
										if (res.confirm) {
											uni.switchTab({
												url: "/pages/mine/index"
											})
										}
									}
								})
							} else {
								uni.navigateTo({
									url: "/pages/login/index",
									animationType: "fade-in"
								})
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取商圈分类', error)
				})
			},
			// 预览图片
			previewImage(list, index) {
				uni.previewImage({
					urls: list,
					current: index
				});
			},
			// 设置分享数据
			setShareData(item) {
				this.$emit('setShareData', {
					title: item.title,
					path: '/pagesDemand/demand/details?id=' + item.id,
					imageUrl: item.images.length ? item.images[0] : item.member.avatar,
				})
			},
			// 修改供需
			handleEdit(id) {
				this.$util.toPage({
					mode: 1,
					path: "/pagesDemand/demand/edit?id=" + id
				})
			},
			// 删除供需
			handleDelete(id) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条吗?',
					confirmText: '确认删除',
					confirmColor: '#E50002',
					cancelText: '我再想想',
					cancelColor: '#999999',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: "加载中",
								mask: true
							})
							this.$util.request("demand.businessDel", {
								id: id,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									uni.showToast({
										title: "删除成功"
									})
									this.$emit("onReset")
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(error => {
								uni.hideLoading()
								console.error('删除发布', error)
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.component-demand {
		.demand-item {
			margin-top: 32rpx;
			padding: 32rpx 32rpx 24rpx;
			border-radius: 16rpx;
			background: #FFF;

			&:first-child {
				margin-top: 0;
			}

			.item-top {
				.top-info {
					.info-avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
					}

					.info-box {
						margin-left: 24rpx;

						.title {
							color: #5A5B6E;
							font-size: 32rpx;
							font-weight: 600;
							line-height: 44rpx;
						}

						.subtitle {
							margin-top: 12rpx;
							color: #666;
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}

					.info-btn {
						margin-left: 24rpx;
						padding: 8rpx 16rpx;
						color: #FFF;
						text-align: center;
						font-size: 24rpx;
						line-height: 34rpx;
						background: var(--theme-color);
						border-radius: 8rpx;
					}
				}

				.top-order {
					padding-bottom: 32rpx;
					border-bottom: 1px solid #E4E4E4;

					.order-number {
						color: #979797;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.order-status {
						.status-label {
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}
				}
			}

			.item-center {
				margin-top: 32rpx;

				.center-title {
					color: #5A5B6E;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}

				.center-content {
					margin-top: 24rpx;
					color: #5A5B6E;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.center-image {
					display: flex;
					flex-wrap: wrap;
					margin-top: 16rpx;
					column-gap: 2%;
					row-gap: 14rpx;

					.image-box {
						width: 32%;
						height: 0;
						padding-top: 32%;
						position: relative;
						border-radius: 16rpx;
						overflow: hidden;

						.image {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
						}
					}

					&.special-image {
						justify-content: space-between;
						column-gap: 0;

						.image-box {
							width: calc(50% - 8rpx);
							padding-top: calc(50% - 8rpx);
						}
					}
				}
			}

			.item-bottom {
				.bottom-info {
					margin-top: 24rpx;

					.info-label {
						max-width: 280rpx;

						.label-box {
							max-width: 100%;
							padding: 6rpx 18rpx 6rpx 8rpx;
							position: relative;
							z-index: 1;
							border-radius: 8rpx;
							overflow: hidden;

							.box-bg {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								background: var(--theme-color);
								z-index: -1;
								opacity: 0.1;
							}

							.box-icon {
								width: 24rpx;
								height: 24rpx;
								background-size: 24rpx;
							}

							.box-text {
								margin-left: 8rpx;
								color: var(--theme-color);
								font-size: 20rpx;
								line-height: 28rpx;
							}
						}
					}

					.info-other {
						.other-item {
							margin-left: 32rpx;

							.icon {
								width: 32rpx;
								height: 32rpx;
							}

							.text {
								margin-left: 8rpx;
								color: #5A5B6E;
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}
					}
				}

				.bottom-order {
					.order-box {
						margin-top: 24rpx;

						.box-label {
							max-width: 280rpx;

							.label-box {
								max-width: 100%;
								padding: 6rpx 18rpx 6rpx 8rpx;
								position: relative;
								z-index: 1;
								border-radius: 8rpx;
								overflow: hidden;

								.box-bg {
									position: absolute;
									top: 0;
									left: 0;
									right: 0;
									bottom: 0;
									background: var(--theme-color);
									z-index: -1;
									opacity: 0.1;
								}

								.box-icon {
									width: 24rpx;
									height: 24rpx;
									background-size: 24rpx;
								}

								.box-text {
									margin-left: 8rpx;
									color: var(--theme-color);
									font-size: 20rpx;
									line-height: 28rpx;
								}
							}
						}

						.box-btn {
							margin-left: 32rpx;

							.icon {
								width: 32rpx;
								height: 32rpx;
							}

							.text {
								margin-left: 8rpx;
								color: #5A5B6E;
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}
					}

					.order-btn {
						margin-top: 32rpx;

						.btn {
							padding: 16rpx 32rpx;
							border-radius: 8rpx;
							color: #FFF;
							text-align: center;
							font-size: 28rpx;
							line-height: 40rpx;
							margin-left: 16rpx;
						}
					}
				}
			}
		}
	}
</style>