<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.customsNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="报关单">
        <cy-upload
          :file-data="ruleForm.customsFile ? [ruleForm.customsFile] : []"
          :upload-from-orange-status="true"
          :limit="1"
          disabled
        />
      </el-form-item>
      <el-form-item label="出口日期">
        <el-input :value="ruleForm.ckrq1" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="进口商名称">
        <el-input :value="ruleForm.importerName" :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.contractNo" :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.invoiceNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="提运单号">
        <el-input :value="ruleForm.ladingBillNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="海关关区（口岸）">
        <el-input :value="ruleForm.hggq" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="起运港">
        <el-input :value="ruleForm.fromPort" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="目的港">
        <el-input :value="ruleForm.destPort" :disabled="disabled" />
      </el-form-item>
      <el-form-item :label="`运费金额 (${ruleForm.yfhghbzmDm})`">
        <el-input :value="formatMoney(ruleForm.yfje)" :disabled="disabled" />
      </el-form-item>
      <el-form-item :label="`保费金额 (${ruleForm.bfhghbzmDm})`">
        <el-input :value="formatMoney(ruleForm.bfje)" :disabled="disabled" />
      </el-form-item>
      <el-form-item :label="`杂费金额 (${ruleForm.zfhghbzmDm})`">
        <el-input :value="formatMoney(ruleForm.zfje1)" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="件数">
        <el-input :value="ruleForm.js1" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="毛重（千克）">
        <el-input :value="ruleForm.mz2" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="净重（千克）">
        <el-input :value="ruleForm.jz" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="申报日期">
        <el-input :value="ruleForm.hgckhwbgdsbrq" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="申报单位名称">
        <el-input :value="ruleForm.sbdwmc" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="委托报关协议编号">
        <el-input :value="ruleForm.entrustNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="委托报关协议">
        <cy-upload
          :file-data="ruleForm.entrustFile ? [ruleForm.entrustFile] : []"
          :upload-from-orange-status="true"
          :limit="1"
          disabled
        />
      </el-form-item>
      <el-form-item label="集装箱号">
        <el-input :value="ruleForm.jzxh" :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="HS编码" prop="hsCode" :show-overflow-tooltip="true" />
          <el-table-column label="海关商品名称" prop="hgspmc" :show-overflow-tooltip="true" />
          <el-table-column label="规格型号" prop="ggxh" :show-overflow-tooltip="true" />
          <el-table-column label="法定计量单位" prop="fdjldw" :show-overflow-tooltip="true" />
          <el-table-column label="法定单位数量" prop="cksl" :show-overflow-tooltip="true" />
          <el-table-column label="申报计量单位" prop="unit" :show-overflow-tooltip="true" />
          <el-table-column label="数量" prop="count" :show-overflow-tooltip="true" />
          <el-table-column label="币制" prop="paymentCurrency" :show-overflow-tooltip="true" />
          <el-table-column prop="price" label="销售单价" width="180" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ formatMoney(row.price) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="priceTotal" label="商品金额" width="150" :show-overflow-tooltip="true">
            <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 { codeChangeName, handleMoney } from '@/utils'
import { declarationFormDetail } from '@/api/myTrade/salesBill'
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', ['trade_terms'])
    this.getDetails()
  },
  methods: {
    getDetails() {
      declarationFormDetail({ id: 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>
