<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="ok">确定</a-button>
        <a-button @click="cancel">取消</a-button>
      </div>

    </div> 
</template>

<script>


export default {

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


  },

  data() {

    return {};
  },

  computed: { 
  },


  created() {

 

  },
  // 函数
  methods: {
 

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

    // 保存
    ok() {

      let save = () => {


        // 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
        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 });


        // 提交数据
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata,
          useBigInt: true,
        }).then(() => { // 成功回调
          this.$mk.success("保存成功");
          if (!this.isEdit) { // 如果是新增模式，关闭当前页面
            this.back();
          }
        }).catch((a) => { // 失败回调
          this.$mk.error(a.data.msg); // 显示错误信息
        });


      };


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


    },


    // 取消 返回
    cancel() {
      this.back();
    }
  },
  // 监听属性
  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>
