<template>
	<view v-if="data" >
		<view v-show="!showPopupBottom">
			<view class="content-title">商户门店状态变更申请</view>
			<p class="box-top">
				<view class="item-title">日期：<text style="color:#333;font-size:24rpx;">{{data.OPERATE_DATE}}</text></view>
				<text style="color:#F27B4C;font-size:24rpx;">{{stateEmun[data.PERMISSIONAPPLY_STATE]}}</text>
			</p> 
			<BaseDetail :baseData="data"/>
			<view class="card" v-if="shopDetail">
				<view class="title-row">
					<view class="title">
						<view>变更情况</view>
					</view>
				</view>
				<view class="uni-flex jc-around  align-center" style="padding-top: 24rpx;">
					
					<view  style="text-align: center;">
						<view  style="font-size: 30rpx;">{{shopDetail.SHOPNAME}}</view>
						<view class="tag-value"> 
						<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAMAAABDGm2rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAIQUExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////4qa4JgAAACvdFJOUwCU4OoB7/1wQDD+BiFbBwI57WLEiI8EqYDuRtE/rh76Xg7n9RLKCeHwPnHoCyAryQ9Vl6MkbEEm6Sz3hYoFpsdhh2YI69gDjM0bnU1vHMgup+UQtVwVrUWDM9TXdUpEzL2r83ewxQxP7IKom6BDHymB5tOQlVJ2+1EZvt2zfxcxZbbAuXoNTIlTvBjjMrcKV6Rg/HnL+To4HYSTL3gWjvF+2Z7auJkqdNU1rIuGr9IcTW76AAACwElEQVRIx5WW9UNiQRDHV0BQkFAQ8xTRQ5EwsL2zz/b07Nbr7u7u7u7O/RePnd33HvD2wXN+gN3vzHxgh9l5IBxjZV15Y9evdSJmBdODD+/fQxzT/amGd8y15PYiGmYgu1U6eb7/F/49WakIwFiTKgHwAVl+4B92hKqnq5QBOH2/BMBVMflT6dgx/zdjzrtMAQbBNmc3HznjpkmzJglQfD7q+B/02LFgX/wR/JhEAdH4blcyqIMSAJeek/wlYxjbq5Z+zn5bfj/BAyDUWAZJVoRyhRNtNYneDLI3zlTYPuE3iA+gMdgWXu0UCP2ik32r7+W41KMEcPqIPE/Ou0UgGARnNusYjMeREgC1EHk3WW07xAD6KebLFH9qqzKgncgbYZmWLnRXPfVdEgBmpAxYQ+Qsus4vZAnrSOehDrYrfIniAEaInMQ2LuEjL3YjtPiIrJpaxidQHID1IJFrhW2zQOhBRRvgdpwUQ/kAM8jDYutlCQTXsDH8+iDidnEBNQ1EnZMEz3oGePr8FcZPLCguYK15B6htEdqt24zgTrNrX6BYQKpgMynbDXu6aGirNTLuzs3yfDj+0tAzJAPwTBuQVWYBHCM6VQBNoyzf1psErscqAE2ZRbL8Pje+C7U0DsQHGDW7MkblrWWpCPsuw6TYFIwFpEhmq+lEXOsngTltEH+6JEEfcKwWLmQu6oGEU86VAvKPk7gr4SZpxZHXRC2goEF8PhTkQErHigCeXrjNV2EzQC+zdyWAEIz2YNRE0u5TDyiX5g8x02rY5/nVAvbqSUy1JKTR58akTh0gADOxIvIKn6Atd1YVwJ8HJx6KEg9Twg0VADqMjLnRKitD8evEgGMQ4IiVWRk0bxMB6qCAdqfMcZQe4ksiADwffH0cD50N2kSA+nDj6r08jwXK8BXB/4o4NSi5kF3H94y+++wLVf4HlTtB2ack5W8AAAAASUVORK5CYII=" mode="aspectFit" style="width: 32rpx;height: 19rpx;margin-right: 8rpx;" />
						{{data.SERVERPART_NAME}}
						</view>
					</view>
					<view class="uni-flex uni-column"  style="padding-right: 20rpx;">
						<view class="uni-flex uni-row" style="align-items: center;padding-top: 8rpx;">
							<view class="date-ico">原</view>
							<text style="font-weight:bold; color: #878F94;">{{businessStatus[shopDetail.BUSINESS_ORISTATE]}}</text>
						</view>
						<view class="uni-flex uni-row end-date" style="align-items: center;">
							<view class="date-ico" style="background-color: #63A1E6;color: #fff;">现</view>
							<text style="font-weight:bold;margin-right: 16rpx;">{{businessStatus[shopDetail.BUSINESS_STATE]}}</text>
							<text class="fs24" style="color: #878F94;">{{$util.cutDate(shopDetail.BUSINESS_ENDDATE,'YYYY年MM月DD')}}</text>
						</view>
					</view>
				</view>
			</view>
	
			<view class="card">
				<view class="row jc-between" style="padding-top: 0;">
					<view  style="color: #2f93e7;">审批意见</view>		
					<text v-if="data.APPOVED_DATE" style="color:#878F94">{{$util.cutDate( data.APPOVED_DATE,'YYYY/MM/DD hh:ss')}}</text>
				</view>
				<view class="approved-reason">
					<view class="desc">
						<textarea 
						 :value="approvalReason"
						 placeholder="请输入" 
						 placeholder-style="color:#969EA4;line-height:2;padding-top:10rpx;"
						 auto-height
						 @blur="changeReason"
						 v-if="data.PERMISSIONAPPLY_STATE===2000"
						 auto-focus
						 ></textarea>
						<template v-else>
							{{data.APPOVED_NAME}}:{{data.APPOVED_INFO||''}}
						</template>
					</view>
				</view>
				<view class="button-box" v-if="data.PERMISSIONAPPLY_STATE===2000">
					<span @tap="cancelApproval"><image src="@/static/images/bh-btn.png" mode="aspectFit"></image>否决</span>
					<span @click="savaShops"><image src="@/static/images/sh-btn.png" mode="aspectFit"></image>同意</span>
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import ShopList from'./SelectShopList.vue'
	import UniPopup from '@/components/uni-popup.vue'
	import BaseDetail from './baseDetail.vue'
	export default {
		props: {
			data: {
				type: Object,
				
			},
			businessId: {
				type: String,
				required: true
			},
			approvalData:{ // 审核通过时，被授权的门店数据 
				type: Object,
				required: false
			},
			imagsList:{ // 附件信息
				type: Array,
				required: false
			}
		},
		components:{
			ShopList,
			UniPopup,
			BaseDetail
		},
		computed: {
			...mapState({
				user: (state)=>{ return state.userData}
			}),
			shopDetail () {
				
				return this.approvalData && this.approvalData.ShopModifyList ? this.approvalData.ShopModifyList[0] :null
			},
			
		},
		data() {
			return {
				showPopupBottom: false,
				shops:[],
				selectShopids:[],
				approvalReason: '',
				isloading:false,
				stateEmun: {2000:"办理中",3000:"未通过",9000:"已通过"},
				businessStatus : {
				   3000: '关闭' ,
				
				   2000: '暂停'
				,
				
				   1010: '待运营'
				,
				
				   1000: '运营中'
				}
			}
		},
		methods: {
			changeReason(event){
				this.approvalReason = event.detail.value
			},
			hidePopup(){
				this.showPopupBottom = false
			},
			priviewImages(type){ // 1 身份证正反面 2 营业执照
				uni.previewImage(type===1 ? {urls: this.personImges} : {urls: this.shopImges})
			},
			changeValues(values){
				let list = [] // this.selectShopids
				let _this =this
				if(values.length){
					_this.shops.forEach(n=>{
						const index = values.includes(n.value)
						if(index){
							list.push({
								PERMISSIONAPPLY_ID: this.data.PERMISSIONAPPLY_ID,
								SERVERPART_NAME: this.data.SERVERPART_NAME ,
								SERVERPART_ID: this.data.SERVERPART_ID,
								SERVERPARTSHOP_NAME: n.label,
								SERVERPARTSHOP_ID: n.value,
								PERMISSIONAPPLY_TYPE: 4000,
								PERMISSIONAPPLYDETAIL_TYPE:2000,
								OPERATE_DATE: new Date()
							})
						}
					})
				}
				this.selectShopids=list
				// this.hidePopup()
			},
			getShops(data) {
				let _this = this
				this.$request.$webGet('/EShangApiMain/BaseInfo/GetServerpartShopDDL',{
					ProvinceCode: data.OWNERUNIT_ID,
					ServerpartId: data.SERVERPART_ID
				}).then(res=>{
					if(res.Result_Code!==100) return 
					_this.shops = res.Result_Data.List
				})
			},
			savaShops() {
				let _this = this
				
				if(_this.isloading) return
				uni.showLoading({
					title:'正在提交'
				})
				_this.isloading = true
				const permissionApplyModel = {
					...this.data,
					APPOVED_NAME: this.user.Membership_Name,
					APPOVED_INFO: this.approvalReason ||'通过',
					APPOVED_ID: this.user.UserId,
					PERMISSIONAPPLY_STATE: 9000,
					APPOVED_DATE: new Date()
				}
				this.$request.$webPost('/EShangApiMain/BusinessProcess/ApprovedMerchantApply',{
					PermissionApplyModel: permissionApplyModel,
					ShopModifyList: this.approvalData.ShopModifyList
				}).then(res=>{
					uni.hideLoading()
					_this.isloading=false
					if(res.Result_Code!==100) {
						uni.showModal({
							title: '温馨提示',
							content: res.Result_Desc
						})
						return
					}
					uni.showModal({
						title: '温馨提示',
						content: res.Result_Desc,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								_this.$util.toNextRoute('reLaunch', "/pages/authorityApproval/index")
								} 
							}
					})
				})
			},
			cancelApproval(){
				let _this = this
				if(!this.approvalReason){
					uni.showToast({ title: '请填写否决意见' ,icon:'none'})
					return 
				}
				if(_this.isloading) return
				uni.showLoading({
					title:'正在提交'
				})
				_this.isloading=true
				const permissionApplyModel = {
					...this.data,
					 APPOVED_NAME:this.user.Membership_Name,
					 APPOVED_INFO: this.approvalReason,
					 APPOVED_ID: this.user.UserId,
					  PERMISSIONAPPLY_STATE: 3000,
					  APPOVED_DATE: new Date()
				  }
				this.$request.$webPost('/EShangApiMain/BusinessProcess/RejectPermissionApply',{
					PermissionApplyModel: permissionApplyModel
				}).then(res=>{
					uni.hideLoading()
					_this.isloading=false
					if(res.Result_Code!==100) {
						uni.showModal({
							title: '温馨提示',
							content: res.Result_Desc
						})
						return
					}
					uni.showModal({
						title: '温馨提示',
						content: res.Result_Desc,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
							// _this.$emit('refresh')
								_this.$util.toNextRoute('reLaunch', "/pages/authorityApproval/index")
								} 
							}
					})
					
				})
			}
		},
	
	}
