<template>
    <div
        id="invoice_failed"
        v-loading="loading"
        element-loading-text="拼命加载中......请稍等"
    >
        <el-container>
            <el-form ref="form" style="width: 100%">
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-form-item>
                            <el-select
                                v-model="search.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="5">
                        <el-form-item>
                            <el-date-picker
                                v-model="search.dateRange"
                                type="daterange"
                                unlink-panels
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width: 100%"
                                :clearable="false"
                            >
                                <template slot="prepend">开票日期</template>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <div>
                            <el-button
                                @click="handleSearch"
                                type="primary"
                                icon="el-icon-search"
                                >搜索</el-button
                            >
                            <el-button @click="handleResetSearch"
                                >重置</el-button
                            >
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-form-item>
                            <el-input
                                v-model.trim="search.belongEntTaxId"
                                clearable
                                placeholder="请输入..."
                            >
                                <template slot="prepend">销方税号</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input
                                v-model.trim="search.belongEntName"
                                clearable
                                placeholder="请输入..."
                            >
                                <template slot="prepend">销方名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-form-item>
                            <el-input
                                v-model.trim="search.customerName"
                                clearable
                                placeholder="请输入..."
                            >
                                <template slot="prepend">购方名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input
                                v-model.trim="search.invoicePerson"
                                clearable
                                placeholder="请输入..."
                            >
                                <template slot="prepend">开票人</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-container>
        <br />
        <el-container>
            <el-table
                :data="search.resultList"
                border
                stripe
                :height="tableHeight"
                style="width: 100%"
            >
                <el-table-column
                    type="index"
                    :index="pageIndex"
                    align="center"
                    label="序号"
                    width="50"
                ></el-table-column>
                <el-table-column
                    prop="invoiceReqFlowNo"
                    label="请求流水号"
                    width="120"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="errorMsg"
                    label="失败信息"
                    width="280"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="invoiceType"
                    label="发票类型"
                    width="100"
                    align="center"
                    :formatter="fmtInvoiceType"
                ></el-table-column>
                <el-table-column
                    prop="invoiceCategory"
                    label="发票种类"
                    width="160"
                    align="center"
                    :formatter="fmtInvoiceCategory"
                ></el-table-column>
                <el-table-column
                    prop="invoiceCode"
                    label="发票代码"
                    width="120"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="invoiceNumber"
                    label="发票号码"
                    width="120"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="invoiceStatusMemo"
                    label="发票状态"
                    width="120"
                ></el-table-column>
                <el-table-column
                    prop="createTime"
                    label="开票日期"
                    width="160"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="belongEntName"
                    label="销方名称"
                    width="240"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="belongEntTaxId"
                    label="销方纳税人识别号"
                    width="180"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="customerName"
                    label="购方名称"
                    width="240"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="customerEntTaxId"
                    label="购方纳税人识别号"
                    width="180"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="totalAmount"
                    label="合计金额"
                    width="100"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="totalTaxes"
                    label="合计税额"
                    width="100"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="totalAmountTaxes"
                    label="价税合计"
                    width="100"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="invoicePerson"
                    label="开票人"
                    width="100"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="interactTypeDetail"
                    label="电子邮件"
                    width="180"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="操作"
                    width="160"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            @click="handleInvoiceReqParams(scope.row)"
                            type="primary"
                            >开票请求参数</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-container>

        <br />
        <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>

        <el-dialog
            title="开票请求参数信息"
            :visible.sync="cmdParamInfo.dialogVisible"
            width="40%"
            center
            append-to-body
        >
            <el-container>
                <div
                    v-if="
                        cmdParamInfo.displayText == null ||
                        cmdParamInfo.displayText == ''
                    "
                    style="width: 100%; text-align: center"
                >
                    暂无数据
                </div>
                <div v-else v-text="cmdParamInfo.displayText"></div>
            </el-container>
        </el-dialog>
    </div>
</template>

<script>
import {
    invoiceFindFailed,
    invoiceGetFailedMsg,
    invoiceGetReqParams,
} from "@/api/invoice";

import {
    hongchongInvoiceRefresh,
    hongchongInvoiceRetry,
} from "@/api/hongchong_info";

