<template>
	<view>
		<view class="base-info pb20">
			<view class="content-title">{{baseData.HIGHWAYPROINST_DESC}}</view>
			<view class="main-card">
				<div class="card-title">
					<h4>{{baseData.SERVERPART_NAME}}</h4>
					<div class="card-status" :style="baseData.HIGHWAYPROINST_NEXTID!=9000 ?'color:#df7f42;':''">
						{{proStatus[baseData.HIGHWAYPROINST_NEXTID]}}</div>
				</div>
				<div class="base-body" style="align-items: center;">
					<i class="ico ico-user"></i><span class="item-title">申请人：</span><text>{{baseData.STAFF_NAME}}</text>
				</div>
				<div class="base-body" style="align-items: center;">
					<i class="ico ico-sjx"></i><span class="item-title">创建日期：
					</span><text>{{baseData.HIGHWAYPROINST_CREATEDATE}}</text>
				</div>
				<div class="base-body">
					<view class="uni-flex" style="align-items: center;">
						<i class="ico ico-bz"></i><span class="item-title">业务说明： </span>

					</view>

					<text>{{baseData.PROINST_NAME}}</text>
				</div>
			</view>
			<div class="file-body" v-if="baseData.FileList && baseData.FileList.length>0">
				<div class="uni-flex base-body" style="align-items: center;">
					<i class="ico ico-fj"></i>
					<span class="item-title">附件文件</span>
				</div>
				<div class="imgBox">
					<filesUnit v-for="(file,i) in baseData.FileList" :fileItem="file" :key="i"></filesUnit>
				</div>
			</div>
			<div class="file-body" v-if="baseData.QualificationList && baseData.QualificationList.length>0">
				<div class="uni-flex base-body" style="align-items: center;">
					<i class="ico ico-fj"></i>
					<span class="item-title">资质文件</span>
				</div>
				<div class="imgBox">
					<filesUnit v-for="(file,i) in baseData.QualificationList" :fileItem="file" :key="i"></filesUnit>
				</div>
			</div>
			<view class="button-box" v-if="baseData.USER_ID==users.UserId">
				<span @tap="showPop(4000)">
					<image src="/static/images/yj-btn.png" mode="aspectFit"></image> 移交
				</span>
				<span @tap="showPop(2000)">
					<image src="/static/images/sh-btn.png" mode="aspectFit"></image> 审核
				</span>
				<span @tap="showPop(3000)" v-if="baseData.CAN_REJECT===1">
					<image src="/static/images/bh-btn.png" mode="aspectFit"></image> 驳回
				</span>
			</view>

		</view>
		<view class="base-info mt20" v-if="baseData.RejectApproved.length>0">
			<div class="uni-list-cell uni-collapse">
				<div class="cat-box uni-list-cell-navigate">
					<b>驳回意见</b>
				</div>
				<div class="process-box uni-collapse-content uni-active">
					<processUnit :item="baseData.RejectApproved[0]" :approveType="0" />
				</div>
			</div>
		</view>
		<view class="base-info">
			<div class="uni-list-cell uni-collapse">
				<div class="cat-box uni-list-cell-navigate"
					:class="cardShow ? ' uni-navigate-bottom' : 'uni-navigate-right'" @tap="cardShow =!cardShow">
					<b>审批流程</b>
				</div>
				<div class="process-box uni-collapse-content" :class="cardShow ? 'uni-active' : ''" v-show="cardShow">
					<processUnit v-for="item in baseData.ApproveList" :item="item" :key="item.APPROVED_ID"
						:approveType="1" />
				</div>
			</div>
		</view>
		<view class="page-title">{{baseData.ACCEPT_CODE == 100100 ? '商品新增' : '信息修改'}}详情</view>

		<div class="uni-list-cell uni-collapse base-info" v-for="(item,index) in cateArr" :key="index">
			<div class="cat-box uni-list-cell-navigate"
				:class="cardShowMap[item.id] ? ' uni-navigate-bottom' : 'uni-navigate-right'" @tap="isShowCate(item)">
				<b>{{item.name}}</b>
			</div>
			<div class="uni-collapse-content" :class="cardShowMap[item.id]? 'uni-active' : ''"
				v-show="cardShowMap[item.id]">
				<div class="main-card" v-for="(proUnit, cardIndex) in item.child" :key="cardIndex">
					<div class="card-top">
						<view class="uni-flex" style="justify-content: space-between;">
							<div class="pro-name-box">
								<p class="product-name">{{proUnit.COMMODITY_NAME}}</p>
								<!-- <p class="product-detail"><i class="ico ico-cate"></i>{{proUnit.COMMODITY_BARCODE}}</p> -->
							</div>
							<div class="pro-orther-box ">
								<p class="product-detail lh28">
									<text class="unit-text-b1">售价</text> <b
										class="product-price">￥{{$util.fmoney(proUnit.COMMODITY_RETAILPRICE,2)}}</b>
								</p>
								<!-- <p class="product-detail">{{proUnit.COMMODITY_RULE}} <text style="color: #CCCCCC;margin: 0 8upx;">|</text> {{proUnit.COMMODITY_UNIT}} <text style="color: #CCCCCC;margin: 0 8upx;">|</text> <text :class="proUnit.COMMODITY_STATE==1 ? 'product-status' : 'uni-text-gray'">{{proUnit.COMMODITY_STATE_NAME}}</text></p> -->
							</div>

						</view>
						<div class="uni-flex" style="justify-content: space-between;">

							<p class="product-detail"><i class="ico ico-cate"></i>{{proUnit.COMMODITY_BARCODE}}</p>

							<div class="pro-orther-box">

								<p class="product-detail">{{proUnit.COMMODITY_RULE}} <text
										style="color: #CCCCCC;margin: 0 8upx;">|</text> {{proUnit.COMMODITY_UNIT}} <text
										style="color: #CCCCCC;margin: 0 8upx;">|</text> <text
										:class="proUnit.COMMODITY_STATE==1 ? 'product-status' : 'uni-text-gray'">{{proUnit.COMMODITY_STATE_NAME}}</text>
								</p>
							</div>
						</div>
					</div>
					<ul :class="(baseData.ACCEPT_CODE==='100100') ? 'card-detail': (changeList[proUnit.COMMODITY_ID] ? 'card-change-detail' : 'no-show')">
						<template v-if="baseData.ACCEPT_CODE==='100100'">
							<li style="flex:2;">进货价格：<text
									style="color:#333;">{{proUnit.COMMODITY_PURCHASEPRICE ? '￥'+$util.fmoney(proUnit.COMMODITY_PURCHASEPRICE) : '-'}}</text></li>
							<li style="text-align: center;flex:1;">是否散装：<text
									style="color:#333;">{{proUnit.ISBULK_NAME}}</text></li>
							<li style="text-align: right;flex:1.5;">称重方式：<text
									style="color:#333;">{{proUnit.METERINGMETHOD_NAME}}</text></li>
						</template>
						<template v-else>
							<!-- 调整的商品参数 -->
							<li v-for='(changeItem, i) in changeList[proUnit.COMMODITY_ID]' :key="i">
								{{changeItem.changeName}}:
								<template v-if="changeItem.isprice">
									<b class="product-price">￥{{changeItem.nowV}}</b>
									<span class="through-line text-b9">￥{{changeItem.org}}</span>
									<b class="uni-icon"
										:class="(changeItem.org < changeItem.nowV) ?'uni-icon-arrowthinup': ' uni-icon-arrowthindown'"></b>
								</template>
								<template v-else>
									<text class="uni-text-gray">{{changeItem.nowV}}</text>
									<text class="through-line">{{changeItem.org}}</text>
								</template>

							</li>
						</template>
						<li v-if="baseData.HIGHWAYPROINST_NEXTID==='9000'">生效时间：<text
								class="uni-text-gray">{{proUnit.OPERATE_DATE}}</text></li>
					</ul>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	const json = {
		COMMODITY_NAME: '品名',
		COMMODITY_BARCODE: '条码',
		COMMODITYTYPE_NAME: '类别',
		COMMODITY_UNIT: '单位',
		COMMODITY_RULE: '规格',
		COMMODITY_STATE_NAME: '状态',
		COMMODITY_ORI: '产地',
		COMMODITY_RETAILPRICE: '售价',
		COMMODITY_PURCHASEPRICE: '进价',
		BUSINESSTYPE_NAME: '业态',
		COMMODITY_GRADE_NAME: '质量等级',
		ISBULK_NAME: '是否散装',
		METERINGMETHOD_NAME: '称重方式',
	}

	import {
		mapGetters
	} from 'vuex'
	import processUnit from '@/components/auditingProcess/item.vue'
	import filesUnit from '@/components/filesComponent/fileUnit.vue'

	export default {

		components: {
			filesUnit,
			processUnit
		},
		computed: {
			...mapGetters({
				'users': 'getUser'
			}),

		},
		data() {

			return {
				baseData: {},
				pageData: [],
				changeList: [],
				cateArr: [],
				cardShowMap: {},
				commodityTree: {},
				cardShow: true,
				doUser: false,
				proStatus: {
					1000: '待受理',
					2000: '办理中',
					3000: '已驳回',
					4000: '已移交',
					9000: '已审结'
				}
			}
		},
		methods: {
			isShowCate(item) {

				this.cardShowMap[item.id] = !this.cardShowMap[item.id]
			},
			getYes(val) {
				return val === 1 ? '是 ' : '否'
			},

			showPop(type) {
				let _this = this
				let url = ''
				switch (type) {
					case 4000:
						url = '/pages/auditingPop/transfer?businessType=2000&PROINST_ID=' + _this.baseData
							.HIGHWAYPROINST_ID + '&NOWACTINST_ID=' + _this.baseData.NOWACTINST_ID
						break;
					case 2000:
						url = '/pages/auditingPop/toExamine?businessType=2000&PROINST_ID=' + _this.baseData
							.HIGHWAYPROINST_ID + '&NOWACTINST_ID=' + _this.baseData.NOWACTINST_ID + '&ApproName=' + _this
							.baseData.ACTINST_NAME + '&NeedApproved=1'
						break;
					case 3000:
						url = '/pages/auditingPop/reject?businessType=2000&PROINST_ID=' + _this.baseData
							.HIGHWAYPROINST_ID + '&NOWACTINST_ID=' + _this.baseData.NOWACTINST_ID
						break;
				}
				this.$util.toNextRoute('navigateTo', url)
			},

			getDetail(id) {
				let _this = this
				_this.$request.$get("GetCommodityFlowDetail", {

					HIGHWAYPROINST_ID: id
				}).then(rs => {
					// console.log(_this.loadingType)
					if (!rs.ResultCode || rs.ResultCode != '100') {
						_this.isShow = false

					} else {
						_this.isShow = true
					}
					uni.hideLoading()
					let _data = rs.Data
					_this.baseData = _data
					// 解析附件信息
					if (_data.FileList) {
						_data.FileList.map(v => {
							let name = v.ATTACHMENT_URL.split('.')
							v.type = name[name.length - 1]
							v.name = v.ATTACHMENT_DESC
							v.path = v.ATTACHMENT_URL
						})
					}
					// 解析资质文件信息
					if (_data.QualificationList) {
						_data.QualificationList.map(v => {
							let name = v.IMAGE_URL.split('.')
							v.type = name[name.length - 1]
							v.name = v.IMAGE_TITLE
							v.path = v.IMAGE_URL
						})
					}
					_this.getChange()
					_this.$forceUpdate()

				})
			},
			getChange() { // 获取调整过的商品参数
				let _this = this
				let itemName = Object.keys(json) // 数据名称
				let changeItem = {} // 
				let map = {}
				let cateArr = []
				let cardShowMap = {}
				
				_this.baseData.CommodityList.forEach(item => {

					if (!map[item.COMMODITY_TYPE]) {
						map[item.COMMODITY_TYPE] = []
						cardShowMap[item.COMMODITY_TYPE] = true
						cateArr.push({
							id: item.COMMODITY_TYPE,
							name: item.COMMODITYTYPE_NAME,
							child: map[item.COMMODITY_TYPE]
						})

					}
					
					map[item.COMMODITY_TYPE].push(item)
					itemName.forEach(el => {
						let fName = 'F_' + el

						// item[el] 现参数值 item[fName] 原参数值
						if (item[fName] && item[el] !== item[fName]) {

							if (!changeItem[item.COMMODITY_ID]) {
								changeItem[item.COMMODITY_ID] = []
							}
							let originValue = item[fName]
							let nowValue = item[el]
							let arr = {
								changeName: json[el],
								org: originValue,
								nowV: nowValue,
								isprice: false
							}
							if (json[el].indexOf('价') > -1) {
								arr.org = _this.$util.fmoney(originValue, 2)
								arr.nowV = _this.$util.fmoney(nowValue, 2)
								arr.isprice = true
							}
							changeItem[item.COMMODITY_ID].push(arr)
						}
					})
				})
				_this.changeList = changeItem
				// _this.commodityTree = map
				_this.cateArr = cateArr
				_this.cardShowMap = cardShowMap

			}

		},
		onLoad(option) {
			let _this = this
			uni.showLoading({
				title: '正在加载'
			})
			this.getDetail(option.id)

			uni.$on('2000', function(data) {
				if (data) {
					uni.showLoading({
						title: '正在加载'
					})
					_this.pageData.pageIndex = 1
					_this.pageData.isEnd = false
					_this.getDetail(_this.baseData.HIGHWAYPROINST_ID)

				}
			});
		},
		onUnload() {
			this.$util.addUserBehavior()
			uni.$off('2000');
		},
		onShow() {

		},
		onHide() {

		}
	}
