<template>
  <div class="page_newAddRole">
    <div class="newAddRoleTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
      <span class="titleName">新增角色</span>
    </div>
    <div class="roleDescription">
      <van-field
        v-model="name"
        required
        maxlength="30"
        label="角色名称"
        placeholder="请填写角色名称"
      />
      <van-field v-model="desc" label="角色描述" placeholder="请填写角色描述" />
    </div>
    <div class="keep" @click="save()">保存</div>
  </div>
</template>

<script>
import { CreateRole } from "@/api/admin_user";
import { setRem } from "@/libs/functionRem";

export default {
  data() {
    return {
      name: "",
      desc: ""
    };
  },
  methods: {
    save() {
      if (this.name.length == 0) {
        this.$toast({
          message: "角色名字不能为空!"
        });
        return;
      }

      let params = {
        name: this.name,
        desc: this.desc
      };
      CreateRole(params).then(response => {
        if (response.data.state === 1) {
          this.$toast({ message: "新增成功" });
          this.$router.go(-1);
        } else {
          this.$toast({
            message: response.data.msg
          });
        }
      });
    }
  },
  created() {
    setRem();
  }
};
</script>

<style lang="scss" scoped>
.page_newAddRole {
  height: 100%;
  overflow-y: auto;
  background: #fafafa;

  .newAddRoleTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }

  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 7.2rem;
  }

  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }

  .roleDescription {
    margin: 0.875rem 0 2rem;

    .van-cell {
      font-size: 1rem;
    }
  }
  .keep {
    width: 90%;
    height: 2.8125rem;
    line-height: 2.8125rem;
    text-align: center;
    color: #fff;
    background: #338afb;
    margin: 0 auto;
    border-radius: 1.875rem;
    font-size: 1rem;
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>
<style lang="scss">
.page_newAddRole {
  .roleDescription {
    .van-cell__value {
      display: flex;
      align-items: center;
    }
  }
}
</style>
