<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.billingDisbursement.businessNumber" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="款项类型">
        <el-input :value="codeToName(constant.ledger_type, ruleForm.billingDisbursement.paymentType, 'dictValue', 'dictLabel')" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="收款金额">
        <el-input :value="ruleForm.billingDisbursement.paymentAmount ? ruleForm.billingDisbursement.paymentCurrency + ' ' + formatMoney(ruleForm.billingDisbursement.paymentAmount) : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款方类型">
        <el-input :value="codeToName(constant.payer_type, ruleForm.billingDisbursement.payerType, 'dictValue', 'dictLabel')" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款方名称">
        <el-input :value="ruleForm.billingDisbursement.payerName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款日期">
        <el-input :value="ruleForm.billingDisbursement.paymentDate ? ruleForm.billingDisbursement.paymentDate.split(' ')[0] : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="收款凭证号">
        <el-input :value="ruleForm.billingDisbursement.voucherNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="收款凭证">
        <cy-upload
          :file-data="attachments"
          :upload-from-orange-status="true"
          disabled
        />
      </el-form-item>
      <el-form-item label="收款银行账号">
        <el-input :value="ruleForm.paymentExtendDto.accountNumber" :disabled="disabled" />
      </el-form-item>
      <template v-if="'2,3,5,6'.includes(ruleForm.billingDisbursement.paymentType)">
        <cy-info-title>贸易基础信息</cy-info-title>
        <el-form-item label="销售合同编号">
          <el-input :value="ruleForm.billingDisbursement.salesContractNo" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="销售合同名称">
          <el-input :value="ruleForm.billingDisbursement.contractName" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="进口商名称">
          <el-input :value="ruleForm.billingDisbursement.importerEnterpriseName" :disabled="disabled" />
        </el-form-item>
        <!-- <el-form-item v-if="exportType === 'proxy_export'" label="代理公司名称"> -->
        <el-form-item label="代理公司名称">
          <el-input :value="ruleForm.billingDisbursement.agencyEnterpriseName" :disabled="disabled" />
        </el-form-item>
        <cy-info-title>销售合同项下已收款的订单列表</cy-info-title>
        <div style="width: 100%; margin-top: 15px;" class="table-box">
          <el-table :data="ruleForm.orderListInfo" style="width: 100%;">
            <el-table-column label="序号" type="index" width="50" />
            <el-table-column label="销售订单ID" prop="orderNo" :show-overflow-tooltip="true" />
            <el-table-column label="预计货款到期日" prop="expectedPaymentDueDate" :show-overflow-tooltip="true" />
            <el-table-column label="商品总金额" prop="documentName" :show-overflow-tooltip="true">
              <template slot-scope="{ row }">
                {{ row.currency + ' ' + row.amount }}
              </template>
            </el-table-column>
            <el-table-column label="本次实际收款金额" prop="documentDate" :show-overflow-tooltip="true">
              <template slot-scope="{ row }">
                {{ row.currency + ' ' + row.actualAmount }}
              </template>
            </el-table-column>
            <el-table-column label="补充协议文件 " prop="documentFile" :show-overflow-tooltip="true">
              <template slot-scope="{ row }">
                <cy-upload
                  :file-data="row.supplementaryAgreementDocument ? [row.supplementaryAgreementDocument] : []"
                  :upload-from-orange-status="true"
                  disabled
                />
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
          </el-table>
        </div>
      </template>

      <!-- <cy-info-title style="margin-top: 20px;">融资底层商品信息</cy-info-title>
      <div style="width: 100%;margin: 0;">
        <cy-comm-table
          ref="ReceiveView"
          :columns="columns"
          :data="goodsInfoList"
          :count="0"
        />
      </div>

      <el-form-item label="融资商品总额" prop="amountTotal">
        <el-input
          :value="ruleForm.amountTotal ? '￥ ' + formatMoney(ruleForm.amountTotal) : ''"
          disabled
        />
      </el-form-item>
      <el-form-item label="融资本金" prop="taxAmountTotal">
        <el-input
          :value="ruleForm.taxAmountTotal ? '￥ ' + formatMoney(ruleForm.taxAmountTotal) : ''"
          disabled
        />
      </el-form-item>

      <el-form-item label="融资利率（%）">
        <el-input :value="logisticsVo?logisticsVo.companyName: ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="融资期限（天）">
        <el-input :value="logisticsVo?logisticsVo.logisticsOrderNumber: ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="融资起算日">
        <el-input :value="logisticsVo?logisticsVo.logisticsOrderNumber: ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="逾期利率（%）">
        <el-input :value="logisticsVo?logisticsVo.companyName: ''" :disabled="disabled" />
      </el-form-item> -->
    </el-form>

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

