<template>
    <div style="padding:10px">
        <q-card inline class="fit shadow-6">
            <!-- <q-card-title>
        <p class="caption">功能管理</p>
        <q-icon slot="right" name="edit" />
      </q-card-title> -->
            <q-card-main style="height:80%">
                <q-table ref="table" color="primary" :data="serverData" :columns="columns" selection="multiple" separator="cell" :selected.sync="selected" row-key="id"
                         :pagination.sync="serverPagination" @request="request" :loading="loading" :rows-per-page-label="$t('Rows per page')" :rows-per-page-options="[5,10,20,30,40,50,60,200,500]" :no-data-label="$t('No data')">
                    <template slot="top-left" slot-scope="props">
                        <q-input v-model="filter.namezh"  type="text" :prefix="$t('Role name') + '：'" />&nbsp;&nbsp;
                        <q-input v-model="filter.name"  type="text" :prefix="$t('Role code') + '：'" />&nbsp;&nbsp;
                        <q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
                        <q-btn push dense color="primary" icon="add" @click="addRole">{{$t('Add')}}</q-btn>
                    </template>
                    <template slot="top-right" slot-scope="props">
                        <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen" />
                    </template>
                    <template slot="top-selection" slot-scope="props">
                        <q-btn color="negative" flat round delete icon="delete" @click="delRoles" />
                    </template>
                    <q-td slot="body-cell-id" slot-scope="props" :props="props" style="width:100px">
                        <!-- <q-btn small round push glossy dense icon="edit" color="primary" @click="editRole(props.value)"></q-btn>
                        <q-btn small round push glossy dense icon="delete" color="red" @click="delRole(props.value)"></q-btn> -->
                        <q-btn-dropdown color="secondary" label="操作" no-wrap>
                            <q-list link>
                                <q-item v-close-overlay @click.native="editRole(props.value)">
                                    <q-item-main>
                                    <q-item-tile sublabel>修改</q-item-tile>
                                    </q-item-main>
                                </q-item>
                                <q-item v-close-overlay @click.native="delRole(props.value)">
                                    <q-item-main>
                                    <q-item-tile sublabel >删除</q-item-tile>
                                    </q-item-main>
                                </q-item>
                                <q-item v-close-overlay>
                                    <q-item-main>
                                    <q-item-tile sublabel>关闭弹窗</q-item-tile>
                                    </q-item-main>
                                </q-item>
                            </q-list>
                        </q-btn-dropdown>
                    </q-td>
                </q-table>
            </q-card-main>
        </q-card>
        <q-modal v-model="editModal" maximized>
            <q-modal-layout>
                <q-toolbar slot="header">
                    <q-btn flat round dense @click="editModal = false" icon="reply" />
                    <q-toolbar-title>
                        {{$t('Edit')}}
                    </q-toolbar-title>
                </q-toolbar>
                <q-toolbar slot="footer">
                    <q-toolbar-title>
                    </q-toolbar-title>
                    <q-btn round color="red" @click="saveRole">{{$t('Save')}}</q-btn>
                    <q-btn round  @click="editModal = false">{{$t('Cancel')}}</q-btn>
                </q-toolbar>

                <div class="layout-padding">
                    <q-field :count="15">
                        <q-input v-model="tempRole.namezh" :float-label="$t('Role name')" />
                    </q-field>
                    <q-field :count="15">
                        <q-input v-model="tempRole.name" :float-label="$t('Role code')" />
                    </q-field>
                    <q-field :count="200">
                        <q-input v-model="tempRole.description"   :float-label="$t('Role description')" />
                    </q-field>
                    <div class="q-mt-md">
                        <div class="row q-gutter-md">
                            <div class="col-6">
                                <q-card flat bordered class="full-height">
                                        <div class="text-h6">PC端可见应用</div>
                                    <div class="q-pa-md">
                                        <q-option-group
                                            color="primary"
                                            type="checkbox"
                                            v-model="group"
                                            :options="itemList"
                                            class="q-gutter-sm"
                                        />
                                    </div>
                                </q-card>
                            </div>
                            <div class="col-6">
                                <q-card flat bordered class="full-height">
                                        <div class="text-h6">App端可见应用</div>
                                    <div class="q-pa-md">
                                        <q-option-group
                                            color="secondary"
                                            type="checkbox"
                                            v-model="groupApp"
                                            :options="itemListApp"
                                            class="q-gutter-sm"
                                        />
                                    </div>
                                </q-card>
                            </div>
                        </div>
                    </div>
                </div>
            </q-modal-layout>
        </q-modal>
    </div>
</template>

