<template>
	<view class="content">
		<view class="card-up">
			<view class="mode-up">
				<view>
					<text>模具编号</text>
					<input disabled="true" v-model="modeNo" />
				</view>
			</view>
			<view class="mode-up">
				<view>
					<text>模具名称</text>
					<input disabled="true" v-model="modeName" />
				</view>
			</view>
			<picker @change="modeStaff($event,staffList)" :value="staffId" :range="staffList" :range-key="'name'">
				<view class="mode-up">
					<view>
						<text>保养人员</text>
						<view>{{staffList[staffId]?staffList[staffId].name:''}}</view>
					</view>
				</view>
			</picker>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="mode-up">
					<view>
						<text>保养时间</text>
						<input disabled="true" v-model="date" />
					</view>
				</view>
			</picker>
		</view>
		<view class="card-down">
			<view class="list">
				<view>检测部位</view>
				<text>各模板</text>
			</view>
			<view class="list">
				<view>检测内容</view>
				<text>各模板</text>
			</view>
			<view class="list">
				<view>检测结果</view>
				<text class="bor">各模板</text>
			</view>
			<view class="list">
				<view>问题位置</view>
				<text class="bor">各模板</text>
			</view>
			<view class="list">
				<view>措施</view>
				<text class="bor">各模板</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		staff
	} from "../../api/user.js"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				modeId: '',
				modeNo: '',
				modeName: '',
				staffList: [],
				staffId: 0,
				date: currentDate
			};
		},
		onLoad(e) {
			this.modeId = e.id;
			this.modeNo = e.no
			this.modeName = e.name
			this.getStaff()
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			getStaff() {
				staff().then(res => {
					this.staffList = res;

					console.log("员工", res)
				})
			},
			modeStaff(e, item) {
				this.staffId = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
		}
	}
</script>

<style lang="scss">
	@import "./index.scss"
</style>
