<template>
  <PageWrapper dense>
    <Row>
      <!-- 左边部门选择 -->
      <Col v-bind="{ xs: 24, sm: 24, md: 24, lg: 4 }" class="h-[calc(100vh-80px)]">
        <DeptTree
          v-model:selectDeptId="selectDeptId"
          v-model:searchValue="searchValue"
          @select="reloadData"
        />
      </Col>
      <Col v-bind="{ xs: 24, sm: 24, md: 24, lg: 20 }">
        <div
          style="
            background-color: white;
            border-radius: 8px;
            margin: 8px;
            padding: 16px 16px 16px 16px;
          "
        >
          <BasicForm @register="registerForm"> </BasicForm>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <a-button type="default" style="margin-right: 8px" @click="handleCancle"
              >重置</a-button
            >
            <a-button type="primary" @click="handleSubmit">搜索</a-button>
          </div>
        </div>
        <BasicTable @register="registerTable" :showLayout="true" :isShowTable="false">
          <template #noTableContent>
            <div>
              <VisitRadar :allAnaInfo="allAnaInfo"></VisitRadar>
            </div>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button
                type="link"
                @click="
                  downloadExcel(
                    elevatorRelevancyDeviceExport,
                    '电梯设备关联;数据',
                    getForm().getFieldsValue()
                  )
                "
                v-auth="'device:elevatorRelevancyDevice:export'"
                >导出</a-button
              >
            </template>
          </template>
        </BasicTable>
      </Col>
    </Row>
  </PageWrapper>
</template>

<script setup lang="ts">
import { Row, Col, message } from "ant-design-vue";
import { elevatorRelevancyDeviceExport } from "@/api/basicInfo/evaDeviceRelation";
import { downloadExcel } from "@/utils/file/download";
import { PageWrapper } from "@/components/Page";
import { BasicTable, useTable } from "@/components/Table";
import { evaAllList, infoList } from "@/api/basicInfo/elevator";
import { formSchemas, columns } from "./info.data";
import { onMounted, ref, toValue } from "vue";
import DeptTree from "./DeptTree.vue";
import VisitRadar from "./VisitRadar.vue";
import { BasicForm, useForm } from "@/components/Form";
import dayjs from 'dayjs'
defineOptions({ name: "Info" });
// 左边部门用
const selectDeptId = ref<string[]>([]);
const searchValue = ref<string>("");
const allAnaInfo = ref<any>({});

const [registerTable, { reload, getForm, setTableData }] = useTable({
  title: "电梯异常信息列表",

  showIndexColumn: false,
  rowKey: "id",
  useSearchForm: false,
  formConfig: {
    schemas: formSchemas,
    baseColProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 6,
    },
    resetFunc: async () => {
      selectDeptId.value = [];
      searchValue.value = "";
      await reload();
    },
  },
  columns: columns,
  // 需要添加上部门参数
  beforeFetch(params: Recordable) {
    if (toValue(selectDeptId).length === 1) {
      params.deptId = toValue(selectDeptId)[0];
      console.log(params.deptId,'dasdsadsa'); 
    }
    return params;
  },
  actionColumn: {
    width: 100,
    title: "操作",
    key: "action",
  },
});
const [
  registerForm,
  { setFieldsValue, resetForm, validate, updateSchema, setProps, getFieldsValue },
] = useForm({
  labelWidth: 100,
  showActionButtonGroup: false,
  baseColProps: { span: 6 },
  schemas: formSchemas,
});
const handleCancle = async()=>{
 await setFieldsValue({
    startTime:dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),
    endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    maintenanceName: '',
    tenementName: '',
  })
  selectDeptId.value = []
  const data =await getFieldsValue();
  data.maintenanceName = "";
  data.tenementName = "";
  await getAllData(data);
}
function handleSubmit() {
  const data = getFieldsValue();
  getAllData(data);
}

const reloadData = async()=>{
  const form = await validate();
  getAllData(form);
}
const getAllData = async (data) => {
  
  if (!data.startTime || !data.endTime) {
    message.info("请选择日期");
    return;
  }
  if (toValue(selectDeptId).length === 1) {
      data.deptId = toValue(selectDeptId)[0];
      console.log(data.deptId,'dasdsadsa'); 
    }
  const res = await evaAllList(data);
  console.log(res, "res");
  allAnaInfo.value = res;
};
onMounted(async () => {
  const form = await validate();
  getAllData(form);
});
</script>

<style scoped></style>
