<template>
    <div id="invoice_query2" v-loading="loading" element-loading-text="拼命加载中......请稍等">
        <el-card>
            <el-form label-position="top" style="width: 100%;">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="发票种类：">
                            <el-select
                                v-model="invoiceExport.invoiceCategory"
                                placeholder="请选择"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in invoiceCategoryOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开票月份：">
                            <el-date-picker
                                v-model="invoiceExport.dateMonth"
                                type="month"
                                :clearable="false"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="明细类型：">
                            <el-select
                                v-model="invoiceExport.invoiceSelectOption"
                                placeholder="请选择"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in invoiceSelectOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <span slot="label" style="color: #909399;">
                                <span>&nbsp;&nbsp;</span>
                            </span>
                            <el-button
                                @click="handleStartInvoiceExport"
                                type="primary"
                                icon="el-icon-arrow-right"
                            >开始查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <br />
        <el-card>
            <div
                v-if="invoiceExport.resultList.length==0"
                style="height:245px;text-align:center;margin-top:245px"
            >
                <span>暂无数据</span>
            </div>
            <div v-else style="width:272mm;margin: 0 auto;">
                <div style="text-align: right;">
                    <el-button
                        v-print="printFPQSHZD.printObj"
                        type="primary"
                        icon="el-icon-printer"
                    >立即打印</el-button>
                </div>
                <div
                    :id="printFPQSHZD.printObj.id"
                    style="margin:0px;height:auto;font-size:16px;padding-top:1px"
                >
                    <h1 style="text-align: center;margin-bottom:30px">{{printFPQSHZD.title}}</h1>
                    <div>
                        <span>制表日期：{{printFPQSHZD.createDate}}</span>
                        <br />
                        <span>{{printFPQSHZD.qdName}}</span>
                        <br />
                        <span>纳税人登记号：{{printFPQSHZD.entTaxId}}</span>
                        <br />
                        <span>企业名称：{{printFPQSHZD.entName}}</span>
                        <br />
                        <span>地址电话：{{printFPQSHZD.entDZDH}}</span>
                        <br />
                        <span>金额单位：元</span>
                        <br />
                    </div>
                    <div
                        style="text-align: center;padding:0px;margin:0px;border:1px solid #868686;margin-top:10px"
                    >
                        <el-table
                            :data="invoiceExport.resultList"
                            border
                            style="width: 100%; border:1px solid #868686;"
                        >
                            <el-table-column
                                type="index"
                                :index="pageIndex"
                                align="center"
                                label="序号"
                                width="50"
                                :key="0"
                            ></el-table-column>
                            <el-table-column
                                prop="invoiceCategory"
                                label="发票种类"
                                width="160"
                                align="center"
                                :formatter="fmtInvoiceCategory"
                            ></el-table-column>
                            <el-table-column
                                prop="invoiceCode"
                                label="发票代码"
                                align="center"
                                :key="1"
                            ></el-table-column>
                            <el-table-column
                                prop="invoiceNumber"
                                label="发票号码"
                                align="center"
                                :key="2"
                            ></el-table-column>
                            <el-table-column
                                prop="invoiceDate"
                                label="开票日期"
                                align="center"
                                :key="3"
                            ></el-table-column>
                            <el-table-column
                                prop="customerEntTaxId"
                                label="购方税号"
                                align="center"
                                width="180"
                                :key="4"
                            ></el-table-column>
                            <el-table-column
                                prop="totalAmount"
                                label="合计金额"
                                align="right"
                                header-align="center"
                                :key="5"
                                :formatter="fmtToDecimal2"
                            ></el-table-column>
                            <el-table-column
                                prop="totalTaxes"
                                label="合计税额"
                                align="right"
                                header-align="center"
                                :key="6"
                                :formatter="fmtToDecimal2"
                            ></el-table-column>
                        </el-table>
                    </div>
                    <div style="width:100%;margin-top:10px">
                        <div class="Row">
                            <div class="Column">填表人：</div>
                            <div class="Column">抽样员：</div>
                            <div class="Column">录入员：</div>
                            <div class="Column">复核员：</div>
                            <div class="Column">审计员：</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height:50px"></div>
        </el-card>
    </div>
</template>

<script>
import { invoiceQuery } from "@/api/invoice";

import DateHelper from "@/utils/date";
import cache from "@/utils/cache";

// 发票种类列表
const invoiceCategoryOptions = [
    {
        value: 1,
        label: "增值税普通电子发票",
    },
    {
        value: 2,
        label: "增值税电子专用发票",
    },
    {
        value: 3,
        label: "增值税普通纸质发票",
    },
    {
        value: 4,
        label: "增值税专用纸质发票",
    },
];

// 发票查询选项列表
const invoiceSelectOptions = [
    {
        value: 1,
        label: "正数发票清单",
    },
    {
        value: 2,
        label: "负数发票清单",
    },
    {
        value: 3,
        label: "正数发票废票清单",
    },
    {
        value: 4,
        label: "负数发票废票清单",
    },
];

/**
 * 获取发票种类文本；
 * @param {Number} intKey 发票类别的数字标识
 */
function GetInvoiceCategoryLabel(intKey) {
    let result = intKey;
    for (const item of invoiceCategoryOptions) {
        if (item.value === intKey) {
            result = item.label;
            break;
        }
    }
    return result;
}

/**
 * 获取发票查询选项列表文本；
 * @param {Number} intKey 查询选项的数字标识
 */
function GetInvoiceSelectOptionLabel(intKey) {
    let result = intKey;
    for (const item of invoiceSelectOptions) {
        if (item.value === intKey) {
            result = item.label;
            break;
        }
    }
    return result;
}

