<template>
  <PageWrapper dense>
    <!-- <DeptTree
          v-model:selectDeptId="selectDeptId"
          v-model:searchValue="searchValue"
          @select="reload"
        /> -->

    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button
          @click="
            downloadExcel(largeScreenExport, '大屏分组基础信息;数据', getForm().getFieldsValue())
          "
          v-auth="'elevator:largeScreen:export'"
          >导出</a-button
        >
        <a-button
          type="primary"
          danger
          @click="multipleRemove(largeScreenRemove)"
          :disabled="!selected"
          v-auth="'elevator:largeScreen:remove'"
          >删除</a-button
        >
        <a-button type="primary" @click="handleAdd" v-auth="'elevator:largeScreen:add'">新增</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '修改',

                type: 'primary',
                ghost: true,
                auth: 'elevator:largeScreen:edit',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',

                type: 'primary',
                danger: true,
                ghost: true,
                auth: 'elevator:largeScreen:remove',
                popConfirm: {
                  placement: 'left',
                  title: '是否删除大屏;[' + record.id + ']?',
                  confirm: handleDelete.bind(null, record),
                },
              },
              {
                label: '进入大屏',

                type: 'primary',
                ghost: true,
               
                onClick: handlePreview.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>

    <InfoModal @register="registerModal" @reload="reload" />
    <CommonTenementModal @register="registerUserModal"></CommonTenementModal>
    <CommonUserEmployModal @register="registerUserEmployModal"></CommonUserEmployModal>
  </PageWrapper>
</template>

<script setup lang="ts">
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {
  infoList,
  largeScreenExport,
  largeScreenRemove,
  largeScreenList,
} from '@/api/basicInfo/tenement';
import { downloadExcel } from '@/utils/file/download';
import { useModal } from '@/components/Modal';
import InfoModal from './InfoModal.vue';
import { formSchemas, columns } from './info.data';
import CommonTenementModal from '@/components/CommonTenementModal/UserManageModal.vue';
import CommonUserEmployModal from '@/components/CommonUserEmployModal/UserManageModal.vue';
import DeptTree from '@/components/commonDeptTree/DeptTree.vue';
import { ref, toValue } from 'vue';
import { Row, Col, Modal } from 'ant-design-vue';
defineOptions({ name: 'Info' });
const selectDeptId = ref<string[]>([]);
const searchValue = ref<string>('');
const [registerTable, { reload, multipleRemove, selected, getForm }] = useTable({
  rowSelection: {
    type: 'checkbox',
  },
  title: '大屏分组列表',
  api: largeScreenList,
  showIndexColumn: false,
  rowKey: 'id',
  useSearchForm: true,
  formConfig: {
    schemas: formSchemas,
    baseColProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 6,
    },
    resetFunc: async () => {
      selectDeptId.value = [];
      searchValue.value = '';
      await reload();
    },
  },
  // 需要添加上部门参数
  beforeFetch(params: Recordable) {
    if (toValue(selectDeptId).length === 1) {
      params.deptId = toValue(selectDeptId)[0];
    }
    return params;
  },
  columns: columns,
  actionColumn: {
    width: 250,
    title: '操作',
    key: 'action',
    fixed: 'right',
  },
});

const [registerModal, { openModal }] = useModal();
const [registerUserModal, { openModal: openUserModal }] = useModal();
const [registerUserEmployModal, { openModal: openUserEmployModal }] = useModal();
function handleClearData() {
  Modal.confirm({
    title: '您确定要进行该操作？',
    content: '',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK');
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}
function handleOpenEmployModal() {
  openUserEmployModal(true);
}
function handleEdit(record: Recordable) {
  openModal(true, { record, update: 1 });
}
function handlePreview(record: Recordable) {
  console.log(record.name);
  const parse = JSON.parse(record.areaCode);
  const areaCode = parse[parse.length - 1];
  window.open(`${record.address}?areaCode=${areaCode}&name=${record.name}`);
}
function handleAdd() {
  openModal(true, { update: 2 });
}
function handCheck(record: Recordable) {
  openModal(true, { record, update: 3 });
}
async function handleDelete(record: Recordable) {
  await largeScreenRemove([record.id]);
  await reload();
}
function handleOpenUserModal() {
  openUserModal(true);
}
</script>

<style scoped></style>
