<template>
    <div id="ent_invoice_stock" v-loading="loading">
        <el-container>
            <el-form label-position="top" ref="form" style="width: 100%">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <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="6">
                        <el-form-item>
                            <el-button
                                @click="handleSearch"
                                type="primary"
                                icon="el-icon-search"
                                >立即查询</el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-container>
        <div>
            <el-card v-if="!search.existResult">
                <div style="text-align: center; margin: 100px 0">
                    {{
                        search.used
                            ? search.resultTip
                            : "请选择发票种类后进行发票库存信息查询"
                    }}
                </div>
            </el-card>
            <el-card v-else>
                <div slot="header">
                    <strong>{{
                        fmtInvoiceCategory(search.resultInvoiceCategory)
                    }}</strong>
                    {{ "剩余发票数：" + search.resultSurplusTotalQuantity }}
                </div>
                <div>
                    <el-table
                        :data="search.resultList"
                        border
                        style="width: 100%"
                    >
                        <el-table-column
                            prop="invoiceCode"
                            label="发票代码"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="invoiceStartNo"
                            label="开始号码"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="invoiceEndNo"
                            label="截止号码"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="invoicePurchaseQuantity"
                            label="申领份数"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="invoiceSurplusQuantity"
                            label="剩余份数"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="invoicePurchaseDate"
                            label="领购日期"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="invoicePurchaseOperator"
                            label="领购人员"
                            align="center"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { EntPurchaseQuery } from "@/api/invoice_ext";

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

export default {
    name: "EntInvoiceStock",
    props: {
        // 税号
        entTaxId: {
            type: String,
            default: null,
        },
        // 设备类型  1：软证书  2：税控盘  3：金税盘  4：税控ukey  5：税控服务器
        deviceType: {
            type: Number,
            default: null,
        },
        // 设备编号
        taxDiscId: {
            type: String,
            default: null,
        },
    },
    watch: {
        entTaxId(val) {
            this.entTaxId = val;
        },
        deviceType(val) {
            this.deviceType = val;
        },
        taxDiscId(val) {
            this.taxDiscId = val;
        },
    },
    data() {
        return {
            loading: false,
            invoiceCategoryOptions: invoiceCategoryOptions,
            search: {
                used: false, // 是否查询过
                existResult: false, // 是否有查询结果
                invoiceCategory: null,
                resultTip: "",
                resultISVPlatform: "", // 平台信息
                resultInvoiceCategory: "", // 查询结果票种
                resultSurplusTotalQuantity: "", // 剩余发票数量
                resultList: [], // 剩余发票信息列表
            },
        };
    },
    computed: {
        hideCollapse: function () {
            return (
                this.search.resultList == null ||
                this.search.resultList.length <= 0
            );
        },
    },
    methods: {
        fmtInvoiceCategory(index) {
            let result = index;
            if (index) {
                for (const item of invoiceCategoryOptions) {
                    if (item.value == index) {
                        result = item.label;
                        break;
                    }
                }
            }
            return result;
        },
        handleSearch() {
            this.callEntPurchaseQuery();
        },
        callEntPurchaseQuery() {
            let invoiceCategoryTemp = this.search.invoiceCategory;
            if (invoiceCategoryTemp == null || invoiceCategoryTemp == "") {
                this.$message.error("发票种类为必填项，请检查后重试！");
                return false;
            }

            let _this = this;
            _this.search.used = true;
            _this.search.existResult = false;
            _this.loading = true;
            EntPurchaseQuery(
                _this.entTaxId,
                _this.deviceType,
                _this.taxDiscId,
                invoiceCategoryTemp
            )
                .then((val) => {
                    if (
                        val.data &&
                        val.data.purchaseDetailVOs &&
                        val.data.purchaseDetailVOs.length != 0
                    ) {
                        _this.loading = false;
                        _this.search.existResult = true;
                        _this.search.resultISVPlatform = val.data.isvPlatform;
                        _this.search.resultInvoiceCategory =
                            val.data.purchaseDetailVOs[0].invoiceCategory;
                        _this.search.resultSurplusTotalQuantity =
                            val.data.purchaseDetailVOs[0].surplusTotalQuantity;
                        _this.search.resultList =
                            val.data.purchaseDetailVOs[0].purchaseRecords;
                    } else {
                        _this.search.resultTip = `没有“${_this.fmtInvoiceCategory(
                            invoiceCategoryTemp
                        )}”种类发票，无法获取发票库存信息`;
                        _this.search.resultISVPlatform = "";
                        _this.search.resultInvoiceCategory = "";
                        _this.search.resultSurplusTotalQuantity = "";
                        _this.search.resultList = null;
                        _this.loading = false;
                    }
                })
                .catch((err) => {
                    _this.search.resultTip = `请联系服务商，失败原因如下：${err}`;
                    _this.loading = false;
                    // _this.$message.error(err);
                });
        },
    },
};
</script>
