<template>
  <view class="audit-process">
		<u-popup
			:show="show"
			mode="right"
			@close="close"
			:closeable="true">
			<view class="title">
				审批详情
			</view>
			<view class="wrap">
				<u-steps v-for="(item, index) in dataSource" :key="index" :current="currentStep(item)" direction="column">
					<u-steps-item v-for="(i, k) in subStep(item)" :key="k" :title="i.NAME">
						<view slot="brief" class="brief">
							<view class="row">
								<text>审批人：</text>
								<text>{{i.Nav_ApproveUser.NAME}}</text>
							</view>
							<view class="row">
								<text>审批时间：</text>
								<text>{{i.NODE_APPROVE_TIME === "0001-01-01 00:00:00" ? '' : i.NODE_APPROVE_TIME}}</text>
							</view>
							<view class="row">
								<text>审批结论：</text>
								<text>{{auditResult(i)}}</text>
							</view>
							<view class="row" v-if="i.CONTEXT">
								<text>审批意见：</text>
								<text>{{i.CONTEXT || ''}}</text>
							</view>
						</view>
					</u-steps-item>
					<u-line color="#2979ff" v-if="index !== dataSource.length-1" style="margin: 5px 0px;"></u-line>
				</u-steps>
			</view>
		</u-popup>
  </view>
</template>
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
			dataSource: {
				type: Array,
				default() {
					return []
				}
			}
    },
		data() {
			return {
				// currentStep: 0
			}
		},
    methods: {
			close() {
				this.$emit('close')
			},
			auditResult(e) {
				let result
				if (e.NODE_APPROVE_STATUS === 10) {
					result='同意';
				} else if (e.NODE_APPROVE_STATUS === 20) {
					result = '驳回';
				}
				return result
			},
			currentStep(e) {
				const res = this.subStep(e)
				let cur = res.length
				res.forEach((o, k) => {
					if (o.IS_CURRENT) {
						cur = k
					}
				})
				return cur
			},
			subStep(val) {
				return val.Nav_ApproveDetails?.slice().sort((a, b) => a.NUM - b.NUM)
			}
    },
		watch: {

		},
		computed: {

		}
  }
</script>
<style scoped>
	.audit-process >>> .u-popup__content {
		height: 100%;
		overflow-y: auto;
	}
	.title {
		height: 48px;
		line-height: 48px;
		font-weight: bold;
		padding-left: 15px;
		border-bottom: 1px solid #e5e5e5;
		/* margin-bottom: 15px; */
	}
	.wrap {
		min-width: 200px;
		max-width: 400px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 15px;
		height: 100%;
		overflow-y: auto;
	}
	.brief {
		font-size: 12px;
		margin-top: 10px;
	}
	.brief .row {
		margin-bottom: 6px;
	}
</style>
