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

    <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
      :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
      <template #myregion="{}">
        <a-input-search placeholder="input search text" enter-button />
      </template>
    </vxe-form>


    <div class="footerbar">
      <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';

export default {
  i18n: require('./i18n'),

  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    dataId: {
    }

  },

  data() {

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

      actions: {
        create: `${BASE_URL.BASE_URL}/BaseAdmin/v1/create`,
        update: `${BASE_URL.BASE_URL}/BaseAdmin/v1/update`,
        get: `${BASE_URL.BASE_URL}/BaseAdmin/v1/detail`
      },

      formOptions: {

        data: {
          status: 1
        },

        titleWidth: 100,
        titleAlign: 'right',

        rules: {
          nickname: [
            { required: true, message: '昵称不能为空' }
          ],
          realname: [
            { required: true, message: '姓名不能为空' }
          ],
          englishname: [
            { required: true, message: '姓名不能为空' }
          ],
          password: [
            { required: true, message: '姓名不能为空' }
          ],

          email: [
            {
              validator({ itemValue }) {
                // 自定义校验
                if (itemValue && !/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(itemValue)) {
                  return new Error('email格式不正确')
                }
              }
            }
          ],
          mobile: [
            { required: true, message: '请输入手机号' },
            {
              validator({ itemValue }) {
                // 自定义校验
                if (itemValue && !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(itemValue)) {
                  return new Error('手机号格式不正确')
                }
              }
            }
          ],
        },

        items: [
          { field: 'mobile', dataRule: { type: "integer" }, title: '联系电话', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入联系电话' } } },
          { field: 'password', title: '密码', span: 24, itemRender: { name: '$input', props: { type: "password", placeholder: '请输入密码' } } },
          { field: 'realname', title: '姓名', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
          { field: 'nickname', title: '昵称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
          { field: 'englishname', title: '英文名', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入英文名' } } },
 
          { field: 'email', title: 'email', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入email' } } }

        ]
      }

    };

    for (let ruleName in pageData.formOptions.rules) {
      let rule = pageData.formOptions.rules[ruleName];
      if (rule && rule[0]) {
        if (rule[0].required === true) {
          pageData.formOptions.data[ruleName] = "";
        }
      }
    }

    pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);

    return pageData;
  },
  created() {
    if (this.dataId) {
      this.$mk.post({
        url: this.actions.get,
        loading: "加载中...",
        data: {
          id: this.dataId
        }
      }).then(a => {
        this.formOptions.data = a.data.BaseAdmin;
      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });
    }

  },
  // 函数
  methods: {


    loadData() {
    },

    ok() {

      let save = () => {
        let action = this.pageMode == "add" ? this.actions.create : this.actions.update;
        let postdata =  JSON.parse(JSON.stringify(this.formOptions.data))

        this.$mk.formatFormData({ data: postdata, rules: this.formOptions.items });
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata
        }).then(() => {
          this.$mk.success("保存成功");
          this.$emit("callback", { success: true });
        }).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.$emit("callback", {});
    }
  },
  // 监听属性
  watch: {

  }
};

</script>
<style>

</style>
