(function() {
	Vue.component('select-industry', {
		template: `<div class="modal fade" id="selindustry" tabindex="-1" role="dialog" aria-labelledby="selindustryLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header bgc-f9f9f9">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="selindustryLabel">请选择行业</h4>
						</div>
						<div class="modal-body">
							<div class="p15 bgc-fff">
								<ul class="nav nav-tabs" role="tablist" id="industrylist">
									<li role="presentation" class="active">
										<a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">{{industryname}}</a>
									</li>
									<li role="presentation">
										<a href="#direction" aria-controls="direction" role="tab" data-toggle="tab" id="_direction">{{directionname}}</a>
									</li>
								</ul>
								<div class="tab-content industrybox">
									<div role="tabpanel" class="tab-pane active w3-row-padding industry" id="home">
										<div :id="'industry_'+industry.code" class="w3-quarter mb20" v-for="industry in industrys" @click="selectindustry(industry.code,industry.value)">
											<div class="industryname">{{industry.value}}</div>
										</div>
									</div>
									<div role="tabpanel" class="tab-pane  w3-row-padding industry" id="direction">
										<div :id="'direction_'+direction.code" class="w3-quarter mb20" v-for="direction in directions" @click="selectdirection(direction.code,direction.value)">
											<div class="industryname">{{direction.value}}</div>
										</div>
									</div>
								</div>
								<div class="c-t-center">
									<button type="button" class="btn btn-default c-f16 mt20" style="width:144px;" @click="back">取 消</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>`,
		props: ["industryid", "directionid","directionname","industryname"],
		data: function() {
			return {
				industrys: [],
				directions: [],
				industryname: "请选择行业",
				directionname: "请选择方向",
			}
		},
		mounted: function() {
			this.getindustry(this.industryid,true)
		},
		methods: {
			getindustry: function() {
				var vm = this
				if(vm.industryid == -1) {
					$('#_direction').parent("li").addClass("hidden")
				} else {
					vm.selectindustry(vm.industryid,vm.industryname)
					vm.getindustry(vm.industryid,false)
					vm.selectdirection(vm.directionid,vm.directionname)
				}
			},
			getindustry: function(id, isindustry) {
				var params = {
					size: 100,
					page: 1,
					filters: 'dictId=160;catalog=' + id
				} //此页面不需要上拉加载
				mineAPI.workListGet(params).then(function(res) {
					if(isindustry) {
						vm.industrys = res;
						vm.getindustry()
					}else{
						vm.directions = res;
					}					//			getAllIndustry() //获取所有行业
				}).catch(function(err) {
					alert("获取行业列表失败");
				})
			},
			selectindustry: function(id, name) {
				var vm = this
				if(vm.industryid != -1) {
					$("#industry_" + vm.industryid).removeClass("selected")
				}
				$("#industry_" + id).addClass("selected")
				vm.industryid = id
				vm.industryname = name
				if($('#_direction').parent("li").hasClass("hidden")) {
					$('#_direction').parent("li").removeClass("hidden")
				}
				$('#industrylist a[href="#direction"]').tab('show') //转到方向页面
				vm.getindustry(id,false) //通过id获取方向
			},
			selectdirection: function(id, name) {
				var vm = this
				if(vm.directionid != -1) {
					$("#direction_" + vm.directionid).removeClass("selected")
				}
				$("#direction_" + id).addClass("selected")
				vm.directionid = id
				vm.directionname = name
			},
			back: function() {
				//				var index = top.layer.getFrameIndex(window.name);
				//				top.layer.close(index);
				$('#selindustry').modal('hide')
			},
		},
	})

})()