export default {
    name: 'invoice_query2',
    data() {
        return {
            loading: false,
            invoiceCategoryOptions: invoiceCategoryOptions,
            invoiceSelectOptions: invoiceSelectOptions,
            invoiceExport: {
                invoiceCategory: "",
                dateMonth: DateHelper.LocalCurrentMonthStart(),
                invoiceSelectOption: "",
                resultList: [],
            },
            printFPQSHZD: {
                entName: "",
                entTaxId: "",
                entDZDH: "",
                createDate: "",
                title: "", // 标题
                qdName: "", // 清单名称
                printObj: {
                    id: "print-region", // 这里是要打印元素的ID
                },
            },
        };
    },
    created() {
        // 设置打印信息
        let company = JSON.parse(cache.getSession("company"));
        this.printFPQSHZD.entTaxId = company.entTaxId;
        this.printFPQSHZD.entName = company.entName;
        this.printFPQSHZD.entDZDH = company.entAddress + " " + company.entPhone;
        this.printFPQSHZD.createDate = this.dateFormat(
            new Date(),
            "yyyy年MM月dd日"
        );
    },
    methods: {
        pageIndex(index) {
            return index + 1;
        },
        fmtInvoiceCategory(row, column, cellValue) {
            return GetInvoiceCategoryLabel(cellValue);
        },
        fmtToDecimal2(row, column, cellValue) {
            var f = parseFloat(cellValue);
            if (isNaN(f)) {
                return false;
            }
            var f = Math.round(cellValue * 100) / 100;
            var s = f.toString();
            var rs = s.indexOf(".");
            if (rs < 0) {
                rs = s.length;
                s += ".";
            }
            while (s.length <= rs + 2) {
                s += "0";
            }
            return s;
        },
        // 开始发票导出
        handleStartInvoiceExport() {
            // 验证发票种类输入
            let invoiceCategory = this.invoiceExport.invoiceCategory;
            if (
                invoiceCategory === null ||
                invoiceCategory === "" ||
                invoiceCategory === undefined
            ) {
                this.$message.error("请选择导出发票明细时使用发票种类！");
                return false;
            }

            let dateMonth = this.invoiceExport.dateMonth;
            if (
                dateMonth === null ||
                dateMonth === "" ||
                dateMonth === undefined
            ) {
                this.$message.error("请选择导出发票开票月份！");
                return false;
            }

            let dateMonthObj = new Date(dateMonth);
            let beginTime = this.dateFormat(
                dateMonthObj,
                "yyyy-MM-dd HH:mm:ss"
            );
            let endTimeObj = new Date(
                dateMonthObj.getFullYear(),
                dateMonthObj.getMonth() + 1,
                0
            );
            let endTime = this.dateFormat(
                new Date(
                    endTimeObj.getFullYear(),
                    endTimeObj.getMonth(),
                    endTimeObj.getDate(),
                    "23",
                    "59",
                    "59"
                ),
                "yyyy-MM-dd HH:mm:ss"
            );

            // 验证发票查询选项
            let invoiceSelectOption = this.invoiceExport.invoiceSelectOption;
            if (
                invoiceSelectOption === null ||
                invoiceSelectOption === "" ||
                invoiceSelectOption === undefined
            ) {
                this.$message.error("请选择导出发票查询选项！");
                return false;
            }

            let invoiceState = "";
            if (invoiceSelectOption == 1) {
                // 正数发票清单 = 正数开具成功
                invoiceState = 3;
            } else if (invoiceSelectOption == 2) {
                // 负数发票清单 = 负数开具成功
                invoiceState = 4;
            } else if (invoiceSelectOption == 3) {
                // 正数发票废票清单 = 正数已作废
                invoiceState = 5;
            } else if (invoiceSelectOption == 4) {
                // 负数发票废票清单 = 负数已作废
                invoiceState = 6;
            }

            this.loading = true;
            let _this = this;
            invoiceQuery({
                invoiceCategory: invoiceCategory,
                invoiceState: invoiceState,
                invoiceDateBegin: beginTime,
                invoiceDateEnd: endTime,
                pageNum: 1,
                pageSize: 20000,
            })
                .then((val) => {
                    // 设置打印信息
                    let titleTemp = GetInvoiceCategoryLabel(
                        this.invoiceExport.invoiceCategory
                    );
                    let qdNameTemp = GetInvoiceSelectOptionLabel(
                        this.invoiceExport.invoiceSelectOption
                    );
                    let qdDate = this.dateFormat(
                        new Date(beginTime),
                        "yyyy年MM月"
                    );
                    _this.printFPQSHZD.title = `${titleTemp}明细表`;
                    _this.printFPQSHZD.qdName = `${qdNameTemp}（${qdDate}）`;

                    _this.invoiceExport.resultList = val.data.records;
                    _this.loading = false;
                })
                .catch((err) => {
                    _this.$message.error(err);
                    _this.loading = false;
                });
        },
        dateFormat(date, fmt) {
            // 小时只支持24小时制
            var o = {
                "M+": date.getMonth() + 1, // 月份
                "d+": date.getDate(), // 日
                "H+": date.getHours(), // 24小时,
                "m+": date.getMinutes(), // 分
                "s+": date.getSeconds(), // 秒
                "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
                S: date.getMilliseconds(), // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(
                    RegExp.$1,
                    (date.getFullYear() + "").substr(4 - RegExp.$1.length)
                );
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length == 1
                            ? o[k]
                            : ("00" + o[k]).substr(("" + o[k]).length)
                    );
            return fmt;
        },
    },
};
</script>

<style scoped>
.Row {
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    /* border-spacing: 10px; Optional */
}
.Column {
    display: table-cell;
    /* background-color: red; Optional */
}
</style>
