<template>
    <div
        id="enterprise_device_info"
        v-loading="loading"
        element-loading-text="拼命加载中......请稍等"
    >
        <el-row type="flex" :gutter="20">
            <el-col :span="8">
                <el-input
                    v-model="search.entName"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入企业名称"
                ></el-input>
            </el-col>
            <el-col :span="16">
                <el-button
                    @click="handleSearch"
                    type="primary"
                    icon="el-icon-search"
                    >搜索</el-button
                >
            </el-col>
        </el-row>
        <br />
        <div style="margin-bottom: 10px">
            <el-button
                type="primary"
                icon="el-icon-document"
                @click="handleExportExcel"
            >
                导出EXCEL文件（表格当前页面）</el-button
            >
        </div>
        <div style="background-color: #909399; padding: 10px 10px">
            <span style="color: white">使用提示：非实时数据，每天凌晨更新</span>
        </div>
        <br />
        <div style="flex: 1">
            <el-container>
                <el-table
                    :data="search.resultList"
                    border
                    style="width: 100%; flex: 1"
                    :height="tableHeight"
                    ref="table"
                    id="searchResultTable"
                >
                    <el-table-column
                        type="index"
                        :index="pageIndex"
                        align="center"
                        label="序号"
                        width="50"
                    ></el-table-column>
                    <el-table-column
                        prop="entName"
                        label="企业名称"
                        width="180"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="entTaxId"
                        label="纳税人识别号"
                        width="180"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="deviceType"
                        label="税盘类型"
                        width="100"
                        :formatter="getDeviceType"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="taxDiscId"
                        label="税盘号"
                        width="120"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <!-- <el-table-column
                        label="开票员"
                        width="160"
                        show-overflow-tooltip
                    ></el-table-column> -->
                    <el-table-column
                        prop="invoiceCategory"
                        label="发票种类"
                        width="140"
                        :formatter="getInvoiceCategory"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="chaobaoStatus"
                        label="抄报状态"
                        width="120"
                        :formatter="fmtChaobaoStatus"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="lastUpdateTime"
                        label="更新时间"
                        width="160"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="invoiceClosingTime"
                        label="开票截止时间"
                        width="160"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <!-- <el-table-column
                        prop="surplusTotalquantity"
                        label="发票余量"
                        width="100"
                        show-overflow-tooltip
                    ></el-table-column> -->
                    <el-table-column
                        prop="latestTaxDate"
                        label="最近已抄报周期结束日期"
                        width="180"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="startDateSubmit"
                        label="待抄报周期起始日期"
                        width="160"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="endDateSubmit"
                        label="待抄报周期结束日期"
                        width="160"
                        show-overflow-tooltip
                        sortable
                    ></el-table-column>
                </el-table>
            </el-container>
        </div>
        <div style="height: 50px">
            <el-row type="flex" :gutter="20">
                <el-col :span="12"></el-col>
                <el-col :span="12">
                    <div style="text-align: right">
                        <el-pagination
                            layout="total, sizes, prev, pager, next"
                            :current-page="search.resultPagination.currentPage"
                            :page-sizes="search.resultPagination.pageSizes"
                            :page-size="search.resultPagination.pageSize"
                            :total="search.resultPagination.total"
                            @size-change="handleSearchResultSizeChange"
                            @current-change="handleSearchResultCurrentChange"
                        ></el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { djzEntHardwareStatus } from "@/api/rpt";
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
    name: "enterprise_device_info",
    data() {
        return {
            loading: false,
            search: {
                entName: "", // 客户名称
                resultList: [],
                resultMultipleSelection: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30, 50, 100, 500],
                    pageSize: 10,
                    total: 0,
                },
            },
            tableHeight: "",
        };
    },
    created() {
        this.tableHeight = window.innerHeight - 250;
        this.callDJZEntHardwareStatus(
            this.search.resultPagination.currentPage,
            this.search.resultPagination.pageSize
        );
    },
    mounted() {
        this.tableHeight = window.innerHeight - 250;
        window.onresize = () => {
            return (() => {
                this.tableHeight = window.innerHeight - 250;
            })();
        };
    },
    methods: {
        pageIndex(index) {
            let currentPage = this.search.resultPagination.currentPage; //当前页码，具体看组件取值
            let pageSize = this.search.resultPagination.pageSize; //每页条数，具体是组件取值
            return index + 1 + (currentPage - 1) * pageSize;
        },
        fmtChaobaoStatus(row, column, cellValue) {
            if (cellValue === true) {
                return "抄报成功";
            }
            if (cellValue === false) {
                return "未抄报";
            } else {
                return cellValue;
            }
        },
        handleSearch() {
            this.callDJZEntHardwareStatus(
                1,
                this.search.resultPagination.pageSize
            );
        },
        handleSearchResultSizeChange(val) {
            this.callDJZEntHardwareStatus(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callDJZEntHardwareStatus(
                val,
                this.search.resultPagination.pageSize
            );
        },
        callDJZEntHardwareStatus(pageNum = 1, pageSize = 10) {
            this.loading = true;
            let _this = this;
            djzEntHardwareStatus({
                entName: this.search.entName,
                pageNum: pageNum,
                pageSize: pageSize,
            })
                .then((val) => {
                    _this.search.resultPagination.total = val.data.total;
                    _this.search.resultPagination.pageSize = val.data.size;
                    _this.search.resultPagination.currentPage =
                        val.data.current;
                    _this.search.resultList = val.data.records;
                    _this.loading = false;
                })
                .catch((err) => {
                    _this.$message.error(err);
                    _this.loading = false;
                });
        },
        // 获取企业列表信息
        // async getEntList() {
        //     if (this.account && this.token) {
        //         const url = "/sys/rpt/findPage";
        //         let response = await AxiosRequestData(
        //             url,
        //             this.token,
        //             {
        //                 mobile: this.account,
        //                 entName: this.search.entName,
        //                 pageNum: this.search.resultPagination.currentPage,
        //                 pageSize: this.search.resultPagination.pageSize,
        //             },
        //             false,
        //             2
        //         );
        //         if (response) {
        //             if (response.code === 0) {
        //                 // this.totalNumber = response.data.total;
        //                 // this.totalPage = response.data.pages;
        //                 // this.entList = response.data.records;

        //                 this.search.resultPagination.total =
        //                     response.data.total;
        //                 this.search.resultPagination.pageSize =
        //                     response.data.size;
        //                 this.search.resultPagination.currentPage =
        //                     response.data.current;
        //                 this.search.resultList = response.data.records;
        //             }
        //         }
        //     }
        // },
        // 获取税盘类型
        getDeviceType(row, column, cellValue) {
            if (cellValue === 1) {
                return "证书";
            }
            if (cellValue === 2) {
                return "税控盘";
            }
            if (cellValue === 3) {
                return "金税盘";
            }
            if (cellValue === 4) {
                return "税控ukey";
            }
            if (cellValue === 5) {
                return "税控服务器";
            } else {
                return "";
            }
        },
        // 获取发票种类
        getInvoiceCategory(row, column, cellValue) {
            if (cellValue === 1) {
                return "增值税普通电子发票";
            }
            if (cellValue === 2) {
                return "增值税电子专用发票";
            }
            if (cellValue === 3) {
                return "增值税普通纸质发票";
            }
            if (cellValue === 4) {
                return "增值税专用纸质发票";
            } else {
                return "";
            }
        },
        // 导出excel
        handleExportExcel() {
            let tables = [
                { id: "#searchResultTable", sheetName: "发票统计" },
                { id: "#exportTable2", sheetName: "税率统计" },
            ];
            const wb = XLSX.utils.book_new();

            // 转换成excel时，使用原始格式
            let xlsxParam = { raw: true };
            /* generate workbook object from table */
            let tempwb = XLSX.utils.table_to_book(
                document.querySelector("#searchResultTable"),
                xlsxParam
            );

            XLSX.utils.book_append_sheet(
                wb,
                tempwb.Sheets[tempwb.SheetNames[0]],
                "税盘抄报税"
            );

            // for (const item of tables) {
            //     let tableId = item.id;
            //     let sheetName = item.sheetName;

            //     // 转换成excel时，使用原始格式
            //     let xlsxParam = { raw: true };
            //     /* generate workbook object from table */
            //     let tempwb = XLSX.utils.table_to_book(
            //         document.querySelector(tableId),
            //         xlsxParam
            //     );

            //     XLSX.utils.book_append_sheet(
            //         wb,
            //         tempwb.Sheets[tempwb.SheetNames[0]],
            //         sheetName
            //     );
            // }

            /* get binary string as output */
            let wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], { type: "application/octet-stream" }),
                    "税盘抄报税管理-.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") {
                    console.log(e, wbout);
                }
            }
            return wbout;
        },
    },
};
</script>

<style scoped>
</style>
