<template>
	<view class="content addText">
		<view class="item">
			<!-- <view class="name">
				<view class="text">记录宠物</view>
				<picker mode="selector" :range="petList" range-key="name" @change="handleList">
					<view class="uni-input">{{petList[index].name?petList[index].name:'请选择宠物'}}
						<icon class="iconfont icon-shouqi-xi"></icon>
					</view>
				</picker>
			</view> -->
			<view class="name">
				<view class="text">记录时间</view>
				<view class="example-body">
					<uni-datetime-picker type="datetime" v-model="recordTime" @change="changeLog" :border="false"
					 :clear-icon='false' :hide-second='true' />
				</view>
			</view>
		</view>
		<view class="item">
			<view class="ji">小记</view>
			<textarea v-model="content" placeholder="说点什么吧" name="content" maxlength="200" />
			<view class="length">{{content.length}}/200</view>
		</view>

		<view class="btn" @click="handleCloseClick">保存</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				index: -1,
				petId: "",
				content: '',
				recordTime: ""
			}
		},
		computed: {
			...mapState(["petInfo", "petList"]),
			start() {
				return this.$tools.getTime()
			},
		},
		mounted() {
			this.recordTime = this.$tools.getTime()
		},
		methods: {
			// 宠物选择
			handleList(e) {
				this.index = e.target.value
				this.petId = this.petList[e.target.value].id
			},
			// 记录时间
			changeLog(e) {
				this.recordTime = e
			},
			// 提交、
			handleCloseClick() {
				let that = this
				// if (!that.petId) {
				// 	that.$tools.msg("请选择宠物")
				// 	return
				// }
				if (!that.recordTime) {
					that.$tools.msg("请选择记录时间")
					return
				}
				that.$model.getNotepadSubmit({
					petId: uni.getStorageSync('petid'),
					content: that.content,
					recordTime: that.recordTime,
				}).then((res) => {
					if (res.code != 0) false
					that.$tools.msg("记录成功！")
					uni.redirectTo({
						url: "/pages/notepad/notepad"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		margin-top: 25px;
	}

	/deep/.example-body {
		picker {
			text-align: center !important;
		}

	}
</style>
