<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" 
                separator="cell" 
                row-key="id"
                :pagination.sync="serverPagination"
                @request="request" 
                :loading="loading" 
                :rows-per-page-options="[5,10,20,30,40,50,60,200,500]" 
                :rows-per-page-label="$t('Rows per page')" 
                :no-data-label="$t('No data')">
                    <template slot="top-left" slot-scope="props">
                        <q-input v-model="filter.title"  type="text" prefix="名称：" />&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="addapp">{{$t('Add')}}</q-btn>&nbsp;&nbsp;
                        <q-btn push dense color="secondary" icon="sort" @click="openSort">排序</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-href" slot-scope="props" :props="props" style="max-width: 300px; word-break: break-all;">
                        <span>电脑入口：{{ props.row.href ? props.row.href: '未维护'}}</span><br/>
                        <span>企微入口：{{ props.row.wechatUrl ? props.row.wechatUrl: '未维护' }}</span>
                    </q-td>
                    <q-td slot="body-cell-qyflag" slot-scope="props" :props="props">
                        <span
                        class="text-caption"
                        :class="props.row.qyflag === '1' ? 'text-positive' : 'text-negative'"
                        >
                        {{ props.row.qyflag === "1" ? "启用" : "停用" }}
                        </span>
                    </q-td>
                    <q-td slot="body-cell-openmail" slot-scope="props" :props="props">
                        <span
                        class="text-caption"
                        :class="props.row.openmail === '1' ? 'text-positive' : 'text-negative'"
                        >
                        {{ props.row.openmail === "1" ? "启用" : "停用" }}
                        </span>
                    </q-td>
                    <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="editapp(props.value)"></q-btn>
                        <q-btn small round push glossy dense icon="delete" color="red" @click="delapp(props.value)"></q-btn> -->
                        <q-btn-dropdown color="secondary" label="操作" no-wrap>
                            <q-list link>
                                <q-item v-close-overlay @click.native="editapp(props.value)">
                                    <q-item-main>
                                    <q-item-tile sublabel>修改</q-item-tile>
                                    </q-item-main>
                                </q-item>
                                 <!--<q-item v-close-overlay @click.native="editappVisible(props.value)">
                                    <q-item-main>
                                    <q-item-tile sublabel>修改可见范围</q-item-tile>
                                    </q-item-main>
                                </q-item>-->
                                <q-item v-close-overlay @click.native="delapp(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>
        <!-- 编辑组件 -->
        <edit-application
            v-model="editModal"
            :temp="temp"
            :subtype="subtype"
            :uploadurl="uploadurl"
            :select-options="selectOptions"
            :openmail-options="openmailOptions"
            :appidflag="appidflag"
            @saved="handleChildSaved"
        />
        <sort-applications v-model="sortModalVisible" @saved="search" ref="sortModal"/>
    </div>
</template>

<script>
    import { getPlatformApplicationsPagedList,delapp } from "@/service/permission/platformapplications";
    export default {
        data() {
            return {
                uploadurl: "manager/znzl/file/upload/videoandimgurl?uploadPar=adv&",
                selectOptions:[
                    {
                        label: '启用',
                        value: '1'
                    },
                    {
                        label: '停用',
                        value: '0'
                    },
                ],
                openmailOptions:[
                    {
                        label: '启用',
                        value: '1'
                    },
                    {
                        label: '停用',
                        value: '0'
                    },
                ],
                serverData: [],
                serverPagination: {
                    page: 1,
                    rowsNumber: 0, // specifying this determines pagination is server-side
                    rowsPerPage: 10, // current rows per page being displayed
                    sortBy: 'num',
                    descending: false,
                },
                columns: [
                    {
                        name: "appid",
                        required: true,
                        label: '唯一标识',
                        align: "left",
                        field: "appid",
                        sortable: false
                    },
                    {
                        name: "title",
                        required: true,
                        label: '名称',
                        align: "left",
                        field: "title",
                        sortable: false
                    },
                    {
                        name: "href",
                        required: true,
                        label: '连接',
                        align: "left",
                        field: "href",
                        sortable: false
                    },
                    {
                        name: "qyflag",
                        required: true,
                        label: '开启应用',
                        align: "left",
                        field: "qyflag",
                        sortable: false,
                        format: function(val, row) {
                            return val == 1 ? '启用' : '停用'
                        }
                    },
                    {
                        name: "openmail",
                        required: true,
                        label: '开启待办',
                        align: "left",
                        field: "openmail",
                        sortable: false,
                        format: function(val, row) {
                            return val == 1 ? '启用' : '停用'
                        }
                    },
                    // {
                    //     name: "mailtype",
                    //     required: true,
                    //     label: '待办标识',
                    //     align: "left",
                    //     field: "mailtype",
                    //     sortable: false
                    // },
                    {
                        name: "addtime",
                        required: true,
                        label: '添加时间',
                        align: "left",
                        field: "addtime",
                        sortable: false
                    },
                    {
                        name: "id",
                        required: true,
                        label: '操作',
                        align: "left",
                        field: "id",
                        sortable: false
                    },
                ],
                filter: {
                    title: "",
                },
                selected: [],
                loading: false,
                editModal: false,
                temp:{
                    openmail: '0'
                },
                appidflag:true,
                subtype: "add",
                fileCount: 0
                ,sortModalVisible: false
            }
        },
        mounted() {
            this.request({
                pagination: this.serverPagination,
                filter: this.filter
            });
        },
        components: {
            EditApplication: () => import('./EditApplication.vue'),
            SortApplications: () => import('./SortApplications.vue')
        },
        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,
                    title: this.filter.title
                };
                let dataRes = await getPlatformApplicationsPagedList(query);
                let data = dataRes.data.data;
                this.serverPagination.rowsNumber = data.total;
                this.serverData = data.list;
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            },
            search() {
                this.request({
                    pagination: this.serverPagination,
                    filter: this.filter
                });
            },
            addapp() {
                this.temp = {};
                this.subtype = "add";
                this.editModal = true;
                this.appidflag = false;
            },
            openSort() {
                this.sortModalVisible = true;
            },
            // 保存由子组件处理，这里只负责刷新列表
            handleChildSaved() {
                this.editModal = false;
                this.search();
            },
            editapp(id) {
                this.subtype = "edit";
                let edit = this.serverData.filter(s => {
                    return s.id === id;
                });
                if (edit && edit.length > 0) {
                    this.temp = JSON.parse(JSON.stringify(edit[0]));
                    this.temp.openmail = this.temp.openmail + ''
                } else {
                    return true;
                }
                this.editModal = true;
                this.appidflag = true;
            },
            
            editappVisible(id){
            	this.$router.push('/system/sysadv');
            },
            async delapp(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 delapp({ id: id });
                    this.$q.notify({
                        type: "positive",
                        message: this.$t("Successfully deleted"),
                        position: "bottom-right"
                    });
                    this.search();
                } catch (e) {}
            }
         
        },
    }
</script>

<style scoped>
.q-table tbody td[style*="max-width: 300px"] {
    word-break: break-word;
    white-space: normal;
}
.q-table tbody td[style*="max-width: 300px"] span {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
}
</style>