<template>
    <div class="check">
        <form-option title="机构管理">
            <el-form :inline="true" :model="formData" ref="form" label-width="80px">
                <el-form-item label="机构名称:" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
                <el-button type="primary" icon="el-icon-search" @click="handleQueryData">查询</el-button>
            </el-form>
        </form-option>
        <div class="custom-table">
            <el-table :data="list" border v-loading="loading">
                <!-- <el-table-column type="index" align="center" label="序号" width="60" /> -->
                <el-table-column prop="enforce_org_name" show-overflow-tooltip label="机构名称" />
                <el-table-column prop="member_total" label="成员数量" align="center" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleUsers(scope.row)">{{ scope.row.member_total }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="enforce_org_code" label="机构编码" align="center" show-overflow-tooltip />
                <el-table-column prop="office_phone" label="联系方式" align="center" show-overflow-tooltip />
                <el-table-column prop="address" label="机构地址" align="center" show-overflow-tooltip />
                <el-table-column prop="action" label="操作" align="center" width="80">
                    <template slot-scope="scope">
                        <i class="el-icon-view blueFont"></i>
                        <el-button type="text" size="small" @click="handleDetail(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page :page="query.page" :size="query.size" :total="total" @pageChange="pageChange"></Page>
        </div>

        <user-dialog v-if="showUserOrg" :show.sync="showUserDialog" :org="showUserOrg" @close="closeUserDialog"></user-dialog>
    </div>
</template>

<script>
import FormOption from "@/component/FormOption";
import UserDialog from './components/UserDialog.vue';

import { getOrg } from '@/api/org';
import { notEmpty } from '@/utils/tool';

export default {
    components: {
        FormOption,
        UserDialog,
    },
    data() {
        return {
            formData: {
                name: "",
            },
            query: {
                page: 1,
                size: 10,
                sort: 'enforce_org_code asc'
            },
            total: 0,
            list: [],
            loading: false,
            showUserDialog: false,
            showUserOrg: null,
        };
    },
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size);
            return page > 0 ? page : 1;
        },
    },
    mounted() {
        this.handleQuery();
    },
    methods: {
        handleQueryData() {
            this.query.page = 1;
            this.handleQuery();
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.handleQuery();
        },
        pageChange(page, size) {
            this.query.page = page;
            this.query.size = size;
            this.handleQuery();
        },
        handleQuery() {
            this.loading = true;
            let query = '';
            if (notEmpty(this.formData.name)) {
                query = `enforce_org_name==*${this.formData.name.trim()}*`;
            }
            this.query.query = query;
            getOrg(this.query).then(res => {
                this.total = res.total || 0;
                this.list = res.data || [];
                this.loading = false;
            });
        },
        closeUserDialog() {
            this.showUserOrg = null;
        },
        handleUsers(row) {
            this.showUserOrg = row;
            this.showUserDialog = true;
        },
        handleDetail(id) {
            this.$router.push(`/integrated/org/detail/${id}`);
        }
    },
};
</script>

<style lang="scss">
.check {
    .option .el-select .el-input__inner {
        padding-right: 15px;
    }
}
</style>
