<template>
  <div class="page-body">
    <!-- 开始表单 -->
    <!-- :data 表单数据 -->
    <!-- :title-width 标题宽度 -->
    <!-- :title-align 标题对齐方式 -->
    <!-- :rules 表单验证规则 -->
    <!-- :items 表单配置 -->
    <!-- titleColon 标题后面是否带冒号 -->
    <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth" :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
      <!-- 自定义区域 -->
      <template #myregion="{}">
        <!-- 搜索 -->
        <!-- placeholder 占位符 -->
        <!-- enter-button 是否显示搜索按钮 -->
        <a-input-search placeholder="input search text" enter-button />
      </template>
    </vxe-form>

    <!-- 按钮 -->
    <div>
      <a-button type="primary" @click="ok">确定</a-button>
      <a-button @click="cancel">取消</a-button>
    </div>

  </div>
</template>

<script>
import BASE_URL from '@/services/base/api.js'; // 引入api

export default { 
  name: 'BasePermissionEdit',

  props: { // 页面参数
    pageMode: { // 页面模式 add edit
      type: String, // 类型
      default: "edit" // 默认值
    },
    dataId: {
    }

  },

  data() {

    // 页面数据变量
    var pageData = {

      actions: { // api
        create: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/create`, // 创建
        update: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/update`, // 更新
        get: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/detail` // 获取
      },

      formOptions: { // 表单配置
        data: { // 表单默认数据
          "title": "",
          "service": "",
          "permission_code": "",
          "desc": ""
        },

        titleWidth: 100, // 标题宽度
        titleAlign: 'right', // 标题对齐方式

        rules: { // 表单验证规则
          title: [ // 权限名
            { required: true, message: '请输入权限名' } 
          ] 
        },

        items: [
          {
            title: '左侧', // 标题
            children: [ 
              { 
                field: 'title',  // 字段名
                title: '权限名',  // 标题
                span: 24,  // 宽度
                itemRender: {  // 渲染
                  name: '$input',  // 组件名
                  props: {  // 组件属性
                    placeholder: '请输入权限名'  // 占位符
                  } 
                } 
              },
              { field: 'permission_code', title: '编号', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入编码' } } },
              { field: 'service', title: 'service', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入service' } } },
              { field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } }
            ]
          }
        ]
      }

    };
    // 合并默认配置
    pageData.formOptions = Object.assign(this.$mk.config.defaults.formOptions, pageData.formOptions);
    // 返回数据
    return pageData;
  },
  created() { // 页面创建时
    if (this.dataId) { // 如果有id
      this.$mk.post({ // 获取数据
        url: this.actions.get, // api
        loading: "加载中...", // 加载提示
        data: { // 参数
          id: this.dataId // id
        }
      }).then(a => { // 成功
        this.formOptions.data = a.data.base_permission; // 赋值
      }).catch((a) => { // 失败
        this.$mk.error(a.data.msg);
      });
    }

  },
  // 函数
  methods: {


    loadData() {
    },

    ok() { // 提交确定

      let save = () => { // 保存
        let action = this.pageMode == "add" ? this.actions.create : this.actions.update; // 如果是新增就是创建api，否则就是更新api
        let postdata = this.pageMode == "add" ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data); // 如果是新增就是创建api，否则就是更新api
 
        this.$mk.post({ // 提交
          url: action, // api
          loading: "保存中...", // 加载提示
          data: postdata // 参数
        }).then(() => { // 成功
          this.$mk.success("保存成功"); // 提示
          this.$emit("callback", { success: true }); // 回调
        }).catch((a) => { // 失败
          this.$mk.error(a.data.msg); // 提示
        });
      };

      this.$refs.xForm.validate((a) => { // 验证

        if (a) { // 如果有错误
          let count = 0; // 错误数量
          for (let name in a) { // 遍历错误
            a[name]; // 错误信息
            count++; // 错误数量+1
          }
          this.$mk.error(`存在${count}项错误，请检查`); // 提示
        } else {
          save(); // 保存
        }
      });


    },

    cancel() { // 取消
      this.$emit("callback", {}); // 回调
    }
  },
  // 监听属性
  watch: {

  }
};

</script>
<style scoped lang="less">

</style>
