<template>
	<!-- 维修单 -->
	<view class="page_padding">
		<view class="page_content contentboxsty font14">
			<view class="content_row">
				<view class="name">维修工程师</view>
				<view class="flex1">
					<picker placeholder="请选择" @change="bindPickerChange" :value="index" :range="array" >
						 <input type="text" :value="array[index]"  placeholder="请选择" disabled />
					</picker>
				</view>
				<view class="iconfont icon-xiala"></view>
			</view>
			<view class="content_row">
				<view class="name">故障解除时间</view>
				<view class="flex1">
					<view :class="[downtime ? 'haveTime' : 'noTime']">
						<uni-datetime-picker placeholder="清选择时间" type="datetime" v-model="downtime" @change="changeLog" />
					</view>
				</view>
			</view>
			<view class="textarea_row">
				<view class="name">维修描述</view>
					<textarea placeholder="请输入维修描述..."/>
					<!-- <uni-easyinput type="textarea" v-model="value" placeholder="请输入维修描述..."></uni-easyinput> -->
					
			</view>
			<view class="img_row">
				<view class="name">维修照片</view>
				<uni-file-picker limit="3" v-model="imageValue"  title="">
					<view class="img_but">
						<view class="iconfont icon-a-shangchuanzhaopian2 font35"></view>
						<view class="font12">
							上传图片
						</view>
					</view>
				</uni-file-picker>
			</view>
		</view>
	</view>
	<view class="bottom_but flex_layout">
		<view class="font13">保存</view>
		<view class="font13">取消</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['中国', '美国', '巴西', '日本'],
				downtime:'',
			}
		},
		methods: {
			changeLog(){
				console.log(this.downtime)
			}
		}
	}
</script>

<style lang="scss">
	.page_content{padding: 0 12px 10px;}
	.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
		.name{width: 30%;}
		.flex_layout{
			.contenticon{width: 20px;height: 20px;}
			.text{padding: 0 20px 0 5px;}
		}
	}
	.textarea_row{
		.name{padding: 12px 0;}
		textarea{border-radius: 4px;background: rgba(255, 255, 255, 0.50);padding: 10px;height: 100px;}
	}
	.img_row{
		.name{padding: 12px 0;}
		.file-title {color: #fff;}
		.is-add{background: rgba(255, 255, 255, 0.5);}
		.img_but{    position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;}
	}
	
	.uni-date-x{
		    background-color: #1C2755 !important;color: #fff!important;
	}
	.uni-date-x--border{border:none !important}
	.haveTime{
		.uni-date__x-input{color: #fff;}
	}
	.noTime{.uni-date__x-input{color: #666;}}
</style>
