<template>
	<view class="page-container gray-color">
		<view class="content-box" v-if="goods != null">
			<view class="upload-img-box">
				<image @click="doPreImg" :data-value="goods.goodsLocalPhoto" :src="goods.goodsLocalPhoto"
					mode="scaleToFill" style="width: 400rpx;height: 500rpx;"></image>
			</view>
			<view class="content-container">
				<block v-if="goods.goodsCheckStatus != ''">
					<view class="info-title">审核信息</view>
					<view class="section">
						<view class="item">
							<text class="label">状态</text>
							<view class="select-content-item">
								<view class="value v-select c-red" style="font-weight:bold;">
									{{goodsStatus(goods.goodsCheckStatus,goods.goodsStatus,goods.goodsOrderStatus)}}
								</view>
							</view>
						</view>
						<view class="item" v-if="goods.goodsCheckRemark != ''">
							<text class="label">审核信息</text>
							<view class="select-content-item">
								<view class="value v-select">{{goods.goodsCheckRemark}}</view>
							</view>
						</view>
					</view>
				</block>
				<view class="info-title">软著信息</view>
				<!-- 第一部分 -->
				<view class="section">
					<view class="item">
						<text class="label">软著名称</text>
						<view class="select-content-item">
							<view class="value v-select">{{goods.goodsName}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">软著分类</text>
						<view class="select-content-no-h">
							<view class="select-item-box">
								<block v-for="(item,index) in typeNameList" :key="index">
									<view class="select-item-item">
										{{item.dataName}}
									</view>
								</block>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label">售卖价格</text>
						<view class="select-content-item">
							<view class="value v-select">{{goods.goodsPrice}}</view>
						</view>
					</view>
					<view class="item">
						<view class="label">截止售卖日期</view>
						<view class="select-content-item" style="align-items: center;">
							<view class="select-time v-select">{{goods.goodsLastTime}}</view>
						</view>
					</view>
				</view>
				<view class="info-title">著作权人信息</view>
				<!-- 第一部分 -->
				<view class="section">
					<view class="item">
						<text class="label">类别</text>
						<view class="select-content-item">
							<view class="select-time v-select">{{goods.goodsLeaderTypeName}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">姓名或机构名称</text>
						<view class="select-content-item">
							<view class="value v-select">{{goods.goodsLeader}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">省市</text>
						<view class="select-content-item">
							<view class="select-time v-select">{{cityName}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">联系电话</text>
						<view class="select-content-item">
							<view class="value v-select">{{goods.goodsLeaderPhone}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">证件类型</text>
						<view class="select-content-item">
							<view class="select-time v-select">{{cardTypeName}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">证件号码</text>
						<view class="select-content-item" style="border-bottom: none;">
							<view class="value v-select">{{goods.goodsLeaderIdcard}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-fixed-footer" v-if="goods != null">
			<view style="display: flex;flex-direction: row;width: 100%;">
				<view class="bottom-btn-gray" style="flex: auto;" @click="doDel"
					v-if="goods.goodsCheckStatus != '1' && goods.goodsStatus != '1'">删除</view>
				<view class="bottom-btn-gray ml-10" v-if="goods.goodsStatus != '1'" style="flex: auto;" @click="doEdit">
					编辑</view>
				<view class="bottom-btn-blue ml-10" style="flex:auto;"
					v-if="goods.goodsCheckStatus=='' || goods.goodsCheckStatus=='0'" @click="doCheck">提交审核</view>
				<view class="bottom-btn-blue ml-10" v-if="goods.goodsCheckStatus=='2'" style="flex:auto;"
					@click="doSale">{{goods.goodsStatus=='1'?'下架':'上架'}}</view>
			</view>
		</view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		goodsStatus
	} from '@/common/js/conver.js'
	import Shop from '@/common/js/net/shop.js'
	import {
		sImgPrefix
	} from '@/common/js/net/mainUrl.js'
	export default {
		setup() {},
		data() {
			return {
				msgHint: '',
				msgType: 'info',
				msgShow: false,
				showType: false,
				goodsId: '',
				goods: null,
				typeNameList: [],
				cardTypeName: '',
				cityName: '',
				leaderType: '',
				needRefresh: false
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "我要卖",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			const id = options.id
			if (id && id != '') {
				this.goodsId = id
				this.doGetGoodsDetail()
			} else {
				this.msgHint = '数据有误,请稍后重试'
				this.msgType = 'error'
				this.$refs.msg.open()
				setTimeout(() => {
					uni.navigateBack()
				}, 1500);
			}
		},
		onShow() {
			if (this.needRefresh) {
				this.needRefresh = false
				this.upPageNeedRefresh()
				this.doGetGoodsDetail()
			}
		},
		methods: {
			goodsStatus,
			//获取商品详情
			doGetGoodsDetail() {
				uni.showLoading({
					title: '加载中...',
				})
				const that = this
				Shop.doGetGoodsDetail(this.goodsId)
					.then(res => {
						uni.hideLoading()
						if (res && res != null) {
							res.goodsLocalPhoto = sImgPrefix + res.goodsLocalPhoto
							switch (res.goodsLeaderType) {
								case '1':
									res.goodsLeaderTypeName = '自然人'
									break
								case '2':
									res.goodsLeaderTypeName = '法人'
									break
								case '3':
									res.goodsLeaderTypeName = '非法人组织或其他'
									break
							}
							that.goods = res
							that.getDic()
						} else {
							that.msgHint = '网络错误,请稍后重试'
							that.msgType = 'error'
							that.$refs.msg.open()
							setTimeout(() => {
								uni.navigateBack()
							}, 1800);
						}
					})
					.catch(err => {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						that.msgth = 'error'
						that.$refs.msg.open()
						setTimeout(() => {
							uni.navigateBack()
						}, 1800);
					})
			},
			//获取字典详情
			getDic() {
				uni.showLoading({
					title: '加载中...',
				})
				const that = this
				//软著分类 goodsType
				const sort = Shop.doGetGoodsDic('0b00884a-f7a2-425f-93e5-599fbaad4bde')
				//证件类别 goodsLeaderIdcardType
				const type = Shop.doGetDicDetail(that.goods.goodsLeaderIdcardType)
				//省市 goodsLeaderCity1 goodsLeaderCity2
				const city1 = Shop.doGetAreaDetail(that.goods.goodsLeaderCity1)
				const city2 = Shop.doGetAreaDetail(that.goods.goodsLeaderCity2)
				const list = [sort, type, city1, city2]
				Promise.all(list)
					.then(res => {
						uni.hideLoading()
						if (res && res.length > 0) {
							const tempList = []
							res[0].forEach(item => {
								if (that.goods.goodsType.indexOf(item.dataId) != -1) {
									tempList.push(item)
								}
							})
							that.typeNameList = tempList
							that.cardTypeName = res[1].dataName
							that.cityName = res[2].areaName + '/' + res[3].areaName
						}
					})
					.catch(err => {
						console.log(err)
						uni.hideLoading()
					})
			},
			doPreImg(e) {
				uni.previewImage({
					urls: [e.currentTarget.dataset.value],
				})
			},
			backPageRefresh() {
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.needRefresh = true
				uni.navigateBack()
			},
			//提交审核
			doCheck() {
				uni.showModal({
					title: '提示',
					content: '确定要将该软著商品提交审核吗?',
					complete: (res) => {
						if (res.confirm) {
							this.goCheck()
						}
					}
				})
			},
			//去审核
			goCheck() {
				uni.showLoading({
					title: '提交中...',
				})
				const that = this
				Shop.doSubCheck(that.goodsId)
					.then(res => {
						uni.hideLoading()
						that.msgHint = '提交成功'
						that.msgType = 'success'
						that.$refs.msg.open()
						that.upPageNeedRefresh()
						that.doGetGoodsDetail()
					})
					.catch(err => {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
					})
			},
			//去编辑
			doEdit() {
				const that = this
				console.log('mangage商品ID', that.goodsId)
				uni.navigateTo({
					url: '/pages/shop/publishGoods/publishGoods?id=' + that.goodsId
				})
			},
			//删除
			doDel() {
				uni.showModal({
					title: '警告',
					content: '您确定要删除该软著商品吗?',
					complete: (res) => {
						if (res.confirm) {
							this.goDel()
						}
					}
				})
			},
			//删除
			goDel() {
				uni.showLoading({
					title: '删除中...',
				})
				const that = this
				Shop.doDelGoods(that.goodsId)
					.then(res => {
						uni.hideLoading()
						that.msgHint = '删除成功'
						that.msgType = 'success'
						that.$refs.msg.open()
						setTimeout(() => {
							that.backPageRefresh()
						}, 1200);
					})
					.catch(err => {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
					})
			},
			//上架或下架
			doSale() {
				var content
				var status = 'publish'
				if (this.goods.goodsStatus == '1') {
					//下架
					content = '您确定要下架该软著商品吗?'
					status = 'no-publish'
				} else if (this.goods.goodsStatus == '0') {
					//上架
					content = '您确定要上架该软著商品吗?'
					status = 'publish'
				}
				uni.showModal({
					title: '提示',
					content: content,
					complete: (res) => {
						if (res.confirm) {
							this.goSale(status)
						}
					}
				})
			},
			//上下架
			goSale(status) {
				uni.showLoading({
					title: '操作中...',
				})
				const that = this
				Shop.doSaleGoods(status, that.goodsId)
					.then(res => {
						uni.hideLoading()
						that.msgHint = '操作成功'
						that.msgType = 'success'
						that.$refs.msg.open()
						that.upPageNeedRefresh()
						that.doGetGoodsDetail()
					})
					.catch(err => {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
					})
			},
			upPageNeedRefresh() {
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.needRefresh = true
			}
		},
	};
</script>

<style lang="scss" scoped>
	.content-box {
		border-radius: 20rpx;
		margin-top: -30rpx;
	}

	.upload-img-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	.content-container {
		margin: 0rpx -30rpx 80rpx -30rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.info-title {
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.info-title::before {
		content: "";
		width: 10rpx;
		height: 36rpx;
		margin-right: 5rpx;
		border-left: 15rpx solid $blue-color;
		vertical-align: middle;
	}

	.section {
		margin-bottom: 15rpx;
		margin-left: 10rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
		padding: 20rpx 10rpx;
		font-size: 28rpx;
	}

	.label {
		color: $text-color;
		font-weight: bold;
	}

	.select-content {
		margin-top: 15rpx;
		display: flex;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		background-color: $bg-gray-input-color;
		padding: 0rpx 10rpx;
	}

	.select-content-no-h {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-content-item {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-item-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.select-item-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $divider-color;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		color: $text-color;
		margin-right: 15rpx;
		margin-top: 5rpx;
	}



	.desc {
		flex: 1;
		color: #999;
		text-align: left;
		padding-left: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-right: 10px;
		align-items: center;
	}

	.select-time {
		color: $text-color;
		flex: 1;
		font-size: 28rpx;
		text-align: left;
	}

	.clear-icon {
		width: 20px;
		height: 20px;
		margin-right: 20rpx;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
	}


	.value-hint {
		color: $text-gray-hint-color;
	}

	.v-select {
		color: $text-gray-desc-color;
	}

	.v-normal {
		color: $text-gray-hint-color;
	}

	.custom-dialog {
		background-color: $white-color;
	}

	.custom-tips {
		margin-top: 80px;
	}

	.c-red {
		color: $red-color;
	}

	.gray-color {
		background-color: $divider-color;
	}
</style>