<template>
	<el-header class="aminui-main-container__query-header">
		<scTitle border>供应商评价规则</scTitle>
	</el-header>

	<el-main>
		<el-form ref="dialogForm" :model="form" :rules="rules">
			<div class="el-form-title__required">评价等级规则:</div>
			<el-row :gutter="15" justify="space-between">
				<el-col :lg="11" :xs="24">
					<el-form-item>
						<el-input-number v-model="form.level[0].value" readonly step-strictly :controls="false"></el-input-number>
					</el-form-item>
					<el-row>
						<span class="symbol">≥</span>
						<span class="level-label">A评级</span>
						<span class="symbol">></span>
					</el-row>
					<el-form-item prop="level.1.value">
						<el-input-number v-model="form.level[1].value" :min="1" :max="99" step-strictly :controls="false" @change="syncChange($event, 2)"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :lg="11" :xs="24">
					<el-form-item prop="level.2.value">
						<el-input-number v-model="form.level[2].value" :min="1" :max="99" step-strictly :controls="false" @change="syncChange($event, 1)"></el-input-number>
					</el-form-item>
					<el-row>
						<span class="symbol">≥</span>
						<span class="level-label">B评级</span>
						<span class="symbol">≥</span>
					</el-row>
					<el-form-item prop="level.3.value">
						<el-input-number v-model="form.level[3].value" :min="1" :max="99" step-strictly :controls="false" @change="syncChange($event, 4)"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :lg="11" :xs="24">
					<el-form-item prop="level.4.value">
						<el-input-number v-model="form.level[4].value" :min="1" :max="99" step-strictly :controls="false" @change="syncChange($event, 3)"></el-input-number>
					</el-form-item>
					<el-row>
						<span class="symbol">></span>
						<span class="level-label">C评级</span>
						<span class="symbol">≥</span>
					</el-row>
					<el-form-item>
						<el-input-number v-model="form.level[5].value" readonly :controls="false"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="el-form-item-msg">最终评价分数=各评价人评分总和/评价人数</div>
			
			<div class="el-form-title__required">评价人评价标准:</div>
			<div class="el-form-item-msg"><scTooltip content="质量评价系数+准时交付评价系数+服务水平评价系数+X=1"></scTooltip></div>
			<div class="el-form__standard-content">
				<template v-for="(item, index) in form.coefficient" v-bind:key="index">
					<el-form-item :prop="`coefficient.${index}.value`">
						<el-button v-if="item.type == 'button'" @click="standard_toggle">
							<template #icon>
								<el-icon><el-icon-delete v-if="standardX" /><el-icon-plus v-else /></el-icon>
							</template>
						</el-button>

						<template v-else>
							<span class="input-number-prepend">
								<template v-if="item.type == 'fixed'">{{ item.label }}</template>
								<el-form-item v-if="item.type == 'variable'" :prop="`coefficient.${index}.label`">
									<el-input v-model="item.label"></el-input>
								</el-form-item>
							</span>
							<el-input-number v-model="item.value" :min="0" :max="1" :controls="false"></el-input-number>
						</template>
					</el-form-item>
				</template>
			</div>
									
			<div class="el-form-item-msg"><scTooltip content="评价人评分=质量评价得分*系数+准时交付评价得分*系数+服务水平评价得分*系数+X*系数"></scTooltip></div>
		</el-form>
	</el-main>

	<el-footer>
		<el-button @click="reloadData">取消</el-button>
		<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
	</el-footer>
</template>

