<template>
  <div class="app-container withdraw-detail">
    <div class="header-bar">
      <span class="header-title">{{ headerTitle }}</span>
      <span class="header-money">可提现金额：<em>{{ withdrawableText }}</em> 元</span>
    </div>

    <el-row class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="small"
          @click="handleExport"
          v-hasPermi="['company:companyMoneyLogsDetail:export']"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="tableList"
      border
      stripe
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="公司名称" prop="companyName" min-width="140" show-overflow-tooltip />
      <el-table-column label="所属销售" prop="salesName" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.salesName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="orderCode" min-width="160" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.orderCode || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="交易单号" prop="tradeNo" min-width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.tradeNo || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" min-width="100">
        <template slot-scope="scope">
            <template v-if="scope.row.orderStatusText != null && scope.row.orderStatusText !== ''">
                <el-tag
                    v-for="(item, index) in statusOptions"
                    :key="index"
                    v-if="scope.row.orderStatusText == item.dictValue"
                >{{ item.dictLabel }}</el-tag>
                <el-tag v-if="!statusOptions.some(i => scope.row.orderStatusText == i.dictValue)">{{ scope.row.orderStatusText || scope.row.orderStatus }}</el-tag>
            </template>
            <el-tag v-else>{{ scope.row.orderStatusText || '-' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="售后状态" prop="afterSalesStatusText" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.afterSalesStatusText || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="订单记录时间" prop="recordTime" min-width="170" align="center">
        <template slot-scope="scope">
          {{ formatRecordTime(scope.row.recordTime) }}
        </template>
      </el-table-column>
      <el-table-column label="明细类型" prop="detailTypeText" min-width="130" />
      <el-table-column label="金额" prop="amount" min-width="120" align="right" header-align="center">
        <template slot-scope="scope">
          <span :class="amountClass(scope.row.amount)">{{ formatAmount(scope.row.amount) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getWithdrawDetailSummary, listWithdrawDetail, exportWithdrawDetail } from '@/api/company/withdrawDetail'

export default {
  name: 'CompanyWithdrawDetail',
  data() {
    return {
      loading: true,
      companyName: '',
      withdrawableMoney: null,
      tableList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      statusOptions: []
    }
  },
  computed: {
    headerTitle() {
      return this.companyName || '—'
    },
    withdrawableText() {
      if (this.withdrawableMoney == null || this.withdrawableMoney === '') return '—'
      const n = Number(this.withdrawableMoney)
      if (Number.isNaN(n)) return String(this.withdrawableMoney)
      return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    }
  },
  created() {
    this.getDicts('store_order_status').then(res => {
      this.statusOptions = res.data || []
    })
    this.loadSummary()
    this.getList()
  },
  methods: {
    loadSummary() {
      getWithdrawDetailSummary().then(res => {
        this.companyName = res.companyName || ''
        this.withdrawableMoney = res.withdrawableMoney
      }).catch(() => {})
    },
    getList() {
      this.loading = true
      listWithdrawDetail(this.queryParams).then(response => {
        this.tableList = response.rows || []
        this.total = response.total || 0
        this.loading = false
        this.loadSummary()
      }).catch(() => {
        this.loading = false
      })
    },
    formatRecordTime(val) {
      if (!val) return '-'
      if (typeof val === 'string') {
        const norm = val.replace('T', ' ').replace(/-/g, '.')
        if (norm.length >= 19) {
          return norm.slice(0, 10) + '-' + norm.slice(11, 19)
        }
      }
      return this.parseTime(val, '{y}.{m}.{d}-{h}:{i}:{s}')
    },
    formatAmount(val) {
      if (val == null || val === '') return '-'
      const n = Number(val)
      if (Number.isNaN(n)) return String(val)
      const abs = Math.abs(n).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
      if (n > 0) return '+' + abs
      if (n < 0) return '-' + abs
      return '0.00'
    },
    amountClass(val) {
      if (val == null || val === '') return ''
      const n = Number(val)
      if (n < 0) return 'amt-neg'
      if (n > 0) return 'amt-pos'
      return ''
    },
    handleExport() {
      this.$confirm('是否确认导出全部提现明细？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return exportWithdrawDetail()
      }).then(response => {
        this.download(response.msg)
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.withdraw-detail .header-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}
.withdraw-detail .header-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.withdraw-detail .header-money {
  font-size: 14px;
  color: #606266;
}
.withdraw-detail .header-money em {
  font-style: normal;
  color: #f56c6c;
  font-weight: 600;
}
.withdraw-detail .amt-pos {
  color: #67c23a;
}
.withdraw-detail .amt-neg {
  color: #f56c6c;
}
</style>
