<template>
  <div class="my-receive-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="申报年月">
        <el-input :value="ruleForm.declarationMonthYear" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="申报批次">
        <el-input :value="ruleForm.declarationBatch" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="报关单号">
        <el-input :value="ruleForm.customsDeclarationNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="报关单">
        <cy-upload
          :file-data="ruleForm.customsDeclarationFile ? [ruleForm.customsDeclarationFile] : []"
          :upload-from-orange-status="true"
          disabled
        />
      </el-form-item>
      <el-form-item label="销售订单ID">
        <el-input :value="ruleForm.salesOrderNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="销售合同编号">
        <el-input :value="ruleForm.salesContractNo" :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.agencyName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="出口发票号码">
        <el-input :value="ruleForm.proformaInvoiceNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="出口总额">
        <el-input :value="ruleForm.fobPriceUsd ? '$ ' + formatMoney(ruleForm.fobPriceUsd) : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="出口数量">
        <el-input :value="ruleForm.exportQuantity" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="出口日期">
        <el-input :value="ruleForm.exportDate" :disabled="disabled" />
      </el-form-item>
      <el-form-item v-if="'3'.includes($store.state.user.enterpriseInfo.enterpriseType)" label="采购发票 (张) ">
        <el-input :value="ruleForm.purchaseInvoiceCount" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="退税总额">
        <el-input :value="ruleForm.taxRefundAmount ? '￥ ' + formatMoney(ruleForm.taxRefundAmount) : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="退税状态">
        <el-input :value="codeToName(constant.rebate_process_status, ruleForm.status, 'dictValue', 'dictLabel')" :disabled="disabled" />
      </el-form-item>
      <cy-info-title>出口明细</cy-info-title>
      <div style="width: 100%; margin-top: 15px;" class="table-box">
        <el-table :data="exportDetailList" style="width: 100%;">
          <el-table-column label="申报序号" type="declarationSerialNo" width="50" />
          <el-table-column label="HS编码" prop="hsCode" :show-overflow-tooltip="true" />
          <el-table-column label="报关品名" prop="exportCommodityName" :show-overflow-tooltip="true" />
          <el-table-column label="法定计量单位" prop="measurementUnit" :show-overflow-tooltip="true" />
          <el-table-column label="出口数量" prop="exportQuantity" :show-overflow-tooltip="true" />
          <el-table-column label="商品金额 " prop="fobPriceUsd" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              {{ '$ ' + row.fobPriceUsd }}
            </template>
          </el-table-column>
          <el-table-column label="退税额" prop="taxRefundAmount" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              {{ '￥ ' + row.taxRefundAmount }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template v-if="!'1,2'.includes($store.state.user.enterpriseInfo.enterpriseType)">
        <cy-info-title>进货明细</cy-info-title>
        <div style="width: 100%; margin-top: 15px;" class="table-box">
          <el-table :data="purchaseDetailList" style="width: 100%;">
            <el-table-column label="采购订单ID" type="purchaseOrderNo" width="50" />
            <el-table-column label="发票类型" prop="voucherTypeName" :show-overflow-tooltip="true" />
            <el-table-column label="发票号码" prop="purchaseVoucherNo" :show-overflow-tooltip="true" />
            <el-table-column label="开票日期" prop="invoiceDate" :show-overflow-tooltip="true" />
            <el-table-column label="HS编码" prop="hsCode" :show-overflow-tooltip="true" />
            <el-table-column label="报关品名 " prop="exportCommodityName" :show-overflow-tooltip="true" />
            <el-table-column label="计量单位" prop="measurementUnit" :show-overflow-tooltip="true" />
            <el-table-column label="数量" prop="exportQuantity" :show-overflow-tooltip="true" />
            <el-table-column label="金额 (不含税)" prop="taxBaseAmount" :show-overflow-tooltip="true">
              <template slot-scope="{ row }">
                {{ '￥ ' + row.taxBaseAmount }}
              </template>
            </el-table-column>
            <el-table-column label="征税率 (%)" prop="addedTaxRate" :show-overflow-tooltip="true" />
            <el-table-column label="税额" prop="taxRefundableAmount" :show-overflow-tooltip="true">
              <template slot-scope="{ row }">
                {{ '￥ ' + row.taxRefundableAmount }}
              </template>
            </el-table-column>
            <el-table-column label="退税率 (%)" prop="exportTaxRebateRate" :show-overflow-tooltip="true" />
          </el-table>
        </div>
      </template>
    </el-form>

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

<script>
import { mapGetters } from 'vuex'
import { handleMoney, codeChangeName } from '@/utils'
import { taxDetail } from '@/api/myApplication/exportTax'
export default {
  name: 'ReceiveView',
  components: {
  },
  data() {
    return {
      ruleForm: {},
      exportDetailList: [],
      purchaseDetailList: [],
      rules: {

      },
      disabled: true
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ]),
    formatMoney() {
      return (val) => {
        return handleMoney(val)
      }
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['rebate_process_status'])
    this.getDetails()
  },
  methods: {
    getDetails() {
      taxDetail({
        customerUserId: this.$route.query.cid,
        salesOrderNo: this.$route.query.sid,
        declarationMonthYear: this.$route.query.dTime,
        declarationBatch: this.$route.query.db,
        customsDeclarationNo: this.$route.query.cdId,
        proformaInvoiceNo: this.$route.query.pn,
        exportDate: this.$route.query.eTime,
        status: this.$route.query.sta
      }).then(res => {
        const { data } = res
        this.ruleForm = data || {}
        this.exportDetailList = data.exportDetailList || []
        this.purchaseDetailList = data.purchaseDetailList || []
      })
    },

    codeToName(list, type, code, name) {
      return codeChangeName(list, type, code, name)
    }
  }
}
</script>

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