<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <Form label-position="right" :model="formItem" :label-width="130">
                <FormItem label="角色名称：" prop="content">
                    <Input type="text" v-model="formItem.name" placeholder="请输入角色名称" @on-enter="saveOption" clearable></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelOption">取消</Button>
                <Button type="success" @click="saveOption" :loading="btnLoading">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  saveRole
} from '../../../../../api/system/sys-staff-role-manager'
export default {
  name: 'addRoleModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return '添加角色'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 500
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      btnLoading: false,
      formItem: {}
    }
  },
  methods: {
    cancelOption () {
      this.$emit('cancelOption')
    },
    saveOption () {
      const data = {
        name: this.formItem.name,
        edit: false
      }
      this.btnLoading = true
      saveRole(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveOption')
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
  },
  computed: {}
}
</script>

<style scoped>
</style>
