<template>
  <div class="mt-9">
    <a-table
      :columns="columns"
      :loading="loading"
      :data-source="dataSource"
      :pagination="false"
      style="text-align: center;"
      bordered
    >
      <span slot="level">银行管理员</span>
      <template #update_at="text">
        {{ text | formatDate }}
      </template>
      <template #name="text">
        {{ text +1 }}
      </template>
      <template #status="text">
        {{text | platformfilterUserStatus}}
      </template>
      <div slot="action" slot-scope="text, record">
        <a
          :class="
            record.status == eUserStatus.enable_notOnPosition ||
            record.status === eUserStatus.enable_onPosition
              ? 'undeleteable'
              : ' '
          "
          @click="showModal(record, 0)"
        >
          删除
        </a>
        <a-divider type="vertical" />
        <a
          v-if="
            record.status == eUserStatus.disable_noPosition ||
            record.status === eUserStatus.disable_notOnPosition
          "
          @click="showModal(record, 1)"
        >
          启用
        </a>
        <a
          v-else-if="
            record.status === eUserStatus.enable_notOnPosition ||
            eUserStatus.enable_onPosition
          "
          @click="showModal(record, 2)"
        >
          禁用
        </a>
      </div>
    </a-table>
    <a-pagination
      @change="onChange"
      :total="total"
      :pageSize="pageSize"
      :current="platformPage"
      class="text-right mt-4"
    />
    <!-- 功能modal -->
    <a-modal
      v-model="show"
      :title="title"
      :centered="true"
      :type="type"
      :closable="false"
      @cancle="show = false"
      @ok="handleOk"
    >
      {{ content }}
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { modalType } from './const'
import { getPlatformUserManagementTableColumns } from '@/const/columns/superManagerColumn'
import { mapActions, mapMutations, mapState } from 'vuex'
import StaffService from '@/service/StaffService'
import { eUserStatusAction, eUserStatus } from '@/types/user'

export default Vue.extend({
  computed: {
    ...mapState('platformUserManagement', {
      platformList: 'list',
      platformPage: 'page',
      total: 'total',
      pageSize: 'page_size',
      loading: 'loading',
    }),
    columns(): any[] {
      return getPlatformUserManagementTableColumns()
    },
    dataSource(): any[] {
      return this.platformList
    },
  },
  data() {
    return {
      type: modalType.delete,
      uuid: '',
      show: false,
      content: '',
      title: '',
      eUserStatusAction,
      eUserStatus,
    }
  },
  methods: {
    ...mapMutations('platformUserManagement', {
      platformSave: 'save',
    }),
    ...mapActions('platformUserManagement', {
      platformQuery: 'query',
    }),
    onChange(page: number) {
      this.platformSave({
        page,
      })
      this.platformQuery()
    },
    showModal(record: any, type: modalType) {
      this.type = type
      this.uuid = record.uuid
      if (this.type == modalType.delete) {
        this.title = '删除用户'
        this.content = '确认删除用户？'
      } else if (this.type == modalType.on) {
        this.title = '启用账户'
        this.content = '确认启用账号吗？'
      } else if (this.type == modalType.off) {
        this.title = '禁用账号'
        this.content = '确认禁用账号吗？'
      }
      this.show = true
    },
    async handleOk() {
      if (this.type == modalType.delete) {
        await StaffService.getInstance().deleteStaff(this.uuid)
      } else if (this.type == modalType.on) {
        await StaffService.getInstance().modifyStaffStatus({
          uuid: this.uuid,
          status: eUserStatusAction.enable,
        })
      } else if (this.type == modalType.off) {
        await StaffService.getInstance().modifyStaffStatus({
          uuid: this.uuid,
          status: eUserStatusAction.disable,
        })
      }
      this.$store.commit('platformUserManagement/save', {
        page: 1,
      })
      this.$store.dispatch('platformUserManagement/query')
      this.show = false
    },
  },
})
</script>

<style scoped>
.undeleteable {
  pointer-events: none;
  color: gray;
}
</style>
