<template>
  <div class="refund-detail-container">
    <el-card v-if="settlement">
      <el-row :gutter="0">
        <el-col :span="4">结算单号</el-col>
        <el-col :span="8">
          {{ settlement.sn }}
        </el-col>
        <el-col :span="4">起止日期</el-col>
        <el-col :span="8">{{ settlement.start_time | unixToDate }} - {{ settlement.end_time | unixToDate }}</el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="4">出账日期</el-col>
        <el-col :span="8">{{ settlement.create_time | unixToDate }}</el-col>
        <el-col :span="4">制单人</el-col>
        <el-col :span="8">{{ settlement.creator || '无' }}</el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="4">供应商</el-col>
        <el-col :span="20">{{ settlement.supplier_name || '无' }}</el-col>
      </el-row>
    </el-card>
    <el-card v-loading="loading_order" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>订单列表</span>
      </div>
      <en-table-layout :tableData="settlement.warehouse_entry_list" :toolbar="false">
        <template slot="table-columns">
          <el-table-column prop="sn" label="入库单编号">
            <template slot-scope="scope">
              <router-link
                v-if="checkPermission(['purchaseWarehousing'])"
                style="color: #409eff;"
                :to="{ name: 'purchaseWarehousingDetail', params: { id: scope.row.id } }">
                {{ scope.row.sn }}
              </router-link>
              <span v-else>{{scope.row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库日期">
            <template slot-scope="scope">{{ scope.row.entry_time | unixToDate }}</template>
          </el-table-column>
          <el-table-column prop="dept_name" label="所属部门" />
          <el-table-column prop="warehouse_name" label="仓库" />
          <el-table-column prop="supplier_name" label="供应商" />
        </template>
      </en-table-layout>
    </el-card>
  </div>
</template>

<script>
import * as API_Supplier from '@/api/supplier'

export default {
  name: 'settlementDetail',
  data() {
    return {
      // 结算单详情
      settlement: '',
      batch_list: [],
      /** 订单sn */
      id: this.$route.params.id
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (newVal.name !== 'settlementDeatil') return
        this.id = newVal.params.id
        if (!this.id) return
        this.GET_SettlementDetail()
      }
    }
  },
  methods: {
    /** 获取售后订单详情 */
    GET_SettlementDetail() {
      API_Supplier.getsupplierSettlementInfo(this.id).then(response => {
        this.settlement = response
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.refund-detail-container {
  padding: 10px;
  font-size: 12px;
  background-color: #fff;
}

.el-row {
  border-bottom: 1px solid #ebeef5;
  position: relative;
}

.el-col {
  padding: 10px;
  position: relative;

  &:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #ebeef5;
  }
}

/deep/ .el-card__body {
  margin: 10px;
  padding: 0;
  border: 1px solid #ebeef5;
  border-bottom: 0;
}

.refund-btn {
  position: relative;
  top: -1px;
  margin-left: 5px;
}

.refund-tip {
  color: red;
  font-size: 12px;
  margin: 5px 0 0 0;
  padding: 0;
}

.equal,
.plus,
.minus {
  font-weight: 700;
  font-style: normal;
}

// 等于
.equal {
  color: #409EFF
}

// 加
.plus {
  color: #67C23A
}

// 减
.minus {
  color: #F56C6C
}
</style>

