var TemplateItemsSelect2 = {
    template: '<div style="height: 100%;">\
    				<div class="title-name c-f16">\
	    				<span class="c-vam mr15">项目表</span><img @click="goBack" src="../../../images/fanhui02_icon.png" class="c-vam"/>\
	    			</div>\
	    			<div class="search-warp">\
						<input class="inp-search" v-model="searchName" placeholder="搜索项目名称" @input="debounceSearch"/>\
					</div>\
	    			<div class="mt10 pt10 pl10 ul-wrap">\
						<ul class="level-third">\
							<li v-for="(o, k) in serviceItems" class="ptb5">\
								<div class="list-item-name c-nowrap mr5" :class="{\'is-active\': o.isBlueBgc}">{{o.name}}</div>\
								<a href="javascript:void(0);" @click="addItem(o,k)" class="add-item-btn" :class="{\'disabled\': !o.enable}">\
									添加\
								</a>\
							</li>\
						</ul>\
	    			</div>\
    			</div>',
    props: [],
    data: function() {
        return {
        	isNew: null,
        	searchName: "",
			serviceItems: [],
			templateDetail: []
        }
    },
    beforeRouteEnter: function(to, from, next) {
	    next(function(vm) {
	    	var query = vm.$route.query
	    	if(vm.isNew == true || vm.isNew === "true") {
	    		vm.isNew = true
	    	} else {
	    		vm.isNew = false
	    	}
	    	vm.templateId = query.templateId

			if((to.path == "/template-item-detail" || from.path == "/template-item-detail" ) && from.path != "/") {
				return 
			}
			if(!vm.isNew) {
				vm.loading.show()
				vm.findTemplateDetail().then(function(res) {
					vm.loading.close()
					if(res.status == 200) {
						vm.templateDetail = res.data
						vm.getServiceItemList().then(function(){
							_.each(vm.templateDetail, function(o) {
								o.isInit=true
								EventBus.$emit("add-template-item", o)
							})
						})
					} else {
						toastr && toastr.error(res.msg)
					}
				})
			} else {
				vm.getServiceItemList()
			}
	    	
	    })
	 },
	created: function() {

	},
    mounted: function() {
		var vm = this
		EventBus.$on("delete-template-item", function(obj, i,arr){
			console.log('dd',vm.serviceItems)
			_.each(vm.serviceItems, function(item, index) {
				if(item.code==obj.code){
					if(item.code=='2'||item.code=='3'){
						item.enable = true
					}
					vm.$set(vm.serviceItems, index, item)
					// 判断左边服务项背景色是否显示蓝色 
					if(item.code==obj.code){
						var isEast=_.some(arr,function(itemb){
								if(itemb.code==obj.code){
									return true
							}						
						})
						item.isBlueBgc=isEast
					}
				}
			})
		})
    },
    methods: {
    	goBack: function() {
			EventBus.$emit("refresh-index")
    		this.$router.replace('/');
		},
    	addItem: function(o, k) {
			o.isInit=false
			if(o.code=='2'||o.code=='3'){
				o.enable=false
			}
			o.isBlueBgc=true
			EventBus.$emit("add-template-item", o)
			this.$set(this.serviceItems, k, o)
			// this.templateDetail.push(o)
    	},
    	debounceSearch: _.debounce(function() {
			var vm = this
			vm.getServiceItemList()
		}, 500, false),
		getServiceItemList: function(){
			var vm = this
			return rehaAPI.getServiceItemList({
				name: vm.searchName
			}).then(function(res) {
				vm.serviceItems = res.data
				var selected = vm.templateDetail
				var selectedIds = _.pluck(selected, "code")
				_.each(vm.serviceItems, function(o) {
					if(_.contains(selectedIds, o.code) && (o.code=='2' || o.code=='3')) {
						o.enable = false
					} else {
						o.enable = true
					}
					_.contains(selectedIds, o.code)?o.isBlueBgc=true:o.isBlueBgc=false
				})
			})
		},
		findTemplateDetail: function() {
			var vm = this
			return rehaAPI.findTemplateDetail({
				templateId: vm.templateId
			}).then(function(res) {
				return res
			})
		},
    }
}