<template>
	<sc-dialog v-model="visible" title="考核评价信息" :width="500" @closed="$emit('closed')">
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="112px">
			<el-form-item label="考核评价类型:" prop="evaluateType">
                <el-select v-model="form.evaluateType" placeholder="请选择考核评价类型">
					<el-option v-for="(label, key) in evaluateTypeDic" :key="key" :label="`${label}考核评价`" :value="key"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="供应商:" prop="supplierId">
				<el-select v-model="form.supplierId" filterable placeholder="请选择供应商" @change="supplierChange">
					<el-option v-for="item in suppliers" :key="item.id" :label="item.supplierName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="采购合同:" prop="contractId">
				<el-select v-model="form.contractId" filterable placeholder="请选择采购合同">
					<el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="评价人:" prop="person">
				<sc-table-select v-model="form.person" :apiObj="tableSelect.apiObj" :table-width="840" :props="tableSelect.props" multiple placeholder="请选择评价人" placement="bottom">
					<template #header="{ queryForm, submit: fetchPerson }">
						<el-row :gutter="15">
							<el-col :md="8" :xs="24">
								<el-form-item>
									<el-input class="search-input-suffix" v-model="queryForm.blurry" clearable placeholder="输入姓名、账号、手机关键字" @keyup.enter="fetchPerson" @clear="fetchPerson">
										<template #suffix>
											<el-icon @click="fetchPerson"><el-icon-search /></el-icon>
										</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</template>

					<el-table-column label="姓名" prop="username" align="center"></el-table-column>
					<el-table-column label="账号" prop="nickName" align="center"></el-table-column>
					<el-table-column label="所属组织" prop="dept.name" align="center"></el-table-column>
					<el-table-column label="手机" prop="phone" align="center"></el-table-column>
				</sc-table-select>
			</el-form-item>
		</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>
	import { evaluateTypeDic } from "../main";

	export default {
		emits: ["success", "closed"],

		data() {
			return {
				mode: "add",
				visible: false,
				isSaveing: false,

				evaluateTypeDic,
				suppliers: [],
				contracts: [],
				tableSelect: {
					apiObj: this.$API.system.user,
					props: { page: "page", label: "nickName" }
				},

				form: {
					id: null,
					evaluateType: "year",
					createId: this.$TOOL.data.get("USER_INFO").id,
					createName: this.$TOOL.data.get("USER_INFO").nickName,
					supplierId: null,
					supplierTypeId: null,
					contractId: null,
					person: [],
					evaluateDetailList: []
				},
				rules: {
					evaluateType: [{ required: true, message: "请选择考核评价类型" }],
					supplierId: [{ required: true, message: "请选择供应商" }],
					contractId: [{ required: true, message: "请选择合同" }],
					person: [{ required: true, message: "请选择评价人" }]
				}
			}
		},

		mounted() {
			this.getSupplier();
		},

		methods: {
			async getSupplier() {
				this.suppliers = await this.$API.supplier.list.all();
			},

			async getContract(supplierId) {
				this.contracts = await this.$API.procurement.contract.all({ supplierId });
			},

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

			// 表单注入数据
			async setData(id) {
				const { evaluate, detailList } = await this.$API.supplier.evaluate.detail({ id });
				for (const key in this.form) {
					if (key == "person") this.form[key] = detailList.map(item => ({ id: item.evaluatorId, nickName: item.evaluatorName }));
					else {
						if (key == "evaluateDetailList") this.form[key] = [];
						else this.form[key] = evaluate[key];
					}
				}

				this.getContract(evaluate.supplierId);
			},

			supplierChange(e) {
				this.form.contractId = null;
				this.form.supplierTypeId = this.suppliers.find(s => s.id == e).supplierTypeId;
				this.getContract(e);
			},

			// 表单提交方法
			submit() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
						this.form.evaluateDetailList = this.form.person.map(item => ({ evaluatorId: item.id, evaluatorName: item.nickName }));
						this.isSaveing = true;
						this.$API.supplier.evaluate[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;
}

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