<template>
  <div>
    <van-nav-bar title="角色权限设置" left-text="返回" @click-left="$route_back" left-arrow right-text="保存" @click-right="save"></van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <van-checkbox-group v-model="result">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in data"
              clickable
              :key="item.id"
              :title="item.name"
              @click="toggle(index)"
            >
              <template slot="label">
                {{item.remark}}
              </template>
              <template slot="right-icon">
                <van-checkbox :name="item.id" ref="checkboxes" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>

        <div style="height: 1rem;"></div>
      </scroller>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import Vue from 'vue';
  import { Checkbox, CheckboxGroup } from 'vant';

  Vue.use(Checkbox);
  Vue.use(CheckboxGroup);
  export default {
    name: "role_permissions",
    data(){
      return {
        role_id: 0,
        data: [],
        result: []
      }
    },
    methods: {
      save(){
        this.$toast.loading({
          message: '正在提交'
        })
        request('post','/api/role/permissions', {role_id: this.role_id, permissions: this.result}).then(res => {
          if(res.data.code == 1){
            this.$toast.clear()
            this.$toast.success('提交成功')
            setTimeout(() => {
              this.$route_back()
            }, 300)
          }else{
            this.$toast(res.data.msg)
          }
        })
      },
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      get_list(){
        this.$toast.loading({
          message: '加载中'
        })
        request('get','/api/role/permissions', {role_id: this.role_id}).then((res) => {
          this.$toast.clear()
          if(res.data.code == 1){
            this.data = res.data.data.list
            for(let i in this.data){
              if(this.data[i].selected == 1){
                this.result.push(this.data[i].id)
              }
            }
          }else{
            this.$toast(res.data.msg)
          }
        })
      }
    },
    created(){
      this.role_id = this.$route.query.id || 0
      this.get_list()
    }
  }
</script>

<style scoped>
  .body_com {
    height: calc(100% - 0.92rem);
    position: relative;
  }
</style>
