<template>
	<van-popup ref="detailPopup" v-model="show" @closed="$emit('closed')" round class="mtrl-detail-popup" get-container="body" position="bottom" :style="{ height: '80%' }">
		<van-cell-group class="detail-header" ref="detailHeader">
			<van-cell class="header-title" title-class="header-popup-title" center>
				<template slot="title">
					<template v-if="title">
						{{ title }}
					</template>
					<slot v-else name="title"></slot>
				</template>
				<template slot="default">
					<slot name="title_default"></slot>
				</template>
			</van-cell>
		</van-cell-group>
		<main class="detail-main">
      <slot name="detail-main-header"></slot>
			<div class="main-mtrl">
        <slot name="detail-main-mtrl">
				<van-cell-group class="info-cell-group" v-for="(items, index) in basedata"
					:key="index">
					<van-cell
						title-class="info-title"
						value-class="info-value"
						v-for="(item, idx) in items.data"
						:key="idx"
						:title="item.title"
						:value="item.value"
						center
					>
					</van-cell>
				</van-cell-group>
        </slot>
			</div>
			<van-tabs ref="detailTabs" class="detail-tabs" v-model="tabsActive" scrollspy sticky color="#2196f3" :offset-top="`${tabsHeight}px`">
				<van-tab
					v-for="(items, index) in mtrldata"
					:key="index"
					:title="items.title"
					:name="items.title"
				>
					<template v-if="items.style == 'cell-info'">
						<van-cell-group :title="items.title" class="info-cell-group">
							<van-cell
								title-class="info-title"
								value-class="info-value"
								v-for="(item, idx) in items.data"
								:key="idx"
								:title="item.title"
								:label="item.label"
							>
								<template>
									<template v-if="item.value != ''">
										{{ item.value }}
									</template>
									<template v-else>
										{{ `-` }}
									</template>
								</template>
							</van-cell>
						</van-cell-group>
					</template>

					<template v-else-if="items.style == 'cell-fj'">
						<van-cell-group :title="isFjTitle(items)" class="info-cell-group fj-cell-group">
							<template v-if="items.fjData.length">
								<van-cell
									title-class="info-title"
									value-class="info-value"
									v-for="(item, idx) in items.fjData"
									:key="idx"
									:title="item.fileName"
									:value="isFjKB(item.filekb)"
									@click="$emit('openFj', item)"
								>
									<template #icon>
										<div class="iconfont">
											<svg class="icon" aria-hidden="true">
												<use :xlink:href="icon(item.fileType)"></use>
											</svg>
										</div>
									</template>
								</van-cell>
							</template>
						</van-cell-group>
					</template>
					<template v-else-if="items.style == 'cell-process'">
						<van-cell-group :title="items.title" class="info-cell-group fj-cell-group">
							<van-cell
								title-class="info-title"
								value-class="info-value"
								v-for="(item, idx) in items.processData"
								:key="idx"
								:title="item.Proname"
								:label="item.procode"
								is-link
								@click="handleProcessFj(item)"
							>
								<template #icon>
									<div class="iconfont">
										<i class="iconfont icon-process"></i>
										<div class="badge">
											{{item.Proorder}}
										</div>
									</div>
								</template>
								<template>
									<div class="workprice" v-if="gw_power1">
										<!-- <span class="workprice-item"> -->
											<i class="iconfont icon-danjia"></i>
											{{ item.workPrice }}
										<!-- </span> -->
									</div>
								</template>
							</van-cell>
						</van-cell-group>
					</template>
				</van-tab>
			</van-tabs>
		</main>
		<footer class="footer-control">
			<slot name="footer">
				<van-button class="footer-btn" round block type="info" @click="close">
					{{ '确定' }}
				</van-button>
			</slot>
		</footer>
	</van-popup>
</template>

<script>
import { Popup, Tabs, Tab, CellGroup, Cell, Button } from 'vant'

