<template>
  <el-dialog v-dialogDrag width="40%" class="moveMen" :title="title" :visible.sync="addStatus"
    :close-on-click-modal="false" :before-close="cancel" top="30px">
    <el-form :model="form" ref="ruleForm" label-width="100px" :rules='rules' style="padding:0 2px">
      <el-row :gutter="20">
        <el-col :span="19">
          <el-form-item label="角色：" prop="roleName">
            <el-input size="small" v-model.trim="form.roleName" clearable placeholder="请输入角色"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="19">
          <el-form-item label="角色编码：" prop="roleCode">
            <el-input size="small" v-model.trim="form.roleCode" clearable placeholder="请输入编码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button :loading="btnloading" size="mini" type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button size="mini" type="info" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
  import {
    message,
    dateFormats,
  } from '@/utils/common'
  export default {
    props: {
      addStatus: {
        type: Boolean,
        default: () => false,
      },
      title: {
        type: String,
        default: () => '新增',
      },
      form: {
        type: Object,
        default: () => {},
      },

    },
    data() {
      return {
        btnloading: false,
        rules: {
          roleName: [{
            required: true,
            message: '请输入角色',
            trigger: 'blur'
          }],
          roleCode: [{
            required: true,
            message: '请输入角色编码',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnloading = true;
            if (this.title === '新增') {
              this.$store.dispatch('role/saveRole', this.form).then(res => {
                this.btnloading = false;
                this.$emit('getData')
                this.cancel()
              }).catch(()=>{
                this.btnloading = false;
              })
            } else {
              this.$store.dispatch('role/updateRole', this.form).then(res => {
                this.btnloading = false;
                this.$emit('getData')
                this.cancel()
              }).catch(()=>{
                this.btnloading = false;
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.$refs['ruleForm'].resetFields();
        this.$emit('cancel')
      }
    }
  }

</script>
<style lang='scss' scoped>
  .el-form-item {
    margin-bottom: 22px;
  }

  .ren {
    text-align: right;
    width: 100px;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    font-weight: 700;

  }

</style>
