<template>
  <!-- 小型弹窗，用于完成，删除，保存等操作 -->
  <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="false"
    :closeOnClickModal="false">
    <div>
      <el-form :model="dataForm" ref="ruleForm" label-width="110px">
        <el-form-item label="角色名称">
          <el-input style="width:100%" v-model="dataForm.roleName" maxlength="20"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
      <el-button type="primary" class="search-btn" :disabled="disabled" @click="submitForm()">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ["width", "dataForm", "title", "disabled", "usersList"],
  data() {
    return {
      roles: [],
      lDialog: this.width > 500 ? "w700" : "w500",
      dialogVisible: true,
      isDisabled: true,
      options: [],
      roleIds: [],
      menuIds: [],
      menuList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      roleTypes: ['WEB角色', 'APP角色'],
    };
  },
  mounted() {
  },
  methods: {
    /*关闭弹窗 */
    handleClose() {
      this.dialogVisible = false;
      this.$emit("closeDialog");
      setTimeout(() => {
        this.dialogVisible = true;
      });
    },
    /**确认弹窗 */
    sureBtnClick() {
      this.dialogVisible = false;
      this.$emit("closeDialog");
      setTimeout(() => {
        this.dialogVisible = true;
      });
    },
    /**验证 */
    submitForm(formName) {
      let data = this.dataForm;
      data.roleType = '3';
      this.$emit('submit', data);
    }
  }
};
</script>
<style lang="scss">
.w700 .el-dialog {
  width: 700px;
}

.w500 .el-dialog {
  width: 500px;
}

.w500 .el-dialog__header,
.w700 .el-dialog__header {
  background: #eeeeee;
  text-align: center;

  .el-dialog__title {
    font-size: 16px;
  }
}

.yxq .el-range-separator {
  margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
  width: 260px;
}
</style>
