<!-- 用户提现记录 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <div class="title">用户提现记录</div>
      <div class="row" style="margin-top: 34px;">
        <el-form inline>
          <el-form-item>
            <el-date-picker style="width: 300px" v-model="times" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
              @change="selectTimeChange"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <selectUser v-model="queryForm.userId" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">搜索</el-button>
            <el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="row">
        <div class="info_wrap">
          <div class="item">
            <div class="icon">
              <img class="img" src="@/assets/fenxiao/9.png">
            </div>
            <div class="info">
              <div>提现中</div>
              <div>{{ multiplyAndFormat(pending || 0) }}</div>
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img class="img" src="@/assets/fenxiao/10.png">
            </div>
            <div class="info">
              <div>成功提现</div>
              <div>{{ multiplyAndFormat(finish || 0) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt14">
        <el-table :data="tableData.list" stripe border v-loading="tableData.loading" height="48vh">
          <el-table-column label="用户" prop="nickName" width="200">
            <template #default="scope">
              <div class="column">
                <div>{{ scope.row.nickName }}</div>
                <div>{{ scope.row.phone }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="提现金额(元)" prop="amount" width="200">
            <template #default="scope">
              {{ multiplyAndFormat((scope.row.amount + scope.row.serviceFee) || 0) }}
            </template>
          </el-table-column>
          <el-table-column label="手续费(元)" prop="serviceFee">
            <template #default="scope">
              {{ multiplyAndFormat(scope.row.serviceFee || 0) }}
            </template>
          </el-table-column>
          <el-table-column label="实际到账（元）" prop="amount">
            <template #default="scope">
              {{ multiplyAndFormat(scope.row.amount || 0) }}
            </template></el-table-column>
          <el-table-column label="提现时间" prop="createTime"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              <el-tag disable-transitions :type="statusList.find(item => item.value == scope.row.status).type">
                {{statusList.find(item => item.value == scope.row.status).label}}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="row mt14">
        <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
          :page-sizes="[10, 20, 50, 100, 500]" background layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, reactive, onMounted } from 'vue'
import selectUser from '@/views/marketing_center/components/selectUser.vue';
import { multiplyAndFormat } from '@/utils'
import { distributionWithdrawFlow } from '@/api/coupon'

const pending = ref(0)
const finish = ref(0)
const statusList = ref([
  {
    value: 'pending',
    label: '提现中',
    type: 'primary'
  },
  {
    value: 'success',
    label: '可提现',
    type: 'success'
  },
  {
    value: 'finish',
    label: '已完成',
    type: 'info'
  }
])

const queryForm = ref({
  userId: '',
  startTime: '',
  endTime: ''
})

function searchHandle() {
  tableData.page = 1;
  getTableData()
}

function resetHandle() {
  queryForm.value.userId = ''
  queryForm.value.startTime = ''
  queryForm.value.endTime = ''
  times.value = []
  searchHandle()
}

const tableData = reactive({
  loading: false,
  page: 1,
  size: 10,
  total: 0,
  list: []
})

// 选择日期
const times = ref([])
function selectTimeChange(e) {
  queryForm.value.startTime = dayjs(e[0]).format('YYYY-MM-DD 00:00:00')
  queryForm.value.endTime = dayjs(e[1]).format('YYYY-MM-DD 23:59:59')
}

// 分页大小发生变化
function handleSizeChange(e) {
  tableData.size = e;
  getTableData();
}

// 分页发生变化
function handleCurrentChange(e) {
  tableData.page = e;
  getTableData();
}

async function getTableData() {
  try {
    tableData.loading = true
    const res = await distributionWithdrawFlow({
      ...queryForm.value,
      page: tableData.page,
      size: tableData.size
    })
    tableData.list = res.records
    tableData.total = res.totalRow
    pending.value = res.pending
    finish.value = res.finish
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false
  }, 500);
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.title {
  padding: 10px 0 20px 0;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ececec;
}

.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.info_wrap {
  display: flex;
  gap: 48px;

  .item {
    display: flex;
    align-items: center;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    padding: 0 10px;

    .icon {
      width: 44px;
      height: 44px;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      flex: 1;
      padding: 10px;
    }
  }
}

.column {
  display: flex;
  flex-direction: column;
}
</style>