<script>
import { mapGetters } from 'vuex'
import { handleMoney, codeChangeName } from '@/utils'
import { getReceiveDetail } from '@/api/myAccounts/receive'
export default {
  name: 'ReceiveView',
  components: {
  },
  data() {
    return {
      ruleForm: {
        billingDisbursement: {},
        paymentExtendDto: {},
        orderListInfo: []
      },
      rules: {

      },
      logisticsVo: {},
      columns: [
        {
          label: '采购订单ID',
          index: true
        },
        {
          label: '销售订单ID',
          index: true
        },
        {
          label: 'HS编码',
          showTooltip: true,
          prop: 'hsCode'
        },
        {
          label: '商品名称',
          showTooltip: true,
          prop: 'name'
        },
        {
          label: '报关品名',
          showTooltip: true,
          prop: 'declarationName'
        },
        {
          label: '型号',
          showTooltip: true,
          prop: 'model'
        },
        {
          label: '申报计量单位',
          showTooltip: true,
          prop: 'measurementUnit'
        },
        {
          label: '包装规格',
          showTooltip: true,
          prop: 'packSpec'
        },
        {
          label: '数量',
          showTooltip: true,
          prop: 'number',
          render: (h, row) => {
            return <div> <el-tooltip class='item' effect='dark' content={String(row.number)} placement='top'>
              <div class='one-ellipsis'>
                {String(row.number)}
              </div>
            </el-tooltip></div>
          }
        },
        {
          label: '采购单价(CNY)',
          showTooltip: true,
          prop: 'priceUnit',
          render: (h, row) => {
            return <div> <el-tooltip class='item' effect='dark' content={handleMoney(row.priceUnit)} placement='top'>
              <div class='one-ellipsis'>
                {handleMoney(row.priceUnit)}
              </div>
            </el-tooltip></div>
          }
        },
        {
          label: '商品金额 (CNY)',
          showTooltip: true,
          prop: 'amount',
          render: (h, row) => {
            return <div> <el-tooltip class='item' effect='dark' content={handleMoney(row.amount)} placement='top'>
              <div class='one-ellipsis'>
                {handleMoney(row.amount)}
              </div>
            </el-tooltip></div>
          }
        }
      ],
      disabled: true,
      exportType: '',
      goodsInfoList: [],
      attachments: [],
      remark: ''
    }
  },
  computed: {
    ...mapGetters([
      'constant', 'enterpriseInfo'
    ]),
    formatMoney() {
      return (val) => {
        return handleMoney(val)
      }
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['ledger_type', 'payer_type'])

    this.getDetails()
  },
  methods: {
    getDetails() {
      const { id } = this.$route.query
      getReceiveDetail({ id: id }).then(res => {
        const { data } = res
        this.ruleForm.billingDisbursement = data.billingDisbursement || {}
        this.ruleForm.paymentExtendDto = data.paymentExtendDto || {}
        this.ruleForm.orderListInfo = data.orderListInfo || []
        this.attachments = data.attachments || []
        this.remark = data.remark || ''
      })
    },

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

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