<template>
  <div class="app-container">
    <TableViewer
      ref="tableViewer"
      v-bind="table"
      @action="handleAction"
    />

    <ChangePasswordDialog
      ref="passwordDialog"
    />
  </div>
</template>

<script>
import TableViewer from '@/components/TableViewer'
import preset from '@/components/TableViewer/preset'
import consumerApi from '@/api/consumer'
import AddDialog from './components/AddDialog'
import EditDialog from './components/EditDialog'
import DetailDialog from './components/DetailDialog'
import ChangePasswordDialog from './components/dialog/ChangePasswordDialog'

export default {
  components: {
    TableViewer,
    ChangePasswordDialog
  },
  data() {
    return {
      userName: this.$store.getters.name,
      table: {
        filters: [
          {
            key: 'keyword',
            placeholder: '请输入关键字'
          },
          {
            type: 'button',
            title: '查询',
            filterWithChange: true
          }
        ],
        actions: preset.actions(['add']),
        headers: [
          {
            label: '账号',
            key: 'username',
            minWidth: 100
          },
          {
            label: '客户名称',
            key: 'realname',
            minWidth: 100
          },
          {
            label: '备注',
            key: 'remark',
            minWidth: 140
          }
        ],
        rowActions: (row) => {
          return this.getAction(row).filter(item => item.hidden !== true)
        },
        rowActionsWidth: 400,
        fetchDataMethod: this.fetchData
      }
    }
  },
  methods: {
    getAction(row) {
      return [
        {
          key: 'edit',
          type: 'primary',
          title: '编辑'
        },
        {
          hidden: row.orderCount > 0,
          key: 'remove',
          type: 'danger',
          title: '删除',
          confirm: '删除后将无法恢复，确定删除？'
        },
        {
          key: 'password',
          type: 'primary',
          title: '修改密码'
        },
        {
          key: 'detail',
          type: 'primary',
          title: '查看详情'
        }
      ]
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push({
        name: 'login'
      })
    },
    async fetchData(filter, pagination) {
      console.log('fetchData', JSON.stringify(filter), JSON.stringify(pagination))
      const response = await consumerApi.find({
        ...pagination,
        p: {
          ...filter
        }
      })
      const data = {
        content: response.data.list,
        numberOfElements: response.data.list.length,
        totalElements: response.data.totalRow
      }
      return data
    },
    handleAction(action, row) {
      this[action]?.(row)
      console.log('action', action, JSON.stringify(row))
    },
    add() {
      AddDialog.show(this.$refs.tableViewer.refresh)
    },
    edit(row) {
      EditDialog.show({ ...row }, this.$refs.tableViewer.refresh)
    },
    detail(row) {
      DetailDialog.show(row)
    },
    remove(row) {
      this.$refs.tableViewer.loading()
      consumerApi.remove(row.userid).then(() => this.$message.success('删除成功')).finally(this.$refs.tableViewer.refreshAfterDelete)
    },
    password(row) {
      this.$refs?.passwordDialog?.open(row)
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  padding: 0;

  .top-div {
    display: flex;
    float: right;

    .name {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .logout {
    margin-left: 30px;
  }
}

</style>
