<template>
  <div class="sales-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" prop="orderNo">
          <el-input
            :value="ruleForm.orderNo"
            disabled
          />
        </el-form-item>
        <el-form-item label="进口商名称" prop="importerName">
          <el-input
            :value="ruleForm.importerName"
            disabled
          />
        </el-form-item>
        <el-form-item label="销售合同名称" prop="salesContractName">
          <el-input
            :value="ruleForm.salesContractName"
            disabled
          />
        </el-form-item>
        <el-form-item label="销售合同编号" prop="salesContractNo">
          <el-input
            :value="ruleForm.salesContractNo"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="exportType === 'proxy_export'" label="代理公司名称" prop="agencyName">
          <el-input
            :value="ruleForm.agencyName"
            disabled
          />
        </el-form-item>
        <el-form-item label="付款方式">
          <el-input
            :value="codeToName(constant.payment_way, ruleForm.paymentWay, 'dictValue', 'dictLabel')"
            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="salesOrderGoodsList"
            :count="0"
          />
        </div>

        <cy-info-title style="margin-top: 20px;">订单信息</cy-info-title>
        <el-form-item label="订单状态" prop="status">
          <el-input
            :value="codeToName(constant.sales_order_status, String(ruleForm.status), 'dictValue', 'dictLabel')"
            disabled
          />
        </el-form-item>
        <el-form-item label="订单金额" prop="amount">
          <el-input
            :value="ruleForm.amount ? '$ ' + formatMoney(ruleForm.amount) : ''"
            disabled
          />
        </el-form-item>

        <cy-info-title style="margin-top: 20px;">其他信息</cy-info-title>
        <div style="width: 100%;margin: 0;display: flex;">
          <el-form-item label="创建人" prop="createBy">
            <el-input
              :value="ruleForm.createBy"
              disabled
            />
          </el-form-item>
          <el-form-item label="创建时间" prop="gmtCreate">
            <el-input
              :value="ruleForm.gmtCreate"
              disabled
            />
          </el-form-item>
        </div>
        <div style="width: 100%;margin: 0;display: flex;">
          <el-form-item label="更新人" prop="updateBy">
            <el-input
              :value="ruleForm.updateBy"
              disabled
            />
          </el-form-item>
          <el-form-item label="更新时间" prop="gmtModified">
            <el-input
              :value="ruleForm.gmtModified"
              disabled
            />
          </el-form-item>
        </div>
      </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="物流公司" prop="logisticsCompany">
          <el-input
            :value="salesOrderLogistics?salesOrderLogistics.logisticsCompany:''"
            disabled
          />
        </el-form-item>
        <el-form-item label="发货时间" prop="deliverTime">
          <el-input
            :value="salesOrderLogistics?salesOrderLogistics.deliverTime: ''"
            disabled
          />
        </el-form-item>
        <el-form-item label="起运港" prop="fromPort">
          <el-input
            :value="salesOrderLogistics?salesOrderLogistics.fromPort:''"
            disabled
          />
        </el-form-item>
        <el-form-item label="目的港" prop="destPort">
          <el-input
            :value="salesOrderLogistics?salesOrderLogistics.destPort: ''"
            disabled
          />
        </el-form-item>
        <el-form-item label="提单号" prop="ladingBillNo">
          <el-input
            :value="salesOrderLogistics?salesOrderLogistics.ladingBillNo: ''"
            disabled
          />
        </el-form-item>
        <el-form-item label="提单" prop="ladingBillFileId">
          <cy-upload
            ref="ladingBillFileId"
            :file-data="salesOrderLogistics ? (salesOrderLogistics.ladingBillFile?[salesOrderLogistics.ladingBillFile]: [] ) : []"
            :upload-from-orange-status="true"
            :limit="1"
            disabled
          />
        </el-form-item>
        <el-form-item label="备注" prop="deliverRemark">
          <el-input
            :value="salesOrderLogistics?salesOrderLogistics.deliverRemark:''"
            disabled
          />
        </el-form-item>
        <div style="width: 100%; margin-top: 15px;" class="table-box">
          <el-table :data="salesOrderContainerList" style="width: 100%;">
            <el-table-column label="集装箱单号" prop="billNo" :show-overflow-tooltip="true" width="250" />
            <el-table-column prop="number" label="集装箱单">
              <template slot-scope="{ row }">
                <cy-upload
                  :file-data="row.file ? [row.file] : []"
                  :upload-from-orange-status="true"
                  :limit="1"
                  disabled
                />
              </template>
            </el-table-column>
          </el-table>
        </div>

        <cy-info-title>发票信息</cy-info-title>
        <el-form-item label="发票号码" prop="invoiceNo">
          <el-input
            :value="salesOrderInvoice ? salesOrderInvoice.invoiceNo : ''"
            disabled
          />
        </el-form-item>
        <el-form-item label="开票日期" prop="gmtCreate">
          <el-input
            :value="salesOrderInvoice ? salesOrderInvoice.gmtCreate : ''"
            disabled
          />
        </el-form-item>
        <el-form-item label="销售发票" prop="fileId">
          <cy-upload
            ref="ladingBillFileId"
            :file-data="salesOrderInvoice && salesOrderInvoice.file ? [salesOrderInvoice.file] : []"
            :upload-from-orange-status="true"
            :limit="1"
            disabled
          />
        </el-form-item>
        <el-form-item label="备注" prop="reamark">
          <el-input
            :value="salesOrderInvoice ? salesOrderInvoice.reamark : ''"
            disabled
          />
        </el-form-item>

        <cy-info-title v-if="exportType !== 'proxy_export'">收款信息</cy-info-title>
        <el-form-item v-if="exportType !== 'proxy_export'" label="收款金额" prop="amount">
          <el-input
            :value="salesOrderPayInfoVO ? (salesOrderPayInfoVO.amount ? '￥ ' + formatMoney(salesOrderPayInfoVO.amount) : '') : ''"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="exportType !== 'proxy_export'" label="收款日期" prop="gmtCreate">
          <el-input
            :value="salesOrderPayInfoVO ? salesOrderPayInfoVO.date : ''"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="exportType !== 'proxy_export'" label="收款账户名" prop="accountName">
          <el-input
            :value="salesOrderPayInfoVO?salesOrderPayInfoVO.accountName: ''"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="exportType !== 'proxy_export'" label="收款账号" prop="accountNumber">
          <el-input
            :value="salesOrderPayInfoVO? salesOrderPayInfoVO.accountNumber : ''"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="exportType !== 'proxy_export'" label="开户行" prop="openingBank">
          <el-input
            :value="salesOrderPayInfoVO?salesOrderPayInfoVO.openingBank: ''"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="exportType !== 'proxy_export'" label="Swift Code" prop="swiftCode">
          <el-input
            :value="salesOrderPayInfoVO?salesOrderPayInfoVO.swiftCode: ''"
            disabled
          />
        </el-form-item>
      </div>
    </el-form>

    <div class="submit-btn">
      <el-button v-if="ruleForm.status == '0'" type="danger" @click="handleDel">删除</el-button>
      <el-button @click="() => { $router.push({name: 'SalesBill'}) }">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { handleMoney, codeChangeName } from '@/utils'
