<template>
  <el-dialog :title="dialogObj.title" :visible.sync="dialogObj.dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="closeModalEve" v-popupdra-directive="{'show': dialogObj.dialogVisible}">
    <el-form :model="dialogObj.data.form" label-width="80px" ref="query" :rules="addrules">
      <el-form-item prop="roleCode" label="角色编号">
        <el-input v-model="dialogObj.data.form.roleCode" :disabled="dialogObj.data.form.disabled"></el-input>
      </el-form-item>
      <el-form-item prop="roleName" label="角色名称">
        <el-input v-model="dialogObj.data.form.roleName"></el-input>
      </el-form-item>
      <el-form-item prop="attrFlag" label="角色类型">
        <el-select v-model="dialogObj.data.form.attrFlag" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" resize="none" v-model="dialogObj.data.form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm('addForm')">取 消</el-button>
        <el-button type="success" @click="submitForm('query')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    props: ['dialogObj'],
    data () {
      return {
        options1: [{
          value: '1',
          label: '管理员'
        }, {
          value: '2',
          label: '普通'
        }, {
          value: '3',
          label: '其他'
        }],
        addrules: {
          roleCode: [
            {required: true, message: '请输入角色代码', trigger: 'blur'}
          ],
          roleName: [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ]
        },
        value: '',
        form: {}
      }
    },
    methods: {
      closeModalEve () {
        this.dialogObj.dialogVisible = false
        this.$emit('confirmBack', false)
      },
      resetForm (formName) {
        this.dialogObj.dialogVisible = false
        this.$emit('confirmBack', false)
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogObj.dialogVisible = false
            this.$emit('confirmBack', this.dialogObj)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .item__label_popup {
    text-align: right;
    vertical-align: middle;
    float: right;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 8px 11px 0;
    box-sizing: border-box;
    /* display: inline-block; */
  }
  .el-input, .el-input__inner {
    /*width: '';*/
    display: inline-block;
  }
</style>
