<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年12月25日 20:50:25
 */
import {
  AuthSelectAction,
  AdminAuthListAction,
  AdminAuthUpdateAction,
  AdminAuthDeleteAction,
  AdminAuthCreateAction,
  $response
} from '~/api'
import {h} from 'vue'

onMounted(() => {
  AuthSelect()
  AdminAuthList()
})
const auth_select_list = ref([])
const auth_loading = ref(false)
const AuthSelect = async () => {
  auth_loading.value = true
  const response = await AuthSelectAction()
  auth_loading.value = false
  $response(response, () => {
    auth_select_list.value = response.data.list
  })
}
const admin_auth_columns = [{
  type: 'selection'
}, {
  title: '名称',
  key: 'name'
}, {
  title: '权限',
  key: 'auth_ids',
  render(row) {
    return h(
      'div',
      {},
      {default: () => row.auth_ids_turn.length + '个'}
    )
  }
}, {
  title: '备注',
  key: 'remark'
}]
const admin_auth_active = ref([])
const admin_auth_list = ref([])
const AdminAuthList = async () => {
  const response = await AdminAuthListAction()
  $response(response, () => {
    admin_auth_list.value = response.data.list
  })
}
const create_show = ref(false)
const create_data_default = {
  name: '',
  auth_ids: [],
  remark: '',
}
const create_data = ref(JSON.parse(JSON.stringify(create_data_default)))
const AdminAuthCreate = async () => {
  const response = await AdminAuthCreateAction(create_data.value)
  $response(response, () => {
    window.$message().success(response.message)
    create_show.value = false
    create_data.value = JSON.parse(JSON.stringify(create_data_default))
    AdminAuthList()
  })
}
const createShowClick = () => {
  create_data.value = JSON.parse(JSON.stringify(create_data_default))
  create_show.value = true
}
const update_show = ref(false)
const update_data_default = {
  id: 0,
  name: '',
  auth_ids: [],
  remark: '',
}
const update_data = ref(JSON.parse(JSON.stringify(update_data_default)))
const AdminAuthUpdate = async () => {
  const response = await AdminAuthUpdateAction(update_data.value)
  $response(response, () => {
    window.$message().success(response.message)
    update_show.value = false
    update_data.value = JSON.parse(JSON.stringify(update_data_default))
    AdminAuthList()
  })
}
const updateShowClick = () => {
  if (admin_auth_active.value.length !== 1) return window.$message().error('请选择一个权限')
  update_data.value = JSON.parse(JSON.stringify(update_data_default))
  for (let i = 0; i < admin_auth_list.value.length; i++) {
    if (admin_auth_active.value[0] === admin_auth_list.value[i].id) {
      update_data.value = {
        id: admin_auth_list.value[i].id,
        name: admin_auth_list.value[i].name,
        auth_ids: admin_auth_list.value[i].auth_ids_turn.map(n => Number(n)),
        remark: admin_auth_list.value[i].remark,
      }
      update_show.value = true
      return
    }
  }
}
const delete_show = ref(false)
const deleteShowClick = () => {
  if (admin_auth_active.value.length <= 0) return window.$message().error('请选择一个权限')
  delete_show.value = true
}
const AdminAuthDelete = async () => {
  const response = await AdminAuthDeleteAction(admin_auth_active.value)
  $response(response, () => {
    window.$message().success(response.message)
    delete_show.value = false
    admin_auth_active.value = []
    AdminAuthList()
  })
}
</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="AdminAuthDelete()" type="info">确定</n-button>
          <n-button @click="delete_show = false">取消</n-button>
        </n-space>
      </div>
    </n-modal>
    <n-modal v-model:show="update_show" preset="card" :style="{width: '1000px'}" 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.name"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">权限配置</div>
          </n-tag>
          <div>
            <n-button @click="AuthSelect()" :loading="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-scrollbar mt-2 style="max-height: 400px" trigger="none">
          <n-table :single-line="false" size="small">
            <tbody>
            <tr v-for="(i,k) in auth_select_list" :key="k">
              <td width="120" text-center>{{ i.title }}</td>
              <td>
                <n-checkbox-group v-model:value="update_data.auth_ids">
                  <n-space item-style="display: flex;">
                    <n-checkbox v-for="(ii,kk) in i.children" :key="kk" :value="ii.id" :label="ii.title"/>
                  </n-space>
                </n-checkbox-group>
              </td>
            </tr>
            </tbody>
          </n-table>
        </n-scrollbar>
        <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.remark"></n-input>
        </n-space>
        <n-button @click="AdminAuthUpdate()" type="info" mt-2>确定</n-button>
      </div>
    </n-modal>
    <n-modal v-model:show="create_show" preset="card" :style="{width: '1000px'}" 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.name"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">权限配置</div>
          </n-tag>
          <div>
            <n-button @click="AuthSelect()" :loading="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-scrollbar mt-2 style="max-height: 400px" trigger="none">
          <n-table :single-line="false" size="small">
            <tbody>
            <tr v-for="(i,k) in auth_select_list" :key="k">
              <td width="120" text-center>{{ i.title }}</td>
              <td>
                <n-checkbox-group v-model:value="create_data.auth_ids">
                  <n-space item-style="display: flex;">
                    <n-checkbox v-for="(ii,kk) in i.children" :key="kk" :value="ii.id" :label="ii.title"/>
                  </n-space>
                </n-checkbox-group>
              </td>
            </tr>
            </tbody>
          </n-table>
        </n-scrollbar>
        <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.remark"></n-input>
        </n-space>
        <n-button @click="AdminAuthCreate()" type="info" mt-2>确定</n-button>
      </div>
    </n-modal>
    <n-card title="权限管理">
      <div>
        <n-space>
          <n-button @click="createShowClick()" type="success">新建</n-button>
          <n-button @click="deleteShowClick()" type="error">删除</n-button>
          <n-button @click="updateShowClick()" type="info">修改</n-button>
        </n-space>
        <n-data-table mt-2 v-model:checked-row-keys="admin_auth_active" :columns="admin_auth_columns"
                      :row-key="row=>row.id" :data="admin_auth_list"/>
      </div>
    </n-card>
  </div>
</template>
<style scoped>

</style>
<route>
{"meta":{"title":"权限管理"}}
</route>

