<style scoped>
.icon {
	height: 30px;
}
.ApprovalProcessBg {
		background: #f8f8f8;
		max-height: 400px;
		overflow-y: auto;
	}
</style>
<template>
	<div class="flexOne">
		<div class="query-box">
			<ul>
				<li>
					<span><em>{{$t('system.query_airName')}}</em><el-input  v-model='msg.CategoryName' class="permiss-input" :placeholder="$t('fnc.qsrneirong')"></el-input></span>
				</li>

				<li>
					<span><em>{{$t('objFill.cengji')}}</em><el-select v-model="msg.Level"  :placeholder="$t('pub.pleaseSel')">
							    <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
							    <el-option :label="$t('objFill.jibies')[0]" value="1"></el-option>
							    <el-option :label="$t('objFill.jibies')[1]" value="2"></el-option>
							    <el-option :label="$t('objFill.jibies')[2]" value="3"></el-option>
							  </el-select>
				      </span>
				</li>
				<li>
					<span><em>{{$t('admin.admin_status')}}</em><el-select v-model="msg.Enable"  :placeholder="$t('pub.pleaseSel')">
							    <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
							    <el-option :label="$t('fnc.qiyong')" value="1"></el-option>
							    <el-option :label="$t('active.ld_jinyong')" value="2"></el-option>
							  </el-select>
				      </span>
				</li>
				<li>
					<input type="button" class="hollowFixedBtn" name="" id="" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
					<input type="button" @click="outerVisible = true,dialogTitle=$t('objFill.v101.xinzengfl'),clearMessage(),getLineList(),getAllAreaTreeList(0),getLineTeamList();" class="normalBtn" :value="$t('pub.addBtn')" />
				</li>
			</ul>
		</div>

              <el-table :data="DataList" style="width:100%"  v-loading='loading'>
                <el-table-column fixed :label="$t('ground.fenleimc')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.CategoryName}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.cengji')">
                  <template slot-scope="scope">
                    <div>
                      {{['', $t('objFill.jibies')[0],$t('objFill.jibies')[1],$t('objFill.jibies')[2]][scope.row.Level]}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.Rest.fuji')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.ParentName}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.Rest.shifouremen')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.IsHot === 1 ? $t('pub.yes') : $t('pub.no')}}</div>
                    <div>{{scope.row.TotalInventory}}</div>
                  </template>
                </el-table-column>
				<el-table-column fixed :label="$t('op.IsSelfGuidedTour')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.IsSelfGuidedTour === 1 ? $t('pub.yes') : $t('pub.no')}}</div>
                  </template>
                </el-table-column>
				<el-table-column fixed :label="$t('hotel.hotel_corrlelatition')">
                  <template slot-scope="scope">
					<template v-if="scope.row.AreaList&&scope.row.AreaList.length>0">
						<div >
							<span v-for="(file,fIndex) in scope.row.AreaList">
								{{file.Name}}{{(fIndex== (scope.row.AreaList.length-1)&&scope.row.AreaList.length>1)?"":","}}
							</span>
						</div>
					</template>
                   
					<template v-if="scope.row.LineList&&scope.row.LineList.length>0">
						<div >
							<span v-for="(file,fIndex) in scope.row.LineList">
								{{file.Name}}{{(fIndex== (scope.row.LineList.length-1)&&scope.row.LineList.length>1)?"":","}}
							</span>
						</div>
					</template>

					<template v-if="scope.row.SeriesList&&scope.row.SeriesList.length>0">
						<div >
							<span v-for="(file,fIndex) in scope.row.SeriesList">
								{{file.Name}}{{(fIndex== (scope.row.SeriesList.length-1)&&scope.row.SeriesList.length>1)?"":","}}
							</span>
						</div>
					</template>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.paixuma')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.Sort}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.activity.col6.t8')">
                  <template slot-scope="scope">
					    <!-- style="width: 100px; height: 100px" -->
					<el-image  class="icon" :src="scope.row.Icon" :preview-src-list="[scope.row.Icon]"> </el-image>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.Rest.beijintup')">
                  <template slot-scope="scope">
					<el-image  class="icon" :src="scope.row.BackgroundImage" :preview-src-list="[scope.row.BackgroundImage]"> </el-image>
				
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('admin.admin_status')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.Enable === 1 ? $t('fnc.qiyong') :$t('active.ld_jinyong')}}</div>
                  </template>
                </el-table-column>
				<el-table-column :label="$t('system.table_operation')" header-align="center" >
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
					<el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,dialogTitle=$t('objFill.v101.bianjifenl'),updateData(scope.row)">
					</el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
					<el-button v-if="!scope.row.IsLock" type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
					</el-tooltip>
				</template>
				</el-table-column>
              </el-table>

		<el-pagination
			background
			@current-change="handleCurrentChange"
			 :current-page.sync="currentPage"
			 layout="total,prev, pager, next, jumper"
			 :page-size=msg.pageSize
			 :total='total'>
		</el-pagination>

		<el-dialog :title="dialogTitle" :visible.sync="outerVisible" center width="1000px" :before-close="closeChangeMachie">
			<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
				<el-row>
					<el-col :span="12">
						<el-form-item :label="$t('system.query_airName')" prop="CategoryName">
						<el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.CategoryName" maxlength="50" :placeholder="$t('system.query_airName')">
						</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('system.table_rank')" >
						<el-input style="width:217px" type="number" v-model="addMsg.Sort" maxlength="10" :placeholder="$t('system.table_rank')">
						</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
				<el-col :span="12">
					<el-form-item :label="$t('objFill.cengji')" prop="Level">
					<el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.Level" :placeholder="$t('pub.pleaseSel')" @change="handleLevelChange">
						<el-option :label="$t('objFill.jibies')[0]" :value="1"></el-option>
						<el-option :label="$t('objFill.jibies')[1]" :value="2"></el-option>
						<el-option :label="$t('objFill.jibies')[2]" :value="3"></el-option>
					</el-select>
					</el-form-item>
					</el-col>
					<el-col :span="12">
					<el-form-item :label="$t('objFill.v101.fujifenl')" >
					<el-select :disabled="addMsg.IsLock === 1" filterable v-model="addMsg.ParentId" :placeholder="$t('pub.pleaseSel')" @change="handleParentIdChange">
						<el-option v-for="item in cateGoryList" :key="item.Id" :label="item.CategoryName"
									:value="item.Id">
						</el-option>
					</el-select>
					</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
					<el-form-item :label="$t('objFill.v101.Rest.shifouremen')" >
					<el-switch v-model="addMsg.IsHot"></el-switch>
					</el-form-item>
					</el-col>
					<el-col :span="12"><el-form-item :label="$t('visa.v_shifouqiyong')" >
					<el-switch :disabled="addMsg.IsLock === 1" v-model="addMsg.Enable"></el-switch>
					</el-form-item></el-col>
				</el-row>
				<el-row>
				<el-col :span="12">
					<el-form-item :label="$t('op.IsSelfGuidedTour')" >
						<el-checkbox v-model="addMsg.IsSelfGuidedTour"  @change="changeSelfGuidedTour()" :true-label="1" :false-label="0">{{$t('pub.yes')}}</el-checkbox>
					</el-form-item>
					</el-col>
					<el-col :span="12">
						<template v-if="addMsg.IsSelfGuidedTour==0">
							<template v-if="addMsg.Level==1">
								<el-form-item :label="$t('system.table_ssLine')">
									<el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.LineIdList" multiple collapse-tags :placeholder="$t('pub.pleaseSel')" >
										<el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
										<el-option v-for="item in queryCommonData.LineList" :label="item.LineName" :value="item.LineID"
										:key="item.LineID"></el-option>
								    </el-select>
							    </el-form-item>
						   </template>
							<template v-else>
								<el-form-item :label="$t('active.ad_xlmc')">
									<el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.SeriesIdList" multiple collapse-tags :placeholder="$t('pub.pleaseSel')" >
										<el-option :label="$t('pub.unlimitedSel')" :value=queryCommonData.SelectDefaultValue></el-option>
										<el-option v-for="item in queryCommonData.LineTeamList" :label="item.LtName" :value="item.LtID"
										:key="item.LtID"></el-option>
								</el-select>
							</el-form-item>
							</template>
						</template>
						<template v-else>
							<el-form-item :label="$t('pub.area')">
								<el-select v-model="showCategoryName" :placeholder="$t('pub.pleaseSel')" multiple clearable collapse-tags	@change="selectChange">
									<el-option :value="chooseCategroyArray" style="height: auto">
										<el-tree :data="queryCommonData.AreaList" show-checkbox node-key="Id" ref="tree" highlight-current
										:props="{label: 'Name', children: 'SubList'}" 
										:default-expanded-keys="addMsg.AreaIdList"
										:default-checked-keys="addMsg.AreaIdList"
										@check-change="handleNodeClick"></el-tree>
									</el-option>
								</el-select>
							</el-form-item>
						</template>
					</el-col>
				</el-row>
			
				<el-row>
					<el-col :span="12"><el-form-item :label="$t('objFill.v101.activity.col6.t8')" >
					<uploadImg :maxNum="1" ref="Icon"></uploadImg>
					</el-form-item>
					</el-col>
					<el-col :span="12"><el-form-item :label="$t('objFill.v101.Rest.beijintup')" >
					<uploadImg :maxNum="1" ref="BackgroundImage"></uploadImg>
					</el-form-item></el-col>
				</el-row>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
				<button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
			</div>
        </el-dialog>

		
	</div>