</script>

<style scoped>
	.mt20 {
		margin-top: 10upx;
	}

	.uni-icon {
		font-size: 28upx;
		font-weight: bold;
	}

	.uni-text-gray {
		font-size: 24upx;
	}

	.uni-icon-arrowthindown {
		color: #50b045;
	}

	.uni-icon-arrowthinup {
		color: #ff4952;
	}

	.no-show {
		display: none;
	}

	.pb20 {
		padding-bottom: 40upx;
	}

	.pb8 {
		padding-bottom: 8upx;
	}

	.lh28 {
		line-height: 54upx;
	}

	.file-body {
		padding: 12rpx 26rpx;
	}

	.imgBox {
		padding: 0 28rpx;
	}

	.base-info {
		background-color: #fff;
	}

	.base-info+.base-info {
		margin-top: 20upx;
	}

	.content-title {
		height: 115upx;
		line-height: 115upx;
		text-align: center;
		position: relative;
	}

	.main-card {
		/* border: 1upx solid #ddd; */
		border-radius: 6upx;
		box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.1);
		margin-left: 24upx;
		margin-right: 24upx;
		margin-top: 2rpx;
	}

	.main-card+.main-card {
		margin-top: 20upx;
	}

	.uni-collapse-content .main-card:nth-last-child(1) {
		margin-bottom: 40upx;
		
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-title h4 {
		padding: 20upx 0 15upx 20upx;
	}

	.card-status {
		font-size: 22upx;
		color: #999;
		padding-right: 16upx;
	}

	.base-body {
		font-size: 24upx;
		display: flex;
		justify-content: flex-start;
		padding: 15upx 20upx;
		align-items: flex-start;
	}

	.item-title {
		color: #777;
		width: 120upx;
		/* text-align: justify; */
		height: 40upx;
		font-size: 24upx;
		/* white-space: nowrap; */
	}

	.item-title:after {
		display: inline-block;
		content: '';
		padding-left: 100%;
	}

	.base-body+.base-body {
		border-top: 1upx dashed #eee;
	}

	.page-title {
		padding: 15upx 0 15upx 30upx;
		font-size: 26upx;
		color: #949494;
		background-color: #eee;
	}

	.cat-card {
		padding: 30upx 0;
	}

	.cat-box {
		justify-content: space-between;
		display: flex;
		margin-left: 30upx;
		margin-right: 30upx;
	}

	.cat-title {
		font-weight: bold;
	}

	.card-top {

		padding: 16upx 24upx;
	}

	.card-top .product-name {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		max-width: 400upx;
		font-size: 30upx;
		padding-bottom: 8upx;
	}

	.card-top .pro-name-box {
		flex: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.product-detail {
		color: #696969;
		font-size: 24upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.card-top .pro-orther-box {
		flex: 1;
	}

	.card-top .pro-orther-box .product-detail {
		justify-content: flex-end;
	}

	.product-price {
		color: #ee8437;
		margin-left: 10upx;
	}

	.product-status {
		color: #6dbf9c;
		font-size: 24upx;
	}

	.card-detail {
		border-top: 1upx dashed #eee;
		display: flex;
		flex-wrap: wrap;
		padding: 0 24upx 24upx 24upx;
	}

	.card-detail li {
		padding-top: 20upx;
		line-height: 30upx;
		/* flex: 33.3%; */
		font-size: 24upx;
		color: #888;
	}

	.card-change-detail {
		border-top: 1upx dashed #eee;
		padding: 0 20upx 20upx 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.card-change-detail li {
		padding-top: 20upx;
		line-height: 30upx;
		font-size: 25upx;
		padding-right: 20upx;
		display: flex;
		align-items: center;
	}

	.card-change-detail .through-line {
		text-decoration: line-through;
		color: #cbcbcb;
		margin-left: 16upx;
	}

	.text-b9 {
		color: #b9b9b9
	}

	.process-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;
	}

	.uni-list-cell:after {
		height: 0;
	}

	.button-box {
		padding-top: 36upx;
		display: flex;
		/* padding-bottom: 40upx; */
		justify-content: space-around;
		padding-bottom: 6upx;
	}

	.button-box image {
		width: 100upx;
		height: 100upx;
	}

	.button-box span {
		font-size: 24upx;
		display: flex;
		flex-direction: column;

		text-align: center;
	}

	.ico-user:before {
		background-image: url('../../static/images/tender/lxr.png');
	}

	.ico-sjx:before {
		background-image: url('../../static/images/expense/sjx.png');
	}

	.ico-cate:before {
		width: 26upx;
		height: 25upx;
		background-image: url('../../static/images/txm_logo.png');
	}
</style>
