<template>
  <BasicModal
    width="800px"
    title="新增指标"
    @register="registerModal"
    v-bind="$attrs"
    @ok="handleSubmit"
  >
    <div>基础信息</div>
    <div style="max-height: 30vh"> <BasicForm @register="registerForm" /></div>
    <div
      >监测值配置
      <a-radio-group :default-value="1" v-model:value="monitorType">
        <a-radio value="threshold"> 阈值类 </a-radio>
        <a-radio value="directives">指标类 </a-radio>
      </a-radio-group>
    </div>
    <div v-if="monitorType === 'threshold'">
      <BasicTable @register="registerTable" />
    </div>
    <div v-if="monitorType === 'directives'">
      <BasicForm @register="registerDirectivesForm" />
    </div>
    <div>设备绑定</div>
    <BasicForm @register="registerDeviceForm" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import {
    basicInfoFormSchema,
    deviceFormSchema,
    directivesFormSchema,
    thresholdTableColums,
  } from './indicatorForm.data';
  import { ref } from 'vue';

  const monitorType = ref('threshold');
  const [registerModal, { closeModal }] = useModalInner();
  const [registerForm] = useForm({
    labelWidth: 80,
    schemas: basicInfoFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 18,
    },
  });
  const [registerDeviceForm] = useForm({
    labelWidth: 80,
    schemas: deviceFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 18,
    },
  });
  const [registerDirectivesForm] = useForm({
    labelWidth: 80,
    schemas: directivesFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 18,
    },
  });
  const [registerTable] = useTable({
    title: '',
    columns: thresholdTableColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: false,
    canResize: false,
  });
  function handleSubmit() {
    closeModal();
  }
</script>
<style lang="less" scoped></style>
