<template>
	<view>
		<back :errorMsg="errorMsg"  :showFlag="showFlag" :pageName="pageName" :pageNameFlag='pageNameFlag'></back>
		<view class="chooseLine-block" v-if="errorFlag==0">
			<!-- <view>
			     <uni-calendar  ref="calendar" :insert="false"  @confirm="confirm" :range='true'></uni-calendar>
			</view>
			<view class="time-block" @click="chooseDate">
				<view class="time-block-left">
					<image class="calendar-pic" src="/static/pic/calendar.png"></image>
					<view class="time-text">
						{{startDate}}至{{endDate}}
					</view>
				</view>
				<image src="/static/pic/jump.png" class="time-block-right"></image>
			</view>
			<view class=".line-fine">
				
			</view>
			<view class="time-block">
				<view class="time-block-left">
					<image class="calendar-pic" src="/static/pic/calendar.png"></image>
					<view class="time-text">
						监测点
					</view>
				</view>
			</view>
			<view class=".line-fine">
				
			</view>
			<button class="confirm-button" type="primary">确认查询</button>
			<view class=".line-fine">
				
			</view> -->
			<view class="search-block">
				<view class="search-left">
					<image src="/static/pic/search.png" class="search-pic"></image>
					<input class="search-input" placeholder="请输入" confirm-type="done" type="text" placeholder-class="search-input-placeholder" @input="inputLine" :value="lineName"/>
				</view>
				<view class="search-text" @click="queryByName">
					搜索
				</view>
			</view>
			<view class="order-block">
				<view class="order-left" @click="showProvince">
					<view class="order-left-text">
						监测点选择
					</view>
					<image src="/static/pic/pull.png" class="order-left-pic"></image>
				</view>
				<block v-if="showProvinceFlag==1">
					<view class="order-center" @click="changeLineFlag(0)" v-if="lineFlag==1">
						<view class="order-center-text-choose">
							通讯
						</view>
						<image src="/static/pic/desc.png" class="order-center-pic"></image>
					</view>
					<view class="order-center" @click="changeLineFlag(1)" v-else>
						<view class="order-center-text">
							通讯
						</view>
						<image src="/static/pic/desc.png" class="order-center-pic"></image>
					</view>
					<view class="order-right" @click="changeLineFlag(0)" v-if="lineFlag==2">
						<view class="order-right-text-choose">
							流量
						</view>
						<image src="/static/pic/desc.png" class="order-right-pic"></image>
					</view>
					<view class="order-right" @click="changeLineFlag(2)" v-else>
						<view class="order-right-text">
							流量
						</view>
						<image src="/static/pic/desc.png" class="order-right-pic"></image>
					</view>
				</block>
			</view>
			<view :style="{height:pickerHeight}" class="picker-block" v-if="showProvinceFlag==1">
				<view class="select-block">
					<picker mode="selector" class="select-province" :range="provinceList" range-key="provinceName" @change="changeProvinceSelectedIndex($event,provinceList[provinceListIndex].provinceIndex)" v-if="provinceList.length>0">
						<view class="select-province-text">{{provinceList[provinceListIndex].provinceName}}</view>
					</picker>
					<image src="/static/pic/pull.png" class="order-left-pic" v-if="provinceList.length>0"></image>
					<picker mode="selector" class="select-company" :range="companyList" range-key="gdName" @change="changeCompanySelectedIndex($event,companyList[companyListIndex].gdIndex)" v-if="companyList.length>0">
						<view class="select-company-text">{{companyList[companyListIndex].gdName}}</view>
					</picker>
					<image src="/static/pic/pull.png" class="order-left-pic" v-if="companyList.length>0"></image>
					<picker mode="selector" class="select-substation" :range="substationList" range-key="subName" @change="changeSubstationSelectedIndex($event,substationList[substationListIndex].subIndex)" v-if="substationList.length>0">
						<view class="select-substation-text">{{substationList[substationListIndex].subName}}</view>
					</picker>
					<image src="/static/pic/pull.png" class="order-left-pic" v-if="substationList.length>0"></image>
				</view>
				<scroll-view scroll-y="true" class="search-result-block" :style="{height:pickerHeight}"  show-scrollbar="false" v-if="lineList.length>0">
					 <view  v-for="line in lineList" @click="selectLine(line.lineIndex,line)">
						 <view class="each-block">
						 	{{line.lineName}}
						 </view>
					 </view>
				</scroll-view>
				<!-- 左边导航 -->
				<!-- <scroll-view scroll-y="true" class="left-block" :style="{height:pickerHeight}"  show-scrollbar="false">
					 <view :class="provinceSelectedIndex==province.provinceIndex?'province-selected':'province'" v-for="province in provinceList" @click="selectProvince(province.provinceIndex)">
						 <view class="province-text">
						 	{{province.provinceName}}
						 </view>
					 </view>
				</scroll-view> -->
				<!-- 二级联动供电公司 -->
				<!-- <scroll-view scroll-y="true" class="company-block" :style="{height:pickerHeight}"  show-scrollbar="false" v-if="companyList">
					 <view :class="companySelectedIndex==company.gdIndex?'company-selected':'company'" v-for="company in companyList" @click="selectCompany(company.gdIndex)">
						 <view class="company-text">
						 	{{company.gdName}}
						 </view>
					 </view>
				</scroll-view> -->
				<!-- 三级联动变电站 -->
				<!-- <scroll-view scroll-y="true" class="substation-block" :style="{height:pickerHeight}"  show-scrollbar="false" v-if="substationList">
					 <view :class="substationSelectedIndex==substation.subIndex?'substation-selected':'substation'" v-for="substation in substationList" @click="selectSubstation(substation.subIndex)">
						 <view class="substation-text">
						 	{{substation.subName}}
						 </view>
					 </view>
				</scroll-view> -->
				<!-- 四级联动监测点-->
				<!-- <scroll-view scroll-y="true" class="line-block" :style="{height:pickerHeight}"  show-scrollbar="false" v-if="lineList">
					 <view :class="lineSelectedIndex==line.lineIndex?'line-selected':'line'" v-for="line in lineList" @click="selectLine(line.lineIndex,line)">
						 <view class="line-text">
						 	{{line.lineName}}
						 </view>
					 </view>
				</scroll-view> -->
			</view>
			<!-- 模糊搜索结果 -->
			<scroll-view class="search-result-block" :style="{height:pickerHeight}" scroll-y="true" v-else>
				<view class=""  v-if="queryByNameList.length!=0">
					<view class="each-block" v-for="result in queryByNameList" @click="selectLine(1,result)">
						{{result.lineName}}
					</view>
				</view>
				<view class="each-block" v-else>
					{{searchResult}}
				</view>
			</scroll-view>
		</view>
		<view class="error-block" v-else>
			<view class="error-text">
				网络出错请重试
			</view>
			<button class="retry_button" @click="retry">重试</button>
		</view>
	</view>