</script>

<style lang="stylus">
	@import url("/common/css/tenderingDetail.css");
	.card {
		background-color: #fff;
		border-radius: 12rpx;
		margin: 24rpx 24rpx 24rpx;
		padding: 24rpx;
		box-shadow: 0px 4px 12px 0px rgba(225,225,225,0.56); 
		
		.row,.title-row {
			display flex;
			align-items center
			line-height 2
			padding 24rpx 0
			.title {
				flex 5
				.tag {
					background-color #5BC898
					color #FFFFFF
					padding 0rpx 8rpx
					border-radius 6rpx
					font-size 24rpx
					display inline-block
				}
				font-size 26rpx
			}
			.desc {
				flex 19
				color #3C3C3C
				font-size 26rpx
				textarea {
					width auto
					height 50rpx
					padding-top 4rpx
					line-height 1.5
				}
			}
			&:last-child {
				border none
				padding-top: 0
			}
			
		}
		.row +.row {
			padding-top: 0
		}
		.title-row {
			border-bottom 1px solid #F1F1F1
			padding-top 0
		}
		.approved-reason {
			padding: 16rpx 24rpx;
			background: #F8F9FB;
			border-radius: 4rpx;
			min-height: 97rpx;
			line-height: 2;
		}
		.uni-icon-arrowright {
			color: #969EA4;
			font-size: 24rpx;
			margin-left 16rpx;
		}
		.select-item {
			background: #f6f9fe;
			border none;
			border-radius: 12rpx;
			padding  24rpx
			margin-top 24rpx
		}
		.tag-value {
			font-size: 22rpx;
			background-color: #63A1E6;
			margin-top: 8rpx;
			color: #fff;
			border-radius: 20rpx;
			padding: 0rpx 16rpx; 
			justify-content: flex-start;
			display: flex;
			align-items: center;
		}
		.end-date {
			margin-top: 32upx;
			position: relative;
		}
		.end-date:before {
			content: '';
			position: absolute;
			height: 53upx;
			width: 1upx;
			border-left: 2upx dashed #BBC3C8;
			top: -42upx;
			left: 13upx;
		}
		.date-ico {
			font-size: 20upx;
			border-radius: 50%;
			height: 30rpx;
			width: 30rpx;
			color: #fff;
			text-align: center;
			line-height: 30upx;
			background-color: #BBC3C8;
			margin-right: 16rpx;
		}
	}

</style>
