<template>
  <div class="app-container">
    <div slot="header" class="card-title">开票</div>
    <!-- 搜索工作栏 -->
    <el-form
      :model="invoiceData"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="120px"
      class="card"
    >
      <el-card class="card">
        <el-form-item label="发票号码:" prop="invoiceNumber" :rules="{ required: true, trigger: ['blur'], message: '发票号码不能为空' }">
          <el-input v-model="invoiceData.invoiceNumber"></el-input>
        </el-form-item>
        <el-form-item label="开票类型:" prop="invoicingTypeId" :rules="{ required: true, trigger: ['blur', 'change'], message: '开票类型不能为空' }">
          <dict-selector
            :type="DICT_TYPE.ECW_INVOICING_TYPE"
            v-model="invoiceData.invoicingTypeId"
          />
        </el-form-item>
      </el-card>
      <el-card class="card">
        <div slot="header" class="card-title">开票资料</div>
        <el-descriptions title="" direction="vertical" :column="6" border>
          <el-descriptions-item label="发票抬头">{{ invoiceData.invoice }}</el-descriptions-item>
          <el-descriptions-item label="纳税人识别号">{{ invoiceData.taxpayer }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ invoiceData.addressPhone }}</el-descriptions-item>
          <el-descriptions-item label="开户行">{{ invoiceData.accountBank }}</el-descriptions-item>
          <el-descriptions-item label="税率">
            <el-form-item label="">
              <el-input v-model="invoiceData.taxRate"></el-input>  
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="项目">
            <el-form-item label="">
              <el-input v-model="invoiceData.projectName"></el-input>  
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="card">
        <el-table
          v-loading="loading"
          :data="list"
          border
          class="card"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column label="订单号" align="center" prop="orderNo" />
          <el-table-column label="品名" align="center" prop="titleZh">
            <template slot-scope="scope">
              {{ scope.row.titleZh || scope.row.titleEn ? scope.row.titleZh + "(" + scope.row.titleEn + ")" : '' }}
            </template>
          </el-table-column>
          <el-table-column label="箱数" align="center" prop="num" />
          <el-table-column label="体积/重量" align="center" prop="weight"></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="unitPrice" />
          <el-table-column label="总金额" align="center" prop="totalAmount" />
          <el-table-column label="税额" align="center">
            <template slot-scope="scope">
              无
            </template>
          </el-table-column>
          <el-table-column label="价税合计" align="center">
            <template slot-scope="scope">
              无
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-descriptions class="card" style="width: 50%">
        <el-descriptions-item label="备注">
          <el-input
            v-model="invoiceData.invoicingRemark"
            type="text"
            placeholder=""
            clearable
          ></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div slot="footer" class="card">
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { DICT_TYPE } from "@/utils/dict";
import { getReceiptInvoicing, getInvoicingItem, updateReceiptInvoicing } from "@/api/ecw/financial";

export default {
  name: "OpenInvoice",
  components: {},
  data() {
    return {
      loading: false,
      invoiceData: {},
      id: 0,
      list: []
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getData();
    }
  },
  methods: {
    getData() {
      this.loading = true;
      getReceiptInvoicing(this.id).then((res) => {
        this.invoiceData = res.data;
        this.invoiceData.invoicingTypeId = this.invoiceData.invoicingTypeId || ''
        // if (!this.invoiceData.info || this.invoiceData.info.length == 0) {
        //   this.$modal.msgError("客户开票资料不能为空，请完善客户开票信息");
        // }
        this.loading = false;
      });
      getInvoicingItem({ id: this.id }).then(res => {
        const t = {
          orderNo: '合计',
          totalAmount: res.data.reduce((total, curr) => total + curr.totalAmount, 0)
        }
        this.list = [...res.data, t]
      })
    },
    submitForm() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          updateReceiptInvoicing(this.invoiceData).then(res => {
            this.open = false;
            this.$modal.msgSuccess("操作成功");
            this.$router.back();
          })
        }
      })
    },
    getSummaries(param) {
      return ['收款人', this.invoiceData.payeeName, '核销人', this.invoiceData.writeOffName, '开票人', this.invoiceData.issuerName, '', '价税合计大写', 444];
    },
  },
};
</script>

 <style scoped lang="scss">
.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;
}
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
</style>