import { getMyEnterprise } from '@/api/myTrade/salesContract'
import { getSalesOrderDetail, deleteSaleOrder } from '@/api/myTrade/salesBill'
export default {
  name: 'SalesOrderView',
  components: {
  },
  data() {
    return {
      ruleForm: {

      },
      rules: {

      },
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '供应商名称',
          showTooltip: true,
          prop: 'vendorName'
        },
        {
          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: 'unit'
        },
        {
          label: '包装规格',
          showTooltip: true,
          prop: 'packingSpecifications'
        },
        {
          label: '数量',
          showTooltip: true,
          prop: 'count',
          render: (h, row) => {
            return <div> <el-tooltip class='item' effect='dark' content={String(row.count)} placement='top'>
              <div class='one-ellipsis'>
                {String(row.count)}
              </div>
            </el-tooltip></div>
          }
        },
        {
          label: '销售单价 (USD)',
          showTooltip: true,
          prop: 'price',
          render: (h, row) => {
            return <div> <el-tooltip class='item' effect='dark' content={handleMoney(row.price)} placement='top'>
              <div class='one-ellipsis'>
                {handleMoney(row.price)}
              </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: '商品金额 (USD)',
          showTooltip: true,
          prop: 'priceTotal',
          render: (h, row) => {
            return <div> <el-tooltip class='item' effect='dark' content={handleMoney(row.priceTotal)} placement='top'>
              <div class='one-ellipsis'>
                {handleMoney(row.priceTotal)}
              </div>
            </el-tooltip></div>
          }
        }
      ],
      exportType: '',
      salesOrderGoodsList: [],
      salesOrderLogistics: {
        ladingBillFileId: []
      },
      salesOrderContainerList: [],
      salesOrderInvoice: {
        fileId: []
      },
      salesOrderPayInfoVO: {},

      step: 'first'
    }
  },
  computed: {
    ...mapGetters([
      'constant', 'enterpriseInfo'
    ]),
    formatMoney() {
      return (val) => {
        return handleMoney(val)
      }
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['export_type', 'payment_way', 'sales_order_status'])
    // 代理出口 || 内资生产企业 外商投资生产企业 --无供应商列
    if (this.enterpriseInfo.exportType === 'proxy_export' || (this.enterpriseInfo.exportType === 'self_export' && ['1', '2'].includes(this.enterpriseInfo.enterpriseType))) {
      this.columns = this.columns.slice().filter(el => el.label !== '供应商名称')
    }

    // this.queryMyEnterprice()
    Promise.all([
      this.queryMyEnterprice()
    ]).then(results => {
      this.getDetails()
    })
      .catch(error => { console.log(error) })
  },
  methods: {
    getDetails() {
      const { id } = this.$route.query
      getSalesOrderDetail({ id: id, is4Update: false }).then(res => {
        const { data } = res
        this.ruleForm = data.salesOrderVO
        this.salesOrderGoodsList = data.salesOrderGoodsList
        this.salesOrderLogistics = data.salesOrderLogistics
        this.salesOrderContainerList = data.salesOrderContainerList
        this.salesOrderInvoice = data.salesOrderInvoice
        this.salesOrderPayInfoVO = data.salesOrderPayInfoVO
      })
    },

    handleDel() {
      this.$confirm('是否确认删除该订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deleteSaleOrder({ id: this.$route.query.id })

        if (res.success) {
          this.$message.success('删除成功')
          this.$router.go(-1)
        }
      }).catch(() => {})
    },

    // 查询企业
    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>
  .sales-order-view {
      padding: 10px 20px;
      .sales-order-step {
        width: 50%;
        margin: 0 auto 20px;
      }
  }
  </style>
