<template>
	<div class="flexOne">
		<div class="query-box">
			<ul>
				<li>
					<span><em>景点名称：</em><el-input v-model='msg.Name'  class="permiss-input"></el-input></span>
				</li>
				
				<li>
					<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
					<input type="button" @click="addjd(),dialogTitle='新增景点'" class="normalBtn" :value="$t('pub.addBtn')" />
				</li>
			</ul>
		</div>
		<div >
			<el-table
			:data="DataList"
			header-cell-class-name="headClass"
			style="width: 100%"
			border
		  >
	
			<el-table-column prop="Id" label="ID"  width="100"></el-table-column>
			<el-table-column prop="Name" label="景点名称" ></el-table-column>
			<el-table-column  prop="ProvinceName" label="景点地址">
			  <template slot-scope="scope">
				<span>{{scope.row.ProvinceName}}、{{scope.row.CityName}}、{{scope.row.DistrictName}}</span>
			  </template>
			</el-table-column>
	
			<el-table-column prop="UpdateByName" label="操作人" ></el-table-column>
			<el-table-column prop="UpdateDate" label="操作时间" ></el-table-column>
			
	
			<el-table-column fixed="right" label="操作" width="180" >
			  <template slot-scope="scope">
				<el-tooltip class="item" effect="dark" content="编辑" placement="top" >
				  <img src="../../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="删除" placement="top" >
				  <img src="../../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
				</el-tooltip>
			  </template>
			</el-table-column>
		  </el-table>
		</div>
		<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 custom-class='w800' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
			            <el-form  :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" >
							<table class="layerNoIcon">
								<el-form-item  label="景点名称" prop="Name">
									<el-input class='w600' type="text" v-model="addMsg.Name" placeholder="请输入"></el-input>
								</el-form-item>	
								<el-form-item  label="景点拼音">
									<el-input class='w600' type="text" v-model="addMsg.PinYin" placeholder="请输入"></el-input>
								</el-form-item>	
								
								<el-form-item label="景点地址">
									
									<el-select v-model="addMsg.ProvinceId" class="w150"  filterable @change="getProvinceList(addMsg.ProvinceId,2)" :placeholder="$t('hotel.hotel_province')">
										<el-option v-for='item in provinceList'
											:key="item.ID" 
											:label="item.Name"
											:value="item.ID">
										</el-option>
									</el-select>                           
									<el-select v-model="addMsg.CityId" class="w150"  filterable @change="getProvinceList(addMsg.CityId,3)" :placeholder="$t('hotel.hotel_city')">
										<el-option v-for='item in cityList'
											:key="item.ID" 
											:label="item.Name"
											:value="item.ID">
										</el-option>
									</el-select>
									<el-select v-model="addMsg.DistrictId" class="w150"  filterable :placeholder="$t('hotel.hotel_area')">
										<el-option v-for='item in district'
											:key="item.ID" 
											:label="item.Name"
											:value="item.ID">
										</el-option>
									</el-select>
								</el-form-item>
						    </table>
						</el-form>
						
						
					<div  slot="footer" class="dialog-footer">
						<button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
						 &nbsp;
						<button class="normalBtn" type="primary" @click="submitForm('addMsg',1)" v-if="dialogTitle=='新增景点'">新增</button>
						<button class="normalBtn" type="primary" @click="submitForm('addMsg',2)" v-if="dialogTitle=='修改景点'">修改</button>
					</div>
					
			</el-dialog>		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				loading:true,
				//分页
				total: 0,
				pageSize: '',
				currentPage: 1,
				//弹窗
				outerVisible: false,
				isRight: true,
				dialogTitle: '',
				//请求参数
				msg: {
					pageIndex: 1,
					pageSize: 15,
					Name: '',
				},
				addMsg:{
					Id:'-1',
					Name:'',
					DistrictId:'',
					CityId:'',
					ProvinceId:'',
					PinYin:'',
					
				},
				rules:{
					Name: [{
						required: true,
						message: '景点名称',
						trigger: 'blur'
					}],	
					Content: [{
						required: true,
						message: this.$t('adm.adm_qsrgbneirong'),
						trigger: 'blur'
					}],	
				},
				
				//返回结果
				DataList: [],
			    detailMessage:[],
			    downLoadList:[],
				provinceList: "",
				cityList: "",
				district: "",
			}
		},
	
		mounted() {
			let userInfo=this.getLocalStorage();
		    this.addMsg.RB_Group_Id=userInfo.RB_Group_id
			this.getList();
			this.getProvinceList(2,1)
		},
		methods: {
			addjd(){
				this.outerVisible=true;
				this.addMsg={
					Id:'-1',
					Name:'',
					DistrictId:'',
					CityId:'',
					ProvinceId:'',
					PinYin:'',
				}
			},
			getProvinceList(ID,type) {
				//根据省份获取城市
				let msg = { Id: ID };
				if (type == 1) {
					this.addMsg.ProvinceId = "";
					this.addMsg.CityId = "";
					this.addMsg.DistrictId = "";
					
				} else if (type == 2) {
					this.addMsg.CityId = "";
					this.addMsg.DistrictId = "";
					
				} else if (type == 3) {
					this.addMsg.DistrictId = "";
					
				}
				if (this.addMsg.Country != "" || this.msg.CountryStr != "") {
					this.apipost(
					"dict_post_Destination_GetChildList",
					msg,
					res => {
						if (type == 1) {
						this.provinceList = res.data.data;
						} else if (type == 2) {
						this.cityList = res.data.data;
						} else if (type == 3) {
						this.district = res.data.data;
						}
					},
					err => {}
					);
				}
			},
			
			getList() { //景点列表
				this.loading=true;
				this.apipost('car_get_GetScenicPageList', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.loading=false;
						this.DataList = res.data.data.pageData;
						this.total = res.data.data.count;
					}  
				}, err => {})
			},
			Edit(row){
				
				this.dialogTitle='修改景点'
				this.addMsg.Name = row.Name;
				this.addMsg.Id = row.Id;
				this.addMsg.ProvinceId = row.ProvinceId;
				this.getProvinceList(this.addMsg.ProvinceId,2)
				this.addMsg.CityId = row.CityId;
				this.getProvinceList(this.addMsg.CityId,3)
				this.addMsg.DistrictId = row.DistrictId;

				this.outerVisible=true;
			},
		
			addNotice(_status){
				this.apipost('car_post_SetScenicInfo', this.addMsg, res => {
						if(res.data.resultCode == 1) {
							this.$message.success(res.data.message)
							this.outerVisible=false;
							this.getList()
							this.resetForm('addMsg');
						} else {
							this.$message.error(res.data.message)	
						}
					}, err => {})
			},
			delete_b(row){
				let that=this;
				that.Confirm("是否删除此景点?", function () {
					that.apipost('car_post_DelScenicInfo', {ScenicId:row.Id}, res => {
						if(res.data.resultCode == 1) {
							that.$message.success(res.data.message)
							that.getList()
						} else {
							that.$message.error(res.data.message)	
						}
					}, err => {})
				});
			},
		
		
		
		
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
			},
			submitForm(addMsg,_type) { //提交创建、修改表单
				this.$refs[addMsg].validate((valid) => {
					if(valid) {
						if(this.addMsg.ProvinceId=='' || this.addMsg.CityId == ''){
							this.$message.error('请选择地址')	
							return
						}
						this.addNotice(_type)
					} else {
						return false;
					}
				});
			},
			closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
				done();
				this.resetForm('addMsg');
			},
			resetForm(formName) { //弹出框取消 初始化谈框内表单
				if (formName) {
					this.$refs[formName].resetFields();
				}
				
				this.addMsg.Id='-1'
			}			
		}
	}
</script>

<style>
	.ann_detail_title{line-height: 24px; font-size: 15px; font-weight: bold; text-align: center;}
	.ann_textarea textarea{height:400px!important;}
	.AnnfileList{padding: 5px 0;}
	.AnnfileList li{height: 30px; line-height: 30px; padding: 0 10px;}
	.AnnfileList li:hover{background: #f1f1f1;}
	.AnnfileList li>i{float: right; margin-top:8px;}
	.AnnfileList li:hover,.AnnFileListPMeta:hover{text-decoration: underline; color: #E95252; cursor: pointer;}
	.AnnFileListPMeta{
		color: blue
	}
	.AnnFileListPMeta .iconfon{
		font-size: 12px;
	}
	.el-table .el-table__row {
		font-size: 12px!important;
	}
	
	.el-table__row td {
		padding: 5px 0;
	}
</style>