<template>
  <div class="content-view">
    <div class="table-head-tool">
      <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
        <FormItem label="动作">
          <Select v-model="param.seachOption.key" style="width: 140px">
            <Option value="action">action</Option>
            <Option value="resource_type">resource_type</Option>
          </Select>
          <Input v-model="param.seachOption.value" class="ml10" style="width: 220px" placeholder="模糊/精确" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="load(1)">查询</Button>
          <Button type="default" @click="resetQuery" class="ml10">重置</Button>
          <Button type="default" @click="doExport" class="ml10">导出 CSV</Button>
        </FormItem>
      </Form>
    </div>

    <div class="table-body">
      <Table :columns="columns" :data="rows" border stripe />
      <div class="table-page-bar">
        <Page
          :total="total"
          :current="param.pageOption.page"
          :page-size="param.pageOption.pageSize"
          show-total
          @on-change="onPage"
          @on-page-size-change="onSize"
        />
      </div>
    </div>
  </div>
</template>

<script>
import auditServer from '@/api/subscription/audit_server.js'
import { downloadCsvFromRows } from '@/utils/csvExport.js'

export default {
  name: 'SubscriptionAuditLog',
  data() {
    return {
      rows: [],
      total: 0,
      param: {
        seachOption: { key: 'action', value: '' },
        pageOption: { page: 1, pageSize: 20, total: 0 },
      },
    }
  },
  computed: {
    columns() {
      return [
        { title: 'ID', key: 'id', width: 80 },
        { title: '后台用户', key: 'admin_user_id', width: 100 },
        { title: '业务用户', key: 'biz_user_id', width: 100 },
        { title: '动作', key: 'action', minWidth: 160 },
        { title: '资源类型', key: 'resource_type', width: 120 },
        { title: '资源ID', key: 'resource_id', width: 90 },
        {
          title: '详情',
          key: 'detail',
          minWidth: 200,
          render: (h, p) => {
            const d = p.row.detail
            const s = d == null ? '' : typeof d === 'string' ? d : JSON.stringify(d)
            return h('span', { attrs: { title: s } }, s.length > 80 ? s.slice(0, 80) + '…' : s)
          },
        },
        { title: '时间', key: 'created_at', minWidth: 160 },
      ]
    },
  },
  mounted() {
    this.load(1)
  },
  methods: {
    async load(page) {
      if (page) this.param.pageOption.page = page
      const res = await auditServer.page({ param: this.param })
      if (res && res.code === 0) {
        this.rows = res.data.rows || []
        this.total = res.data.count || 0
      } else {
        this.$Message.error((res && res.message) || '加载失败')
      }
    },
    onPage(p) {
      this.param.pageOption.page = p
      this.load()
    },
    onSize(s) {
      this.param.pageOption.pageSize = s
      this.load(1)
    },
    async doExport() {
      const res = await auditServer.exportRows({ param: this.param })
      if (res && res.code === 0 && res.data && res.data.rows) {
        const rows = res.data.rows.map((r) => ({
          ...r,
          detail: r.detail == null ? '' : typeof r.detail === 'object' ? JSON.stringify(r.detail) : r.detail,
        }))
        downloadCsvFromRows(rows, 'audit_log.csv')
        this.$Message.success('已导出')
      } else {
        this.$Message.error((res && res.message) || '导出失败')
      }
    },
    resetQuery() {
      this.param.seachOption = { key: 'action', value: '' }
      this.load(1)
    },
  },
}
</script>

<style lang="less" scoped>
.content-view {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 26px 36px 36px;
  box-sizing: border-box;
}

.table-head-tool {
  margin-bottom: 16px;
}

.ml10 {
  margin-left: 10px;
}

.table-page-bar {
  margin-top: 12px;
  text-align: right;
}
</style>
