<template>
	<view class="yc_main bg_ff">
		<view class="pos_r">
			<u-icon name="setting" class="setting" size="24" @click="navigateTo('psw')"></u-icon>
			<lxCalendar @change="dateChange" :dot_lists="dateArr"></lxCalendar>
		</view>

		<view class="p20 pt0 common_width">
			<u-divider text="时间记录" class="mt0"></u-divider>
			<view class="time_list">
				<view class="item" v-for="(item, index) in recordList" @click="navigateTo('edit?id=' + item.id)">
					<view class="content">
						<view class="type" :style="{ background: item.type.color }">{{ item.type.name }}</view>
						<view class="info">
							<view class="left">
								<view class="font_color_content fs32">{{ item.record_begin }}-{{ item.record_end }}</view>
								<view class="font_color_tips fs28 pt10">{{ item.remark }}</view>
							</view>
							<view class="right fs24">{{ item.record_long }}分钟</view>
						</view>
					</view>
					<view class="bottom_border_box">
						<view class="color_row" :style="{ background: item.type.color, width: item.percent + '%' }"></view>
					</view>
				</view>
			</view>
		</view>
		<u-icon name="plus-circle-fill" color="#2979ff" size="44" class="btn_add" @click="navigateTo('edit')"></u-icon>
		<version></version>
	</view>
</template>

<script>
let tagInfo = "[/pages/manager/index.vue]";
import basePage from "@/libs/base-page.js";
import lxCalendar from "../../components/lx-calendar/lx-calendar.vue";
import dayjs from "dayjs";
import Manager from "../../libs/model/manager";
export default {
	//name: "index-me",
	mixins: [basePage],
	components: {
		lxCalendar
	},
	data() {
		return {
			date: "",
			dateArr: ["2021-11-20", "2021-11-18"],
			recordList: []
		};
	},
	onLoad() {
		this.checkLogin();
		this.date = dayjs().format("YYYY-MM-DD");
	},
	async onShow() {
		await this.checkLogin();
		await this.loadData();
	},
	methods: {
		async loadData() {
			//this.initSaveData();
			let res = await Manager.recordIndex(this.date);
			this.logI(tagInfo, "loadData", res);
			if (res.code != 0) {
				this._util.message.alert(res.msg);
				return;
			}
			this.dateArr = res.data.dateArr;
			let recordList = res.data.recordList;
			let allLong = 1;
			recordList.forEach((item) => {
				if (item.record_long > allLong) {
					allLong = item.record_long;
				}
			});
			recordList.forEach((item) => {
				item.percent = (item.record_long / allLong) * 100;
			});
			this.logI(tagInfo, "recoredList", recordList);
			this.recordList = res.data.recordList;
		},
		dateChange(e) {
			this.logI(tagInfo, "dateChange", e);
			this.date = e.fulldate;
			this.loadData();
		}
	}
};
</script>

<style lang="scss" scoped>
.yc_main {
	.setting {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	.btn_add {
		position: fixed;
		bottom: 80rpx;
		right: 80rpx;
	}
	.time_list {
		.item {
			margin-top: 32rpx;
			.content {
				display: flex;
				.type {
					width: 100rpx;
					height: 100rpx;
					color: #fff;
					background-color: #00f;
					text-align: center;
					line-height: 100rpx;
					border: none;
				}
				.info {
					width: calc(100% - 120rpx);
					margin-left: 20rpx;
					display: flex;
					justify-content: space-between;
					.left {
						width: 300rpx;
					}
					.right {
						width: 120rpx;
						text-align: right;
					}
				}
			}
			.bottom_border_box {
				background-color: #f5f5f5;
				.color_row {
					background-color: #00f;
					min-width: 100rpx;
					width: 180rpx;
					height: 20rpx;
				}
			}
		}
	}
}
</style>
