<template>
	<sc-dialog v-model="visible" title="添加评价" :width="600" @closed="$emit('closed')">
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px">
			<el-row justify="space-evenly">
				<el-col :md="14" :sm="14" :xs="14">
					<el-form-item style="margin-bottom: 0;" label="供应商名称:">
						<scTooltip :content="supplierName" placement="top"></scTooltip>
					</el-form-item>
					<el-form-item class="evaluate-form-header__item" label="合同名称:">
						<scTooltip :content="contractName" placement="top"></scTooltip>
					</el-form-item>
					<el-form-item prop="zlScore" label-width="0">
						<span class="input-number-prepend">质量评价分数 (百分制)</span>
						<el-input-number v-model="form.zlScore" :min="0" :max="100" step-strictly :controls="false" placeholder="" @change="calcWeight"></el-input-number>
					</el-form-item>
					<el-form-item prop="zsScore" label-width="0">
						<span class="input-number-prepend">准时交付评价分数 (百分制)</span>
						<el-input-number v-model="form.zsScore" :min="0" :max="100" step-strictly :controls="false" placeholder="" @change="calcWeight"></el-input-number>
					</el-form-item>
					<el-form-item prop="fwScore" label-width="0">
						<span class="input-number-prepend">服务水平评价分数 (百分制)</span>
						<el-input-number v-model="form.fwScore" :min="0" :max="100" step-strictly :controls="false" placeholder="" @change="calcWeight"></el-input-number>
					</el-form-item>
					<el-form-item v-if="standardX" prop="qtScore" label-width="0">
						<span class="input-number-prepend">{{ coefficient[3].label }}</span>
						<el-input-number v-model="form.qtScore" :min="0" :max="100" step-strictly :controls="false" placeholder="" @change="calcWeight"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :md="6" :sm="6" :xs="6">
					<el-form-item style="align-items: center;height: 64px;" class="evaluate-form-header__item" label="加权总分:">{{ weight[4] }}
						<el-tooltip placement="top">
    						<template #content>评价人评分=质量评价得分*{{ coefficient[0].value }}+准时交付评价得分*{{ coefficient[1].value }}+服务水平评价得分*{{ coefficient[2].value }}+X*系数</template>
							<el-icon class="tips__icon"><el-icon-question-filled /></el-icon>
						</el-tooltip>
					</el-form-item>
					<el-form-item label="加权得分:">{{ weight[0] }}</el-form-item>
					<el-form-item label="加权得分:">{{ weight[1] }}</el-form-item>
					<el-form-item label="加权得分:">{{ weight[2] }}</el-form-item>
					<el-form-item v-if="standardX" label="加权得分:">{{ weight[3] }}</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 {
				visible: false,
				isSaveing: false,
				supplierName: "",
				contractName: "",
				coefficient: [
					{ label: "质量评价系数", value: 0.65, type: "fixed" },
					{ label: "准时交付评价系数", value: 0.2, type: "fixed" },
					{ label: "服务水平评价系数", value: 0.15, type: "fixed" }
				],
				weight: [0, 0, 0, 0, 0],

				form: {
					id: null,
					evaluateId: null,
					score: null,
					zlScore: null,
					zsScore: null,
					fwScore: null,
					qtScore: null
				},

				rules: {
					zlScore: [{ required: true, message: "请输入质量评价得分" }],
					zsScore: [{ required: true, message: "请输入准时交付评价得分" }],
					fwScore: [{ required: true, message: "请输入服务水平评价得分" }],
					qtScore: [{ required: true, validator: (rule, value, callback) => {
						if (this.standardX && !value) return callback(new Error("请输入评价得分"));
						callback()
					}}]
				}
			}
		},

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

		computed: {
			standardX() {
				return this.coefficient[3] && this.coefficient[3].label;
			}
		},

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

			setData(evaluate, data) {
				this.supplierName = evaluate.supplierName;
				this.contractName = evaluate.contractName;
				for (const key in this.form) {
					this.form[key] = data[key];
				}

				this.calcWeight();
			},

			async getRulesDict() {
				const { content } = await this.$API.system.dictDetail.get({ page: 0, size: 20, dictName: "supplier_evaluate_rule" });
				this.coefficient = content.slice(6);
			},

			async calcWeight() {
				const array = [
					{ n1: this.form.zlScore, n2: this.coefficient[0].value },
					{ n1: this.form.zsScore, n2: this.coefficient[1].value },
					{ n1: this.form.fwScore, n2: this.coefficient[2].value },
					{ n1: this.form.qtScore, n2: this.standardX && this.coefficient[3].value || 0 },
				]
				
				this.weight = await this.$API.supplier.evaluate.calc(array);
				this.form.score = this.weight[4];
			},

			// 表单提交方法
			submit() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
						const data = Object.assign({}, this.form);
						if (!this.form.qtScore) data.qtScore = 0;

						this.isSaveing = true;
						this.$API.supplier.evaluate.evaluate(data).then(() => {
							this.isSaveing = false;
							this.$message.success("操作成功");
							this.visible = false;
							this.$emit("success", data.evaluateId);
						}).catch(() => this.isSaveing = false);
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.el-form {
  .evaluate-form-header__item {
    margin-bottom: 12px;
  }

  :deep(.el-form-item__content) {
    flex-wrap: nowrap;

    .input-number-prepend {
      flex-basis: 75%;
      min-width: 188px;
      padding: 0 10px;
      background-color: var(--el-fill-color-light);
      box-shadow: 1px 0 0 0 var(--el-border-color) inset,
        0 1px 0 0 var(--el-border-color) inset,
        0 -1px 0 0 var(--el-border-color) inset;
      border-top-left-radius: var(--el-border-radius-base);
      border-bottom-left-radius: var(--el-border-radius-base);
      color: var(--el-color-info);
      white-space: nowrap;
    }

    .el-input-number {
      flex: 1;

      .el-input__wrapper {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }
    }
  }

  .tips__icon {
    cursor: pointer;
    margin-left: 4px;
    font-size: 16px;
    color: #8c8c8c;
  }
}

@media (max-width: 992px) {
  :deep(.el-dialog) {
    width: 80% !important;

    .el-form-item {
      display: flex;
    }
  }
}
</style>