<template>
  <div class="app-container">
      <div slot="header" class="card-title">开票</div>
    <!-- 搜索工作栏 -->
    <el-card class="card">
        <el-form  ref="queryForm" size="small" :inline="true"  label-width="100px" class="card">
              <el-form-item label="发票号码:" >
                  {{invoiceData.sn}}
              </el-form-item>
              <el-form-item label="开票类型:" >
                 <dict-selector :type="DICT_TYPE.ECW_RECEIPT_STATE" v-model="invoiceData.invoicingTypeId" />
              </el-form-item>
        </el-form>
    </el-card>
    <el-card class="card">
        <div slot="header" class="card-title">开票资料</div>
        <el-table v-loading="loading" :data="invoiceData.info" border class="card">
            <el-table-column label="发票抬头" align="center" prop="taxpayer" />
            <el-table-column label="纳税人识别号" align="center" prop="taxpayer" />
            <el-table-column label="地址" align="center" prop="orderNo" />
            <el-table-column label="开户行" align="center" prop="customerName" />
            <el-table-column label="税率" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.taxRate" type="number" min="0"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="项目" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.projectName" type="text"></el-input>
              </template>
            </el-table-column>
          </el-table>
    </el-card>
     <el-card class="card">
       <el-table v-loading="loading" :data="invoiceData.list" border class="card" show-summary :summary-method="getSummaries">
         <el-table-column label="订单号" align="center" prop="orderSn" />
         <el-table-column label="品名" align="center" prop="prodName" />
         <el-table-column label="箱数" align="center" prop="num" />
        <el-table-column label="体积/重量" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.volume+"m³/"+scope.row.weight+"kg"}}</span>
            </template>
        </el-table-column>
           <el-table-column label="费用类型" align="center" prop="feeType">
              <template slot-scope="scope">
                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.feeType"></dict-tag>
              </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="num" />
        <el-table-column label="金额" align="center" prop="num" />
        <el-table-column label="税额" align="center" prop="num" />
        <el-table-column label="价税合计" align="center" prop="num" />
         <div  slot="append" class="lastRow">
              <div>收款人</div>
              <div>111</div>
              <div>核销人</div>
              <div>222</div>
              <div>开票人</div>
              <div>333</div>
              <div></div>
              <div>价税合计大写</div>
              <div>444</div>
          </div>
       </el-table>
     </el-card>
     <el-descriptions  class="card" style="width: 50%;">
       <el-descriptions-item label="备注" >
           <el-input v-model="invoiceData.remarks" type="text" placeholder="" clearable></el-input>
       </el-descriptions-item>
     </el-descriptions>
     <div slot="footer" class="card">
       <el-button type="primary" @click="submitForm">确定</el-button>
     </div>
  </div>
</template>

<script>

  import {DICT_TYPE} from  '@/utils/dict'

   export default {
     name: "OpenInvoice",
     components: {
     },
     data() {
       return {
        loading: false,
        invoiceData:{},
       }
     },
     created() {
       let that = this

     },
     methods: {
       /** 查询列表 */
       getList() {
         this.loading = true;
         // 处理查询参数

         getReceiptPage().then(response => {
           this.invoiceData = response.data;
           if(!this.invoiceData.info||this.invoiceData.info.length==0){
             this.$modal.msgError("客户开票资料不能为空，请完善客户开票信息");
           }
           this.loading = false;
         });
       },
       submitForm(){
          this.open = false;
       },
        getSummaries(param) {
           const { columns, data } = param;
           const sums = [];
           columns.forEach((column, index) => {
             if (index === 0) {
               sums[index] = '总价';
               return;
             }else if(index<6){
               sums[index] = 'N/A';
               return;
             }
             const values = data.map(item => Number(item[column.property]));
             if (!values.every(value => isNaN(value))) {
               sums[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!isNaN(value)) {
                   return prev + curr;
                 } else {
                   return prev;
                 }
               }, 0);
               sums[index] += ' 元';
             } else {
               sums[index] = 'N/A';
             }
           });

           return sums;
         }
     },
   }
 </script>

 <style>
   .card{
     margin-top: 20px;
   }
   .dialog-footer{
     padding: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
      height: 160px;
   }
   .card-title{
       font-size: 18px;
       font-weight: bold;
   }
   .lastRow{
     border-top:1px solid #dfe6ec;
     display: flex;
     width: 100%;
     height: 44px;
     text-align: center;
     align-items: center;
   }
   .lastRow div{
     flex:1;
     height: 44px;
     line-height: 44px;
     border-right:1px solid #dfe6ec;
   }

 </style>
