<template>
	<view class="box">
		<scroll-view scroll-x="true">
			<block v-for="(item, index) in dataList" :key="index">
				<view class="dayTitle" :class="current == index ? 'select' : ''" @click="Selectd(item, index)">
					<view style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;">
						<view>{{ item.TypeName }}</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view :style="{ height: height }" class="content"><image :src="Imgsrc" mode="widthFix"></image></view>
	</view>
</template>

<script>
import Vue from 'vue';
import common from '../../common/common.js';
import api from '../../common/http.js';
export default {
	data() {
		return {
			isShow: false,
			current: 0,
			height: '500upx',
			Imgsrc: '',
			rootUrl: api.baseUrl,
			dataList: []
		};
	},
	created() {
		let that = this;
		that.height = that.getWindowHeight() - 55 + 'px';
	},
	onLoad() {
		this.getList();
		console.log(this.rootUrl);
	},
	methods: {
		Selectd(item, index) {
			this.current = index;
			this.Imgsrc = this.rootUrl + item.ImgPath;
			console.log(item.ImgPath);
		},
		getList() {
			let url = 'Performance/GetTipsPictureRoute';
			let data = {
				ID: '1'
			};
			api.httpRequestGet(url, data).then(res => {
				if (res.data.error_code == 'Success') {
					this.dataList = res.data.data.list;
					this.Imgsrc = this.rootUrl + this.dataList[0].ImgPath;
					console.log(res.data.data.list);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.box {
	/* padding: 30upx; */
}
scroll-view {
	height: 100upx;
	width: 100%;
	white-space: nowrap;
}
.dayTitle {
	height: 100%;
	padding: 0upx 30upx;
	text-align: center;
	display: inline-block;
}
.select {
	color: #88c36a;
	border-bottom: 15upx solid #88c36a;
}

.content {
	margin-top: 10upx;
	padding: 0 20upx 20upx 20upx;
	overflow: auto;
	image {

	}
}
</style>