<template>
	<view class="con_top">
		<view class="con_top_block"></view>
		<view class="con_top_left">
			<view class="con_top_left_box" :class="{active: tabIdx == 1}" @click="changeTab(1)">
				<!-- <img src="@/static/images/download.svg" class="icons-custom" /> -->
				<img v-if="tabIdx == 1" src="@/static/images/tabbar/home_selected.svg" class="icons-custom"/>
				<img v-else src="@/static/images/tabbar/home_normal.svg" />
				<view class="con_top_left_box_text" :class="tabIdx == 1 ? 'color-custom' : ''">课件</view>
			</view>
			<view class="con_top_left_box" :class="{active: tabIdx == 2}" @click="changeTab(2)">
				<img v-if="tabIdx == 2" src="@/static/images/tabbar/mine_selected.svg" class="icons-custom"/>
				<img v-else src="@/static/images/tabbar/mine_normal.svg" />
				<view class="con_top_left_box_text" :class="tabIdx == 2 ? 'color-custom' : ''">我的</view>
			</view>
		</view>
      <view class="con_top_right" @click="openPop" v-if="tabIdx == 1 || (tabIdx == 2&&type == 'main')">
        <view class="con_top_right_con bg-custom" v-if="showBtn">
          <image mode="heightFix" src="@/static/images/plus.png"></image>
          <view class="con_top_right_con_text">新增课件</view>
        </view>
      </view>
      <view class="con_top_right" @click="addPerson" v-else-if="tabIdx == 2 && type == 'volunteer'">
        <view class="con_top_right_con bg-custom">
          <image mode="heightFix" src="@/static/images/plus.png"></image>
          <view class="con_top_right_con_text">{{isDoctor ? '添加志愿者' : '添加医生'}}</view>
        </view>
      </view>
      <view class="con_top_right" v-else>

      </view>
	</view>
</template>

<script>
	export default {
		props:{
			tabIndex:{
				type: Number,
				default: 1
			},
			conType:{
				type: String,
				default: ''
			},
			isDoctor:{
				type: Boolean,
				default: true
			},
      showBtn:{
        type:Boolean,
        default:true
      }
		},
		data() {
			return {
				openSelect2: false,
				tabIdx: 1,
				type: '',
			};
		},
		watch: {
		    tabIndex: {
		      handler(newVal, oldVal) {
				this.tabIdx = this.tabIndex
			  },
		      immediate: true,
		      deep: true
		    },
			conType: {
		      handler(newVal, oldVal) {
				this.type = this.conType
			  },
		      immediate: true,
		      deep: true
		    },
		},
		methods:{
			// 切换tab
			changeTab(e){
				this.tabIdx = e
				this.$emit("changeTab",e)
			},
			// 新增课件
			openPop() {
				// this.openSelect2 = false
				// this.$refs.popup.open()
				this.$emit("openPop")
			},
			// 新增志愿者、医生
			addPerson(){
				this.$emit("addPerson")
			}
		}
	}
</script>

<style lang="scss" scoped>
.con{
		position: relative;
		background-color: #F2F3F5;
		width: 100%;
		&_top{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 4.17rpx 7.81rpx 5.21rpx;
			background-color: #fff;
			height: 35.42rpx;
			&_block{
				width: 33%;
			}
			&_left{
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				&_box{
					background-color: transparent;
					padding: 5.21rpx 12.5rpx;
					display: flex;
					align-items: center;
					border-radius: 26.04rpx;
					overflow: hidden;
					cursor: pointer;
					&_text{
						margin-left: 4.17rpx;
						font-weight: 400;
						font-size: 8.33rpx;
						line-height: 12.5rpx;
						color: #86909C;
					}
				}
				&_box:first-child{
					margin-right: 6.25rpx;
				}
				&_box.active{
					background-color: #F7F8FA;

				}
			}
			&_right{
				width: 33%;
				display: flex;
				justify-content: flex-end;
				&_con{
					padding: 5.21rpx 12.5rpx;
					display: flex;
					align-items: center;
					border-radius: 26.04rpx;
					overflow: hidden;
					cursor: pointer;
					&_text{
						margin-left: 4.17rpx;
						color: #FFF;
						font-size: 8.33rpx;
						line-height: 12.5rpx;
						font-weight: 400;
					}
					uni-image{
						width: 11.46rpx;
						height: 11.46rpx;
					}
				}
			}
		}
	}
</style>