<script>
	const ruleDictData = {
		label: null,
		value: null,
		type: "fixed"
	}

	export default {
		props: {
			title: { type: String, default: "" },
		},
		
		data() {
			return {
				isSaveing: false,
				params: {
					page: 0,
					size: 20,
					dictName: "supplier_evaluate_rule"
				},

				variableData: null,
				form: {
					level: new Array(6).fill(ruleDictData),
					coefficient: [
						{ label: "质量评价系数", value: 0.65, type: "fixed" },
						{ label: "准时交付评价系数", value: 0.2, type: "fixed" },
						{ label: "服务水平评价系数", value: 0.15, type: "fixed" },
						{ type: "button" }
					]
				},

				rules: {
					"level.1.value": [{ required: true, trigger: ["blur", "change"], validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入最小值"));
						if ((this.form.level[3].value && value < this.form.level[3].value)) return callback(new Error("请输入正确的值"));
						callback();
					}}],
					"level.2.value": [{ required: true, trigger: ["blur", "change"], validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入最大值"));
						if ((this.form.level[3].value && value < this.form.level[3].value)) return callback(new Error("请输入正确的值"));
						callback();
					}}],
					"level.3.value": [{ required: true, trigger: ["blur", "change"], validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入最小值"));
						if ((this.form.level[1].value && value > this.form.level[1].value)) return callback(new Error("请输入正确的值"));
						callback();
					}}],
					"level.4.value": [{ required: true, trigger: ["blur", "change"], validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入最大值"));
						if ((this.form.level[1].value && value > this.form.level[1].value)) return callback(new Error("请输入正确的值"));
						callback();
					}}],
				
					"coefficient.0.value": [{ required: true, validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入评价系数值"));
						if (this.form.coefficient.filter(c => c.value).map(c => parseFloat(c.value)).reduce((p, v) => parseFloat((p + v).toFixed(2))) != 1) return callback(new Error("请输入正确的值"));
						callback();
					}}],
					"coefficient.1.value": [{ required: true, validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入评价系数值"));
						if (this.form.coefficient.filter(c => c.value).map(c => parseFloat(c.value)).reduce((p, v) => parseFloat((p + v).toFixed(2))) != 1) return callback(new Error("请输入正确的值"));
						callback();
					}}],
					"coefficient.2.value": [{ required: true, validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入评价系数值"));
						if (this.form.coefficient.filter(c => c.value).map(c => parseFloat(c.value)).reduce((p, v) => parseFloat((p + v).toFixed(2))) != 1) return callback(new Error("请输入正确的值"));
						callback();
					}}],
					"coefficient.4.value": [{ required: true, validator: (rule, value, callback) => {
						if (!value) return callback(new Error("请输入评价系数值"));
						if (this.form.coefficient.filter(c => c.value).map(c => parseFloat(c.value)).reduce((p, v) => parseFloat((p + v).toFixed(2))) != 1) return callback(new Error("请输入正确的值"));
						callback();
					}}],
					"coefficient.4.label": [{ required: true, message: "请输入评价系数名称" }],
				}
			}
		},

		computed: {
			standardX() {
				return this.form.coefficient.findIndex(c => c.type == "variable") != -1;
			}
		},

		methods: {
			async reloadData() {
				try {
					const { content } = await this.$API.system.dictDetail.get(this.params);

					this.form.level = content.slice(0, 6);
					this.form.coefficient = content.slice(6, -1).map(item => ({ ...ruleDictData, ...item }));
					this.form.coefficient.push({ type: "button" });
					this.variableData = content.slice(-1)[0];
					this.variableData.label && this.form.coefficient.push({ ...this.variableData, type: "variable" });
				} catch (error) {
					this.dictData = [];
				}
			},

			standard_toggle() {
				if (this.standardX) this.form.coefficient.pop();
				else this.form.coefficient.push({ label: "", value: 0, type: "variable" });
			},

			syncChange(value, index) {
				this.form.level[index].value = value;
				this.$refs.dialogForm.validateField([1, 2, 3, 4].map(i => `level.${i}.value`), () => {});
			},

			// 表单提交方法
			submit() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
						const data = this.form.level.concat(this.form.coefficient.slice(0, 3));
						data.push(this.variableData);
						data[9].label = this.form.coefficient[4] && this.form.coefficient[4].label || "";
						data[9].value = this.form.coefficient[4] && this.form.coefficient[4].value || "0";
						
						this.isSaveing = true;
						this.$API.system.dictDetail.batchUpdate(data).then(() => {
							this.isSaveing = false;
							this.$message.success("操作成功");
							this.reloadData();
						}).catch(() => this.isSaveing = false);
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container__query-header {
  margin-bottom: 0;

  .sc-title {
    flex-basis: 100%;
    margin-bottom: 3px;
    padding-left: 0;

    &::before {
      display: none;
    }
  }
}

.el-main {
  background: #fff;

  .el-form {
    width: 80%;
    margin: auto;

    .el-form-item-msg {
      margin-bottom: 10px;
      font-size: 13px;
    }

    .el-form-title__required {
      margin-bottom: 18px;
      line-height: 32px;
      font-size: var(--el-form-label-font-size);
      color: #262626;

      &::before {
        color: var(--el-color-danger);
        content: "*";
        margin-right: 4px;
      }
    }

    .el-row .el-col {
      display: flex;
      align-items: center;

      .el-row {
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 18px;

        .symbol {
          padding: 0 5px;
        }

        .level-label {
          display: inline-flex;
          justify-content: center;
          padding: 0 15px;
          background-color: var(--el-fill-color-light);
          border: var(--el-border);
          border-radius: var(--el-border-radius-base);
          line-height: var(--el-component-size);
          font-size: var(--el-font-size-base);
          font-weight: var(--el-font-weight-primary);
          color: var(--el-text-color-regular);
          white-space: nowrap;
        }
      }

      .el-form-item {
        flex-basis: 35%;

        :deep(.el-form-item__error) {
          white-space: nowrap;
        }

        .el-input-number :deep(.el-input) .el-input__wrapper .el-input__inner {
          text-align: center;
        }
      }
    }

    .el-form__standard-content {
      display: flex;
      flex-direction: column;
      max-width: 380px;

      .el-form-item :deep(.el-form-item__content) {
        .el-form-item__error {
          left: unset;
          right: 0;
        }

        .input-number-prepend {
          white-space: nowrap;
          flex-basis: 70%;
          min-width: 208px;
          background-color: var(--el-fill-color-light);
          border-top-left-radius: var(--el-border-radius-base);
          border-bottom-left-radius: var(--el-border-radius-base);
          text-align: center;
          color: var(--el-color-info);
          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;

          .el-input .el-input__wrapper {
            background: transparent;
            box-shadow: 0 0;

            .el-input__inner {
              text-align: center;
            }
          }

          .el-form-item .el-form-item__error {
            left: 0;
            right: unset;
          }
        }

        .el-input-number {
          flex: 1;

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

        .el-button {
          --el-fill-color-blank: var(--el-fill-color-light);
          flex-basis: 100%;
          border: none;
        }
      }
    }
  }
}

.el-footer {
  display: flex;
  justify-content: right;
}

@media (max-width: 992px) {
  .el-main .el-form {
    width: 100%;

    .el-row .el-col .el-form-item {
      flex-basis: 40%;
    }

    .el-form__standard-content {
      max-width: 92%;
    }
  }

  .adminui-main > .el-container > .el-footer {
    margin-top: 0;
  }
}
</style>