<template>
  <div>
    <PageWrapper dense contentFullHeight contentClass="flex">
      <BasicTable style="flex: auto" @register="registerTable" class="w-5/6 xl:w-4/5 type-table">
        <template #toolbar>
          <Authority :value="UnitListAuthEnum.CREATE">
            <a-button
              type="primary"
              @click="handleBussinessDrawer('add', null)"
              v-if="authBtn(role)"
            >
              {{ t('common.createText') }}
            </a-button>
          </Authority>
          <Authority
              :value="[UnitListAuthEnum.DELETE, UnitListAuthEnum.ENABLE, UnitListAuthEnum.STOP]"
          >
            <AuthDropDown
                v-if="authBtn(role)"
                :disabled="!isExistOption"
                :dropMenuList="[
                {
                  text: t('common.delText'),
                  auth: UnitListAuthEnum.DELETE,
                  icon: 'ant-design:delete-outlined',
                  popconfirm: {
                    title: t('common.batchDeleteConfirmText'),
                    onConfirm: () => handleDelete(),
                  },
                },
                {
                  text: t('common.enableText'),
                  auth: UnitListAuthEnum.ENABLE,
                  icon: 'ant-design:check-circle-outlined',
                  onClick: handleChangeStatus.bind(null, 'enable'),
                },

                {
                  text: t('common.stop'),
                  auth: UnitListAuthEnum.STOP,
                  icon: 'ant-design:close-circle-outlined',
                  onClick: handleChangeStatus.bind(null, 'stop'),
                },
              ]"
            >
              <a-button type="primary" :disabled="!isExistOption">
                {{ t('deviceManagement.device.batchActionText') }}
              </a-button>
            </AuthDropDown>
          </Authority>
        </template>
        <template #members="{ record }">
          <span @click="lookMembers(record)">
            {{ record.profileName }}
          </span>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: t('common.editText'),
                auth: UnitListAuthEnum.UPDATE,
                icon: 'clarity:note-edit-line',
                onClick: handleBussinessDrawer.bind(null, 'edit', record),
              },
              {
                label: t('common.delText'),
                icon: 'ant-design:delete-outlined',
                auth: UnitListAuthEnum.DELETE,
                color: 'error',
                popConfirm: {
                  title: t('common.isDelete'),
                  confirm: handleDelete.bind(null, record),
                },
              },
              {
                label: t('common.stop'),
                auth: UnitListAuthEnum.STOP,
                icon: 'ant-design:check-circle-outlined',
                onClick: handleChangeStatus.bind(null, 'stop', record),
                ifShow: record.status === 'ENABLE',
              },
              {
                label: t('common.enableText'),
                auth: UnitListAuthEnum.ENABLE,
                icon: 'ant-design:close-circle-outlined',
                ifShow: record.status === 'STOP',
                onClick: handleChangeStatus.bind(null, 'enable', record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <TypeDrawer @register="registerDrawer" @success="handleSuccess" @reload="handleSuccess" />
      <!-- 弹窗组件 -->
      <MembersDialog
          v-model="dialogMembersVisible"
          :detail-id="selectedRowId"
      />
    </PageWrapper>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { TypeDrawer, MembersDialog } from './components/modal/index';
  const searchInfo = reactive<Recordable>({});
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  // import {
  //   getEquipmentTypeList,
  //   deleteEquipmentType,
  //   updateEquipmentTypeStatus,
  // } from '/@/api/archive/type';
import {
  unitPage,
} from '/@/api/basicConfiguration/unit';
  import { columns, searchFormSchema, UnitListAuthEnum } from './config/type.data';
  import { useBatchOperation } from '/@/utils/useBatchOperation';
  import { useI18n } from '/@/hooks/web/useI18n';
import { AuthDropDown } from '/@/components/Widget';
  import { authBtn } from '/@/enums/roleEnum';
  import { Authority } from '/@/components/Authority';
  import { getAuthCache } from '/@/utils/auth';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { useDrawer } from '/@/components/Drawer';


  // 业务弹窗
  const [registerDrawer, { openDrawer }] = useDrawer();
  const { t } = useI18n();
  const userInfo: any = getAuthCache(USER_INFO_KEY);
  const role: string = userInfo.roles[0];

  console.log('role----', role)

  const { createMessage } = useMessage();


  const [
    registerTable,
    { reload, setLoading, getSelectRowKeys, setSelectedRowKeys, getRowSelection },
  ] = useTable({
    title: t('basicConfiguration.unit.unitListText'),
    api: unitPage,
    columns,
    beforeFetch: (params) => {
      const { deviceProfileId } = params;
      if (!deviceProfileId) return;
      const obj = {
        ...params,
        ...{
          deviceProfileIds: deviceProfileId ? [deviceProfileId] : null,
        },
      };
      delete obj.deviceProfileId;
      return obj;
    },
    formConfig: {
      labelWidth: 140,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
    searchInfo: searchInfo,
    clickToRowSelect: false,
    rowClassName: (record) => ((record as any).alarmStatus ? 'device-alarm-badge' : ''),
    rowSelection: { type: 'checkbox' },
    actionColumn: {
      width: 200,
      title: t('common.actionText'),
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const { isExistOption } = useBatchOperation(getRowSelection, setSelectedRowKeys);

  // 业务弹窗
  const handleBussinessDrawer = (text, record) => {
    const modalParams = {
      text,
      record,
    };
    openDrawer(true, modalParams);
  };

  // 删除
  const handleDelete = async (record?: any) => {
    // eslint-disable-next-line no-console
    console.log(record, '这是一条临时调试用的日志');
    let ids: string[] = [];
    if (record) {
      ids = [record.id];
    } else {
      ids = getSelectRowKeys();
    }
    try {
      setLoading(true);
      // await deleteEquipmentType({ ids });
      createMessage.success(t('common.deleteSuccessText'));
      handleReload();
    } catch (error) {
      throw error;
    } finally {
      setLoading(false);
    }
  };

  // 启用 停用
  const handleChangeStatus = async (type: 'enable' | 'stop', record?: any) => {
    let ids: string[] = [];
    if (record?.id) {
      ids = [record?.id];
    } else {
      ids = getSelectRowKeys();
    }
    if (ids?.length)
      try {
        setLoading(true);
        if (type === 'enable') {
          // await updateEquipmentTypeStatus({ ids, status: 'ENABLE' });
        } else {
          // await updateEquipmentTypeStatus({ ids, status: 'STOP' });
        }
        createMessage.success(t('common.editSuccessText'));
        handleReload();
      } catch (error) {
        throw error;
      } finally {
        setLoading(false);
      }
  };


  // 控制弹窗显示
  const dialogMembersVisible = ref(false);
  // 存储当前选中行数据
  const selectedRowId = ref(null);

  const lookMembers = (item: any) => {
    console.log('lookMembers--item', item)
    console.log('lookMembers--item.organizationName', item.organizationName)
    selectedRowId.value = item.id; // 存储行数据
    dialogMembersVisible.value = true; // 显示弹窗
  }

  // 重置
  function handleReload() {
    setSelectedRowKeys([]);
    handleSuccess();
  }

  function handleSuccess() {
    reload();
  }

</script>

<style scoped lang="less">
  .type-table {
    :deep(.ant-form-item-control-input-content) {
      & > div > div {
        width: 100%;
      }
    }
  }
</style>

<style lang="less">
  .type-status {
    position: relative;

    .type-collect {
      width: 0;
      height: 0;
      border-top: 30px solid #377dff;
      border-right: 30px solid transparent;
    }
  }

  .type-name-edge {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    position: relative;
  }
</style>