<template>
  <div class="app-container">
    <a-form :model="queryForm" ref="queryFormRef" layout="inline">
      <a-form-item field="role_name" label="角色名称">
        <a-input v-model="queryForm.role_name" placeholder="请输入角色名称" @press-enter="handleQuery" />
      </a-form-item>
      <!-- <a-form-item field="roleKey" label="权限字符">
        <a-input v-model="queryForm.roleKey" placeholder="请输入权限字符" @press-enter="handleQuery" />
      </a-form-item> -->
      <!-- <a-form-item field="status" label="状态">
        <a-select v-model="queryForm.role_status" placeholder="请选择角色状态">
          <a-option :value="2">正常</a-option>
          <a-option :value="1">停用</a-option>
        </a-select>
      </a-form-item> -->
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleQuery">
            <icon-search /> 搜索</a-button>
          <a-button @click="handleResetQuery">
            <icon-loop /> 重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-divider />

    <div class="action">
      <a-space>
        <a-button type="primary" @click="handleAdd">
          <icon-plus /> 新增</a-button>
        <a-button type="primary" status="danger" @click="() => { deleteVisible = true; }">
          <icon-delete /> 批量删除</a-button>
        <!-- <a-button type="primary" status="warning" disabled>
          <icon-download /> 导出</a-button> -->
      </a-space>
    </div>

    <a-table :columns="columns" :data="tableData"
      :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
      row-key="role_id" :row-selection="{ type: 'checkbox', showCheckedAll: true }"
      @selection-change="(selection) => {deleteData = selection;}" @select="handleSelect"
      @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
      <template #role_id="{record,rowIndex}">
         <div>{{(rowIndex+1)+(pager.page-1)*10}}</div>
      </template>
      <template #status="{ record }">
        <a-space direction="vertical" size="large">
          <a-switch v-model="record.role_status" :checked-value="1" :unchecked-value="2"
            @change="handleChangeSwitch($event,record.role_id)" :disabled="record.is_admin==1" />
        </a-space>
        <!-- <a-tag v-if="record.status == 2" color="green">正常</a-tag>
        <a-tag v-else color="red">停用</a-tag> -->
      </template>
      <template #is_admin="{ record }">
        <a-tag v-if="record.is_admin == 0" color="green">否</a-tag>
        <a-tag v-else color="red">是</a-tag>
      </template>
      <template #createdAt="{ record }">
        {{ parseTime(record.createdAt) }}
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="text" @click="handleUpdate(record)">
            <icon-edit /> 修改</a-button>
          <!-- <a-button type="text" @click="handleDataScope(record)">
            <icon-check-circle /> 数据权限 </a-button> -->
          <a-button type="text" @click="() => { deleteVisible = true; deleteData = [record.role_id];  }">
            <icon-check-circle /> 删除 </a-button>
        </a-space>
      </template>
    </a-table>

    <!-- Role Modal -->
    <a-modal v-model:visible="modalVisible" :title="title" title-align="start" @before-ok="handleBeforeOk"
      @close="handleCancel">
      <a-form :model="modalForm" :rules="rules" ref="modalFormRef">
        <a-form-item field="role_name" label="角色名称">
          <a-input v-model="modalForm.role_name" placeholder="请输入角色名称" />
        </a-form-item>
        <!-- <a-form-item field="roleKey" label="权限字符">
          <a-input v-model="modalForm.roleKey" placeholder="请输入权限字符" />
        </a-form-item>
        <a-form-item field="roleSort" label="角色排序">
          <a-input-number
            v-model="modalForm.roleSort"
            mode="button"
            :default-value="0"
            :style="{ width: '150px' }"
          />
        </a-form-item> -->
        <!-- <a-form-item field="status" label="状态">
          <a-radio-group v-model="modalForm.role_status">
            <a-radio :value="2">正常</a-radio>
            <a-radio :value="1">停用</a-radio>
          </a-radio-group>
        </a-form-item> -->
        <a-form-item field="is_admin" label="是否是管理员">
          <a-radio-group v-model="modalForm.is_admin">
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-item>
        <div>{{checkedKeys}}</div>
        <a-form-item label="权限设置">
          <a-tree
            v-model:checked-keys="checkedKeys"
            :checkable="true"
            :check-strictly="false"
            :data="treeData"
            :default-expand-all="true"
            :field-names="{ key: 'menu_id', title: 'menu_title',icon: '_'}"
          />
        </a-form-item>
       <!--
        <a-form-item field="remark" label="备注">
          <a-textarea v-model="modalForm.remark" placeholder="请输入备注内容" />
        </a-form-item>
         -->
      </a-form>
    </a-modal>

    <!-- DataScope Modal -->
    <!-- <a-modal v-model:visible="scopedModalVisible" :title="title" title-align="start" @before-ok="handleScopeBeforeOk"
      @close="handleCancel">
      <a-form :model="scopeForm">
        <a-form-item field="role_name" label="角色名称">
          <a-input v-model="scopeForm.role_name" disabled />
        </a-form-item>
        <a-form-item field="roleKey" label="权限字符">
          <a-input v-model="scopeForm.roleKey" disabled />
        </a-form-item>
        <a-form-item field="dataScope" label="权限范围">
          <a-select v-model="scopeForm.dataScope" placeholder="请选择权限范围">
            <a-option v-for="item in dataScopeOptions" :key="item.value" :value="item.value" :label="item.label" />
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal> -->

    <!-- Akiraka 20230223 删除与批量删除 开始 -->
    <DeleteModal :data="deleteData" :visible="deleteVisible"  :delType="'role_ids'" :apiDelete="removeRole"
      @deleteVisibleChange="() => deleteVisible = false" />
    <!-- Akiraka 20230223 删除与批量删除 结束 -->
  </div>
