<template>
  <el-dialog
    append-to-body
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="75%"
    @close="close"
  >
    <el-scrollbar style="height: 600px">
      <el-table border :data="list" height="610">
        <el-table-column
          align="center"
          :label="__('编号')"
          prop="uo_id"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="__('收益用户编号')"
          prop="user_id"
          show-overflow-tooltip
          width="120"
        />

        <el-table-column
          align="center"
          :label="__('收益用户昵称')"
          prop="user_nickname"
          show-overflow-tooltip
          width="120"
        />

        <el-table-column
          align="center"
          :label="__('订单用户编号')"
          prop="buyer_user_id"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          align="center"
          :label="__('订单用户昵称')"
          prop="buyer_user_nickname"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          align="center"
          :label="__('订单编号')"
          prop="order_id"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          align="center"
          :label="__('推广员佣金')"
          prop="uo_buy_commission"
          show-overflow-tooltip
          width="130"
        />
        <el-table-column
          align="center"
          :label="__('分佣等级')"
          prop="uo_level"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :formatter="formatTime"
          :label="__('时间')"
          prop="uo_time"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          align="center"
          :formatter="formatActive"
          :label="__('是否有效')"
          prop="uo_active"
          show-overflow-tooltip
        />
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNum"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-scrollbar>
  </el-dialog>
</template>
<script>
  import { translateTitle as __ } from '@/utils/i18n'

  import { getList } from '@/api/distribution/user/order'
  import { timestampToTime } from '@/utils/date'

  export default {
    name: 'DistributionUserTable',
    components: {},
    data() {
      return {
        list: [],
        form: {},
        listLoading: true,
        dialogFormVisible: false,
        title: '',
        total: 0,
        layout: 'total, sizes, prev, pager, next, jumper',
        queryForm: {
          pageNum: 1,
          pageSize: 20,
        },
      }
    },
    created() {},
    methods: {
      __,
      formatTime(row) {
        return timestampToTime(row.uo_time)
      },
      formatActive(row) {
        return row.uo_active === 1 ? this.__('是') : this.__('否')
      },
      showTable(row) {
        this.queryForm.user_id = row.user_id
        this.dialogFormVisible = true
        this.fetchData()
      },

      close() {
        this.dialogFormVisible = false
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(this.queryForm)
        this.list = data.items
        this.total = data.records
        this.listLoading = false
      },
    },
  }
</script>
