<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="purchaseAcountVo.accountName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="款项类型">
        <el-input :value="purchaseAcountVo.accountNumber" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款时间">
        <el-input :value="purchaseAcountVo.openingBank" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="收款账户名">
        <el-input :value="purchaseAcountVo.accountName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="收款账号">
        <el-input :value="purchaseAcountVo.accountNumber" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="开户行">
        <el-input :value="purchaseAcountVo.openingBank" :disabled="disabled" />
      </el-form-item>

      <cy-info-title>
        贸易基础信息</cy-info-title>
      <el-form-item label="销售合同编号">
        <el-input :value="ruleForm.purchaseOrderNo" :disabled="disabled" />
      </el-form-item>

      <el-form-item label="销售合同名称">
        <el-input :value="ruleForm.purchaseContractName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="进口商名称">
        <el-input :value="ruleForm.purchaseContractNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item v-if="exportType === 'proxy_export'" label="代理公司名称">
        <el-input :value="ruleForm.agencyEnterpriseName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="采购合同编号">
        <el-input :value="ruleForm.salesOrderNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="采购合同名称">
        <el-input
          :value="ruleForm.settlementCycle"
          disabled
        />
      </el-form-item>

      <div style="width: 100%; margin-top: 15px;" class="table-box">
        <el-table :data="selectedGoods" style="width: 100%;">
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column label="销售订单ID" 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="declarationName" :show-overflow-tooltip="true" />
          <el-table-column label="资料内容" prop="model" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <cy-upload
                :file-data="[row.file]"
                :upload-from-orange-status="true"
                :limit="1"
                disabled
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

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

      <cy-info-title style="margin-top: 20px;">订单信息</cy-info-title>
      <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>

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

<script>
import { mapGetters } from 'vuex'
import { handleMoney, codeChangeName } from '@/utils'
import { getReceiveDetail } from '@/api/myAccounts/receive'
export default {
  name: 'MyReceiveView',
  components: {
  },
  data() {
    return {
      ruleForm: {

      },
      rules: {

      },
      logisticsVo: {},
      purchaseAcountVo: {},
      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: []

    }
  },
  computed: {
    ...mapGetters([
      'constant', 'enterpriseInfo'
    ]),
    formatMoney() {
      return (val) => {
        return handleMoney(val)
      }
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['export_type', 'payment_way', 'sales_order_status'])

    this.getDetails()
  },
  methods: {
    getDetails() {
      const { id } = this.$route.query
      getReceiveDetail({ id: id }).then(res => {
        const { data } = res
        this.ruleForm = data
        this.goodsInfoList = data.commodityList
        this.logisticsVo = data.logisticsVo
        this.purchaseAcountVo = data.purchaseAcountVo
      })
    },

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

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