<template>
  <div class="main">
    <PageWrapper v-if="!status" >
      <BasicTable @register="registerTable" style="flex: auto" >
        <template #toolbar>
          <Authority value="api:yt:faultReport:facility:post">
            <Button type="primary" @click="handleCreate('add')">
              {{ t('faultReport.facility.createCategoryText') }}
            </Button>
          </Authority>
        </template>
      </BasicTable>
    </PageWrapper>
    <PageWrapper v-else class="page">
      <BreadcrumbIot :breadcrumbList="breadcrumbData" />
      <div class="page-form">
        <ModuleTitle :title="t('faultReport.facility.createCategoryText')" />
        <BasicForm
            @register="registerForm"
            @submit="handleSubmit"
            style="padding: 10px 80px 10px 10px"
        >
        </BasicForm>
        <div class="page-form-button">
          <Authority value="api:yt:faultReport:facility:post">
            <Button @click="handleSubmit">
              {{ t('common.cancelText') }}
            </Button>
          </Authority>
          <Authority >
            <Button type="primary" @click="handleSubmit" style="margin-left: 10px">
              {{ t('common.okText') }}
            </Button>
          </Authority>
        </div>
      </div>
    </PageWrapper>

  </div>
</template>
<script lang="ts" setup>
import {getPlanList} from "/@/api/equipment/chenkPlan";
import {columns, searchFormSchema} from "./index";
import { useRouter, useRoute } from 'vue-router';
import {DeviceModel} from "/@/api/device/model/deviceModel";
import {useI18n} from "/@/hooks/web/useI18n";
const { t } = useI18n();
import {BasicTable, useTable} from "/@/components/Table";
import {PageWrapper} from "/@/components/Page";
import { BreadcrumbIot } from "/@/views/common/BreadcrumbIot"
import { ModuleTitle } from "/@/views/common/ModuleTitle"
import {Button} from "ant-design-vue";
import {Authority} from "/@/components/Authority";
import {ref,watchEffect} from "vue";
import {BasicForm, useForm} from "/@/components/Form";
import {formSchema} from "./index";
const router = useRouter();
const route = useRoute();
const status = ref<string>('');
const [
  registerForm,
  { validate, setFieldsValue, resetFields, updateSchema, validateFields, getFieldsValue },
] = useForm({
  labelWidth: 120,
  schemas: formSchema,
  showActionButtonGroup: false,
});

const breadcrumbData = [
  {
    title: '故障报修',
    query: 'add',
  },
  {
    title: '新增故障',
    query: '',
  },
];
const [
  registerTable,
  { reload, setLoading, setSelectedRowKeys, getForm, getSelectRowKeys, getRowSelection },
] = useTable({
  title: t('faultReport.facility.listText'),
  api: getPlanList,
  columns,
  formConfig: {
    labelWidth: 100,
    schemas: searchFormSchema,
  },
  immediate: true,
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  showIndexColumn: false,
  clickToRowSelect: false,
  rowKey: 'id',
  actionColumn: {
    width: 230,
    title: t('common.actionText'),
    slots: { customRender: 'action' },
    fixed: 'right',
  },
  rowSelection: {
    type: 'checkbox',
    getCheckboxProps: (record: DeviceModel) => {
      return {disabled: !!record.customerId && record.customerName !== 'Public'};
    },
  }
});

watchEffect(() => {
  const type = route?.query?.type || '';
  console.log(type, 'type');
  // if (type === 'add') {
  //   status.value = 'add';
  // } else if (type === 'edit') {
  //   status.value = 'edit';
  // }
  status.value = type === 'add' ? 'add' : type === 'edit' ? 'edit' : 'default';
});

const handleCreate = (text: string) => {
  router.push({
    path: route.path,
    query: { type: text },
  });
};
const handleSubmit = () => {
  console.log('handleSubmit');
  const value = getFieldsValue();
  console.log(value,'value')
}

</script>
<style>
.main {
  display: flex;
  height: 100%;
}
.page {
  padding: 16px;
}
.page-form {
  margin-top: 16px;
  padding: 16px;
  background-color: #fff;
  font-size: 14px;
  flex: 1;
}
.overflow-hidden {
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
}
.page-form-button {
  width: 100%;
  text-align: center;
}
</style>