<template>
  <div class="page-body">

    <vxe-form :data="options.formOptions.data" ref="xForm" :title-width="options.formOptions.titleWidth"
      :title-align="options.formOptions.titleAlign" :rules="options.formOptions.rules" :items="options.formOptions.items"
      titleColon>
    </vxe-form>

    <div class="footerbar">
      <a-button type="primary" @click="save">确定</a-button>
      <a-button @click="cancel">取消</a-button>
    </div>




  </div>
</template>

<script>


export default {

  name: 'BasicPageEdit',
  components: {},
  props: {
    options: {
      type: Object
    },
    dataId: {
    }


  },

  data() {

    return {
      isEdit: false,
      defaultFormData: {}

    };
  },

  computed: {
  },


  created() {

    this.defaultFormData = JSON.parse(JSON.stringify(this.options.formOptions.data || {}))

  },
  // 函数
  methods: {


    // 返回
    back() {
      if (this.options.addPageUrl) {
        this.isEdit = this.options.isEdit;
        // 如果是新增模式，关闭当前页面
        if (!this.isEdit) {
          this.$closePage({
            closeRoute: this.options.addPageUrl
          });
        } else {
          this.$closePage({
            closeRoute: this.options.editPageUrl
          });
        }
        // 打开列表页面
        this.$openPage(this.options.listPageUrl)
      } else {
        this.$emit("callback", { success: true });
      }

    },

    // 保存
    save({ afterSave }) {


      let _this = this;
      let save = () => {

        this.isEdit = this.options.isEdit;

        // 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
        let action = !this.isEdit ? this.options.actions.create : this.options.actions.update;


        // 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
        let postdata = Object.assign({}, this.options.formOptions.data);
        // 如果是编辑模式
        if (this.isEdit) {
          // postdata = { MesUnit: postdata }
        }
        // 格式化提交的数据
        this.$mk.formatFormData({ data: postdata, rules: this.options.formOptions.items ,igFields : this.options.saveIgFields });


        // 提交数据
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata,
          useBigInt: true,
        }).then((a) => { // 成功回调
          if (afterSave) {
            afterSave();
          } else {
            if (a.code == 200) {
              this.$mk.success("保存成功");

              this.$emit("afterSave", { data: postdata });
              if (!this.isEdit) { // 如果是新增模式，关闭当前页面

                if (this.options.action_afterSave == "confirm") {
                  this.$confirm({
                    title: '提示',
                    content: '新增成功，是否继续',
                    okText: '确认',
                    cancelText: '返回',
                    onOk() {
                      _this.options.formOptions.data = _this.defaultFormData;
                    },
                    onCancel() {
                      _this.back();
                    },
                  });
                } else {
                  this.back();
                }

              }
            } else {
              this.$mk.error(a.msg); // 显示错误信息
            }

          }

        }).catch((a) => { // 失败回调
          this.$mk.error(a.data.msg); // 显示错误信息
        });


      };


      // 验证表单
      this.$mk.validateForm({ form: this.$refs.xForm }).then(() => { // 验证表单
        save(); // 提交保存
      }).catch(count => { // 验证失败
        this.$mk.error(`存在${count}项错误，请检查`);
      });


    },


    // 取消 返回
    cancel() {
      if (this.options.addPageUrl) {
        this.back();
      } else {
        this.$emit("callback", {});
      }
    }
  },
  // 监听属性
  watch: {
  }
};

</script>


<style scoped lang="less">
.page-body {
  padding: 30px;
  background: @base-bg-color;
}

.formtabs .ant-tabs-tabpane {
  /* background: white; */
  padding: 12px;
}

.gridPanel {
  height: calc(100vh - 600px);
}

.footerbar {
  padding-left: 10px;
}

.imagePanel {
  cursor: pointer;
  padding: 10px;
  width: 100px;

  img {
    width: 80px;
    height: 80px;
  }
}
</style>
