<template>
	<view class="safe-area-inset-bottom">
		<view class="card">
			<view class="title">
				申请信息
			</view>
			
			<view class="item">
				<text  class="left">状态</text>
				<text v-if="audit.auditStatus=='WAITING_INVITATION'" class="right" style="color: #ff9900;">待银行审核</text>
				<text v-if="audit.auditStatus=='WAITING_AUTH'" class="right" style="color: #ff9900;">待实名认证</text>
				<text v-if="audit.auditStatus=='WAITING_PLATFORM'" class="right" style="color: #ff9900;">待平台审核</text>
				<text v-if="audit.auditStatus=='WAITING_MALL'" class="right" style="color: #ff9900;">待审核</text>
				<text v-if="audit.auditStatus=='PASS'" class="right" style="color: #19be6b;">已通过</text>
				<text v-if="audit.auditStatus=='FAIL'" class="right" style="color: #E13939;">已拒绝</text>
				<text v-if="audit.auditStatus=='STOP'" class="right" style="color: #E13939;">已停用</text>
			</view>
			<view class="item">
				<text  class="left">申请时间</text>
				<text class="right">{{audit.createTime}}</text>
			</view>
			<view class="item">
				<text  class="left">商户名</text>
				<text class="right">{{audit.shopName}}</text>
			</view>
			<view class="item" v-if="audit.entity">
				<text  class="left">公司主体</text>
				<text class="right">{{audit.entity}}</text>
			</view>
			<view class="item" >
				<text  class="left">企业类型</text>
				<text class="right" v-if="audit.typeOfEnterprise=='MINICRO'">小微企业</text>
				<text class="right" v-else>{{audit.typeOfEnterprise}}</text>
			</view>
			<view class="item">
				<text  class="left">申请人</text>
				<text class="right">{{audit.legalPerson}}</text>
			</view>
			<view class="item">
				<text  class="left">身份证号码</text>
				<text class="right">{{audit.idCard}}</text>
			</view>
			<view class="item" style="justify-content: space-around;">
				<image @click="$util.preview(audit.idCardFront)" mode="aspectFill" style="width: 48%;height: 160rpx;" :src="audit.idCardFront"></image>
				<image @click="$util.preview(audit.idCardContrary)" mode="aspectFill" style="width: 48%;height: 160rpx;" :src="audit.idCardContrary" ></image>
			</view>
		</view>
		
		<view class="card">
			<text class="title">商户信息</text>
			<view class="item">
				<text class="left">商户名称</text>
				<text class="right">{{detail.name}}</text>
			</view>
			<view class="item">
				<text class="left">门店地区</text>
				<text class="right">{{detail.location}}</text>
			</view>
			<view class="item">
				<text class="left">具体地址</text>
				<text class="right">{{detail.address || '暂无'}}</text>
			</view>
			<view class="item">
				<map @tap="goMap" style="width: 100%; height: 200px;" :latitude="detail.latitude"
					:longitude="detail.longitude" :markers="covers">
				</map>
			</view>
			<view class="item">
				<text class="left">公司负责人</text>
				<text class="right">{{detail.personName}}</text>
			</view>
			<view class="item">
				<text class="left" style="width: 200rpx;">公司种类</text>
				<view class="right">
					<u-tag color="#FF9447" style="margin-left: 10rpx;" :key="index1" v-for="(item1,index1) in tags"
						:text="item1" size="mini" type="warning" mode="plain" />
				</view>
			</view>
			<view v-if="audit.businessLicense" class="item" style="justify-content: flex-start;flex-direction: column;">
				<text class="left">营业执照</text>
				<view class="center padding-top-20">
					<image @click="$util.preview(audit.businessLicense)" style="width: 70%;height: 250rpx;"
						:src="audit.businessLicense" mode="aspectFill"></image>
				</view>
			</view>
			<view class="item" style="justify-content: flex-start;flex-direction: column;">
				<text class="left">店铺实况</text>
				<view class="flex margin-top-40" style="width: 100%;">
					<image v-for="(item,index) in imgList" :key="index" :src="item" @click="$util.preview(item)" style="width: 19%;height: 130rpx;margin-right: 10rpx;" 
						mode="aspectFill"></image>
				</view>
			</view>
		</view>
		
		<block  v-if="audit.auditStatus=='WAITING_MALL'">
			<view class="" style="height: 90rpx;"></view>
			<view :style="{paddingBottom:safeAreaBottom}" class="footer-fixed padding-20  bg-white flex justify-end margin-right-30" style="box-sizing: border-box;z-index: 999;border-top: 1rpx solid #f1f1f1;">
				<view @click="opinionShow=true;pass=true" class="cu-btn df btn-bg-color  round margin-right-20" style="padding-left: 46rpx;padding-right: 46rpx;">
					通过
				</view>
				<view @click="opinionShow=true;pass=false" class="cu-btn df btn-line-color  round " style="padding-left: 46rpx;padding-right: 46rpx;">
					拒绝
				</view>
			</view>
		</block>
		
		<u-modal :show-cancel-button="true" confirm-color="#FF9447" @confirm="opinionConfirm" title="审核意见" :mask-close-able="true"
			v-model="opinionShow">
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150" ref="uForm">
					<u-form-item :border-bottom="false">
						<u-input height="150" placeholder="请输入审核意见" v-model="auditAdvice" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		props:{
			shopId: String
		},
		data() {
			return {
				detail:{},
				audit:{},
				tags:[],
				imgList:[],
				opinionShow:false,
				pass:false,
				auditAdvice:'',
				
				//流程详情
				flowDetail:{},
				covers: [{
					width: '30',
					height: '30',
					latitude: 0,
					longitude: 0,
					iconPath: '/static/icon/map.png'
				}]
			}
		},
		created() {
			this.init()
		},
		methods: {
			init(){
				this.fetchDetail()
				this.fetchAudit()
			},
			fetchAudit(){
				this.$api.audit.detail({entityId:this.shopId}).then(res=>{
					this.audit=res.data
					//待平台审核，获取任务id
					if (this.audit.auditStatus=='WAITING_MALL') {
						this.getTaskId()
					}
				})
			},
			getTaskId(){
				let params={
					assignee:this.$global.flow_prefix.mall+this.vuex_mallId,
					processInstanceId:this.audit.processInstanceId
				}
				this.$api.flow.getTaskId(params).then(res=>{
					this.flowDetail=res.data.records[0]
				})
			},
			fetchDetail(){
				this.$api.shop.detail({id:this.shopId}).then(res=>{
					this.detail=res.data
					this.covers[0].latitude = this.detail.latitude
					this.covers[0].longitude = this.detail.longitude
					this.tags=this.detail.labelKey.split(',')
					this.imgList=this.detail.shopPic.split(',')
				})
			},
			opinionConfirm() {
				if (this.pass) {
					this.doPass()
				}else{
					this.doFail()
				}
			},
			doPass(){
				this.flowDetail.comment=this.auditAdvice?this.auditAdvice:'同意'
				this.flowDetail.flag='ok'
				this.flowDetail.variables.pass=true
				this.$api.flow.flowAuditSubmit(this.flowDetail).then(res=>{
					if (res.success) {
						this.$dialog.showModal('操作成功',false).then(()=>{
							this.init()
						})
					}
				})
			},
			doFail(){
				this.flowDetail.comment=this.auditAdvice?this.auditAdvice:'不同意'
				this.flowDetail.variables.pass=true
				this.$api.flow.flowAuditSubmit(this.flowDetail).then(res=>{
					if (res.success) {
						this.$dialog.showModal('操作成功',false).then(()=>{
							this.init()
						})
					}
				})
			},
			goMap() {
				let latitude=parseInt(this.detail.latitude)
				let longitude=parseInt(this.detail.longitude)
				let name=this.detail.name
				let address=this.detail.address
				uni.openLocation({
					latitude, //纬度
					longitude, //经度
					name,
					address,
					fail: (err) => {
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card{
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.title{
			font-size: 32rpx;
			font-weight: 800;
			padding-bottom: 10rpx;
		}
		
		.item{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			
			.left{
				color: #999999;
			}
			
			.right{
				color: #252525;
			}
		}
	}
</style>
