<style lang="scss">
@import '@/styles/index.scss'; //导入样式

.company {
    width: 100%;
    margin: auto;

    &__item {
        width: 100%;
        display: flex;

        &-left {
            flex: 1;
        }

        &-right {
            flex: none;
            width: 100px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-left: 15px;
            text-align: right;
        }
    }
}
</style>

<template>
    <div class="company">
        <app-search>
            <el-form :inline="true" :size="controlSize">
                <el-form-item label="公司名称">
                    <el-input v-model.trim="tableData.listData.search.name" auto-complete="off" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="hGetListPage">查询</el-button>
                    <el-button type="success" @click="openRegisterDlg">公司注册</el-button>
                </el-form-item>
            </el-form>
        </app-search>
        <app-table pagination paginationAlign="right" table :tableData="tableData.listData"
            :handlePageSizeChange="handlePageSizeChange" :handlePageNumChange="handlePageNumChange">
            <template slot="table-column">
                <el-table-column label="操作" header-align="center" width="100" testalign="center">
                    <template slot-scope="scope">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu>
                                <el-dropdown-item @click.native="openUpdateDlg(scope.row)">修改公司资料</el-dropdown-item>
                                <hr />
                                <el-dropdown-item
                                    @click.native="openManageSysOperatorDlg(scope.row)">重置账户密码</el-dropdown-item>
                                <hr />
                                <el-dropdown-item @click.native="deleteDataRecord(scope.row)">删除公司资料</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </template>
        </app-table>

        <!--新增和修改对话框-->
        <el-dialog width="55%" v-drag-dialog :title="dialogData.editData.title" center
            :visible.sync="dialogData.editData.show" :modal-append-to-body="false" custom-class="editDataDialog"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <company-dlg :isUpdate="dialogData.editData.isUpdate" :id="dialogData.editData.id" @get="hGetData"
                @close="hCloseDlg" v-if="dialogData.editData.show" />
        </el-dialog>

        <!--新增和修改系统管理员对话框-->
        <el-dialog width="55%" v-drag-dialog :title="operatorDlg.title" center :visible.sync="operatorDlg.show"
            :modal-append-to-body="false" custom-class="editDataDialog" :close-on-click-modal="false"
            :close-on-press-escape="false">
            <sys-operator-dlg v-if="operatorDlg.show" :id="operatorDlg.company_id"
                @closeOperatorDlg="hCloseSysOperatorDlg" />
        </el-dialog>

    </div>
</template>


