<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1200" @ok="handleSubmit">
      
    <BasicTable @register="registerTable" @row-click="handleRowSelection">
      
    </BasicTable>

  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref,defineComponent} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    
    import { BasicTable, ColumnChangeParam, useTable } from '/@/components/Table';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { metricList,batchAdd } from '../MetricMonitorSet.api';
    import { StMetricColumns,searchStandSchema } from '../MetricMonitorSet.data';
    const emit = defineEmits(['register','success']);
       
      const title = "批量添加"
      const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
          setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
      });
      const [
        registerTable,{getSelectRows}] = useTable({
          title: '',
          api: metricList,
          columns: StMetricColumns,
          showTableSetting: true,
          pagination:true,
          canResize: false,
          useSearchForm: true,
          scroll: { y: 600 },
          bordered:false,
          rowSelection: {
              type: 'checkbox',
          },
          handleSearchInfoFn(info) {
          return info;
          },
          formConfig: {
              labelWidth: 120,
              schemas: searchStandSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
          },
      });

      async function handleSubmit() {
          const rowAry = getSelectRows();
          let tmpAry = []
          for(let data of rowAry) {
              tmpAry.push(data.metricNo);
          }
          
          await batchAdd({ metricNos:tmpAry.join(",")})
          closeModal();
          emit('success')
          
      }

</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>