<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"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :alertTip="alertTip"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
      @onResponse="onResponse"
    />
    <!-- 自定义弹窗 -->
    <Dialog ref="dialog">
      <template slot="content"/>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'

export default {
  components: {
    Dialog
  },
  data() {
    return {
      loading: false,
      visibleBasicDrawer: false,
      alertTip: '',
      searchForm: [
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          default: '',
          clearable: true
        },
         {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
        {
          label: '类型',
          type: 'select',
          prop: 'change_type',
          options: [],
          clearable: true
        },
        {
          label: '资金类型',
          type: 'select',
          prop: 'type',
          options: [
            {label: '可用余额', value: 1},
            {label: '冻结金额', value: 2}
          ],
          clearable: true
        },
        {
          label: '选择日期',
          type: 'daterange',
          prop: 'created_range',
          default: '',
          clearable: true
        }

      ],
      columns: [
          {
          label: '会员ID',
          prop: 'member_id',
          width: 120
        },
        {
          label: '会员昵称',
          popover: true,
          width: 140,
          tagType: (row) => row?.member.status === 1 ? 'danger' : '',
          props: ['member.first_name'],
          options: [
            {
              label: '会员ID',
              value: ['member.member_id']
            }, {
              label: '用户名称',
              value: ['member.username']
            },
            {
              label: '异常信息',
              vShow: (row) => row?.member.admin_note ? true : false,
              value: ['member.admin_note']
            }
          ]
        },
        {
          label: '变动前余额',
          prop: 'after_balance',
          method: (row) => Number(row.before_balance)?.toFixed(2)
        },
        {
          label: '变动金额',
          prop: 'amount',
          method: (row) => Number(row.amount)?.toFixed(2)
        },

        {
          label: '变动后余额',
          prop: 'before_balance',
          method: (row) => Number(row.after_balance)?.toFixed(2)
        },
        {
          label: '时间',
          prop: 'created_at'
        },
          {
          label: '资金类型',
          prop: 'type',
             method: (row) => Number(row.type) === 1 ? '可用余额' : '冻结金额'
        },
        {
          label: '类型',
          prop: 'change_type'
        },
        {
          label: '关联ID',
          prop: 'related_id'
        },
        {
          label: '说明',
          prop: 'remark'
        }
      ],
      rowsActions: [],
      apis: {
        list: {
          url: 'balance/log',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },
      tableOptions: {},
      editForm: [],
      editConfig: {
        addTip: '注：备注',
        editTip: '注：备注'
      },
      member_id: ''
    }
  },
  created() {
    // 获取参数
    this.member_id = this.$route.query.member_id
    if (this.member_id) {
      this.searchForm[0] = Object.assign({}, this.searchForm[0], {
        default: this.member_id
      })
    }
    this.initDateRange()
  },
  methods: {
    initDateRange() {
      // const endDate = new Date()
      // const startDate = new Date()
      // startDate.setDate(startDate.getDate() - 7)
      // this.searchForm[2] = Object.assign({}, this.searchForm[2], {
      //   default: [this.formatDate(startDate), this.formatDate(endDate)]
      // })
      this.$nextTick(() => {
        this.$refs.table.getList({
          member_id: this.member_id
          // start_time: this.formatDate(startDate),
          // end_time: this.formatDate(endDate)
        })
      })
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    onResponse(data) {
      console.log(data, 'data')
      this.alertTip = '统计数据：' + data.total_amount
      this.searchForm[2].options = []
      data.change_types.forEach((e) => {
        this.searchForm[2].options.push({
          label: e,
          value: e
        })
      })
    },
    onValueChange(val) {

    },
    onSubmit(params = {}) {
      const start_time = params?.created_range && params?.created_range.length > 1 ? `${params.created_range[0]}` : null
      const end_time = params?.created_range && params?.created_range.length > 1 ? `${params.created_range[1]}` : null
      delete params.created_range
      this.$refs.table.getList({ ...params, start_time, end_time })
    }
  }
}
</script>