</template>

<script setup>
  import {
    onMounted,
    reactive,
    ref,
    getCurrentInstance,
    nextTick,
    watch
  } from 'vue';
  import {
    getRole,
    addRole,
    updateRole,
    removeRole,
    updateRoleScoped,
    getRoleMenuTree,
    roleDetail,
    roleStatus
  } from '@/api/admin/role';

  // Akiraka 20230210 删除数据
  const deleteData = ref([])
  // Akiraka 20230210 删除对话框
  const deleteVisible = ref(false)
  // Akiraka 20230210 监听删除事件
  watch(() => deleteVisible.value, (value) => {
    if (value == false) {
      getRoleInfo({
        ...pager,
        ...queryForm
      });
    }
  })

  const {
    proxy
  } = getCurrentInstance();

  const currentPage = ref(1);
  // Pager
  const pager = {
    total: 1,
    page: 1,
    page_size: 10,
  };

  // Batch Delete List
  const batchDeleteList = ref([]);

  // Form
  const queryForm = reactive({});
  const modalForm = reactive({
    sort: 0,
    role_status: '',
    is_admin: ''
  });
  const scopeForm = reactive({});

  // rules
  const rules = {
    role_name: [{
      required: true,
      message: '请输入角色名称'
    }],
    roleKey: [{
      required: true,
      message: '请输入权限字符'
    }],
  };

  // ScopeOption
  const dataScopeOptions = [{
    value: '1',
    label: '全部数据权限',
  },
  {
    value: '2',
    label: '自定数据权限',
  },
  {
    value: '3',
    label: '本部门数据权限',
  },
  {
    value: '4',
    label: '本部门及以下数据权限',
  },
  {
    value: '5',
    label: '仅本人数据权限',
  },
  ];

  // Table Columns
  const columns = [{
    title: '编号',
    dataIndex: 'role_id',
    slotName: 'role_id'
  },
  {
    title: '角色名称',
    dataIndex: 'role_name'
  },
  {
    title: '状态',
    dataIndex: 'role_status',
    slotName: 'status'
  },
  {
    title: '是否是管理员',
    dataIndex: 'is_admin',
    slotName: 'is_admin'
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    slotName: 'created_at'
  },
  {
    title: '操作',
    slotName: 'action',
    width: 250
  },
  ];

  // Table Data;
  const tableData = ref([]);

  // Tree Data;
  const checkedKeys = ref([]);
  const treeData = ref([]);

  // Modal
  const modalVisible = ref(false);
  const scopedModalVisible = ref(false);
  const title = ref('默认标题');

  // Table Select
  const handleSelect = (rowKeys,rowkey,record) => {
    console.log(rowKeys,rowkey);
    batchDeleteList.value = rowKeys;
  };

  // 查询
  const handleQuery = async () => {
    const res = await getRole({
      ...pager,
      ...queryForm
    });
    const {
      total,
      data,
      page,
      page_size
    } = res.data;
    tableData.value =data;
    Object.assign(pager, {
      total,
      page,
      page_size
    });
  };

  // 重置查询
  const handleResetQuery = () => {
    proxy.$refs.queryFormRef.resetFields();
    getRoleInfo(queryForm);
  };

  // 创建
  const handleAdd = () => {
    modalVisible.value = true;
    title.value = '创建角色';
    modalForm.is_admin='';
    modalForm.role_status='';
  };

  // 修改角色
  const handleUpdate = async (record) => {
    modalVisible.value = true;
    title.value = '修改角色';
    const { code, data, message } = await roleDetail(record.role_id);
    if (code == 200) {
      Object.assign(modalForm, data);
       checkedKeys.value = data.menu_ids;
      // console.log(data.menu_ids)
       // 显示勾选的菜单，checkedKeys 传入id数组即可
     
    } else {
      proxy.$notification.error(message);
    }
    //await nextTick();
    //Object.assign(modalForm, record);

    const menuIdsChecked = [];
      data.menu_ids.forEach((item) => {
        menuIdsChecked.push(item);
      });
       checkedKeys.value = menuIdsChecked;
  };

  // 分配数据权限
  const handleDataScope = async (record) => {
    scopedModalVisible.value = true;
    title.value = '分配数据权限';

    const {
      roleKey,
      role_name,
      dataScope,
      roleId
    } = record;
    await nextTick();
    Object.assign(scopeForm, {
      roleKey,
      role_name,
      dataScope,
      roleId
    });
  };

  /**
   * 分页改变
   * @param {Number} [page]
   */
  const handlePageChange = (page) => {
    pager.page = page;

    // 修改当前页码
    currentPage.value = page;
    getRoleInfo({
      ...pager,
      ...queryForm
    });
  };

  // 每页数据量
  const handlePageSizeChange = (page_size) => {
    pager.page_size = page_size;
    getRoleInfo({
      ...pager,
      ...queryForm
    });
  };

  // 角色管理表单提交
  // 异步关闭表单需要使用 done() 回调函数
  const handleBeforeOk = (done) => {
    proxy.$refs.modalFormRef.validate(async (valid) => {
      // 如果 valid 为空则数据校验通过
      if (!valid) {
        console.log(checkedKeys.value);
        modalForm.menu_ids = checkedKeys.value;
        let res;
        if (modalForm.role_id) {
          const {
            code,
            message
          } = await updateRole(modalForm, modalForm.role_id);
          if (code == 200) {
            proxy.$notification.success('更新成功');
          } else {
            proxy.$notification.error(message);
          }
        } else {
          //modalForm.is_admin = modalForm.is_admin ? Number(modalForm.is_admin) : ''
          console.log(modalForm);
          const {
            code,
            message
          } = await addRole(modalForm);
          if (code == 200) {
            proxy.$notification.success('新增成功');
          } else {
            proxy.$notification.error(message);
          }
        }
        getRoleInfo();
        done();
      } else {
        proxy.$message.error('数据校验失败');
        done(false);
      }
    });
  };

  // 数据权限表单提交
  const handleScopeBeforeOk = async (done) => {
    const res = await updateRoleScoped(scopeForm);
    proxy.$message.success(res.msg);
    done();

    getRoleInfo();
  };

  // 重置数据表单
  const handleCancel = () => {
    modalVisible.value = false;
    modalForm.role_id = null;
    scopeForm.role_id = null;
    checkedKeys.value = [];
    proxy.$refs.modalFormRef.resetFields();
  };
  //切换启用状态
  const handleChangeSwitch = async (value, id) => {
    const { code, data, message } = await roleStatus({ role_status: value },id);
    if (code == 200) {
      value==1?proxy.$notification.success('启用成功'):proxy.$notification.success('禁用成功');
    } else {
      proxy.$notification.error(message);
    }

  }
  // 获取角色信息
  const getRoleInfo = async (params = {
    page: 1,
    role_name: '',
    page_size: 10
  }) => {
    const {
      data,
      code,
      message
    } = await getRole(params);
    if (code == 200) {
     
      tableData.value = data.data;
      Object.assign(pager, {
        total: data.total,
        page: data.page,
        page_size: data.page_size
      });
    } else {
      proxy.$notification.error(message);
    }
  };

  // 获取角色菜单信息
  const getRoleMenuTreeInfo = async () => {
    const res = await getRoleMenuTree();
   
    treeData.value = res.data;
    console.log(res.data)
   
  };

  onMounted(() => {
    getRoleInfo();
    getRoleMenuTreeInfo();
  });
</script>

<style setup>
  .action {
    margin-bottom: 12px;
  }
</style>