<template>
  <div class="sales-invoice-view">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <cy-info-title>基础信息</cy-info-title>
      <el-form-item label="销售订单ID">
        <el-input :value="ruleForm.orderNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="进口商名称">
        <el-input :value="ruleForm.importerName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="销售合同名称">
        <el-input :value="ruleForm.salesContractName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="销售合同编号">
        <el-input :value="ruleForm.salesContractNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item v-if="enterpriseInfo.exportType === 'proxy_export'" label="代理公司名称">
        <el-input :value="ruleForm.agencyEnterpriseName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="贸易术语">
        <el-input :value="ruleForm.tradeTerms ? codeToName(constant.trade_terms, ruleForm.tradeTerms, 'dictValue', 'dictLabel') : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="起运港">
        <el-input :value="ruleForm.portDeparture" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="目的港">
        <el-input :value="ruleForm.portDestination" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款方式">
        <el-input :value="ruleForm.paymentWay ? codeToName(constant.payment_way, ruleForm.paymentWay, 'dictValue', 'dictLabel') : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发票号码">
        <el-input :value="$route.query.id" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="开票日期">
        <el-input :value="ruleForm.gmtCreate" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发票金额">
        <el-input :value="'$ ' + formatMoney(ruleForm.amount)" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="销售发票">
        <cy-upload
          :file-data="ruleForm.file ? [ruleForm.file] : []"
          :upload-from-orange-status="true"
          :limit="1"
          disabled
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input :value="ruleForm.signDate" :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 v-if="enterpriseInfo.exportType == 'self_export' && enterpriseInfo.enterpriseType !== '1' && enterpriseInfo.enterpriseType !== '2'" label="供应商名称" prop="vendorName" :show-overflow-tooltip="true" />
          <el-table-column label="HS编码" prop="hsCode" :show-overflow-tooltip="true" />
          <el-table-column label="商品名称" prop="name" :show-overflow-tooltip="true" />
          <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="unit" :show-overflow-tooltip="true" />
          <el-table-column label="包装规格" prop="packingSpecifications" :show-overflow-tooltip="true" />
          <el-table-column label="销售单价 (USD)" prop="price" :show-overflow-tooltip="true" />
          <el-table-column prop="count" label="数量">
            <template slot-scope="{ row }">
              <span>{{ row.count }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="priceTotal" label="商品金额 (USD)">
            <template slot-scope="{ row }">
              <span>{{ formatMoney(row.priceTotal) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>

    <div class="submit-btn">
      <el-button @click="() => { $router.push({name: 'SalesBill'}) }">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getInvoiceDetail } from '@/api/myTrade/salesBill'
import { codeChangeName, handleMoney } from '@/utils'
export default {
  name: 'SalesInvoiceView',
  data() {
    return {
      goodsInfo: [],
      ruleForm: {
        file: []
      },
      rules: {

      },
      disabled: false
    }
  },
  computed: {
    ...mapGetters([
      'constant', 'enterpriseInfo'
    ]),
    formatMoney(val) {
      return (val) => {
        return handleMoney(val)
      }
    }
  },

  created() {
    this.disabled = true
    this.$store.dispatch('getConstant', ['sys_yes_no', 'trade_terms', 'payment_way'])
    this.getDetails()
  },
  methods: {

    getDetails() {
      const invoiceNo = this.$route.query.id
      const params = {
        invoiceNo: invoiceNo
      }
      getInvoiceDetail(params).then(({ data }) => {
        this.ruleForm = data || []
        this.goodsInfo = data.salesOrderGoodsList || []
      })
    },
    codeToName(list, type, code, name) {
      return codeChangeName(list, type, code, name)
    }

  }
}
</script>

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