<template>

    <div class="page-container main-view">
   
      <div class="table-box content-container page-content-box">
        <div class="top-container">
          <el-button type="primary" @click="handleAdd()">新增</el-button>
        </div> 
        <div class="table-container">
          <el-table :data="tableData" stripe style="width: 100%" border>
            <el-table-column prop="id" label="序号"  />
            <el-table-column prop="username" label="用户账号"  />
            <el-table-column prop="useruermissions" label="用户权限" />
            <el-table-column prop="creationtime" label="创建时间" />
            <el-table-column label="操作">
                  <template #default="scope">
                      <el-button
                          :text="true"
                          @click="handleDetails([scope.row])"
                      >
                          禁用
                      </el-button>
                      <el-button
                          :text="true"
                          @click="
                              handleEdit(scope.row, {
                                  isShow: false,
                                  afterTitle: ' - 编辑',
                              })
                          "
                      >
                          编辑
                      </el-button>
                  </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <EditDataDialog ref="EditDataDialogRef"></EditDataDialog>
    </div>
   
  </template>
  
  <script setup>
  import {
      defineComponent,
      onBeforeUnmount,
      ref,
      reactive,
      getCurrentInstance,
      onActivated,
  } from 'vue';
  import { useRouter } from 'vue-router';
  // import { copyValue } from '@/common/otherTools';
  // import DictTags from '@/components/dictTags.vue';
  // import { debounceFn } from '@/common/debounceAndThrottle';
  import { messageSuccess, confirm } from '@/action/messagePrompt.js';
  import EditDataDialog from './components/editDataDialog.vue';
  // import { hasPermi } from '@/action/powerTools';
  
  
   const EditDataDialogRef = ref(null); //组件实例
  
  const tableData = [
    {
      id: '1',
      username: '13409765432',
      useruermissions: '超级管理员',
      creationtime:"2024/11/21 12:16:26"
    },
    {
        id: '2',
        username: '13409765432',
        useruermissions: '无',
        creationtime:"2024/11/21 12:16:26"
    },
    {
        id: '3',
        username: '13409765432',
        useruermissions: '普通人员',
        creationtime:"2024/11/21 12:16:26"
    }
  ]
  
          //新增用户组按钮
          function handleAdd  (){
          if (!EditDataDialogRef.value) return;
              EditDataDialogRef.value
              .initData(
                  true,
                  {},
                  {
                      afterTitle: ' - 添加',
                  },
              )
              .then(() => {})
              .catch(() => {});
          }
  
          /** 禁用操作 */
          function handleDetails(row, querys) {
              confirm('确定要禁用吗？',
                  {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  })
              .then(()=>{
                  messageSuccess('禁用成功');
              })
              .catch(()=>{})
             
          }
          /** 编辑按钮操作 */
          function handleEdit(row, querys) {
              if (!EditDataDialogRef.value) return;
              EditDataDialogRef.value
                  .initData(
                      true,
                      {
                          ...row,
                      },
                      {
                          ...querys,
                      },
                  )
                  .then(() => {})
                  .catch(() => {});
          }
          /** 删除 */
          function handleDelete(rows) {
              confirm('确认删除该数据？',
                  {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  })
                  .then(() => {
                      // dataContainer.loading = true;
                      // deleteSalesLeadApi(rows.map(item=>item.id).join(',')).then(() => {
                      //     getDataList();
                      // }).catch(()=>{
                      //     return;
                      // }).finally(()=>{
                      //     dataContainer.loading = false;
                      // });
                      messageSuccess('删除成功');
                  })
                  .catch(() => {});
          }
  
  
  
  </script>
  
  <style scoped lang='scss'>
  .main-view {
      display: flex;
      flex-direction: column;
      > .page-query-box {
          margin: 0 0 10px 0 !important;
          padding: 10px 10px 0px 10px;
          :deep(.el-form-item) {
              margin-bottom: 10px !important;
          }
          :deep(.el-form-item--default) {
              width: 100%;
              margin-right: 0;
          }
      }
      > .content-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 10px 10px;
          box-sizing: border-box;
          background: #fff;
          > .top-container {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 0px 0 10px 0;
          }
          > .table-container {
              flex: 1 1 auto;
              height: 0;
              overflow: auto;
          }
      }
      .pagination-container {
          display: flex;
          justify-content: flex-end;
          padding: 0;
          margin: 10px 0 0 0;
      }
  }
  </style>