<template>

  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" :loading="confirmLoading" @click="privGroupHandler" priv="BrowsePrivGroupManage.Add"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <el-form :model="tmpPrivGroup" :rules="privdataRules" ref="createprivdataForm" label-width="120px">
          <el-form-item label="名称：" prop="name">
            <el-input style="width:320px" v-model="tmpPrivGroup.name"></el-input>
          </el-form-item>
          <el-form-item label="别名：" prop="code">
            <el-input style="width:320px" v-model="tmpPrivGroup.code" @focus="getAlias"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {show: Boolean},
  data() {
    return {
      tmpPrivGroup: {
        name: '',
        code: ''
      },
      confirmLoading: false,
      privdataRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }, { max: 50, message: '名称不能超过50个字符', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入别名', trigger: 'blur' },
          { max: 50, message: '别名不能超过50个字符', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^\w+$/.test(value) === false) {
                callback(new Error('只能是数字和字母组成'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      } // 浏览权限添加规则
    }
  },
  methods: {
    goBack() {
      this.$router.push(`/plugins/browsepriv`)
    },
    getAlias() {
      if (this.tmpPrivGroup.name) {
        this.tmpPrivGroup.code = window.util.getSpell(this.tmpPrivGroup.name, true)
      }
    },
    // 添加保存方法
    async privGroupHandler() {
      try {
        await util.validateForm(this.$refs['createprivdataForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
        return
      }
      this.confirmLoading = true
      let res = await axios.post('/ui/browsepriv', this.tmpPrivGroup)
      this.confirmLoading = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$router.push(`/plugins/browsepriv/${res.data.ID}`)
      }
    }

  }
}
</script>