export default {
	name: 'LjMtrlDetail',
	components: { 
		'van-popup': Popup,
		'van-tabs': Tabs,
		'van-tab': Tab,
		'van-cell-group': CellGroup,
		'van-cell': Cell,
		'van-button': Button,
	},
	data() {
		return {
			show: false,
			tabsActive: 0,
			tabsHeight: 0,
		};
	},
	props: {
		title: String,
		gw_power1: {
			type: Number/String,
			default: 0
		},
		// showvalue: {
		// 	type: String,
		// 	default: 'salesOrder,mark,specialRequests,mtrlProp,mtrlArguments,mtrlProcess'
		// },
		mtrldata: Array,
		basedata: Array,
		mtrlBasic: Object
	},
	computed: {
		icon(type) {
			return function(type) {
				if (type) {    
						switch (type.toLowerCase()) {
								case "jpg":
								case "jpeg":
								case "png":
								case "gif":
								case "bmp":
										return "#icon-tupian";
								case "xls":
								case "xlsx":
										return "#icon-excel";
								case "doc":
								case "docx":
										return "#icon-WORD";
								case "txt":
										return "#icon-txt";
						}
				}
				return "#icon-yasuobao";
			}
		},
		isFjKB(size) {
			return function(size) {
				if (size < 1024) {
					return `${size}Kb`
				} else {
					return `${parseFloat((size / 1024).toFixed(2))}Mb` 
				}
			}
		},
		isFjTitle(items) {
			return function(items) {
				if (items.fjData.length) {
					return items.title;
				} else {
					return '暂无唛头'
				}
			}
		}
	},
	mounted() {
		console.log(JSON.stringify(this.basedata))
	},
	methods: {
		open(active) {
			this.show = true;
			setTimeout(() => { 
				this.tabsHeight = this.$refs.detailPopup.$el.offsetTop + this.$refs.detailHeader.clientHeight;
				if (active) {
					setTimeout(() => {
						this.$refs.detailTabs.scrollTo(active)
					}, 300);
				}
			}, 200);
		},
		close() {
			this.show = false
		},
		handleProcessFj(item) {
			this.$emit('openProcess', item, this.itemD)
		}
	},
};
</script>

<style lang="less" scoped>
@import "~assets/css/lj-style-variable.less";

.mtrl-detail-popup {
	display: flex;
	flex-direction: column;

	.detail-header {
		flex-shrink: 0;
	}
	.detail-main {
		flex: 1;
		overflow: scroll;
	}
	.footer-control {
		flex-shrink: 0;
		display: flex;
		padding: 5px 10px;
	}
	.header-popup-title {
			font-weight: bold;
			// text-align: center;
			height: 30px;
			line-height: 30px;
	}
	.detail-tabs {
		background-color: #f6f7f8;
	}
	.info-cell-group {
		padding: 0 10px;

		.info-title {
			color: #595959;
			flex: 1;
		}
		.info-value {
			color: @summaryHeavyTextColor;
			text-align: left;
			flex: 3;
		}
		&.fj-cell-group {
			.iconfont {
				position: relative;
				display: flex;
				align-items: center;
				margin-right: 5px;

				.badge {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 12px;
					text-align: center;
					min-width: 16px;
					padding: 2px;
					border-radius: 50%;
					line-height: 12px;
					color: #fff;
					background-color: @colorPass;
				}
			}
			.info-title {
				color: @summaryHeavyTextColor;
				flex: 3;
			}
			.info-value {
				color: #595959;
				text-align: right;
				flex: 1;
			}
		}
		.workprice {
			display: flex;
			margin-right: 2px;
			// .workprice-item {
			// 	padding: 2px 4px;
			// 	border-radius: 4px;
			// 	background-color: #fafafa;
			// }
			.iconfont {
				font-size: 12px;
			}
		}
	}
	.van-cell:not(.header-title) {
			text-align: left;
			padding: 8px 10px;
	}
	.header-title {
			padding: 10px 15px;
	}
}
</style>