<template>
	<div class="base-right">
		<img @click="onRightImg" class="img_position" src="@/assets/images/right.png" alt="" />

		<div class="base_border_box">
			<div class="title">{{ title }}</div>
			<div class="page_btn">
				<div @click="onClickBtn(index, item.obj)" :class="{ activeClass: item.is }" class="btn" v-for="(item, index) in listText" :key="index">{{ item.name }}</div>
			</div>
		</div>

		<div class="tian_qi">
			<div class="tian_qi_title">实时气象数据</div>
			<div class="tian_qi_body">
				<div style="font-size: 2vw">
					<img :src="tian_qi_data.img || '/image/tian_qi2.png'" alt="" />
				</div>
				<span>{{ tian_qi_data.air_level }}</span>
				<span>{{ tian_qi_data.temp }}</span>
				<span>{{ tian_qi_data.wea }}</span>
			</div>
		</div>
	</div>
</template>

<script>
import { randNum } from '@/utils'
import { dept, /* weather, */ getWeather} from '@/api'
export default {
	data() {
		return {
			listText: [],
			listAll: [],
			isRightFalse: true,

			tian_qi_data: {},
		}
	},

	mounted() {
		/* this.axios.get('https://tianqiapi.com/api', {
			params: {
				version: 'v6',
				appsecret: 'Ml0dXby6',
				appid: '31268663',
			},
		}).then(res => {
			this.tian_qi_data = res.data
		}) */
		var that = this;
		getWeather({c:'code', id:12, icon:1, num:3, py:'neimenggu'}).then(function(res){
			var body = document.createElement("div");
			setTimeout(function(){
				body.innerHTML = res;
				var styles = body.querySelectorAll("link");
				for(var style of styles){
					body.removeChild(style)
				};
				var scripts = body.querySelectorAll("script");
				for(var script of scripts){
					script.parentNode.removeChild(script)
				};

				var day_1 = body.querySelector("#day_1");
				var img = day_1.querySelector(".pngtqico");
				var wtline = day_1.querySelector(".wtline").nextElementSibling;
				var flag = day_1.parentNode.title;
				var temp = wtline.innerText;

				var div2 = document.createElement("p");
				div2.innerHTML = img.outerHTML;
				that.tian_qi_data = {
					temp: temp,
					wea: flag,
					img: 'http://i.tianqi.com/static' + img.src.split('/static')[1],
				}
			}, 300);

			/* if(res.replace(/\s+/g, '')){
				var str = res.replace(/(\r\n)|(\n)/g, '&').split(/&&|&/g);
				var todayStr = str[1];
				if(todayStr){
					var items = todayStr.split(/。/g);
					var tempStr = items[1];
					var temp = tempStr && tempStr.match("：") ? tempStr.split(/：/g)[1] : tempStr;
					var item3Str = items[2];
					var item3 = item3Str && item3Str.match("：") ? item3Str.split(/：/g)[1] : item3Str;
					var data = {
						temp: temp,
						air_level: items[0],
						wea:item3
					};
					that.tian_qi_data = data;
				};
			}; */
		})

		this.dept()
		this.$store.commit('SET_IS_Right', true)
	},

	methods: {
		dept() {
			dept().then(res => {
				this.listText = []
				this.listAll = res;
				res.content.map(item => {
					if (item.name == '东乌珠穆沁旗应急管理局') {
						return
					}
					if (item.type == 9) {
						this.listText.push({
							name: item.name,
							is: false,
							type: item.type,
							obj: item,
						})
					}
					console.log(this.listText, 'this.listText')
				})

				this.$store.commit('SET_deptData', res.content)
			})
		},

		onRightImg() {
			this.isRightFalse = !this.isRightFalse
			this.$store.commit('SET_IS_Right', this.isRightFalse)
		},

		// 传递数据
		onClickBtn(index, obj) {
			for (let i of this.listText) {
				i.is = false
			}
			obj.typeName = this.title
			this.listText[index].is = true
			const objItem = {
				itemIndex: this.$store.state.BaseLeftIndex,
				randNum: randNum(1, 10000, 1),
			}
			this.$store.commit('SET_IS_LEFT', objItem)
			this.$store.commit('set_compony_info', obj)
		},
	},

	computed: {
		title() {
			return this.$store.state.title
		},
	},

	watch: {
		title(e) {
			let select_item = this.$store.state.select_item
			this.listText = [];
			for (let name of select_item) {
				if (name.value == e && this.listAll.content) {
					this.listAll.content.map(item => {
						if (item.name == '东乌珠穆沁旗应急管理局') {
							return
						}
						if (item.type == name.id) {
							this.listText.push({
								name: item.name,
								is: false,
								type: item.type,
								obj: item,
							})
						}
					})
					return
				}
			}


		},
	},
}
</script>

<style lang="scss">
@import '@/assets/scss/var.scss';
.base-right {
	.base_border_box {
		background-image: url('~@/assets/images/bg.png');
		background-size: 100% 100%;
		padding-bottom: 2vh;

		.title,
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 5vh;
			margin-top: 2vh;
			background: #021240;
			cursor: pointer;
		}

		.title {
			background: transparent;
			color: #02fcfe;
			padding-top: 1vw;
			font-size: 1vw;
			margin-top: 0;
		}

		.page_btn {
			padding: 0 1vw;
			color: #efb312;
			font-size: 0.8vw;
			height: 57vh;
			overflow-y: auto;
			@include scrollbar;
		}

		.activeClass {
			border: 1px solid #efb312;
		}
	}

	.img_position {
		position: absolute;
		top: 50%;
		left: -2vw;
		cursor: pointer;
		transform: translateY(-50%);
		z-index: 999;
	}

	.tian_qi {
		width: 100%;
		height: 25vh;
		position: fixed;
		bottom: 0;
		z-index: 99;
		color: #02defa;
		background-image: url('~@/assets/images/tian_qi.png');
		background-size: 100% 100%;

		.tian_qi_title {
			height: 5vh;
			padding: 0.3vw;
			font-size: 1vw;
			display: flex;
			align-items: center;
		}

		.tian_qi_body {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			span {
				line-height: 1.7;
			}
		}
	}
}
</style>
