<template>
	<page-meta :page-font-size="$store.state.vuex_fontsize+'px'"
		:root-font-size="$store.state.vuex_fontsize+'px'"></page-meta>
	<view>
		<view class="qjtx">
			<u--form labelPosition="left"  :model="projInfo" ref="form1" :rules="rules">
				<u-form-item label="工程名称" required prop="name" borderBottom labelWidth="120">
					<u--input v-model="projInfo.name" placeholder="请输入工程名称"></u--input>
				</u-form-item>
				<u-form-item label="工程简写" required prop="abbreviation" borderBottom labelWidth="120">
					<u--input v-model="projInfo.abbreviation" placeholder="请输入工程简写"></u--input>
				</u-form-item>

				<u-form-item label="工程类型" required prop="proType" borderBottom @click="showProjType = true; hideKeyboard()"
					ref="item1" labelWidth="120">
					<u--input @click="showProjType = true; hideKeyboard()" v-model="projInfo.proType"
						placeholder="请选择工程类型"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="工程状态" required prop="status" borderBottom @click="showStatus = true; hideKeyboard()"
					ref="item1" labelWidth="120">
					<u--input @click="showStatus = true; hideKeyboard()" v-model="projInfo.status"
						placeholder="请选择工程状态"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="所属分公司" required prop="companyName" borderBottom @click="showCompany = true; hideKeyboard()"
					ref="item1" labelWidth="120">
					<u--input @click="showCompany = true; hideKeyboard()" v-model="projInfo.companyName"
						placeholder="请选择所属分公司"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="电压等级" required prop="voltageLevel" borderBottom @click="showPvl = true; hideKeyboard()"
					ref="item1" labelWidth="120">
					<u--input @click="showPvl = true; hideKeyboard()" v-model="projInfo.voltageLevelName"
						placeholder="请选择电压等级"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="工程联系人" prop="projectManager" borderBottom labelWidth="150">
					<u--input v-model="projInfo.projectManager" placeholder="请输入工程联系人"></u--input>
				</u-form-item>
				<u-form-item label="联系人电话" prop="projectManagerPhone" borderBottom labelWidth="150">
					<u--input v-model="projInfo.projectManagerPhone" placeholder="请输入联系人电话"></u--input>
				</u-form-item>


			</u--form>
			<u-button type="primary" text="添加" customStyle="margin-top: 50px" @click="submit" style="width: 50%;background-color:#00b27b;border-color:#00b27b;"></u-button>
			<!-- <u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button> -->
			<u-action-sheet :show="showProjType" :actions="projectTypeList" title="请选择工程类型" @close="showProjType = false"
				@select="projTypeSelect">
			</u-action-sheet>
			
			<u-action-sheet :show="showStatus" :actions="statusList" title="请选择工程状态" @close="showStatus = false"
				@select="statusSelect">
			</u-action-sheet>
			<u-action-sheet :show="showPvl" :actions="pVoltageLevel" title="请选择电压等级" @close="showPvl = false"
				@select="pvlSelect">
			</u-action-sheet>
			
			<u-action-sheet :show="showCompany" :actions="companyData" title="请选择电压等级" @close="showCompany = false"
				@select="companySelect">
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
	import {
		dictList,
		companyTreeSelect,
		addProject
	} from '@/api/handbook.js'

	export default {
		data() {
			return {
				showCalendar: false,
				projInfo: {
					name: "",
					abbreviation: "",
					proType: "",
					status: "",
					companyId: "",
					companyName:"",
					voltageLevel: "",
					voltageLevelName: "",
					projectManager: "",
					projectManagerPhone: "",
				},
				rules: {
					name: {
						required: true,
						message: '工程名称不能为空',
						trigger: ['blur']
					},
					abbreviation: {
						required: true,
						message: '工程简写不能为空',
						trigger: ['blur']
					},
					proType: {
						required: true,
						message: '工程类型不能为空',
						trigger: ['blur']
					},
					status: {
						required: true,
						message: '工程状态不能为空',
						trigger: ['blur']
					},
					companyName: {
						required: true,
						message: '所属分公司不能为空',
						trigger: ['blur']
					},
					voltageLevel: {
						required: true,
						message: '电压等级不能为空',
						trigger: ['blur']
					},

				},
				leaveType: [],
				leaveList: [],
				pageNum: 1,
				total: 0,
				
				pVoltageLevel:[],
				showPvl:false,
				statusList:[],
				showStatus: false,
				projectTypeList:[],
				showProjType:false,
				companyData:[],
				showCompany:false,
				
				
			}
		},
		onLoad(option) {
			this.dictList();
			this.companyTreeSelect();
		},
		methods: {
			dictList() {
				dictList({
					pageNum: 1,
					pageSize: 1000,
					dictType: 'sys_project_voltage_level'

				}).then(res => {
					res.rows.forEach(item => {
						this.pVoltageLevel.push({
							name: item.dictLabel,
							id:item.dictValue
						})
					})

				})
				dictList({
					pageNum: 1,
					pageSize: 1000,
					dictType: 'sys_project_status'
				
				}).then(res => {
					res.rows.forEach(item => {
						this.statusList.push({
							name: item.dictLabel
						})
					})
				
				})
				dictList({
					pageNum: 1,
					pageSize: 1000,
					dictType: 'sys_project_type'
				
				}).then(res => {
					res.rows.forEach(item => {
						this.projectTypeList.push({
							name: item.dictLabel
						})
					})
				
				})
				
			},


			// 查询分公司
			companyTreeSelect() {
				companyTreeSelect({}).then(res => {
					res.rows.forEach(e => {
						this.companyData.push({
							name: e.deptName,
							id: e.deptId,

						})
					})
				})
			},
			projTypeSelect(e){
				this.projInfo.proType=e.name;
			},
			statusSelect(e){
				this.projInfo.status=e.name;
			},
			pvlSelect(e){
				this.projInfo.voltageLevel=e.id;
				this.projInfo.voltageLevelName=e.name;
			},
			companySelect(e){
				this.projInfo.companyId=e.id;
				this.projInfo.companyName=e.name;
				
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				console.log(this.projInfo)
				this.$refs.form1.validate().then(res => {
					addProject(this.projInfo).then(res => {
						if (res.code == 200) {
							uni.$u.toast('添加成功')
							setTimeout(() => {
								uni.navigateBack();
							}, 1000)
					
						}
					
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
		padding: 10rpx;
		background-color: #fff;
	}
	.qjtx {
		padding: 20rpx;
	}

	::v-deep .uni-input-input {
		font-size: 13px !important;
	}
	
	::v-deep .input-placeholder {
		font-size: 13px !important;
	}
	::v-deep .u-form-item__body__left {
		width: 80px !important;
	}
	
	
</style>