<script>
import {
  getRolePagedList,
  delRole,
  delRoles,
  saveRole,
  platformapplicationslistall,
  listbyrole,
  platformapplicationslistallApp,
  listbyroleApp
} from "@/service/permission/role";
export default {
  name: "role",
  data() {
    return {
      serverData: [],
      serverPagination: {
        page: 1,
        rowsNumber: 0, // specifying this determines pagination is server-side
        rowsPerPage: 10 // current rows per page being displayed
      },
      columns: [
        {
          name: "namezh",
          required: true,
          label: this.$t("Role name"),
          align: "left",
          field: "namezh"
        },
        {
          name: "name",
          label: this.$t("Role code"),
          field: "name",
          align: "left"
        },
        {
          name: "id",
          required: true,
          label: this.$t("ID"),
          align: "left",
          field: "id"
        }
      ],
      filter: {
        namezh: "",
        name: ""
      },
      selected: [],
      loading: false,
      editModal: false,
      tempRole: {
        id: 0,
        namezh: "",
        name: "",
        description: ""
      },
      itemList:[],
      group:[],
      itemListApp:[],
      groupApp:[],
    };
  },
  methods: {
    async request(props) {
      this.loading = true;
      this.serverPagination = props.pagination;
      let table = this.$refs.table,
        { page, rowsPerPage, sortBy, descending } = props.pagination;
      let query = {
        pageNum:  page,
        pageSize: rowsPerPage,
        sortBy: sortBy,
        descending: descending,
        namezh: this.filter.namezh,
        name: this.filter.name
      };
      let dataRes = await getRolePagedList(query);
      let data = dataRes.data.data;
      this.serverPagination.rowsNumber = data.total;
      
      this.serverData = data.list;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    async delRole(id) {
      try {
        await this.$q.dialog({
          title: this.$t("Delete"),
          message: this.$t("Confirm the deletion？"),
          position: "right",
          ok: {
            push: true,
            label: this.$t("Delete")
          },
          cancel: {
            push: true,
            color: "negative",
            label: this.$t("Cancel")
          }
        });
        await delRole({ id: id });
        this.$q.notify({
          type: "positive",
          message: this.$t("Successfully deleted"),
          position: "bottom-right"
        });
        this.search();
      } catch (e) {}
    },
    async delRoles() {
      try {
        await this.$q.dialog({
          title: this.$t("Batch deletion"),
          message: this.$t("Confirm the bulk delete operation？"),
          ok: {
            push: true,
            label: this.$t("Delete")
          },
          cancel: {
            push: true,
            color: "negative",
            label: this.$t("Cancel")
          }
        });
        let ids = this.selected.map(s => {return s.id;}).join(",");
        await delRoles(ids);
        this.$q.notify({
          type: "positive",
          message: this.$t("Successfully deleted"),
          position: "bottom-right"
        });
        this.selected = [];
        this.search();
      } catch (e) {}
    },
    async editRole(id) {
      this.group=[];
      this.groupApp=[];
      let editRole = this.serverData.filter(s => {
        return s.id === id;
      });
      if (editRole && editRole.length > 0) {

        this.tempRole = JSON.parse(JSON.stringify(editRole[0]));
      } else {
        return true;
      }
      // 加载PC端应用权限
      let dataRes = await listbyrole(this.tempRole.id);
      for(let i=0;i<dataRes.data.data.length;i++){
        let app = dataRes.data.data[i];
        if(app.roleUseStatue !== 0){
          this.group.push(app.roleUseStatue+'')
        }
      }
      // 加载App端应用权限
      let dataResApp = await listbyroleApp(this.tempRole.id);
      for(let i=0;i<dataResApp.data.data.length;i++){
        let app = dataResApp.data.data[i];
        if(app.roleUseStatue !== 0){
          this.groupApp.push(app.roleUseStatue+'')
        }
      }
      this.editModal = true;
    },
    async saveRole() {
    		if(this.tempRole.name == "" || this.tempRole.name == null|| this.tempRole.namezh == "" || this.tempRole.namezh == null) {
					this.$q.notify({
						message: "角色名称和角色编码不能为空",
						type: "negative",
						icon: "error_outline",
						timeout: 3000,
						position: "center"
					});
					return false;
				}
      let groupstr = (JSON.stringify(this.group).substr(1,JSON.stringify(this.group).length - 2)).split('"').join('');
      this.tempRole.group = groupstr;
      let groupAppStr = (JSON.stringify(this.groupApp).substr(1,JSON.stringify(this.groupApp).length - 2)).split('"').join('');
      this.tempRole.groupApp = groupAppStr;
      await saveRole(this.tempRole);
      this.$q.notify({
        type: "positive",
        message: this.$t("Saved successfully"),
        position: "bottom-right"
      });
      this.editModal = false;
      this.search();
    },
    search() {
      this.request({
        pagination: this.serverPagination
      });
    },
    addRole() {
      this.tempRole = {};
      this.group=[];
      this.groupApp=[];
      this.editModal = true;
    },
    async platformapplicationslistall(){
      let dataRes = await platformapplicationslistall();
      // 只显示pc端地址有值的
      this.itemList = dataRes.data.data.filter(item=> item.href && item.qyflag=='1');
    },
    async platformapplicationslistallApp(){
      let dataRes = await platformapplicationslistallApp();
      // 只显示app端地址有值的
      this.itemListApp = dataRes.data.data.filter(item=> item.wechatUrl && item.qyflag=='1');
    },
  },
  mounted() {
    this.request({
      pagination: this.serverPagination
    });
    this.platformapplicationslistall();
    this.platformapplicationslistallApp();
  }
};
</script>
