<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch :loading="loading" :search-form="searchForm" @onValueChange="onValueChange" @submit="onSubmit"/>
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="false"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
    />

    <Dialog
      ref="dialogLog"
      :dialog-actions="{
        width: '800px',
        title: '余额宝日志',
        confirmButtom: false // 仅用于查看，隐藏底部的确定按钮
      }"
    >
      <template slot="content">
        <el-table :data="logTableData" border stripe height="400px" v-loading="logLoading">
          <!-- <el-table-column prop="id" label="日志ID" align="center" width="80" />
          <el-table-column prop="item_id" label="持仓ID" align="center" width="80" /> -->
          <el-table-column prop="type" label="操作类型" align="center" />
          <el-table-column prop="amount" label="操作金额" align="center" />
          <el-table-column prop="hold_hours" label="持有时间(小时)" align="center" />
          <el-table-column prop="interest" label="利息" align="center" />
          <el-table-column label="创建时间" align="center" width="160">
            <template slot-scope="scope">
              {{ formatDate(scope.row.create_time) }}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/components/Dialog/index.vue'
import { yuebaoLog } from '@/api/data'

export default {
  name: 'YuebaoItem',
  components: {
    Dialog
  },
  data() {
    return {
      loading: false,
      // 搜索表单配置
      searchForm: [
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          clearable: true
        },
         {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
        {
          label: '时间范围',
          type: 'daterange',
          prop: 'dateRange',
          clearable: true
        }
      ],
      // 列表接口配置
      apis: {
        list: {
          url: 'yuebao/item',
          dataParam: 'data.data',
          resultParam: 'data',
          init: true // 页面加载时自动请求列表
        }
      },
      // 列表操作列配置
      rowsActions: [
        {
          key: 'log',
          label: '查看日志',
          method: (row) => {
            this.logTableData = []
            this.$refs.dialogLog.open()
            // 取当前行的 user_id 查询日志
            this.getLogList(row.user_id)
          }
        }
      ],
      // 列表展示字段
      columns: [
        {
          label: '记录ID',
          prop: 'id'
        },
        {
          label: '会员ID',
          prop: 'member_id'
        },
         {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
        {
          label: '状态',
          prop: 'status',
          method: (row) => row.status === 1 ? '持仓中' : '已转出'
        },
        {
          label: '初始本金',
          prop: 'principal'
        },
        {
          label: '剩余本金',
          prop: 'surplus_principal'
        },
        {
          label: '日利率',
          prop: 'daily_interest_rate'
        },
        {
          label: '创建时间',
          prop: 'create_time',
          sortable: 'custom',
          method: (row) => this.formatDate(row.create_time),
          width: 160
        },
        {
          label: '更新时间',
          prop: 'update_time',
          method: (row) => this.formatDate(row.update_time),
          width: 160
        }
      ],
      // 日志弹窗数据
      logTableData: [],
      logLoading: false,
    }
  },
  methods: {
    onValueChange(val) {
      // 搜索表单值变动时的回调
    },
    onSubmit(params = {}) {
      const queryParams = { ...params }
      
      // 处理 daterange 日期范围，将其转换为接口需要的 start_time 和 end_time
      if (queryParams.dateRange && queryParams.dateRange.length === 2) {
        queryParams.start_time = queryParams.dateRange[0]
        queryParams.end_time = queryParams.dateRange[1]
      }
      delete queryParams.dateRange

      this.$refs.table.getList(queryParams)
    },
    getLogList(userId) {
      this.logLoading = true
      // 调用查看日志接口
      yuebaoLog({ user_id: userId })
        .then(res => {
          this.logTableData = res.data?.data || []
          this.logLoading = false
        })
        .catch(() => {
          this.logLoading = false
        })
    },
    // 时间戳格式化转换
    formatDate(timestamp) {
      if (!timestamp) return '--'
      const d = new Date(timestamp * 1000)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const date = String(d.getDate()).padStart(2, '0')
      const hours = String(d.getHours()).padStart(2, '0')
      const minutes = String(d.getMinutes()).padStart(2, '0')
      const seconds = String(d.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
    }
  }
}
</script>