<template>
	<div
		class="process-box"
		:style="{
			height: height + pixelUnit,
			background: bgColor
		}"
	>
	  <div
			class="process-arrow"
			v-for="(item, index) in breadCrumbList"
			:key="index"
			:style="{
				width: width ? width.indexOf('%') > -1 ? width : width + pixelUnit : 'none',
				background: activeIndex === index ? activeBgColor : inactiveBgColor,
				borderRadius: index == breadCrumbList.length - 1 ? '6px' : '6px 0 0 6px',
			}"
			@click="setActiveIndex(index, item)"
	  >
	    <div
				class="left-arrow"
				v-if="index !== 0" 
				:style="{
					'z-index': 99 - index,
					'border-top': getColor(0, 'transparent'),
					'border-bottom': getColor(0, 'transparent'),
					'border-left': getColor(0, bgColor),
				}"
			></div>
			<!-- 'border-top': getColor(0, activeIndex === index ? activeBgColor : inactiveBgColor),
					'border-bottom': getColor(0, activeIndex === index ? activeBgColor : inactiveBgColor), -->
	    <div
				class="right-arrow"
				v-if="index !== breadCrumbList.length -1"
				:style="{
					'z-index': 99 - index + 2,
					'border-top': getColor(0, 'transparent'),
					'border-bottom': getColor(0, 'transparent'),
					'border-left': getColor(0, activeIndex === index ? activeBgColor : inactiveBgColor),
					'right': '-' + (height / 2) + pixelUnit
				}"
			></div>
	    <div
				class="content"
				:class="{ 'hover-content': activeIndex === index }"
				:style="{
					fontSize: fontSize + pixelUnit,
					color: activeIndex === index ? activeColor : inactiveColor,
					fontWeight: activeIndex === index ? 'bold' : ''
				}"
			>
	      <!-- <div class="index">{{ index + 1 }}.</div> -->
	      <div class="title" :style="{marginLeft: breadCrumbList.length != 1 ? (height / 2) + pixelUnit : 0}">
					{{ nameKey ? item[nameKey] : item }}
				</div>
	    </div>
	  </div>
	</div>
</template>

<script>
	/**
	 * 导航标签组件 数据内容为数组，可自定义显示内容的字段key
	 * @description 导航标签
	 * @property {type} list 内容数组
	 * @property {type} nameKey 显示内容的字段（默认：''） list = ['xxx', 'yyy'] or [{nameKey: 'xxx'}, {nameKey: 'yyy'}]
	 * @property {type} index 默认选中索引（默认：无）  说明：选中内容颜色不同
	 * @property {type} height 组件高度
	 * @property {type} width item项宽度（默认：'', 不限制）
	 * @property {type} fontSize 文字大小
	 * @property {type} bgColor 背景颜色（推荐设置为与整体背景一样: 默认：#F5F5F5）
	 * @property {type} activeBgColor 选中背景颜色
	 * @property {type} inactiveBgColor 未选中背景颜色
	 * @property {type} activeColor 选中文字颜色
	 * @property {type} inactiveColor 未选中文字颜色
	 * @property {type} pixelUnit 长度等单位（默认：px）
	 */
	export default {
		name:"k-bread-crumb",
		props: {
			// 内容数组 ['', ''] or [{name: ''}, {name: ''}]
			list: Array,
			// 显示内容的字段（默认：''） list = ['xxx', 'yyy'] or [{nameKey: 'xxx'}, {nameKey: 'yyy'}]
			nameKey: {
				type: String,
				default: ''
			},
			// 默认选中索引（默认：无）  说明：选中内容颜色不同
			index: [Number, String],
			// 组件高度
			height: {
				type: [String, Number],
				default: 20
			},
			// item项宽度（默认：'', 不限制）
			width: {
				type: [String, Number],
				default: ''
			},
			// 文字大小
			fontSize: {
				type: [String, Number],
				default: 13
			},
			// 背景颜色（推荐设置为与整体背景一样）
			bgColor: {
				type: String,
				default: '#F5F5F5'
			},
			// 选中背景颜色
			activeBgColor: {
				type: String,
				default: '#F2D3D1'
			},
			// 未选中背景颜色
			inactiveBgColor: {
				type: String,
				default: '#EEEEEE'
			},
			// 选中文字颜色
			activeColor: {
				type: String,
				default: '#FFF'
			},
			// 未选中文字颜色
			inactiveColor: {
				type: String,
				default: '#999'
			},
			// 像素单位
			pixelUnit: {
				type: String,
				default: 'px'
			},
		},
		data() {
			return {
				breadCrumbList: [],
				activeIndex: 0
			};
		},
		mounted() {
			this.activeIndex = this.index ? this.index : 0
			this.init()
		},
		watch: {
			list: {
				deep: true,
				handler(val, oldVal) {
					this.init()
				}
			}
		},
		methods: {
			init() {
				this.breadCrumbList = this.list
			},
			setActiveIndex(i, item) {
				this.activeIndex = i
				// 导航点击事件
				// @arg 返回索引i，内容item
				this.$emit('choose', i, item)
			},
			getColor(add = 0, color = '') {
				return `${(this.height / 2) + add}${this.pixelUnit} solid ${color}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process-box {
	  display: flex;
		margin-top: 5px;
		.process-arrow + .process-arrow {
			margin-left: 5px;
		}
	  .process-arrow {
	    height: 100%;
	    cursor: pointer;
	    position: relative;
	    transition: 0.3s;
			float: left;
	    .left-arrow {
	      position: absolute;
	      top: 0;
	      left: 0;
	      width: 0;
	      height: 0;
	      transition: 0.3s;
	    }
	    .right-arrow {
	      position: absolute;
	      top: 0;
	      right: -17px;
	      width: 0;
	      height: 0;
	      transition: 0.3s;
	    }
	    .content {
				height: 100%;
				padding: 0 6px;
				box-sizing: border-box;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      transition: 0.3s;
	      .index {}
	      .title {
	        // margin-left: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
	      }
	    }
	  }
	}

</style>