<script>
import { getCompanyPageList, deleteCompany } from "@/api/company"
import CompanyDlg from "./component/companydlg.vue"
import SysOperatorDlg from "./component/sysoperatordlg.vue"
export default {
    name: 'company',
    components: {
        CompanyDlg,
        SysOperatorDlg
    },
    data: function () {
        return {
            tableData: {
                listData: {
                    loading: false,
                    disabled: false,
                    totalCount: 0,
                    pageNum: 1,
                    pageSize: this.$store.getters.pageSize,
                    search: {
                        name: ''
                    },
                    columns: [
                        { key: 'name', name: '公司名称', width: 200 },
                        { key: 'contact_person', name: '联系人', width: 150 },
                        { key: 'contact_tel', name: '联系电话', width: 150 },
                        { key: 'address', name: '公司地址' },
                    ],
                    formatter: {
                    },
                    items: [],
                }
            },
            dialogData: {
                editData: {
                    show: false,
                    title: '新增公司资料',
                    isUpdate: false,
                    id: 0,
                },
            },
            operatorDlg: {
                show: false,
                title: '新增系统管理员资料',
                isUpdate: false,
                company_id: 0
            }
        }
    },
    watch: {
        updateTime(val, old) { //监听到改变后，重新初始化组件
            this.init()
        }
    },
    computed: {
        controlSize() {
            return this.$store.getters.controlSize
        }
    },
    beforeMount() {
    },
    mounted() {
        this.$nextTick(function () {
            this.init()
        })
    },
    methods: {
        init() {
            this.hGetListPage()
        },
        hCloseDlg() {//关闭对话框
            this.dialogData.editData.show = false
        },
        hGetData() {
            this.hGetListPage()
        },
        //查询公司资料
        hGetListPage() {
            this.getCompanyPageList()
        },
        //获得公司资料
        getCompanyPageList() {
            let pageNum = this.tableData.listData.pageNum
            let pageSize = this.tableData.listData.pageSize
            let query = []

            let name = this.tableData.listData.search.name
            if (name.length > 0) {
                name = '%' + name + '%'
                let item = { key: 'name', data: name, opt: 'like' }
                query.push(item)
            }

            //查询数据
            let param = { page_num: pageNum, page_size: pageSize, query: query, order_by: "id desc" }
            this.tableData.listData.loading = true
            getCompanyPageList(param).then((res) => {
                this.tableData.listData.totalCount = res.data.total_count
                this.tableData.listData.items = res.data.items
                this.tableData.listData.loading = false
            }).catch(() => {
                this.tableData.listData.loading = false
                this.$message({ message: err, type: 'error' })
            })
        },
        handlePageSizeChange(val) { // 每页记录条数改变的事件
            //保存修改的PageSize
            this.$store.commit('app/setPageSize', val)

            //如果（每页记录条数改变后重新计算的总页数>=当前页），表示每页记录条数改变后，当前页不会改变，此处需要刷新table数据
            //如果（当前页*每页记录条数<=总记录条数），表示每页记录条数改变后，当前页不会改变，此处需要刷新table数据
            //如果（当前页*每页记录条数>总记录条数），表示每页记录条数改变后，当前页会重新计算并改变，handlePageNumChange会被调用，此处不需要刷新table数据
            var totalCount = this.tableData.listData.totalCount
            var pageNum = this.tableData.listData.pageNum
            var pageSize = this.tableData.listData.pageSize
            var pageCount = totalCount % pageSize === 0 ? totalCount / pageSize : Math.floor((totalCount / pageSize) + 1)
            if ((pageCount >= pageNum) || (pageNum * pageSize <= totalCount)) {
                this.hGetListPage()
            }
        },
        handlePageNumChange(val) { // 当前页改变的事件，需要在此事件中刷新table数据
            this.tableData.listData.pageNum = val
            this.hGetListPage()
        },
        //打开公司注册对话框
        openRegisterDlg() {
            this.dialogData.editData.isUpdate = false
            this.dialogData.editData.title = "公司注册"
            this.dialogData.editData.show = true
        },
        //打开修改公司资料对话框
        openUpdateDlg(item) {
            this.dialogData.editData.id = parseInt(item.id)
            this.dialogData.editData.isUpdate = true
            this.dialogData.editData.title = "修改公司资料"
            this.dialogData.editData.show = true
        },
        //删除公司资料
        async deleteDataRecord(item) {
            let paramData = {}

            let res = await this.$confirm("该操作将删除与公司相关的所有资料，确定要删除吗", "重要提示", { type: "warning" }).catch(err => err)
            if (res != 'confirm') {
                return
            }

            res = await this.$confirm("该操作将删除与公司相关的所有资料，确定要删除吗", "再次提醒", { type: "warning" }).catch(err => err)
            if (res != 'confirm') {
                return
            }

            paramData["id"] = parseInt(item.id)
            deleteCompany(paramData).then(() => {
                this.hGetListPage()
                this.$message.success('删除成功', '提示')
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        },
        hCloseSysOperatorDlg() {
            this.operatorDlg.show = false
        },
        //打开管理系统操作员的窗口
        openManageSysOperatorDlg(item) {
            this.operatorDlg.company_id = parseInt(item.id)
            this.operatorDlg.title = '系统管理员资料'
            this.operatorDlg.show = true
        },
    }
}

</script>