import DateHelper from "@/utils/date";

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

const invoiceTypeOptions = [
    {
        value: 0,
        label: "蓝字发票",
    },
    {
        value: 1,
        label: "红字发票",
    },
    {
        value: 2,
        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;
}

export default {
    name: "InvoiceFailed",
    data: function () {
        return {
            loading: false,
            invoiceCategoryOptions: invoiceCategoryOptions,
            invoiceTypeOptions: invoiceTypeOptions,
            search: {
                invoicePerson: "",
                invoiceCategory: "",
                belongEntTaxId: "",
                belongEntName: "",
                customerEntTaxId: "",
                customerName: "",
                dateRange: [
                    DateHelper.LocalCurrentMonthStart(),
                    DateHelper.LocalCurrentMonthEnd(),
                ],
                resultList: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30, 50, 100],
                    pageSize: 10,
                    total: 0,
                },
            },
            cmdParamInfo: {
                dialogVisible: false,
                displayText: "",
            },
            tableHeight: "",
        };
    },
    created: function () {
        this.tableHeight = window.innerHeight - 250;
        this.callInvoiceFindFailed(
            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;
        },
        fmtInvoiceType(row, column, cellValue) {
            let result = cellValue;
            for (const item of invoiceTypeOptions) {
                if (item.value === cellValue) {
                    result = item.label;
                    break;
                }
            }
            return result;
        },
        fmtInvoiceCategory(row, column, cellValue) {
            return GetInvoiceCategoryLabel(cellValue);
        },
        handleSearch() {
            this.callInvoiceFindFailed(
                1,
                this.search.resultPagination.pageSize
            );
        },
        handleResetSearch() {
            this.search.invoicePerson = "";
            this.search.invoiceCategory = "";
            this.search.belongEntTaxId = "";
            this.search.belongEntName = "";
            this.search.customerEntTaxId = "";
            this.search.customerName = "";
            this.search.dateRange = [
                DateHelper.LocalCurrentMonthStart(),
                DateHelper.LocalCurrentMonthEnd(),
            ];
        },
        handleSearchResultSizeChange(val) {
            this.callInvoiceFindFailed(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callInvoiceFindFailed(
                val,
                this.search.resultPagination.pageSize
            );
        },
        /**
         * 查询发票
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callInvoiceFindFailed(pageNum, pageSize) {
            let beginTime = "";
            let endTime = "";
            if (this.search.dateRange instanceof Array) {
                beginTime = this.search.dateRange[0];
                endTime = this.search.dateRange[1];
                beginTime = this.dateFormat(
                    new Date(beginTime),
                    "yyyy-MM-dd HH:mm:ss"
                );
                let endTimeObj = new Date(endTime);
                endTime = this.dateFormat(
                    new Date(
                        endTimeObj.getFullYear(),
                        endTimeObj.getMonth(),
                        endTimeObj.getDate(),
                        "23",
                        "59",
                        "59"
                    ),
                    "yyyy-MM-dd HH:mm:ss"
                );
            } else {
                this.$message.error(
                    "起始日期与结束日期为必输项，请确定后重试！"
                );
                return false;
            }

            let _this = this;
            _this.loading = true;
            invoiceFindFailed({
                invoicePerson: this.search.invoicePerson,
                invoiceCategory: this.search.invoiceCategory,
                belongEntTaxId: this.search.belongEntTaxId,
                belongEntName: this.search.belongEntName,
                customerName: this.search.customerName,
                invoiceDateBegin: beginTime,
                invoiceDateEnd: endTime,
                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;
                });
        },
        handleInvoiceReqParams(row) {
            let _this = this;
            _this.cmdParamInfo.displayText = "";
            _this.loading = true;
            invoiceGetReqParams(row.cmdId)
                .then((val) => {
                    _this.loading = false;
                    _this.cmdParamInfo.dialogVisible = true;
                    _this.cmdParamInfo.displayText = val.data.cmdParam;
                })
                .catch((err) => {
                    _this.loading = false;
                    _this.$message.error(err);
                });
        },
        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>
</style>
