<template>
    <div id="batch_invoice" class="body" v-loading="load" element-loading-text="提交开票中，请稍等">
        <div class="search">
            <div class="search_data">
                <div style="margin-right: 5px">
                    <el-input
                            v-model="orderNumber"
                            clearable
                            prefix-icon="el-icon-search"
                            placeholder="请输入订单号"
                            class="invoice_input">
                    </el-input>
                </div>
                <div style="margin-right: 5px">
                    <el-input
                            v-model="customerName"
                            clearable
                            prefix-icon="el-icon-search"
                            placeholder="请输入客户名称"
                            class="invoice_input">
                    </el-input>
                </div>
                <div style="margin-right: 5px">
                    <el-select v-model="invoiceStatus" placeholder="请选择状态">
                        <el-option
                                v-for="item in invoiceStatusData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-button v-on:click="searchData" type="primary">搜索</el-button>
                </div>
            </div>
            <div class="flex: 1">
                <el-button class="invoice_button" type="primary" v-on:click="refreshData">刷新</el-button>
                <el-button class="invoice_button" type="primary" v-on:click="submitInvoice">提交开票</el-button>
            </div>
        </div>
        <div>
            <el-table :data="invoiceList" border style="width: 100%" v-on:selection-change="selectData"
                      :reserve-selection="true">
                <el-table-column type="selection" width="55" :selectable="rowSelect"></el-table-column>
                <el-table-column prop="clientOrderNo" label="客户端订单单据号" width="160"></el-table-column>
                <el-table-column prop="entName" label="企业名称" width="160"></el-table-column>
                <el-table-column prop="entTaxId" label="企业税号" width="160"></el-table-column>
                <el-table-column prop="invoiceCategory" label="发票种类" width="100"
                                 :formatter="getInvoiceType"></el-table-column>
                <el-table-column prop="customerEntTaxId" label="客户企业税号" width="160"></el-table-column>
                <el-table-column prop="customerName" label="客户名称" width="160"></el-table-column>
                <el-table-column prop="totalAmount" label="总金额" width="100"></el-table-column>
                <el-table-column prop="totalTaxes" label="总税额" width="100"></el-table-column>
                <el-table-column prop="totalAmountTaxes" label="价税合计" width="100"></el-table-column>
                <el-table-column prop="invoiceStatus" label="开票状态" width="120"
                                 :formatter="getInvoiceStatus"></el-table-column>
                <el-table-column prop="fileName" label="文件名" width="160"></el-table-column>
                <el-table-column prop="hasEdit" label="是否修改" width="90"></el-table-column>
                <el-table-column prop="status" label="状态" width="80" :formatter="getDataStatus"></el-table-column>
                <el-table-column prop="statusMemo" label="状态说明" width="160"></el-table-column>
                <el-table-column prop="commitTime" label="提交时间" width="160"></el-table-column>
                <el-table-column prop="commitUserName" label="提交开票人姓名" width="160"></el-table-column>
                <el-table-column prop="commitUserMobile" label="提交开票人手机号" width="160"></el-table-column>
                <el-table-column prop="lastEditTime" label="最后修改时间" width="160"></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人姓名" width="160"></el-table-column>
                <el-table-column prop="lastEditUserMobile" label="最后修改人手机号" width="160"></el-table-column>
                <!--                <el-table-column fixed="right" label="操作" align="center" width="120">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <el-button @click="" type="primary" size="small" style="margin: 5px">查看</el-button>-->
                <!--                        <el-button @click="" type="primary" size="small" style="margin: 5px">编辑</el-button>-->
                <!--                        <el-button @click="" type="primary" size="small" style="margin: 5px">删除</el-button>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
            </el-table>
        </div>
        <div class="block">
            <el-row type="flex" :gutter="20">
                <el-col :span="12"></el-col>
                <el-col :span="12">
                    <div style="text-align:right">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageNum"
                                :page-sizes="pageSizes"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next"
                                :total="totalNumber"
                        >
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {AxiosRequestData, AxiosRequestFile} from '../../data/axios_request'
    import cache from '@/utils/cache'

    export default {
        name: 'batch_invoice',
        data() {
            return {
                load: false,
                taxIncluded: '含税',
                invoiceList: [],
                account: '',
                entTaxId: '',
                token: '',
                pageSizes: [10, 30, 50, 100],
                pageNum: 1,
                pageSize: 10,
                totalNumber: 0,
                totalPage: 0,
                invoiceStatusData: [{
                    value: '1',
                    label: '初始保存'
                }, {
                    value: '2',
                    label: '准备提交'
                }, {
                    value: '3',
                    label: '提交中'
                }, {
                    value: '4',
                    label: '提交成功'
                }, {
                    value: '5',
                    label: '提交失败'
                }],
                invoiceStatus: '',
                fileId: '',
                customerName: '',
                orderNumber: '',
                orderIds: [],
            }
        },
        created() {
            this.account = JSON.parse(cache.getSession("user")).account;
            this.entTaxId = JSON.parse(cache.getSession('company')).entTaxId;
            this.token = cache.getToken();
            this.getParams()
        },
        methods: {
            //变更每页显示的数据条数
            handleSizeChange(val) {
                this.pageSize = val
                this.getFilesList()
            },
            //翻页
            handleCurrentChange(val) {
                this.pageNum = val
                this.getFilesList()
            },
            //获取发票种类
            getInvoiceType(row, column, cellValue) {
                if (cellValue == 1) {
                    return '增值税普通电子发票'
                }
                if (cellValue == 2) {
                    return '增值税电子专用发票'
                }
                if (cellValue == 3) {
                    return '增值税普通纸质发票'
                }
                if (cellValue == 4) {
                    return '增值税专用纸质发票'
                } else {
                    return ''
                }
            },
            //获取数据状态
            getDataStatus(row, column, cellValue) {
                if (cellValue == 1) {
                    return '初始保存'
                }
                if (cellValue == 2) {
                    return '准备提交'
                }
                if (cellValue == 3) {
                    return '提交中'
                }
                if (cellValue == 4) {
                    return '提交成功'
                }
                if (cellValue == 5) {
                    return '提交失败'
                } else {
                    return ''
                }
            },
            //获取开票状态
            getInvoiceStatus(row, column, cellValue) {
                if (cellValue == 2) {
                    return '提交队列开票中'
                }
                if (cellValue == 3) {
                    return '成功'
                }
                if (cellValue == 4) {
                    return '失败'
                } else {
                    return ''
                }
            },
            //判断当前行是否可以选中
            rowSelect(row, index) {
                if (row.invoiceStatus === 3) {
                    return false
                } else {
                    return true
                }
            },
            //产品含税和不含税变化
            taxIncludedState() {
                this.isTaxIncluded = !this.isTaxIncluded;
                // let products = ProductTaxRateSwitch(this.productData.product, this.isTaxIncluded)
                // this.productData.product = products;
                // this.calculationTotalAmount(products)
            },
            //取得路由带过来的参数
            getParams() {
                let fileId = this.$route.params.key
                this.getInvoiceList(fileId)
            },
            //获取开票列表
            async getInvoiceList(fileId) {
                this.fileId = fileId
                if (this.token) {
                    const url = "/sys/batchInvoice/findPageOrders";
                    let response = await AxiosRequestData(url, this.token, {
                        batchId: fileId,
                        status: this.invoiceStatus,
                        clientOrderNo: this.orderNumber,
                        customerName: this.customerName,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }, false, 2);
                    if (response) {
                        if (response.code == 0) {
                            this.totalNumber = response.data.total;
                            this.totalPage = response.data.pages;
                            this.invoiceList = response.data.records
                        }
                    }
                }
            },
            //查询数据
            searchData() {
                this.getInvoiceList(this.fileId)
            },
            //获取选中的数据
            selectData(selection) {
                let orderIds = []
                if (selection.length > 0) {
                    orderIds = selection.map((_, i) => (selection[i].orderId))
                }
                this.orderIds = orderIds
            },
            //批量开票
            async submitInvoice() {
                if(this.orderIds.length > 0){
                    if (this.token && this.account) {
                        this.load = true
                        const url = "/sys/batchInvoice/commit";
                        let response = await AxiosRequestData(url, this.token, {
                            batchId: this.fileId,
                            mobile: this.account,
                            entTaxId: this.entTaxId,
                            orderIds: this.orderIds,
                        }, false, 1);
                        if (response) {
                            if (response.code == 0) {
                                this.load = false
                                this.$message({
                                    message: '提交开票成功！',
                                    type: 'success'
                                });
                                await this.getInvoiceList(this.fileId)
                            } else {
                                this.load = false
                                this.$message.error('提交开票失败！')
                                await this.getInvoiceList(this.fileId)
                            }
                        } else {
                            this.load = false
                            this.$message.error('提交开票失败！')
                        }
                    }
                } else {
                    this.$message({
                        message: '请选择开票信息！',
                        type: 'warning'
                    });
                }

            },
            //刷新开票数据
            refreshData(){
                this.getInvoiceList(this.fileId)
            }
        }
    }
</script>

<style scoped>
    .body {
        flex: 1;
    }

    .search_data {
        display: flex;
        flex-direction: row;
    }

    .search {
        display: flex;
        margin: 5px;
        justify-content: space-between;
    }

    .invoice_input {
        width: 250px;
    }

    .invoice_print {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
</style>
