<template>
  <el-dialog
    v-if="dialogVisible"
    v-el-drag-dialog
    :title="showTitle"
    :visible.sync="dialogVisible"
  >
    <el-form
      v-if="dialogVisible"
      ref="editForm"
      size="mini"
      :model="form"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="推荐方案" prop="recommendPlanId">
        <el-select v-model="form.recommendPlanId" placeholder="请选择推荐方案">
          <el-option
            v-for="item in options.recommendPlanOtions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管道" prop="pipeId">
        <el-select v-model="form.pipeId" placeholder="请选择管道">
          <el-option
            v-for="item in options.rootDesignPipeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="节点阀门打开度(%)" prop="valveOpening">
        <el-input-number
          v-model="form.valveOpening"
          :min="0"
          :max="100"
          :step="10"
        />
      </el-form-item>
      <el-form-item label="管道风量" prop="pipeFlow">
        <el-input v-model="form.pipeFlow" type="text" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button type="primary" :loading="loading" @click="onSubmit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    url: {
      type: Object,
      default: () => {
        return {};
      },
    },
    options: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      dialogVisible: false,

      loading: false,
      form: {
        id: "",
        recommendPlanId: "",
        pipeId: "",
        valveOpening: "",
        pipeFlow: "",
        delFlag: "",
        createBy: "",
        createTime: "",
        updateBy: "",
        updateTime: "",
      },
      editType: "add", //add或edit
    };
  },
  computed: {
    showTitle() {
      return this.editType == "edit"
        ? "编辑" + this.title
        : "新增" + this.title;
    },
  },
  methods: {
    reset() {
      this.editType = "add";
      // this.$refs.elForm.resetFields();
      this.loading = false;
      this.form = this.$options.data().form;
    },
    show(form) {
      this.reset();
      if (form) {
        this.editType = "edit";
        this.form = { ...this.$options.data().form, ...form };
      }
      this.dialogVisible = true;
    },
    onSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        let q;
        if (this.editType == "edit") {
          q = this.$axios.put(this.url.edit, this.form);
        } else {
          q = this.$axios.post(this.url.add, this.form);
        }
        q.then(({ message }) => {
          this.$message({ type: "info", message: message });
          this.dialogVisible = false;
          this.$emit("refresh");
        }).finally(() => {
          this.loading = false;
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
