<template>
	<div class="flexOne dzlineList">
		<div class="query-box">
			<ul>
				<li style="display: block;width: 100%">
					<span><em>出发类型</em>
								<el-select  filterable  v-model='msg.StartCityType'  >
									<el-option label="不限" value='0'></el-option>
									<el-option v-for='item in gotpye' 
										:label='item.Name'
										:value='item.Id'
										:key='item.Id'>
									</el-option>
								</el-select>
							
					</span>
					<span v-if="msg.StartCityType==2"><em>出发景点</em>
								<el-select  filterable  v-model='msg.StartCityId' @change="chufa()" >
									<el-option label="不限" value='0'></el-option>
									<el-option v-for='item in ScenicList' 
										:label='item.Name'
										:value='item.Id'
										:key='item.Id'>
									</el-option>
								</el-select>
							
					</span>
					<span v-if="msg.StartCityType==1"><em>出发城市</em>
								<el-select  filterable  v-model='goProvinceId'  @change="getProvinceList(goProvinceId,2,1)" >
							        <el-option label="不限" value='0'></el-option>
									<el-option v-for='item in provinceList' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
								<el-select  filterable  v-model='msg.StartCityId' @change="getProvinceList(msg.StartCityId,3,1)" >
							        <el-option label="不限" value='0'></el-option>
									<el-option v-for='item in cityList' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
								<el-select  filterable  v-model='msg.startdistrict'  >
							        <el-option label="不限" value='0'></el-option>
									<el-option v-for='item in district' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
					</span>
				</li>
			
				<li style="display: block;width: 100%">
					<span><em>到达类型</em>
								<el-select  filterable  v-model='msg.ArriveCityType'  @change="daoda()" >
									<el-option label="不限" value='0'></el-option>
									<el-option v-for='item in gotpye' 
										:label='item.Name'
										:value='item.Id'
										:key='item.Id'>
									</el-option>
								</el-select>
							
					</span>
					<span v-if="msg.ArriveCityType==2"><em>到达景点</em>
								<el-select  filterable  v-model='msg.ArriveCityId'  >
									<el-option label="不限" value='0'></el-option>
									<el-option v-for='item in ScenicList' 
										:label='item.Name'
										:value='item.Id'
										:key='item.Id'>
									</el-option>
								</el-select>
							
					</span>
					<span v-if="msg.ArriveCityType==1"><em>到达城市</em>
								<el-select  filterable  v-model='daProvinceId'  @change="getProvinceList(daProvinceId,2,2)" >
							        <el-option label="不限" value='0'></el-option>
									<el-option v-for='item in provinceList' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
								<el-select  filterable  v-model='msg.ArriveCityId' @change="getProvinceList(msg.ArriveCityId,3,2)" >
							        <el-option label="不限" value='0'></el-option>
									<el-option v-for='item in cityList2' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
								<el-select  filterable  v-model='msg.arrivedistrict'  >
							        <el-option label="不限" value='0'></el-option>
									<el-option v-for='item in district2' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
					</span>
				</li>
				
				
					<li style="display: block;width: 100%">
					<span><em>线路状态</em>
								<el-select  filterable  v-model='msg.ProductState'  >
							        <el-option label="不限" value='0'></el-option>
									<el-option v-for='item in producttpye' 
										:label='item.Name'
										:value='item.Id'
										:key='item.Id'>
									</el-option>
								</el-select>
							
					</span>
				</li>
                
				<li>
					<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
					<input type="button" class="normalBtn" value="新增" @click="CommonJump('adddzline')" />
				</li>
			</ul>
		</div>

		<el-table :data="dataList" stripe style="width: 100%" max-height="700" v-loading='loading' ref="table" :header-cell-style="{'text-align':'left'}">
			<el-table-column fixed prop="Id" label="Id" width="80"> </el-table-column>
			<el-table-column fixed prop="StartCityName" label="出/到城市"  >
				<template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                       {{scope.row.StartCityName}} - {{scope.row.ArriveCityName}}
                    </div>
                  </template>    
			</el-table-column>
			
			<el-table-column fixed prop="SiteList" label="站点列表" >
				
				<template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
						 <div v-show="scope.row.show==false">
							 <div class="line-h">
								<div class="line-h-l">{{scope.row.SiteList[0].Type==1?'上':'下'}}</div>
								<!-- <div>{{scope.row.SiteList[0].Time}}分</div> -->
								<div style="margin-left:10px">{{scope.row.SiteList[0].Name}} </div>
							</div>
							<div v-if="scope.row.SiteList.length>2"  style="cursor:pointer;color:#409EFF" @click="getlistshow(scope.$index)">····展开</div>
							<div class="line-h">
								<div class="line-h-l">{{scope.row.SiteList[scope.row.SiteList.length-1].Type==1?'上':(scope.row.SiteList[scope.row.SiteList.length-1].Type==2?'下':'休')}}</div>
								<div>{{scope.row.SiteList[scope.row.SiteList.length-1].Time}}分</div>
								<div style="margin-left:10px">{{scope.row.SiteList[scope.row.SiteList.length-1].Name}} </div>
							</div>
						 </div>
						 <div v-show="scope.row.show==true">
							  <div class="line-h" v-for="(activity, index) in scope.row.SiteList" :key="index">
									<div class="line-h-l">{{activity.Type==1?'上':(activity.Type==2?'下':'休')}}</div>
									<div v-if="activity.Time!=0">{{activity.Time}}分</div>
									<div style="margin-left:10px">{{activity.Name}} </div>
								</div>
								<span v-if="scope.row.show==true" style="cursor:pointer;color:#409EFF"  @click="getlistshow(scope.$index)">收起</span>
						 </div>
                    </div>
                  </template>    
			</el-table-column>
			<el-table-column fixed prop="Price" label="预计价格" width="120"> </el-table-column>

			

			<el-table-column fixed prop="Description" label="备注" > </el-table-column>
			<el-table-column fixed prop="ProductState" label="上架状态" width="80">
				
				<template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
					   <el-switch
							v-model="scope.row.ProductState"
							 :active-value="1"
							  :inactive-value="2"
							  @change="Editstate(scope.row)"
							>
						</el-switch>
                    </div>
                  </template>    
			</el-table-column>
				<el-table-column  prop="UpdateByName" label="创建人" width="150"> 
                <template slot-scope="scope">
                    
                    <div flex="dir:left cross:center">
                        {{scope.row.UpdateByName}}
                    </div>
                    <div flex="dir:left cross:center">
                        {{scope.row.UpdateDate}}
                    </div>
                </template>    
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150" >
                <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>
				  <el-tooltip class="item" effect="dark" content="报价" placement="top" >
                    <img src="../../../assets/img/userman/integral.png" alt="" class="imgstyle" @click="baojia(scope.row)">
                  </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>
       
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				loading:true,
				//分页
				total: 0,
				pageSize: '',
				currentPage: 1,
				goProvinceId:'0',
				daProvinceId:'0',
				ScenicList:[],
				//请求数据
				msg: {
					pageIndex: 1,
					pageSize: 15,
					Id: 0,
					StartCityId:'0',
					StartCityType:'0',
					ArriveCityId:'0',
					ArriveCityType:'0',
					ProductState:'0',

					startdistrict:'0',
					arrivedistrict:'0',
				},
				gotpye:[{Id:1,Name:'城市'},{Id:2,Name:'景点'},],
				producttpye:[{Id:1,Name:'上架'},{Id:2,Name:'下架'}],
			
				//返回数据
				dataList: [],
			
				provinceList: "",
				cityList: "",
				cityList2: "",
				district: "",
				district2: "",
			}
		},
		methods: {
			Editstate(row){
				let that = this
				that.apipost('car_post_SetLineProductState', {ProductId:row.Id,Type:row.ProductState}, res => {
						if(res.data.resultCode == 1) {
							that.$message.success(res.data.message)
							that.getList()
						} else {
							that.$message.error(res.data.message)	
						}
					}, err => {})
			},
			getProvinceList(ID,type,type_t=0) {
				//根据省份获取城市
				let msg = { Id: ID };
				if (type == 1) {
					this.goProvinceId = '0';
					this.daProvinceId = '0';	
				} else if (type == 2) {
					if(type_t==1){
						this.msg.StartCityId = '0';
					}else if(type_t==2){
						this.msg.ArriveCityId = '0';
					}
					
				} else if (type == 3) {
					if(type_t==1){
						this.msg.startdistrict = '0';
					}else if(type_t==2){
						this.msg.arrivedistrict = '0';
					}
				}
				
					this.apipost(
					"dict_post_Destination_GetChildList",
					msg,
					res => {
						if (type == 1) {
						this.provinceList = res.data.data;
						} else if (type == 2) {
							if(type_t==1){
								this.cityList = res.data.data;
							}else if(type_t==2){
								this.cityList2 = res.data.data;
							}
						} else if (type == 3) {
							if(type_t==1){
								this.district = res.data.data;
							}else if(type_t==2){
								this.district2 = res.data.data;
							}
						}
					},
					err => {}
					);
				
			},
			chufa(){
				this.msg.StartCityId='0';
				this.msg.startdistrict='0';
			},
			daoda(){
				this.msg.ArriveCityId='0';
				this.msg.arrivedistrict='0';
			},
			getlistshow(index){
				this.dataList[index].show = !this.dataList[index].show;
				this.$set(this.dataList,index,this.dataList[index])
				this.$forceUpdate();
			},
			
           
			
		
			getList() {
				this.loading=true
				let msg = JSON.parse(JSON.stringify(this.msg))
				if(msg.startdistrict!=0){
					msg.StartCityId = msg.startdistrict
				}
				if(msg.arrivedistrict!=0){
					msg.ArriveCityId = msg.arrivedistrict
				}
				delete msg.startdistrict
				delete msg.arrivedistrict
				this.apipost('car_get_GetLineProductPageList', msg, res => {
					if(res.data.resultCode == 1) {
						this.loading=false
						// this.$nextTick(() => {
							this.dataList = res.data.data.pageData;
							this.dataList.forEach(x=>{
								x.show=false
							})
						//  });
					
						this.total = res.data.data.count;
					}

				}, err => {})
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},
            Edit(row){
                this.$router.push("/adddzline?ID="+row.Id)
			},
			baojia(row){
				 this.$router.push("/lineoffer?id="+row.Id+'&Price='+row.Price)
			},
            delete_b(row){
				let that=this;
				that.Confirm("是否删除", function () {
					that.apipost('car_post_SetLineProductState', {ProductId:row.Id,Type:3}, res => {
						if(res.data.resultCode == 1) {
							that.$message.success(res.data.message)
							that.getList()
						} else {
							that.$message.error(res.data.message)	
						}
					}, err => {})
				});
			},
			   GetScenicList(Name){
					this.apipost('car_get_GetScenicList', {Name:Name}, res => {
							if(res.data.resultCode == 1) {
							
							this.ScenicList = res.data.data;
							}

						}, err => {})
				}
		},
		mounted() {
			this.getProvinceList(2,1)//只查中国的
			this.getList()
			this.GetScenicList('')//获取景点下啦

		}
	}
</script>

<style>
	.el-table .el-table__row {
		font-size: 12px!important;
	}
	
	.el-table__row td {
		padding: 5px 0;
	}
	.has-gutter tr th,.el-table th.is-leaf{background:#EAEAEA!important;} 	
     .app-image{
        background-position: center center;
        width: 50px;
        height: 50px;
        border-radius:0%;
        float: left;
        margin-right: 8px;
		
    }
	.dzlineList .line-h{
		display: flex;
		align-items: center;
		margin: 6px 0;
	}
	.line-h .line-h-l{
		width: 25px;
		height: 25px;
		border-radius: 50%;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F56C6C;
		margin-right: 15px;
		
	}
</style>