<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
      label-width="68px">
      <el-form-item label="公司名称" prop="companyName">
        <!-- <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable
          @keyup.enter.native="handleQuery" /> -->
        <el-select v-model="queryParams.companyName" placeholder="请选择公司名称" clearable>
          <el-option v-for="item in companyList" :key="item.companyId" :label="item.companyName"
            :value="item.companyId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票类型" prop="invoiceType">
        <el-select v-model="queryParams.invoiceType" placeholder="请选择发票类型" clearable>
          <el-option v-for="item in invoiceTypeList" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票性质" prop="invoiceNature">
        <el-select v-model="queryParams.invoiceNature" placeholder="请选择发票性质" clearable>
          <el-option v-for="item in invoiceNatureList" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票日期" prop="invoiceDate">
        <el-date-picker clearable v-model="queryParams.invoiceDate" type="date"
          value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择发票日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['finance:invoice:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
          @click="handleUpdate" v-hasPermi="['finance:invoice:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete" v-hasPermi="['finance:invoice:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['finance:invoice:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="invoiceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="发票id" align="center" prop="invoiceId" /> -->
      <!-- <el-table-column label="公司id" align="center" prop="companyId" /> -->
      <el-table-column label="公司名称" align="center" prop="companyName" />
      <el-table-column label="发票类型" align="center" prop="invoiceType" />
      <el-table-column label="发票性质" align="center" prop="invoiceNature" />
      <el-table-column label="部门名称" align="center" prop="depName" />
      <el-table-column label="发票日期" align="center" prop="invoiceDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.invoiceDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买方名称" align="center" prop="buyName" />
      <el-table-column label="销售方名称" align="center" prop="saleName" />
      <!-- <el-table-column label="购买方纳税人识别号" align="center" prop="buyTaxpayerNo" />
      <el-table-column label="购买方地址" align="center" prop="buyAddress" /> -->
      <!-- <el-table-column label="购买方电话" align="center" prop="buyPhone" />
      <el-table-column label="购买方开户行" align="center" prop="buyBankDeposit" />
      <el-table-column label="购买方银行账号" align="center" prop="buyBankAccount" />
      <el-table-column label="申请人" align="center" prop="applicant" />
      <el-table-column label="审核人" align="center" prop="checker" />
      <el-table-column label="项目编号/发票号码" align="center" prop="projectOrInvoiceNo" /> -->
      <el-table-column label="合计金额" align="center" prop="amountSum" />
      <el-table-column label="合计税额" align="center" prop="taxSum" />
      <el-table-column label="价税合计" align="center" prop="amountTaxCapital" />
      <el-table-column label="价税合计" align="center" prop="amountTaxLower" />
      <!-- <el-table-column label="销售方纳税人识别号" align="center" prop="saleTaxpayerNo" />
      <el-table-column label="销售方地址" align="center" prop="saleAddress" />
      <el-table-column label="销售方电话" align="center" prop="salePhone" />
      <el-table-column label="销售方开户行" align="center" prop="saleBankDeposit" />
      <el-table-column label="销售方银行账号" align="center" prop="saleBankAccount" />
      <el-table-column label="备注" align="center" prop="note" />
      <el-table-column label="收款人" align="center" prop="payee" />
      <el-table-column label="复核人" align="center" prop="reviewer" />
      <el-table-column label="开票人" align="center" prop="drawer" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['finance:invoice:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['finance:invoice:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改发票对话框 -->
    <el-drawer :title="title" :visible.sync="open" size="90%" append-to-body>
      <el-row :gutter="20" type="flex">
        <el-col :span="9" :offset="0" style="height: 500px">
          <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-divider content-position="center">发票基本信息</el-divider>
              <el-row :gutter="20">
                <!-- <el-col :span="12" :offset="0">
                  <el-form-item label="公司id" prop="companyId">
                    <el-input v-model="form.companyId" placeholder="请输入公司id" />
                  </el-form-item>
                </el-col> -->

                <el-col :span="12" :offset="0">
                  <el-form-item label="公司" prop="companyName">
                    <el-select v-model="form.companyName" placeholder="请选择公司名称" clearable
                      @change="changeCompany">
                      <el-option v-for="item in companyList" :key="item.companyId"
                        :label="item.companyName" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="发票类型" prop="invoiceType">
                    <el-select v-model="form.invoiceType" placeholder="请选择发票类型" clearable>
                      <el-option v-for="item in invoiceTypeList" :key="item.value"
                        :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="发票性质" prop="invoiceNature">
                    <el-select v-model="form.invoiceNature" placeholder="请选择发票性质" clearable>
                      <el-option v-for="item in invoiceNatureList" :key="item.value"
                        :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="部门名称" prop="depName">
                    <el-input v-model="form.depName" placeholder="请输入部门名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="发票日期" prop="invoiceDate">
                    <el-date-picker clearable v-model="form.invoiceDate" type="date"
                      value-format="yyyy-MM-dd" placeholder="请选择发票日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="申请人" prop="applicant">
                    <el-input v-model="form.applicant" placeholder="请输入申请人" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="审核人" prop="checker">
                    <el-input v-model="form.checker" placeholder="请输入审核人" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-divider content-position="center">购买方信息</el-divider>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="名称" prop="buyName">
                    <el-input v-model="form.buyName" placeholder="请输入购买方名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="税识别号" prop="buyTaxpayerNo">
                    <el-input v-model="form.buyTaxpayerNo" placeholder="请输入购买方纳税人识别号" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="地址" prop="buyAddress">
                    <el-input v-model="form.buyAddress" placeholder="请输入购买方地址" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="电话" prop="buyPhone">
                    <el-input v-model="form.buyPhone" placeholder="请输入购买方电话" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="开户行" prop="buyBankDeposit">
                    <el-input v-model="form.buyBankDeposit" placeholder="请输入购买方开户行" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="银行账号" prop="buyBankAccount">
                    <el-input v-model="form.buyBankAccount" placeholder="请输入购买方银行账号" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-divider content-position="center">发票项信息</el-divider>
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button type="primary" icon="el-icon-plus" size="mini"
                    @click="handleAddFncInvoiceItem">添加
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="danger" icon="el-icon-delete" size="mini"
                    @click="handleDeleteFncInvoiceItem">删除
                  </el-button>
                </el-col>
              </el-row>
              <el-table :data="fncInvoiceItemList" :row-class-name="rowFncInvoiceItemIndex"
                @selection-change="handleFncInvoiceItemSelectionChange" ref="fncInvoiceItem">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="序号" align="center" prop="index" width="50" />
                <!-- <el-table-column label="发票id" prop="invoiceId" width="150">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.invoiceId" placeholder="请输入发票id" />
                  </template>
                </el-table-column> -->
                <el-table-column label="货物或应税劳务、服务名称" prop="objectName" width="150">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.objectName" placeholder="请输入货物或应税劳务、服务名称" />
                  </template>
                </el-table-column>
                <el-table-column label="规格型号" prop="specs" width="150">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.specs" placeholder="请输入规格型号" />
                  </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit" width="150">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.unit" placeholder="请输入单位" />
                  </template>
                </el-table-column>
                <el-table-column label="数量" prop="quantity" width="210">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.quantity" placeholder="请输入数量"
                      controls-position="right" :precision="2" />
                  </template>
                </el-table-column>
                <el-table-column label="单价(含税)" prop="unitPriceTax" width="210">
                  <template slot-scope="scope">
                    <el-input-number controls-position="right" v-model="scope.row.unitPriceTax"
                      placeholder="请输入单价(含税)" :precision="2" />
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  label="金额(不含税)"
                  prop="amountNoTax"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-input-number
                    controls-position="right"
                      v-model="scope.row.amountNoTax"
                      placeholder="请输入金额(不含税)"
                      :precision="2"
                    />
                  </template>
                </el-table-column> -->
                <el-table-column label="税率" prop="taxRate" width="210">
                  <template slot-scope="scope">
                    <el-input-number controls-position="right" v-model="scope.row.taxRate"
                      placeholder="请输入税率" :precision="2" :min="0" :max="100" />
                  </template>
                </el-table-column>
                <!-- <el-table-column label="税额" prop="taxAmount" width="100">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.taxAmount"
                      placeholder="请输入税额"
                    />
                  </template>
                </el-table-column> -->
              </el-table>

              <el-divider content-position="center">销售方信息</el-divider>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="名称" prop="saleName">
                    <el-input v-model="form.saleName" placeholder="请输入销售方名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="账号" prop=" saleBankAccount">
                    <el-input v-model="form.saleBankAccount" placeholder="请输入销售方银行卡账号" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="税识别号" prop="saleTaxpayerNo">
                    <el-input v-model="form.saleTaxpayerNo" placeholder="请输入销售方纳税人识别号" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="地址" prop="saleAddress">
                    <el-input v-model="form.saleAddress" placeholder="请输入销售方地址" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="电话" prop="salePhone">
                    <el-input v-model="form.salePhone" placeholder="请输入销售方电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="开户行" prop="saleBankDeposit">
                    <el-input v-model="form.saleBankDeposit" placeholder="请输入销售方开户行" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-divider content-position="center">发票金额信息</el-divider>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="合计税额" prop="taxSum">
                    <el-input v-model="form.taxSum" placeholder="请输入合计税额" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="价税合计(大写)" prop="amountTaxCapital">
                    <el-input v-model="form.amountTaxCapital" placeholder="请输入价税合计" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="价税合计(小写)" prop="amountTaxLower">
                    <el-input v-model="form.amountTaxLower" placeholder="请输入价税合计" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="项目编号/发票号码" prop="projectOrInvoiceNo">
                    <el-input v-model="form.projectOrInvoiceNo" placeholder="请输入项目编号/发票号码" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="合计金额" prop="amountSum">
                    <el-input v-model="form.amountSum" placeholder="请输入合计金额" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="复核人" prop="reviewer">
                    <el-input v-model="form.reviewer" placeholder="请输入复核人" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="收款人" prop="payee">
                    <el-input v-model="form.payee" placeholder="请输入收款人" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="备注" prop="note">
                    <el-input type="textarea" v-model="form.note" placeholder="请输入备注" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="开票人" prop="drawer">
                    <el-input v-model="form.drawer" placeholder="请输入开票人" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-button type="primary" @click="submitForm">提交</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <!-- <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div> -->
        </el-col>

        <el-col :span="15" :offset="0" style="height: 500px;">

          <body style="height: 100%">
            <div class="toptip c-red">
              模板样式仅供参考，不可用于实际开票依据！
            </div>

            <div class="invoicMain" id="printDiv">
              <div class="companyname">{{form.companyName}}</div>
              <!-- head start -->
              <div class="invoiceHeader">
                <!-- <div class="headerLeft">
                  <div>
                    
                  </div>
                </div> -->

                <div class="title">
                  <div class="headerMiddle">
                    <h1>{{form.invoiceType | typeFilter(this_)}}</h1>
                    <!-- <div class="line"></div> -->
                  </div>
                  <div class="headerRight">
                    <h1><span style="color:red">{{form.invoiceNature | natureFilter(this_)}}</span>开票通知单</h1>
                    <!-- <p><label>开票日期：</label><span> 2021年06月07日</span></p> -->
                  </div>
                </div>
              </div>

              <div class="neck">
                <div class="department">
                  <span><strong>部门:</strong></span>
                  {{ form.depName}}
                </div>
                <div class="applicant">
                  <span><strong>申请人:</strong></span>
                  {{ form.applicant}}
                </div>
                <div class="date">
                  <span><strong>日期:</strong></span>
                  {{form.invoiceDate}}
                </div>
              </div>
              <!-- head end -->
              <!-- invoice body start -->
              <div class="invoiceBody">
                <div class="userInfo">
                  <div class="buy">购买方</div>
                  <ul>
                    <li>
                      <label>名&nbsp;&nbsp;&nbsp;&nbsp;称：</label><span>{{form.buyName}}</span>
                    </li>
                    <li>
                      <label>纳税人识别号：</label><span class="f-big">{{form.buyTaxpayerNo}}</span>
                    </li>
                    <li>
                      <label>地址、&nbsp;电话：</label><span class="f-small">{{form.buyAddress}}
                        {{form.buyPhone}}</span>
                    </li>
                    <li>
                      <label>开户行及账号：</label><span class="f-small">{{form.buyBankDeposit}}
                        {{form.buyBankAccount}} </span>
                    </li>
                  </ul>
                  <!-- <div class="password"></div> -->
                  <div style="width:500px;line-height:25px;font-weight:bold;overflow:hidden">
                    <div>
                      <span style="color:green">部门:</span>
                      <span>{{ form.depName}}</span>
                    </div>
                    <div>
                      <span style="color:green">申请人:</span>
                      <span>{{ form.applicant}}</span>
                    </div>
                    <div>
                      <span style="color:green">审核人:</span>
                      <span>{{form.checker}}</span>
                    </div>
                    <div>
                      <span style="color:green"> 项目编号/发票号码:</span>
                      <span>{{form.projectOrInvoiceNo}}</span>
                    </div>

                    <!-- <ul>
                      <li>
                        <label 
                          >部门:</label
                        ><span >{{ form.depName}}</span>
                      </li>
                      <li>
                        <label
                          >申请人:</label
                        ><span> {{ form.applicant}}</span>
                      </li>
                      <li>
                        <label
                          >审&#12288;&#12288;&#12288;核&#12288;&#12288;&#12288;人:</label
                        ><span>{{form.checker}}</span>
                      </li>
                      <li><label>项目编号/发票号码:</label><span >{{form.projectOrInvoiceNo}}</span></li>
                    </ul> -->
                  </div>
                </div>
                <div>
                  <table class="GoodsTable" cellpadding="0" cellspacing="0">
                    <thead>
                      <tr>
                        <td style="width: 24%">货物或应税劳务、服务名称</td>
                        <td style="width: 10%">规格型号</td>
                        <td style="width: 7%">单位</td>
                        <td style="width: 10%">数 量</td>
                        <td style="width: 10%">单 价(含税)</td>
                        <td style="width: 16%">金 额(不含税)</td>
                        <td style="width: 7%">税率%</td>
                        <td style="width: 16%; border-right: none">税 额</td>
                      </tr>
                    </thead>
                    <tbody class="invoice-list" style="height: 126px">
                      <tr>
                        <td>
                          <span>{{fncInvoiceItemList[0]?fncInvoiceItemList[0].objectName:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[0]?fncInvoiceItemList[0].specs:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[0]?fncInvoiceItemList[0].unit:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[0]?fncInvoiceItemList[0].quantity:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[0]?fncInvoiceItemList[0].unitPriceTax:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[0]?(fncInvoiceItemList[0].quantity*fncInvoiceItemList[0].unitPriceTax/(1+fncInvoiceItemList[0].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                        <!-- <td><span>{{fncInvoiceItemList[0]?fncInvoiceItemList[0].amountNoTax:""}}</span></td> -->
                        <td><span>{{fncInvoiceItemList[0]?fncInvoiceItemList[0].taxRate:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[0]?(fncInvoiceItemList[0].quantity*fncInvoiceItemList[0].unitPriceTax/(1+fncInvoiceItemList[0].taxRate/100)*(fncInvoiceItemList[0].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <span>{{fncInvoiceItemList[1]?fncInvoiceItemList[1].objectName:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[1]?fncInvoiceItemList[1].specs:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[1]?fncInvoiceItemList[1].unit:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[1]?fncInvoiceItemList[1].quantity:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[1]?fncInvoiceItemList[1].unitPriceTax:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[1]?(fncInvoiceItemList[1].quantity*fncInvoiceItemList[1].unitPriceTax/(1+fncInvoiceItemList[1].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[1]?fncInvoiceItemList[1].taxRate:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[1]?(fncInvoiceItemList[1].quantity*fncInvoiceItemList[1].unitPriceTax/(1+fncInvoiceItemList[1].taxRate/100)*(fncInvoiceItemList[1].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <span>{{fncInvoiceItemList[2]?fncInvoiceItemList[2].objectName:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[2]?fncInvoiceItemList[2].specs:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[2]?fncInvoiceItemList[2].unit:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[2]?fncInvoiceItemList[2].quantity:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[2]?fncInvoiceItemList[2].unitPriceTax:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[2]?(fncInvoiceItemList[2].quantity*fncInvoiceItemList[2].unitPriceTax/(1+fncInvoiceItemList[2].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[2]?fncInvoiceItemList[2].taxRate:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[2]?(fncInvoiceItemList[2].quantity*fncInvoiceItemList[2].unitPriceTax/(1+fncInvoiceItemList[2].taxRate/100)*(fncInvoiceItemList[1].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <span>{{fncInvoiceItemList[3]?fncInvoiceItemList[3].objectName:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[3]?fncInvoiceItemList[3].specs:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[3]?fncInvoiceItemList[3].unit:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[3]?fncInvoiceItemList[3].quantity:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[3]?fncInvoiceItemList[3].unitPriceTax:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[3]?(fncInvoiceItemList[3].quantity*fncInvoiceItemList[3].unitPriceTax/(1+fncInvoiceItemList[3].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[3]?fncInvoiceItemList[3].taxRate:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[3]?(fncInvoiceItemList[3].quantity*fncInvoiceItemList[3].unitPriceTax/(1+fncInvoiceItemList[3].taxRate/100)*(fncInvoiceItemList[3].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <span>{{fncInvoiceItemList[4]?fncInvoiceItemList[4].objectName:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[4]?fncInvoiceItemList[4].specs:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[4]?fncInvoiceItemList[4].unit:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[4]?fncInvoiceItemList[4].quantity:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[4]?fncInvoiceItemList[4].unitPriceTax:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[4]?(fncInvoiceItemList[4].quantity*fncInvoiceItemList[4].unitPriceTax/(1+fncInvoiceItemList[4].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[4]?fncInvoiceItemList[4].taxRate:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[4]?(fncInvoiceItemList[4].quantity*fncInvoiceItemList[4].unitPriceTax/(1+fncInvoiceItemList[4].taxRate/100)*(fncInvoiceItemList[4].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <span>{{fncInvoiceItemList[5]?fncInvoiceItemList[5].objectName:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[5]?fncInvoiceItemList[5].specs:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[5]?fncInvoiceItemList[5].unit:""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[5]?fncInvoiceItemList[5].quantity:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[5]?fncInvoiceItemList[5].unitPriceTax:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[5]?(fncInvoiceItemList[5].quantity*fncInvoiceItemList[5].unitPriceTax/(1+fncInvoiceItemList[5].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                        <td><span>{{fncInvoiceItemList[5]?fncInvoiceItemList[5].taxRate:""}}</span>
                        </td>
                        <td>
                          <span>{{fncInvoiceItemList[5]?(fncInvoiceItemList[5].quantity*fncInvoiceItemList[5].unitPriceTax/(1+fncInvoiceItemList[5].taxRate/100)*(fncInvoiceItemList[5].taxRate/100)).toFixed(2):""}}</span>
                        </td>
                      </tr>
                    </tbody>

                    <tfoot>
                      <tr class="total">
                        <td>合 &nbsp;&nbsp;&nbsp;计</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><span class="rmb">￥</span>{{Accsum}}</td>
                        <td></td>
                        <td><span class="rmb">￥</span>{{taxsum}}</td>
                      </tr>
                      <tr class="GoodsTotal">
                        <td>价税合计(大写)</td>
                        <td colspan="7">
                          <div style="width: 100%; display: flex">
                            <div type="text" style="width: 60%">
                              <span class="c-black">ⓧ{{form.amountTaxCapital}}</span>
                            </div>

                            <div type="text" style="width: 30%">
                              (小写)
                              <span class="c-black"><span class="rmb">￥</span>{{Numprice}}</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                  <div class="userInfo">
                    <div class="buy">销售方</div>
                    <ul>
                      <li>
                        <label>名&nbsp;&nbsp;&nbsp;&nbsp;称：</label><span>{{form.saleName}}</span>
                      </li>
                      <li>
                        <label>纳税人识别号：</label><span class="f-big">{{form.saleTaxpayerNo}}</span>
                      </li>
                      <li>
                        <label>地址、&nbsp;电话：</label><span class="f-small2">{{form.saleAddress}}
                          {{form.salePhone}}</span>
                      </li>
                      <li>
                        <label>开户行及账号：</label><span class="f-small">{{form.saleBankDeposit}}
                          {{form.saleBankAccount}}</span>
                      </li>
                    </ul>
                    <div class="password">备注</div>
                    <div class="pwdInfo">{{form.note}}</div>
                  </div>
                </div>
              </div>
              <!-- invoice body start -->
              <ul class="invoicetFooter">
                <li><label>收款人：</label><span>{{form.payee}}</span></li>
                <li><label>复核：</label><span>{{form.reviewer}}</span></li>
                <li><label>开票人：</label><span>{{form.drawer}}</span></li>
                <li>
                  <label>销售方：（章）</label>
                </li>
              </ul>
            </div>
          </body>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import {
  listInvoice,
  getInvoice,
  delInvoice,
  addInvoice,
  updateInvoice,
} from "@/api/finance/invoice";
import {
  listCompany,
  listAllCompany,
  getCompany,
  delCompany,
  addCompany,
  updateCompany,
} from "@/api/finance/company";
export default {
  name: "Invoice",
  filters: {
    typeFilter(value,this_) {
      if(!value) {
        return ""
      }
     return this_.invoiceTypeList.find((item, index, array) => {
        return item.value == value
      }).label
    },
    natureFilter(value,this_) {
      if(!value) {
        return ""
      }
      return this_.invoiceNatureList.find((item, index, array) => {
        return item.value == value
      }).label
    },
  },
  data() {
    return {
      this_:this,
      //发票类型
      invoiceTypeList: [
        { label: "普通发票", value: "0" },
        { label: "增值税专用发票", value: "1" },
      ],
      //发票性质
      invoiceNatureList: [
        { label: "进项", value: "0" },
        { label: "出项", value: "1" },
      ],
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedFncInvoiceItem: [],
      // 记账公司列表
      companyList: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 发票表格数据
      invoiceList: [],
      // 发票项表格数据
      fncInvoiceItemList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyId: null,
        companyName: null,
        invoiceType: null,
        invoiceNature: null,
        depName: null,
        invoiceDate: null,
        buyName: null,
        buyTaxpayerNo: null,
        buyAddress: null,
        buyPhone: null,
        buyBankDeposit: null,
        buyBankAccount: null,
        applicant: null,
        checker: null,
        projectOrInvoiceNo: null,
        amountSum: null,
        taxSum: null,
        amountTaxCapital: null,
        amountTaxLower: null,
        saleName: null,
        saleTaxpayerNo: null,
        saleAddress: null,
        salePhone: null,
        saleBankDeposit: null,
        saleBankAccount: null,
        note: null,
        payee: null,
        reviewer: null,
        drawer: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        invoiceId: [
          { required: true, message: "发票id不能为空", trigger: "blur" },
        ],
        companyId: [
          { required: true, message: "公司id不能为空", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" },
        ],
        invoiceType: [
          { required: true, message: "发票类型不能为空", trigger: "change" },
        ],
        invoiceNature: [
          {
            required: true,
            message: "发票性质不能为空",
            trigger: "blur",
          },
        ],
        depName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        invoiceDate: [
          { required: true, message: "发票日期不能为空", trigger: "blur" },
        ],
        buyName: [
          { required: true, message: "购买方名称不能为空", trigger: "blur" },
        ],
        buyTaxpayerNo: [
          {
            required: true,
            message: "购买方纳税人识别号不能为空",
            trigger: "blur",
          },
        ],
        buyAddress: [
          { required: true, message: "购买方地址不能为空", trigger: "blur" },
        ],
        buyPhone: [
          { required: true, message: "购买方电话不能为空", trigger: "blur" },
        ],
        buyBankDeposit: [
          { required: true, message: "购买方开户行不能为空", trigger: "blur" },
        ],
        buyBankAccount: [
          {
            required: true,
            message: "购买方银行账号不能为空",
            trigger: "blur",
          },
        ],
        applicant: [
          { required: true, message: "申请人不能为空", trigger: "blur" },
        ],
        checker: [
          { required: true, message: "审核人不能为空", trigger: "blur" },
        ],
        projectOrInvoiceNo: [
          {
            required: true,
            message: "项目编号/发票号码不能为空",
            trigger: "blur",
          },
        ],
        amountSum: [
          { required: true, message: "合计金额不能为空", trigger: "blur" },
        ],
        taxSum: [
          { required: true, message: "合计税额不能为空", trigger: "blur" },
        ],
        amountTaxCapital: [
          { required: true, message: "价税合计不能为空", trigger: "blur" },
        ],
        amountTaxLower: [
          { required: true, message: "价税合计不能为空", trigger: "blur" },
        ],
        saleName: [
          { required: true, message: "销售方名称不能为空", trigger: "blur" },
        ],
        saleTaxpayerNo: [
          {
            required: true,
            message: "销售方纳税人识别号不能为空",
            trigger: "blur",
          },
        ],
        saleAddress: [
          { required: true, message: "销售方地址不能为空", trigger: "blur" },
        ],
        salePhone: [
          { required: true, message: "销售方电话不能为空", trigger: "blur" },
        ],
        saleBankDeposit: [
          { required: true, message: "销售方开户行不能为空", trigger: "blur" },
        ],
        saleBankAccount: [
          {
            required: true,
            message: "销售方银行账号不能为空",
            trigger: "blur",
          },
        ],
        note: [{ required: true, message: "备注不能为空", trigger: "blur" }],
        payee: [{ required: true, message: "收款人不能为空", trigger: "blur" }],
        reviewer: [
          { required: true, message: "复核人不能为空", trigger: "blur" },
        ],
        drawer: [
          { required: true, message: "开票人不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getCompanyList();
  },
  //算法公式
  computed: {
    //金额(不含税)
    //     price1(){
    //       let sum=this.in
    // (fncInvoiceItemList[0].quantity*fncInvoiceItemList[0].unitPriceTax/(1+fncInvoiceItemList[0].taxRate/100)).toFixed(2)
    //     },

    //合计金额（不含税）
    Accsum() {
      let price = 0;

      for (var i = 0; i < this.fncInvoiceItemList.length; i++) {
        price =
          price +
          (this.fncInvoiceItemList[i].quantity *
            this.fncInvoiceItemList[i].unitPriceTax) /
            (1 + this.fncInvoiceItemList[i].taxRate / 100);
      }
      price = price.toFixed(2);
      this.form.amountSum = price;
      return price;
    },

    //税额合计
    taxsum() {
      let sum = 0;
      for (var i = 0; i < this.fncInvoiceItemList.length; i++) {
        sum =
          sum +
          ((this.fncInvoiceItemList[i].quantity *
            this.fncInvoiceItemList[i].unitPriceTax) /
            (1 + this.fncInvoiceItemList[i].taxRate / 100)) *
            (this.fncInvoiceItemList[i].taxRate / 100);
      }
      sum = sum.toFixed(2);
      this.form.taxSum = sum;
      return sum;
    },

    //价税合计
    Numprice() {
      let qwe = 0;
      for (var i = 0; i < this.fncInvoiceItemList.length; i++) {
        qwe =
          qwe +
          (this.fncInvoiceItemList[i].quantity *
            this.fncInvoiceItemList[i].unitPriceTax) /
            (1 + this.fncInvoiceItemList[i].taxRate / 100) +
          ((this.fncInvoiceItemList[i].quantity *
            this.fncInvoiceItemList[i].unitPriceTax) /
            (1 + this.fncInvoiceItemList[i].taxRate / 100)) *
            (this.fncInvoiceItemList[i].taxRate / 100);
      }
      qwe = qwe.toFixed(2);
      this.form.amountTaxLower = qwe;
      return qwe;
    },
  },
  methods: {
    /** 公司列表下拉框改变 */
    changeCompany(item) {
      console.log(item);
      this.form.companyId = item.companyId;
      this.form.companyName = item.companyName;
    },
    /** 查询公司列表 */
    getCompanyList() {
      this.loading = true;
      listAllCompany().then((response) => {
        this.companyList = response.rows;
      });
    },
    /** 查询发票列表 */
    getList() {
      this.loading = true;
      listInvoice(this.queryParams).then((response) => {
        this.invoiceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        invoiceId: null,
        companyId: null,
        companyName: null,
        invoiceType: null,
        invoiceNature: null,
        depName: null,
        invoiceDate: null,
        buyName: null,
        buyTaxpayerNo: null,
        buyAddress: null,
        buyPhone: null,
        buyBankDeposit: null,
        buyBankAccount: null,
        applicant: null,
        checker: null,
        projectOrInvoiceNo: null,
        amountSum: null,
        taxSum: null,
        amountTaxCapital: null,
        amountTaxLower: null,
        saleName: null,
        saleTaxpayerNo: null,
        saleAddress: null,
        salePhone: null,
        saleBankDeposit: null,
        saleBankAccount: null,
        note: null,
        payee: null,
        reviewer: null,
        drawer: null,
      };
      this.fncInvoiceItemList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.invoiceId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加发票";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const invoiceId = row.invoiceId || this.ids;
      getInvoice(invoiceId).then((response) => {
        this.form = response.data;
        this.fncInvoiceItemList = response.data.fncInvoiceItemList;
        this.open = true;
        this.title = "修改发票";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.fncInvoiceItemList = this.fncInvoiceItemList;
          if (this.form.invoiceId != null) {
            updateInvoice(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInvoice(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const invoiceIds = row.invoiceId || this.ids;
      this.$modal
        .confirm('是否确认删除发票编号为"' + invoiceIds + '"的数据项？')
        .then(function () {
          return delInvoice(invoiceIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 发票项序号 */
    rowFncInvoiceItemIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 发票项添加按钮操作 */
    handleAddFncInvoiceItem() {
      let obj = {};
      obj.invoiceId = "";
      obj.objectName = "";
      obj.specs = "";
      obj.unit = "";
      obj.quantity = "";
      obj.unitPriceTax = "";
      obj.amountNoTax = "";
      obj.taxRate = "";
      obj.taxAmount = "";
      this.fncInvoiceItemList.push(obj);
    },
    /** 发票项删除按钮操作 */
    handleDeleteFncInvoiceItem() {
      if (this.checkedFncInvoiceItem.length == 0) {
        this.$modal.msgError("请先选择要删除的发票项数据");
      } else {
        const fncInvoiceItemList = this.fncInvoiceItemList;
        const checkedFncInvoiceItem = this.checkedFncInvoiceItem;
        this.fncInvoiceItemList = fncInvoiceItemList.filter(function (item) {
          return checkedFncInvoiceItem.indexOf(item.index) == -1;
        });
      }
    },
    /** 复选框选中数据 */
    handleFncInvoiceItemSelectionChange(selection) {
      console.log(this.fncInvoiceItemList[0].invoiceId);
      this.checkedFncInvoiceItem = selection.map((item) => item.index);
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "finance/invoice/export",
        {
          ...this.queryParams,
        },
        `invoice_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style scoped>
/* * {
  padding: 0;
  margin: 0;
} */
.el-form-item .el-select .el-date-picker {
  width: 100%;
}

ul,
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  font-family: "simsun";
  position: fixed;
  top: 10;
  right: 5;
}
.title {
  margin: auto;
  width: 100%;
  text-align: center;
  display: flex;
}
.companyname {
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
  color: green;
  margin-bottom: 10px;
}
.neck {
  display: flex;
  height: 40px;
  border: 1px solid green;
  margin-bottom: 10px;
  color: green;
  overflow: hidden;
}
.neck span {
  line-height: 40px;
  margin: 0 10px;
}

.neck input {
  height: 35px;
  width: 120px;
  border: 0;
  outline: none;
}
.neck .department {
  flex: 3;
}
.neck .applicant {
  flex: 3;
}
.neck .date {
  flex: 3;
}

label {
  color: #008000;
}

.rmb {
  font-family: Arial, Helvetica, sans-serif;
}

.c-red {
  color: #ff3133;
}

.c-black {
  color: #000;
}

.f-big {
  font-size: 20px;
}

.f-small {
  font-size: 12px;
}

.f-small2 {
  font-size: 10px;
}

.invoicMain {
  width: 920px;
  margin: 0 auto;
  font-size: 14px;
  color: #000;
  padding: 20px;
  border: 1px dotted #000;
}

.toptip {
  text-align: center;
  padding-top: 4px;
  height: 20px;
}

.invoiceHeader {
  height: 126px;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}

.headerLeft {
  width: 300px;
  display: flex;
}

.headerLeft div:nth-child(1) {
  width: 85px;
  line-height: 26px;
}

.headerLeft div p {
  line-height: 26px;
}

.headerLeft div:nth-child(2) p.c-red {
  width: 170px;
  height: 46px;
  text-align: center;
  line-height: 42px;
  font-size: 24px;
  letter-spacing: 2px;
}

.headerLeft div p.c span {
  font-size: 18px;
  letter-spacing: 1px;
}

/* .headerRight {
  padding-left: 28px;
  width: 316px;
} */

.headerRight p:nth-child(1) {
  font-size: 24px;
}

.headerRight p:nth-child(1) strong {
  font-family: "LiSu";
  font-size: 30px;
  padding-right: 20px;
}

.headerRight p:nth-child(2) {
  text-align: right;
  margin-top: -5px;
}

.headerRight p:nth-child(3) {
  text-align: right;
  font-size: 18px;
  letter-spacing: 1px;
}

.headerRight p:nth-child(4) {
  text-align: center;
  letter-spacing: 1px;
}

.headerMiddle {
  width: 300px;
  margin: auto;
  text-align: right;
}

.headerMiddle h1 {
  font-size: 32px;
  color: #008000;
  padding-bottom: 22px;
}
.headerRight {
  width: 300px;
  margin: auto;
}
.headerRight h1 {
  font-size: 32px;
  color: #008000;
  padding-bottom: 22px;
}
.total .rmb {
  font-size: 16px;
}

.line {
  height: 2px;
  border-top: #008000 1px solid;
  border-bottom: #008000 1px solid;
  margin-bottom: 30px;
}

.invoiceBody {
  border: 1px solid #008000;
}

.userInfo {
  width: 100%;
  display: flex;
  align-items: center;
  height: 96px;
  border-bottom: 1px solid #008000;
}

.userInfo ul {
  width: 50%;
  margin: 0 5px;
  padding: 0;
}

.userInfo ul li {
  line-height: 24px;
}

.userInfo ul li:nth-child(2) .f-big {
  padding-left: 24px;
  letter-spacing: 2px;
}

.userInfo ul li:nth-child(3) {
  position: relative;
}

.userInfo ul li .f-small2 {
  position: absolute;
  width: 120%;
  transform: scale(0.8);
  left: 44px;
}

.buy {
  width: 20px;
  border-right: 1px solid #008000;
  /* padding: 0 10px; */
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  color: #008000;
  line-height: 20px;
}

.password {
  width: 20px;
  /* padding: 0 10px; */
  border-right: 1px solid #008000;
  border-left: 1px solid #008000;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  color: #008000;
  line-height: 20px;
}

.pwdInfo {
  /* flex: 1; */
  padding: 0;
  height: 100%;
  width: 50%;

  overflow: auto;
}

.goodsInfo {
  height: 210px;
  margin: 0;
  padding: 0;
}

.goodsInfo li {
  display: flex;
  color: #008000;
  text-align: center;
}

.name {
  width: 260px;
  border-right: 1px solid #008000;
}

.spec {
  width: 140px;
  border-right: 1px solid #008000;
}

.qty {
  width: 108px;
  border-right: 1px solid #008000;
}

.unit,
.taxRate {
  width: 65px;
  border-right: 1px solid #008000;
}

.qty,
.price {
  width: 160px;
  border-right: 1px solid #008000;
}

.money {
  flex: 1;
  border-right: 1px solid #008000;
}

.taxAmount {
  flex: 1;
}

.GoodsTable {
  height: 210px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.GoodsTable td {
  border-right: 1px solid #008000;
  color: #008000;
  padding: 0 4px;
}

.invoice-list td {
  color: #000;
  vertical-align: middle;
}

.invoice-list td:nth-child(5),
.invoice-list td:nth-child(6),
.invoice-list td:nth-child(7),
.invoice-list td:nth-child(8),
.total td:nth-child(5),
.total td:nth-child(6),
.total td:nth-child(7),
.total td:nth-child(8) {
  text-align: right;
}

.invoice-list {
  height: 126px;
  overflow: hidden;
}

.invoice-list tr td {
  height: 21px;
}

.GoodsTable thead tr {
  height: 24px;
  text-align: center;
}

.GoodsTotal {
  height: 34px;
}

.GoodsTotal {
  border-top: 1px solid #008000;
  border-bottom: 1px solid #008000;
}

.total td {
  color: #000;
}

.total td:nth-child(1) {
  text-align: center;
  color: #008000;
}

.total td:nth-child(6),
.total td:nth-child(8) {
  font-size: 18px;
}

.invoicetFooter {
  padding-top: 2px;
  display: flex;
  justify-content: space-between;
}

.invoicetFooter li {
  width: 25%;
}

.invoiceHeader-left {
  width: 67%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.element::-webkit-scrollbar {
  display: none;
}
</style>
