<template>
	<el-container class="aminui-main-container">
		<el-header class="aminui-main-container__query-header">
			<el-form :model="params">
				<el-row :gutter="15">
					<el-col :lg="8" :md="12" :xs="24">
						<el-form-item label="项目编码:">
							<el-input v-model="params.projectNoLike" clearable placeholder="请输入项目编码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :lg="8" :md="12" :xs="24">
						<el-form-item label="项目名称:">
							<el-input v-model="params.projectNameLike" clearable placeholder="请输入项目名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :lg="8" :md="12" :xs="24">
						<el-form-item label="所属组织:">
                            <tree-select ref="deptTreeSelect" v-model="params.deptId" :apiObj="$API.system.dept" isDept isAllDept check-strictly clearable placeholder="请选择所属组织"></tree-select>
                        </el-form-item>
					</el-col>
					<el-col :lg="8" :md="12" :xs="24">
						<el-form-item label="负责人:">
							<el-input v-model="params.resPersonNameLike" clearable placeholder="请输入负责人"></el-input>
                        </el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<el-button-group>
                <el-button type="primary" icon="el-icon-search" @click="reloadTable('add')">查询</el-button>
                <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-button-group>
		</el-header>

		<el-container class="aminui-main-container__table-main">
			<el-header>
				<div class="left-panel">
					<el-button type="primary" @click="table_add">新增项目</el-button>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable class="scTable" ref="table" row-key="id" :apiObj="api" :params="params" :column="column" tableName="jobTable" pageParams="current">
                    <template #deptId="scope">{{ formatDeptName(scope.row.deptId) }}</template>
					<el-table-column label="操作" fixed="right" align="center" width="120">
						<template #default="scope">
							<el-button text @click="table_edit(scope.row)">编辑</el-button>
							<el-divider direction="vertical" />
							<el-button text @click="table_del(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>

    <project-dialog v-if="dialog" ref="projectDialog" @success="reloadTable" @closed="dialog = false"></project-dialog>
</template>

<script>
	import projectDialog from "./dialog";

	export default {
		components: {
			projectDialog
		},

		data() {
			return {
				api: this.$API.system.project,
				params: {
					orderBy: "id_desc",
					projectNoLike: null,
					projectNameLike: null,
					deptId: null,
					resPersonNameLike: null
				},
				column: [
					{ label: "项目编码", prop: "projectNo", width: "200", align: "center", showOverflowTooltip: true },
					{ label: "项目名称", prop: "projectName", width: "200", align: "center", showOverflowTooltip: true },
					{ label: "所属组织", prop: "deptId", width: "200", align: "center", showOverflowTooltip: true },
					{ label: "项目规模", prop: "projectScale", width: "140", align: "center" },
					{ label: "项目总投资", prop: "projectMoney", width: "140", align: "center" },
					{ label: "施工许可证编号", prop: "licenceSgNo", width: "200", align: "center", showOverflowTooltip: true },
					{ label: "合同开始日期", prop: "contractBeginDate", width: "140", align: "center" },
					{ label: "合同结束日期", prop: "contractEndDate", width: "140", align: "center" }
				],

				dialog: false
			}
		},

		computed: {
			depts() {
				return this.$refs.deptTreeSelect && this.$refs.deptTreeSelect.treeList || [];
			}
		},

		methods: {
			formatDeptName(value) {
				return this.depts && this.depts.find(d => d.deptId == value) && this.depts.find(d => d.deptId == value).name || "";
			},

			// 本地更新数据
			reloadTable(mode = "add") {
				const page = mode == "edit" ? this.$refs.table.currentPage : 1;
				this.$refs.table.reload(this.params, page);
			},

			// 本地更新数据
			reset() {
				this.params.projectNoLike = null;
				this.params.projectNameLike = null;
				this.params.deptId = null;
				this.params.resPersonNameLike = null;
				this.reloadTable();
			},
			
			// 添加项目
			table_add() {
				this.dialog = true;
				this.$nextTick(() => this.$refs.projectDialog.open());
			},

			// 编辑项目
			table_edit(row) {
				this.dialog = true;
				this.$nextTick(() => this.$refs.projectDialog.open("edit").setData(row));
			},

			// 删除项目
			table_del({ id }) {
				this.$confirm("确认删除当前项目吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.system.project.del({ id }).then(() => {
						this.$message.success("操作成功");
						this.reloadTable();
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
@media (max-width: 992px) {
  .aminui-main-container .aminui-main-container__query-header {
    padding-bottom: 18px;
  }
}
</style>