</template>

<script>
	import uniCalendar from "../../components/uni-calendar/uni-calendar";
	import back from '../../components/back.vue';
	export default {
		data() {
			return {
				errorFlag:0,
				showFlag:0,
				errorMsg:'',
				provinceList:[{"provinceName":"省份","provinceIndex":0}],
				provinceListIndex:0,
				provinceSelectedIndex:0,
				companyList:[{"gdName":"供电公司","gdIndex":0}],
				companyListIndex:0,
				companySelectedIndex:0,
				substationList:[{"subName":"变电站","subIndex":0}],
				substationListIndex:0,
				substationSelectedIndex:0,
				lineList:[],
				lineSelectedIndex:0,
				lineName:'',
				showProvinceFlag:1,
				lineFlag:0,
				pickerHeight:'',
				queryByNameList:[],
				searchResult:'',
				startDate:'',
				startDateMills:'',
				endDate:'',
				endDateMills:'',
				pageName:'监测点选择',
				pageNameFlag:1
			}
		},
		methods: {
			scrollH(){
				var that =this;
				var sys = uni.getSystemInfoSync();
				var winWidth = sys.windowWidth;
				var winrate = 750/winWidth;
				var winHeight= sys.windowHeight;
				that.pickerHeight = parseInt((winHeight-50)*winrate-466)+'rpx';
			},
			queryByName(){
				 var that = this;
				 that.showProvinceFlag=0;
				 if(that.judgeLogin()){
					 uni.request({
					 	url: that.serverUrl+'/device/queryByName',
					 	method: 'POST',
					 	data: {
					 		lineName:that.lineName,
					 		userId:uni.getStorageSync('userInfo').userId
					 	},
					 	header: {
					 		'content-type': 'application/x-www-form-urlencoded'
					 	},
					 	sslVerify: false,
					 	success: (res) => {
					 		uni.hideLoading();
					 		if (res.data.resultCode == '10000') {
					 			that.queryByNameList = eval(res.data.data);
								if(that.queryByNameList.length!=0){
									that.searchResult=''
								}else{
									that.searchResult='暂未搜索到监测点'
								}
					 		} else {
					 			that.errorFlag = 1
					 		}
					 	},
					 	fail: (re) => {
					 		that.errorFlag = 1
					 	}
					 });
				 }
			},
			inputLine(e){
				this.lineName=e.detail.value;
				this.showProvinceFlag=0;
				this.searchResult='';
			},
			showProvince(){
				this.showProvinceFlag=1;
			},
			getProvince(){
				 var that = this;
				 uni.request({
				 	url: that.serverUrl+'/device/getProvince',
				 	method: 'POST',
				 	data: {
				 		userId:uni.getStorageSync('userInfo').userId
				 	},
				 	header: {
				 		'content-type': 'application/x-www-form-urlencoded'
				 	},
				 	sslVerify: false,
				 	success: (res) => {
				 		uni.hideLoading();
				 		if (res.data.resultCode == '10000') {
				 			that.provinceList = that.provinceList.concat(eval(res.data.data));
				 		} else {
				 			that.errorFlag = 1
				 		}
				 	},
				 	fail: (re) => {
				 		that.errorFlag = 1
				 	}
				 });
			},
			getCompany(){
				 var that = this;
				 uni.request({
				 	url: that.serverUrl+'/device/getGDInfo',
				 	method: 'POST',
				 	data: {
				 		userId:uni.getStorageSync('userInfo').userId,
						provinceIndex:that.provinceSelectedIndex
				 	},
				 	header: {
				 		'content-type': 'application/x-www-form-urlencoded'
				 	},
				 	sslVerify: false,
				 	success: (res) => {
				 		uni.hideLoading();
				 		if (res.data.resultCode == '10000') {
				 			that.companyList =that.companyList.concat(eval(res.data.data));
				 		} else {
				 			that.errorFlag = 1
				 		}
				 	},
				 	fail: (re) => {
				 		that.errorFlag = 1
				 	}
				 });
			},
			getSubstation(){
				 var that = this;
				 uni.request({
				 	url: that.serverUrl+'/device/getSubInfo',
				 	method: 'POST',
				 	data: {
				 		userId:uni.getStorageSync('userInfo').userId,
						gdIndex:that.companySelectedIndex,
				 	},
				 	header: {
				 		'content-type': 'application/x-www-form-urlencoded'
				 	},
				 	sslVerify: false,
				 	success: (res) => {
				 		uni.hideLoading();
				 		if (res.data.resultCode == '10000') {
				 			that.substationList =that.substationList.concat(eval(res.data.data));
				 		} else {
				 			that.errorFlag = 1
				 		}
				 	},
				 	fail: (re) => {
				 		that.errorFlag = 1
				 	}
				 });
			},
			getLine(){
				 var that = this;
				 uni.request({
				 	url: that.serverUrl+'/device/getLineInfo',
				 	method: 'POST',
				 	data: {
				 		userId:uni.getStorageSync('userInfo').userId,
						subIndex:that.substationSelectedIndex,
						type:that.lineFlag
				 	},
				 	header: {
				 		'content-type': 'application/x-www-form-urlencoded'
				 	},
				 	sslVerify: false,
				 	success: (res) => {
				 		uni.hideLoading();
				 		if (res.data.resultCode == '10000') {
				 			that.lineList = eval(res.data.data);
				 		} else {
				 			that.errorFlag = 1
				 		}
				 	},
				 	fail: (re) => {
				 		that.errorFlag = 1
				 	}
				 });
			},
			selectProvince(index){
				this.provinceSelectedIndex=index;
				this.getCompany();
			},
			selectCompany(index){
				this.companySelectedIndex=index;
				this.getSubstation();
			},
			selectSubstation(index){
				this.substationSelectedIndex=index;
				this.getLine();
			},
			selectLine(index,line){
				var that=this;
				that.lineSelectedIndex=index;
				uni.$emit('lineInfoSelect',line);
				uni.navigateBack({
					delta:1
				})
			},
			changeLineFlag(flag){
				var that=this;
				that.lineFlag=flag;
				if(that.lineList){
					that.getLine();
				}
			},
			changeProvinceSelectedIndex(e,provinceIndex){
				var that =this;
				that.companyList=[{"gdName":"供电公司","gdIndex":0}]
				that.substationList=[{"subName":"变电站","subIndex":0}]
				that.provinceListIndex = e.target.value;
				that.companyListIndex=0
				that.substationListIndex=0
				that.lineList=[]
				if(e.target.value==0){
					return
				}else{
					that.provinceSelectedIndex=that.provinceList[that.provinceListIndex].provinceIndex;
					that.getCompany();
				}
			},
			changeCompanySelectedIndex(e,gdIndex){
				var that =this;
				that.substationList=[{"subName":"变电站","subIndex":0}]
				that.companyListIndex = e.target.value;
				that.substationListIndex=0
				that.lineList=[]
				if(e.target.value==0){
					return
				}else{
					that.companySelectedIndex=that.companyList[that.companyListIndex].gdIndex;
					that.getSubstation();
				}
			},
			changeSubstationSelectedIndex(e,subIndex){
				var that =this;
				if(e.target.value==0){
					that.lineList=[]
					return
				}else{
					that.substationListIndex = e.target.value;
					that.substationSelectedIndex=that.substationList[that.substationListIndex].subIndex;
					that.getLine();
				}
			},
			chooseDate(){
			    this.$refs.calendar.open();
			},
			confirm(e){
				var that = this;
				var before = e.range.before;
				var after = e.range.after;
				var b = parseInt(before.replace('-','').replace('-',''));
				var a = parseInt(after.replace('-','').replace('-',''));
				if(a>b){
					that.startDate = before;
					that.endDate = after;
					that.startDateMills = before+' 00:00:00.000';
					that.endDateMills = after +' 23:59:59.999';
				}else{
					that.startDate = after;
					that.endDate = before;
					that.startDateMills = after+' 00:00:00.000';
					that.endDateMills = before +' 23:59:59.999';
				}
			},
			retry(){
				this.scrollH();
				this.getProvince();
			}
				
		},
		components:{
			back,
			uniCalendar
		},
		onLoad() {
			this.scrollH();
			this.getProvince();
			this.queryByName();
			this.endDate=this.formatTime(new Date());
			this.startDate=this.endDate.substring(0,8)+'01';
		}
	}
</script>

<style>
@import url("chooseLine.css");
</style>
