<!--
 * @Author: your name
 * @Date: 2022-01-08 16:02:11
 * @LastEditTime: 2022-01-19 11:03:52
 * @LastEditors: Please set LastEditors
 * @Description: 新增 or 编辑表单
 * @FilePath: \goldenPig\src\components\form-cpn\FormCpn.vue
-->
<template>
  <div class="form-cpn">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      width="30%"
      center
      destroy-on-close
    >
      <el-form
        :label-width="formStyle.labelWidth"
        :size="formStyle.size"
        ref="form"
        :model="form"
      >
        <template v-for="item in modalItemProp">
          <el-form-item
            :label="item.label"
            :key="item.label"
            :rules="item.rules"
            :prop="item.field"
          >
            <el-input
              v-if="item.type === 'input'"
              v-model="form[item.field]"
              :placeholder="item.placeholder"
              clearable
            >
            </el-input>

            <el-select
              v-else-if="item.type === 'select'"
              v-model="form[item.field]"
              :placeholder="item.placeholder"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="option in item.options"
                :key="option.label"
                v-bind="option"
              >
              </el-option>
            </el-select>

            <el-date-picker
              v-else-if="item.type === 'datePicker'"
              type="daterange"
              range-separator="至"
              :start-placeholder="item.placeholder[0]"
              :end-placeholder="item.placeholder[1]"
              value-format="yyyy-MM-dd"
              v-model="form[item.field]"
              style="width: 100%"
              clearable
            >
            </el-date-picker>

            <!-- 具名插槽，element ui 的表单元素无法包括的 -->
            <slot
              v-else-if="item.type === 'custom'"
              :name="item.slotName"
              :item="item"
            >
            </slot>
          </el-form-item>
        </template>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">
            取消
          </el-button>
          <el-button size="mini" type="primary" @click="handleComfirmClick">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
// 事件总线
import EventBus from "@/utils/bus.js";

export default {
  props: {
    formStyle: {
      // el-form 的样式
      type: Object,
      default: () => ({
        labelWidth: "140px",
        size: "small",
        gutter: 30,
        colLayout: {
          lg: 8,
          md: 12,
          sm: 24,
        },
      }),
    },
    modalItemProp: {
      // el-form-item 的限定
      type: Array,
      required: true,
    },
    modalForm: {
      type: Object,
      required: true,
    },
    otherParams: {
      type: Object,
      required: true,
    },
    // 网络请求
    requests: {
      type: Object,
      required: true,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      needBlanks: 0,
      btnsBottom: false,
      dialogVisible: false,
    };
  },
  methods: {
    // 初始化 - 新增 or 编辑的初始状态
    init(row) {
      this.dialogVisible = true;
      if (row.id) {
        this.dialogVisible = true;
        for (const key in this.modalForm) {
          this.form[key] = row[key] ?? this.modalForm[key];
        }
        this.form.id = row.id;
      } else {
        this.form = { ...this.modalForm };
      }
    },
    // 点击确定按钮
    handleComfirmClick() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          this.$message.error("请填写必填项");
          return;
        }
        if (this.form.id) {
          this.requests
            .edit({ ...this.form, ...this.otherParams })
            .then((res) => {
              if (res && res.code === 10000) {
                this.$message.success(res.message);
                EventBus.$emit("refresh");
                this.dialogVisible = false;
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          this.requests
            .add({ ...this.form, ...this.otherParams })
            .then((res) => {
              if (res && res.code === 10000) {
                this.$message.success(res.message);
                EventBus.$emit("refresh");
                this.dialogVisible = false;
              } else {
                this.$message.error(res.message);
              }
            });
        }
      });
    },
  },
  watch: {
    otherParams: {
      handler(newVal) {
        this.form = { ...this.form, ...newVal };
      },
      deep: true,
    },
  },
};
</script>
<style scoped></style>
