<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Premission</h1>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Target</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
          </span>
          <select class="form-control" v-model="role.target">
            <option value="Select"></option>
            <option value="Details">Details</option>
            <option value="MenuCategories">Menu Categories</option>
            <option value="MenuOptions">Menu Options</option>
            <option value="Menu">Menu</option>
            <option value="Orders">Orders</option>
            <option value="Users">Users</option>
            <option value="Roles">Roles</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-2" style="margin-bottom: 1em">
        <label>Navigation</label>
        <div class="input-group-prepend">
          <input style="margin-left: 1px" type="checkbox" v-model="role.navigate" />
        </div>
      </div>
      <div class="col-md-2" style="margin-bottom: 1em">
        <label>Create</label>
        <div class="input-group-prepend">
          <input style="margin-left: 1px" type="checkbox" v-model="role.create" />
        </div>
      </div>
      <div class="col-md-2" style="margin-bottom: 1em">
        <label>Read</label>
        <div class="input-group-prepend">
          <input style="margin-left: 1px" type="checkbox" v-model="role.read" />
        </div>
      </div>
      <div class="col-md-2" style="margin-bottom: 1em">
        <label>Write</label>
        <div class="input-group-prepend">
          <input style="margin-left: 1px" type="checkbox" v-model="role.write" />
        </div>
      </div>
      <div class="col-md-2" style="margin-bottom: 1em">
        <label>Delete</label>
        <div class="input-group-prepend">
          <input style="margin-left: 1px" type="checkbox" v-model="role.delete" />
        </div>
      </div>
    </div>

    <div class="row"></div>
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <div class="input-group-prepend">
          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListView from "../shared/listView";
export default {
  name: "Role",
  props: {
    role: { default: {} }
  },
  components: {
    ListView
  },
  data() {
    return {
      wait: false
    };
  },
  methods: {
    Ok() {
      this.$emit("UpdatePrems", this.role);
    }
  },
  watch: {
    role: {
      immediate: true,
      handler(val, olVal) {
        if (val) {
          this.role = val;
        }
      }
    }
  }
};
</script>