<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" :width="800" @closed="$emit('closed')">
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px">
			<el-row :gutter="15">
				<el-col :md="12" :xs="24">
					<el-form-item label="项目编码:" prop="projectNo">
						<el-input v-model="form.projectNo" placeholder="请输入项目编码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="项目名称:" prop="projectName">
						<el-input v-model="form.projectName" placeholder="请输入项目名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="所属组织:" prop="deptId">
						<tree-select v-model="form.deptId" :apiObj="$API.system.dept" isDept isAllDept check-strictly clearable placeholder="请选择所属组织"></tree-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="项目规模:">
						<el-input v-model="form.projectScale" clearable placeholder="请输入项目规模"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="项目总投资:">
						<el-input-number v-model="form.projectMoney" :min="0" :controls="false" clearable placeholder="请输入项目总投资"></el-input-number>
						<span class="input-number-suffix">万元</span>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="负责人:">
						<el-input v-model="form.resPersonName" clearable placeholder="请输入负责人"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24">
					<el-form-item label="项目地址:">
						<el-input v-model="form.projectAddr" clearable placeholder="请输入项目地址"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<scTitle>跟踪信息</scTitle>
			<el-row :gutter="15">
				<el-col :md="12" :xs="24">
					<el-form-item label="施工许可证编号:">
						<el-input v-model="form.licenceSgNo" clearable placeholder="请输入施工许可证编号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="发证机关:">
						<el-input v-model="form.licenceAuthority" clearable placeholder="请输入发证机关"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="合同开始日期:">
						<el-date-picker v-model="form.contractBeginDate" value-format="YYYY-MM-DD" placeholder="请选择合同开始日期"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="合同结束日期:">
						<el-date-picker v-model="form.contractEndDate" value-format="YYYY-MM-DD" placeholder="请选择合同结束日期"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="项目状态:">
						<el-radio-group v-model="form.projectStatus">
							<el-radio label="激活" value="active"></el-radio>
							<el-radio label="未激活" value="inactive"></el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>

			<scTitle>项目描述</scTitle>
			<el-row :gutter="15">
				<el-col :xs="24">
					<el-form-item label="概要描述:">
						<el-input v-model="form.remark" type="textarea" :rows="4" clearable placeholder="请输入概要描述"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
	export default {
		emits: ["success", "closed"],

		data() {
			return {
				mode: "add",
				titleMap: {
					add: "新增项目",
					edit: "编辑项目"
				},
				visible: false,
				isSaveing: false,

				form: {
					id: null,
					projectNo: null,
					projectName: null,
					deptId: null,
					projectScale: null,
					projectMoney: null,
					resPersonName: null,
					projectAddr: null,
					licenceSgNo: null,
					licenceAuthority: null,
					contractBeginDate: null,
					contractEndDate: null,
					projectStatus: "active",
					remark: null
				},

				rules: {
					projectNo: [{ required: true, message: "请输入项目编码" }],
					projectName: [{ required: true, message: "请输入项目名称" }],
					deptId: [{ required: true, message: "请选择所属组织" }]
				}
			}
		},

		methods: {
			// 显示
			open(mode = "add") {
				this.mode = mode;
				this.visible = true;
				return this;
			},

			// 表单注入数据
			setData(data) {
				for (const key in this.form) {
					this.form[key] = data[key] || null;
				}
			},

			// 表单提交方法
			submit() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
						this.isSaveing = true;
						this.$API.system.project[this.mode](this.form).then(() => {
							this.isSaveing = false;
							this.$message.success("操作成功");
							this.visible = false;
							this.$emit("success", this.mode);
						}).catch(() => this.isSaveing = false);
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.el-form {
  padding: 10px 30px 0 20px;

  .sc-title {
    margin-bottom: 15px;
  }

  .input-number-suffix {
    position: absolute;
    right: 30px;
    color: #262626;
  }
}

@media (max-width: 992px) {
  .el-form {
    padding: 10px;
  }
}
</style>