<template>
  <div class="sales-invoice-view">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <cy-info-title>基础信息</cy-info-title>
      <el-form-item label="发票类型">
        <el-input :value="ruleForm.invoiceType ? codeToName(constant.invoice_type, ruleForm.invoiceType, 'dictValue', 'dictLabel') : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发票代码">
        <el-input :value="ruleForm.invoiceCode || '——'" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发票号码">
        <el-input :value="ruleForm.invoiceNumber" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="供应商名称">
        <el-input :value="ruleForm.vendorEntityName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="采购订单ID">
        <el-input :value="ruleForm.orderNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="开票日期">
        <el-input :value="ruleForm.invoicingDate" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发票金额">
        <el-input :value="ruleForm.currency + ' ' + formatMoney(ruleForm.amount)" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发票税额">
        <el-input :value="ruleForm.currency + ' ' + formatMoney(ruleForm.taxAmount)" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="商品数量">
        <el-input :value="ruleForm.number" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="认证标志">
        <el-input :value="ruleForm.certificationState === 'Y' ? '已认证' : ruleForm.certificationState === 'N' ? '未认证' : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发票">
        <cy-upload
          :file-data="ruleForm.purchaseOrderInvoice ? [ruleForm.purchaseOrderInvoice] : []"
          :upload-from-orange-status="true"
          :limit="1"
          disabled
        />
      </el-form-item>
      <el-form-item label="认证日期">
        <el-input :value="ruleForm.certificationDate" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input :value="ruleForm.bz" :disabled="disabled" />
      </el-form-item>
      <cy-info-title style="margin-top: 20px;">商品信息</cy-info-title>
      <div style="width: 100%;" class="table-box">
        <el-table :data="goodsInfo" style="width: 100%;">
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column label="报关品名" prop="declarationName" :show-overflow-tooltip="true" />
          <el-table-column label="型号 (选填)" prop="model" :show-overflow-tooltip="true" />
          <el-table-column label="申报计量单位" prop="measurementUnit" :show-overflow-tooltip="true" />
          <el-table-column label="数量" prop="number" :show-overflow-tooltip="true" />
          <el-table-column prop="priceUnit" :label="'采购单价 (不含税) (' + ruleForm.currency + ')'" width="180" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ formatMoney(row.priceUnit) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" :label="'金额 (不含税) (' + ruleForm.currency + ')'" width="150" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ formatMoney(row.amount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="增值税税率（%）" prop="price" width="140" :show-overflow-tooltip="true" />
          <el-table-column prop="taxAmount" :label="'税额 (' + ruleForm.currency + ')'" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ formatMoney(row.taxAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalAmount" :label="'商品金额 (' + ruleForm.currency + ')'" width="130" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ formatMoney(row.totalAmount) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <div class="submit-btn">
      <el-button @click="() => { $router.push({name: 'PurchaseBill'}) }">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { purchaseInvoiceDetail } from '@/api/myTrade/purchaseBill'
import { codeChangeName, handleMoney } from '@/utils'
export default {
  name: 'SalesInvoiceView',
  data() {
    return {
      goodsInfo: [],
      ruleForm: {},
      disabled: true
    }
  },
  computed: {
    ...mapGetters(['constant']),
    formatMoney(val) {
      return (val) => {
        return handleMoney(val)
      }
    }
  },

  created() {
    this.$store.dispatch('getConstant', ['invoice_type'])
    this.getDetails()
  },
  methods: {
    getDetails() {
      purchaseInvoiceDetail({ invoiceId: this.$route.query.id }).then(({ data }) => {
        this.ruleForm = data || {}
        this.goodsInfo = data.invoiceCommodityList || []
      })
    },
    codeToName(list, type, code, name) {
      return codeChangeName(list, type, code, name)
    }

  }
}
</script>

  <style lang="scss" scoped>
    .sales-invoice-view {
      padding: 10px 20px;
    }
  </style>
