<template>
	<view class="container" style="margin-top: 20rpx;">
		<tui-form ref="form" :show-message="false" :model="form">
			<tui-card :title="{text:'整改描述'}" style="margin-top:20rpx;margin-bottom: 20rpx;">
				<template v-slot:body>
					<tui-textarea placeholder="请输入隐患描述"></tui-textarea>
				</template>
			</tui-card>
			<tui-card :title="{text:'整改视频'}">
				<template v-slot:body>
					<view style="padding: 20rpx;">
						<tui-upload ref="uploadRef" :value="value" :serverUrl="serverUrl" @complete="result"
							@remove="remove"></tui-upload>
					</view>
				</template>
			</tui-card>
			<view class="tui-btn__box">
				<tui-button width="400rpx" height="84rpx" bold @click="submit">提交</tui-button>
			</view>
		</tui-form>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {

		computed: {
			...mapState({
				userinfo: state => {
					return state.userinfo.userInfo
				},
				unit: state => state.userinfo.org[0].name
			}),

		},
		data() {
			return {
				value: [],
				serverUrl: '',
				form: {
					name: '刘逸云',
					unit: '山西路桥集团安全部',
					job_place: '班组',
					avatar: '',
					address: '山西省晋中市寿阳县平头镇 ',
					project_department: '太原联络线ZBLJL1项目部',
				},
				radioItems: [{
				 			name: '轻度',
				 			value: '1',
				 			checked: true
				 		   },
				 		   {
				 			name: '中等',
				 			value: '2',
				 			checked: false
				 		   },
				 		   {
				 			name: '重度',
				 			value: '3',
				 			checked: false
				 		}]
			}
		},
		onLoad() {
			this.getUserRole()
		},
		methods: {
			async getUserRole() {
				// console.log(this.userinfo);
				// let res = await this.$request.get('inspect/everyBody/role', {
				// 	params: {
				// 		role_id: this.userinfo.role_id
				// 	}
				// });
				// this.form.role = res.data.name;
				// this.form.name = this.userinfo.name;
				// this.form.unit = this.unit;
			},
			//注意：v2.9.2+后此方法做了调整，返回数据也做了相应调整
			submit() {
				if (!this.$refs.form) return;
				this.$refs.form.validate(this.form, rules).then(res => {
					if (res.isPass) {
						console.log(this.form)
						console.log('校验通过！')
						//this.tui.toast 等api 参考 【快手上手】文档使用
						// this.tui.toast('校验通过！')
					} else {
						console.log(res)
					}
				}).catch(errors => {
					console.log(errors)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
	}

	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tui-btn__box {
		width: 100%;
		padding: 60rpx 0;
		display: flex;
		justify-content: center;
	}
	.tui-text {
		font-size: 30rpx;
		padding-left: 12rpx;
	}
</style>