<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="codeToName(constant.payable_accounts_payment_type, ruleForm.payableAccountInfo.paymentType, 'dictValue', 'dictLabel')" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="应付金额">
        <el-input :value="ruleForm.payableAccountInfo.paymentAmount ? ruleForm.payableAccountInfo.paymentCurrency + ' ' + formatMoney(ruleForm.payableAccountInfo.paymentAmount) : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="支付状态">
        <el-input :value="codeToName(constant.payable_accounts_payment_status, ruleForm.payableAccountInfo.status, 'dictValue', 'dictLabel')" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="产生时间">
        <el-input :value="ruleForm.payableAccountInfo.gmtCreate ? ruleForm.payableAccountInfo.gmtCreate.split(' ')[0] : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款截止时间">
        <el-input :value="ruleForm.payableAccountInfo.paymentDeadline ? ruleForm.payableAccountInfo.paymentDeadline.split(' ')[0] : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="支付时间">
        <el-input :value="ruleForm.payableAccountInfo.paymentTime ? ruleForm.payableAccountInfo.paymentTime.split(' ')[0] : ''" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款凭证号">
        <el-input :value="ruleForm.payableAccountInfo.voucherNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="付款凭证">
        <cy-upload
          :file-data="ruleForm.payableAccountsFile ? [ruleForm.payableAccountsFile] : []"
          :upload-from-orange-status="true"
          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 { detail } from '@/api/myAccounts/payment'
export default {
  name: 'ReceiveView',
  components: {
  },
  data() {
    return {
      ruleForm: {
        payableAccountInfo: {},
        payableAccountsFile: null
      },
      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', ['ledger_type', 'payer_type'])

    this.getDetails()
  },
  methods: {
    getDetails() {
      const { id } = this.$route.query
      detail({ id: id }).then(res => {
        const { data } = res
        this.ruleForm.payableAccountInfo = data.payableAccountInfo || {}
        this.ruleForm.payableAccountsFile = data.payableAccountsFile
      })
    },

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

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