<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年12月25日 20:50:25
 */
import {
  AdminDeleteAction,
  AdminUpdateAction,
  AdminEditPasswordAction,
  AdminAuthSelectAction,
  AdminCreateAction,
  AdminListAction,
  $response
} from '~/api'
import $router from '~/router'
import {onBeforeRouteUpdate} from "vue-router";
import {h} from "vue";
import {NTag} from 'naive-ui'

const default_page_options = {
  page: 1,
  status: 0,
  search: ''
}
const page_options = ref(JSON.parse(JSON.stringify(default_page_options)))
onBeforeRouteUpdate((to) => {
  routerChange(to.query)
})
const routerChange = (query) => {
  page_options.value = {
    page: Number(query.page) || default_page_options.page,
    status: Number(query.status) || default_page_options.status,
    search: query.search || default_page_options.search,
  }
  AdminList()
}
onMounted(() => {
  routerChange($router.currentRoute.value.query)
  AdminAuthSelect()
})
const admin_auth_select_list = ref([])
const admin_auth_loading = ref(false)
const AdminAuthSelect = async () => {
  admin_auth_loading.value = true
  const response = await AdminAuthSelectAction()
  admin_auth_loading.value = false
  $response(response, () => {
    admin_auth_select_list.value = response.data.list
  })
}
const admin_active = ref([])
const admin_list = ref([])
const admin_list_last_page = ref(0)
const AdminList = async () => {
  const response = await AdminListAction(page_options.value)
  $response(response, () => {
    admin_list.value = response.data.data
    admin_list_last_page.value = response.data.last_page
  })
}
const admin_columns = [{
  type: 'selection'
}, {
  title: '昵称',
  key: 'nickname'
}, {
  title: '权限',
  key: 'admin_auth_name',
  render(row) {
    return h(
      'div',
      {},
      {
        default: () => {
          if (row.admin_auth_id === -1) return '超级管理员'
          if (row.admin_auth_id === 0) return '无权限分组'
          return !!row.admin_auth_name ? row.admin_auth_name : '异常权限组'
        }
      }
    )
  }
}, {
  title: '状态',
  key: 'status',
  render(row) {
    return h(
      NTag,
      {
        type: row.status === 1 ? 'success' : 'error'
      },
      {
        default: () => {
          return row.status === 1 ? '可用' : '停用'
        }
      }
    )
  }
}]
const create_show = ref(false)
const create_data_default = {
  nickname: '',
  account: '',
  password: '',
  admin_auth_id: 0,
}
const create_data = ref(JSON.parse(JSON.stringify(create_data_default)))
const AdminCreate = async () => {
  const response = await AdminCreateAction(create_data.value)
  $response(response, () => {
    window.$message().success(response.message)
    create_show.value = false
    create_data.value = JSON.parse(JSON.stringify(create_data_default))
    AdminList()
  })
}
const createShowClick = () => {
  create_data.value = JSON.parse(JSON.stringify(create_data_default))
  create_show.value = true
}
const searchClick = () => {
  updatePage(1)
}
const updatePage = (page) => {
  page_options.value.page = page
  pagePush()
}
const pagePush = () => {
  $router.push({
    name: 'admin-list',
    query: page_options.value
  })
}
const update_show = ref(false)
const update_password_show = ref(false)
const update_data_default = {
  id: 0,
  nickname: '',
  account_id: 0,
  account: '',
  password: '',
  status: '',
  admin_auth_id: 0,
}
const update_data = ref(JSON.parse(JSON.stringify(update_data_default)))
const updateShowClick = (type) => {
  if (admin_active.value.length !== 1) return window.$message().error('请选择一个管理员')
  update_data.value = JSON.parse(JSON.stringify(update_data_default))
  for (let i = 0; i < admin_list.value.length; i++) {
    if (admin_active.value[0] === admin_list.value[i].id) {
      update_data.value = {
        id: admin_list.value[i].id,
        nickname: admin_list.value[i].nickname,
        account_id: admin_list.value[i].account_id,
        account: admin_list.value[i].account,
        password: '',
        status: admin_list.value[i].status,
        admin_auth_id: admin_list.value[i].admin_auth_id,
      }
      type === 'info' ? update_show.value = true : update_password_show.value = true
      return
    }
  }
}
const AdminUpdate = async () => {
  const response = await AdminUpdateAction({
    admin_id: update_data.value.id,
    nickname: update_data.value.nickname,
    status: update_data.value.status,
    admin_auth_id: update_data.value.admin_auth_id,
  })
  $response(response, () => {
    window.$message().success(response.message)
    update_show.value = false
    update_data.value = JSON.parse(JSON.stringify(update_data_default))
    AdminList()
  })
}
const AdminEditPassword = async () => {
  const response = await AdminEditPasswordAction({
    account_id: update_data.value.account_id,
    password: update_data.value.password,
  })
  $response(response, () => {
    window.$message().success(response.message)
    update_password_show.value = false
    update_data.value = JSON.parse(JSON.stringify(update_data_default))
    AdminList()
  })
}
const delete_show = ref(false)
const deleteShowClick = () => {
  if (admin_active.value.length <= 0) return window.$message().error('请选择一个管理员')
  delete_show.value = true
}
const AdminDelete = async () => {
  const response = await AdminDeleteAction(admin_active.value)
  $response(response, () => {
    window.$message().success(response.message)
    delete_show.value = false
    admin_active.value = []
    AdminList()
  })
}
</script>
<template>
  <div>
    <n-modal v-model:show="delete_show" preset="card" :style="{width: '400px'}" title="删除确认" :auto-focus="false"
             :bordered="false">
      <div>
        <n-space justify="center">
          <n-button @click="AdminDelete()" type="info">确定</n-button>
          <n-button @click="delete_show = false">取消</n-button>
        </n-space>
      </div>
    </n-modal>
    <n-modal v-model:show="update_password_show" preset="card" :style="{width: '500px'}" title="修改密码"
             :auto-focus="false"
             :bordered="false">
      <div>
        <n-space align="center">
          <n-tag>
            <div class="form_tag_wrapper">密码</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="update_data.password"></n-input>
        </n-space>
        <n-button @click="AdminEditPassword()" type="info" mt-2>确定</n-button>
      </div>
    </n-modal>
    <n-modal v-model:show="update_show" preset="card" :style="{width: '500px'}" title="修改信息" :auto-focus="false"
             :bordered="false">
      <div>
        <n-space align="center">
          <n-tag>
            <div class="form_tag_wrapper">账号</div>
          </n-tag>
          <n-input disabled class="form_input_wrapper" v-model:value="update_data.account"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">昵称</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="update_data.nickname"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">权限</div>
          </n-tag>
          <n-select class="form_input_wrapper" v-model:value="update_data.admin_auth_id" :options="[
            update_data.admin_auth_id === -1 ? {value:-1,label:'超级管理员'}: {value:0,label:'暂不分配'},
            ...admin_auth_select_list
          ]"/>
          <div>
            <n-button @click="AdminAuthSelect()" :loading="admin_auth_loading" size="small" type="info">
              <template #icon>
                <n-icon>
                  <Icon type="refresh" :size="16"></Icon>
                </n-icon>
              </template>
              刷新
            </n-button>
          </div>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">状态</div>
          </n-tag>
          <n-radio-group v-model:value="update_data.status" name="update_status_radio">
            <n-space>
              <n-radio :value="1">可用</n-radio>
              <n-radio :value="2">停用</n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <n-button @click="AdminUpdate()" type="info" mt-2>确定</n-button>
      </div>
    </n-modal>
    <n-modal v-model:show="create_show" preset="card" :style="{width: '500px'}" title="新建" :auto-focus="false"
             :bordered="false">
      <div>
        <n-space align="center">
          <n-tag>
            <div class="form_tag_wrapper">账号</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="create_data.account"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">昵称</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="create_data.nickname"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">密码</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="create_data.password"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">权限</div>
          </n-tag>
          <n-select class="form_input_wrapper" v-model:value="create_data.admin_auth_id" :options="[
            {value:0,label:'暂不分配'},
            ...admin_auth_select_list
          ]"/>
          <div>
            <n-button @click="AdminAuthSelect()" :loading="admin_auth_loading" size="small" type="info">
              <template #icon>
                <n-icon>
                  <Icon type="refresh" :size="16"></Icon>
                </n-icon>
              </template>
              刷新
            </n-button>
          </div>
        </n-space>
        <n-button @click="AdminCreate()" type="info" mt-2>确定</n-button>
      </div>
    </n-modal>
    <n-card title="管理员列表">
      <div>
        <n-space align="center">
          <n-tag>
            <div class="form_tag_wrapper">昵称</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="page_options.search"></n-input>
          <n-tag>
            <div class="form_tag_wrapper">状态</div>
          </n-tag>
          <n-radio-group v-model:value="page_options.status" name="status_radio">
            <n-space>
              <n-radio :value="0">全部</n-radio>
              <n-radio :value="1">可用</n-radio>
              <n-radio :value="2">停用</n-radio>
            </n-space>
          </n-radio-group>
          <n-button @click="searchClick()" type="info">搜索</n-button>
        </n-space>
        <n-space mt-2>
          <n-button @click="createShowClick()" type="success">新建</n-button>
          <n-button @click="deleteShowClick()" type="error">删除</n-button>
          <n-button @click="updateShowClick('info')" type="info">修改信息</n-button>
          <n-button @click="updateShowClick('password')" type="info">修改密码</n-button>
        </n-space>
        <n-data-table mt-2 v-model:checked-row-keys="admin_active" :columns="admin_columns"
                      :row-key="row=>row.id" :data="admin_list"/>
        <n-pagination v-if="admin_list_last_page > 1" @update:page="updatePage" mt-2 v-model:page="page_options.page"
                      :page-count="admin_list_last_page"/>
      </div>
    </n-card>
  </div>
</template>
<style scoped>

</style>
<route>
{"meta":{"title":"管理员列表"}}
</route>