</template>

<script>
import uploadImg from '../../pubComponents/uploadImg'
	export default {
        components: {uploadImg},
		data() {
			return {
				imageOptions: {
				navbar: false,
				title: false
				},
				chooseCategroyArray:[],
				showCategoryName: "",
				queryCommonData:{
					LineList:[],
					LineTeamList:[],
					AreaList:[],
					AreaAllList:[],
					SelectDefaultValue: ''
				},
				defaultProps: {
					children: 'ChildList',
					label: 'DepartmentName',
				},
				images: [],
				dialogTitle: '',
				loading: false,
				DataList: [],
				cateGoryTree: [],
				cateGoryList: [],
				total: 0,
				pageSize: '',
				currentPage: 1,
				outerVisible: false,
				msg: { //列表查询请求数据
					pageIndex: 1,
					pageSize: 15,
					Enable: '1'
				},
				addMsg: {
					Level: '',
					ParentId: '',
					CategoryName: '',
					Icon: '',
					IsHot:false,
					Sort:'',
					BackgroundImage: '',
					Enable: true,
					AreaIds:"",
					LineIds:"",
					SeriesIds:"",
					AreaIdList:[],
					LineIdList:[],
					SeriesIdList:[],
					IsSelfGuidedTour:0,
				},
				rules:{
					CategoryName:[
					  { required: true, message: this.$t('objFill.v101.qingsruflemc'), trigger: 'blur' }
					],
					Level:[
					  { required: true, message: this.$t('objFill.v101.qingxzcenji'), trigger: 'change' }
					],
				},
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			  //商品分类下拉框改变
			  selectChange(e) {
				var arrNew = [];
				var dataLength = this.chooseCategroyArray.length;
				var eleng = e.length;
				for (let i = 0; i < dataLength; i++) {
				for (let j = 0; j < eleng; j++) {
					if (e[j] === this.chooseCategroyArray[i].Name) {
					arrNew.push(this.chooseCategroyArray[i])
					}
				}
				}
               this.$refs.tree.setCheckedNodes(arrNew); //设置勾选的值
			},
			handleNodeClick() {
				let res = this.$refs.tree.getCheckedNodes(true, true);
				let arrLabel = [];
				let arr = [];
				console.log(res,'---------');
				res.forEach(item => {
					arrLabel.push(item.Name);
					arr.push(item);
				});
				this.chooseCategroyArray = arr;
				this.showCategoryName = arrLabel;
				console.log("this.chooseCategroyArray ",this.chooseCategroyArray );
			},
			
		getLineList() {//获取线路列表
			this.apipost(
			"line_post_GetList", {
				LineDirection: 2
			},
			res => {
				if (res.data.resultCode == 1) {
				this.queryCommonData.LineList = res.data.data;
				}
			}
			);
		 },
		 getAllAreaTreeList(type) {//获取地区树形列表数据
			this.apipost(
			"ws_get_GetAllAreaTreeList", {},
			res => {
				if (res.data.resultCode == 1) {
				this.queryCommonData.AreaList = res.data.data.list;
				this.queryCommonData.AreaAllList=res.data.data.dataList;
				if(type==1){
					if(this.queryCommonData.AreaAllList!=null&&this.queryCommonData.AreaAllList.length>0){
							let arrLabel = [];
							this.queryCommonData.AreaAllList.forEach((item,index) => {
								this.addMsg.AreaIdList.forEach((itemId,indexId) => {
									if(item.Id==itemId){
										arrLabel.push(item.AreaName);
									}
								});
							});
							this.showCategoryName = arrLabel;
							this.$forceUpdate()
						}
				}
				}
			}
			);
		 },
		 getLineTeamList(LineIds) { //获取系列列表
			this.apipost("team_post_GetList", {LineIds: LineIds,lineID:0}, res => {
			if (res.data.resultCode == 1) {
				this.queryCommonData.LineTeamList = res.data.data;
			}
			});
		 },
			showImage(src) {
				this.$set(this.images, 0, src);
				setTimeout(() => {
				this.$viewer.show();
			}, 1000);
			},
			inited(viewer) {
				this.$viewer = viewer
			},
			handleClick(data,checked, node){
				if(checked){
					this.$refs.tree.setCheckedNodes([data]);
					this.addMsg.ParentId = data.Id
				}
			},
			getList() { //列表查询
			this.loading = true
				this.apipost('ws_post_GetCategoryPageList', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.DataList = res.data.data.pageData;
						this.total = res.data.data.count;
					}
					this.loading = false
				}, err => {this.loading = false})
			},
			handleLevelChange() {
				this.addMsg.ParentId = ''
				if(this.addMsg.Level <= 1) {
                  this.cateGoryList = [];
				  this.addMsg.LineIdList=[];
				  this.addMsg.SeriesIdList=[];
				  this.addMsg.AreaIdList=[];
				} else {
				  this.getCateGoryList();
				 
				}
			},
			changeSelfGuidedTour(){
				this.addMsg.LineIdList=[];
			    this.addMsg.SeriesIdList=[];
				this.addMsg.AreaIdList=[];
			},
			handleParentIdChange(){
				if(this.addMsg.ParentId>0){
					let  lineIds='';
					let index = this.cateGoryList.findIndex(item => item.Id ===this.addMsg.ParentId);
					this.addMsg.LineIdList=[];
					this.addMsg.SeriesIdList=[];
					this.addMsg.AreaIdList=[];
					if(index!=-1){
						lineIds=this.cateGoryList[index].LineIds;
					}
					this.getLineTeamList(lineIds);
					
				}
			},
			getCateGoryList() {
				this.apipost('ws_post_GetCategoryList', {Level: Number(this.addMsg.Level) - 1, CategoryName: '', pageIndex: 1, pageSize: 100}, res => {
					if(res.data.resultCode == 1) {
						this.cateGoryList = res.data.data;
					}
				}, err => {})
			},
			addData() { //新增数据
				const icon = this.$refs.Icon.ImageList[0]
				const background = this.$refs.BackgroundImage.ImageList[0]
				this.addMsg.Icon = icon
				this.addMsg.BackgroundImage = background
				if(!this.addMsg.ParentId && this.addMsg.Level !== 1) {
					this.$message.error(this.$t('objFill.v101.qingxzfujifl'));
                    return
				}
				
				let params = {...this.addMsg}
				params.IsHot = params.IsHot ? 1 : 2
				params.Enable = params.Enable ? 1 : 2
				if(params.LineIdList&&params.LineIdList.length>0){
					params.LineIds=params.LineIdList.toString();
				}
				if(params.SeriesIdList&&params.SeriesIdList.length>0){
					params.SeriesIds=params.SeriesIdList.toString();
				}
				var tempCategory = "";
				if (this.chooseCategroyArray && this.chooseCategroyArray.length > 0) {
					this.chooseCategroyArray.forEach(item => {
						tempCategory += item.Id + ",";
					})
				 }
		        params.AreaIds = tempCategory.substring(0, tempCategory.lastIndexOf(','));
				// if(params.AreaList&&params.AreaList.length>0){
				// 	params.AreaIds=params.AreaList.toString();
				// }
				this.apipost('ws_post_SetCategory', params, res => {
					if(res.data.resultCode == 1){
						this.outerVisible=false;
						this.$message.success(res.data.message)
						this.getList();
					}else{
						this.$message.error(res.data.message);
					}
				}, err => {})

			},
			updateData({Id}) { //修改
				this.getLineList();
				
				this.apipost('ws_post_GetCategory',{Id},res=>{
					let params = res.data.data
					params.IsHot = params.IsHot === 1
					params.Enable = params.Enable === 1
					this.addMsg = params;
					this.$refs.Icon.ImageList = params.Icon ? [params.Icon] : [];
					this.$refs.BackgroundImage.ImageList = params.BackgroundImage ? [params.BackgroundImage] : [];
					console.log(params,'-----');
					 if(this.addMsg.IsSelfGuidedTour==1){
						this.getAllAreaTreeList(1);
						
					}
					else if(this.addMsg.IsSelfGuidedTour==0&&this.addMsg.Level > 1) {
						this.getCateGoryList()
						this.getLineTeamList(params.LineIds);
					}
					else{ this.getLineTeamList();	}
				},err=>{})
			},
			//删除
			deleteData(item) {
				var that = this;
				that.Confirm(that.$t('tips.shifoushanchu'), function () {
				that.apipost(
					"ws_post_RemoveCategory", {
					Id: item.Id
					},
					res => {
					if (res.data.resultCode == 1) {
						that.Success(res.data.message);
						that.getList();
					} else {
						that.Error(res.data.message);
					}
					},
					null
				);
				});
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			clearMessage() {
				this.addMsg = {
					Level: '',
					ParentId: '',
					CategoryName: '',
					Icon: '',
					IsHot:false,
					Sort:'',
					BackgroundImage: '',
					Enable: true,
					AreaIds:"",
					LineIds:"",
					SeriesIds:"",
					AreaIdList:[],
					LineIdList:[],
					SeriesIdList:[],
					IsSelfGuidedTour:0,
				}
				if(this.$refs.Icon&&this.$refs.Icon.ImageList&&this.$refs.Icon.ImageList.length>0){
					this.$refs.Icon.ImageList = []
				}
				if(this.$refs.BackgroundImage&&this.$refs.BackgroundImage.ImageList&&this.$refs.Icon.BackgroundImage.ImageList.length>0){
					this.$refs.BackgroundImage.ImageList = []
				}
			  //this.$refs.tree.setCheckedKeys([]);
			},
			resetPageIndex() {
				this.msg.pageIndex = 1
				this.currentPage = 1
			},
			submitForm(addMsg) {//提交创建、修改表单
	            this.$refs[addMsg].validate((valid) => {
	                if (valid) {
	                    this.addData()
	                } else {
	                    return false;
	                }
	            });
	        },
		    closeChangeMachie(done){//弹出框关闭初始化弹框内表单
		         done();
		         this.resetForm('addMsg');
		    },
	        resetForm(formName) {//弹出框取消 初始化谈框内表单
	         this.$refs[formName].resetFields();
	        }
		}

	}
</script>