<template>
  <div class="purchase-order-view">

    <el-tabs v-model="step" type="card">
      <el-tab-pane label="订单信息" name="first" />
      <el-tab-pane label="相关单据" name="second" />
    </el-tabs>

    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <div v-show="step === 'first'" style="display: flex; width: 100%;flex-wrap: wrap;">
        <cy-info-title>基础信息</cy-info-title>
        <el-form-item label="采购订单ID">
          <el-input :value="ruleForm.purchaseOrderNo" :disabled="disabled" />
        </el-form-item>
        <el-form-item v-if="enterpriseInfo.exportType == 'self_export' && enterpriseInfo.enterpriseType !== '1' && enterpriseInfo.enterpriseType !== '2'" label="供应商名称">
          <el-input :value="ruleForm.vendorEntityName" :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="相关销售订单ID">
          <el-input :value="ruleForm.salesOrderNo" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="结算账期">
          <el-input
            :value="ruleForm.settlementCycle ? ruleForm.settlementCycle + '天' : ''"
            disabled
          />
        </el-form-item>

        <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>
      </div>

      <!-- danju -->
      <div v-show="step === 'second'" style="display: flex; width: 100%;flex-wrap: wrap;">
        <cy-info-title>物流信息</cy-info-title>
        <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.deliveryTime: ''" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="运输证明" prop="transportCertificateFileId">
          <cy-upload
            ref="transportCertificateFileId"
            :file-data="logisticsVo?[logisticsVo.purchaseOrderTransProve]: ''"
            :upload-from-orange-status="true"
            :limit="1"
            :file-size="20"
            disabled
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input :value="logisticsVo?logisticsVo.remark: ''" :disabled="disabled" />
        </el-form-item>

        <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>
      </div>
    </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 { getMyEnterprise } from '@/api/myTrade/salesContract'
import { getOrderDetail } from '@/api/myTrade/purchaseBill'
export default {
  name: 'PurchaseOrderView',
  components: {
  },
  data() {
    return {
      ruleForm: {

      },
      rules: {

      },
      logisticsVo: {},
      purchaseAcountVo: {},
      columns: [
        {
          label: '序号',
          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: '增值税税率（%）',
          showTooltip: true,
          prop: 'taxRefundRate',
          render: (h, row) => {
            return <div> <el-tooltip class='item' effect='dark' content={Number(row.taxRefundRate) * 100} placement='top'>
              <div class='one-ellipsis'>
                {Number(row.taxRefundRate) * 100}
              </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: [],

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

    Promise.all([
      this.queryMyEnterprice()
    ]).then(results => {
      this.getDetails()
    })
      .catch(error => { console.log(error) })
  },
  methods: {
    getDetails() {
      const { id } = this.$route.query
      getOrderDetail({ id: id }).then(res => {
        const { data } = res
        this.ruleForm = data
        this.goodsInfoList = data.commodityList
        this.logisticsVo = data.logisticsVo
        this.purchaseAcountVo = data.purchaseAcountVo
      })
    },

    // 查询企业
    async queryMyEnterprice() {
      const res = await getMyEnterprise()
      if (res.success) {
        this.exportType = res.data.exportType
      }
    },

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

  <style lang="scss" scoped>
  .purchase-order-view {
      padding: 10px 20px;
      .sales-order-step {
        width: 50%;
        margin: 0 auto 20px;
      }
  }
  </style>
