<template>
  <div class="m-4 mr-0 overflow-hidden bg-white" style="width:30%">
    <BasicTable @register="registerTable" @row-click="handleRowSelection" @fetch-success="setDefaultSelectedRow">
    </BasicTable>
  </div>
</template>

<script lang="ts" name="metric-metricAppSystem" setup>
  import {ref,onMounted} from 'vue';
  import {BasicTable, useTable, BasicColumn} from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage'
  import {list} from './MetricAppSystem.api';
  import { defineEmits } from 'vue';
  import { render } from '/@/utils/common/renderUtils';

  const emit = defineEmits(['onClickRow1','success']);
  const columns: BasicColumn[] = [
   {
    title: '应用系统名称',
    align:"left",
    dataIndex: 'name',
    sorter: true,
    resizable:true,
    width:200
   },
   {
    title: '运行状态',
    align:"center",
    dataIndex: 'sta',
    sorter: true,
    resizable:true,
    width:80,
    customRender: ({ text }) => {
      return render.renderDict(text, 'app_system_sta');
    },
   },
  //  {
  //   title: '权重',
  //   align:"center",
  //   dataIndex: 'weight'
  //  }
];


  const [registerTable,{getSelectRows,setSelectedRowKeys,getDataSource}] = useTable({
      title: '重要信息系统表',
      api: list,
      columns,
      size:"small",
      showIndexColumn:false,
      showTableSetting:false,
      showActionColumn:false,
      canResize:false,
      useSearchForm:false,
      pagination:true,
      clickToRowSelect:true,
      //inset:true,
      rowSelection: {
        type: 'radio',
      },
      
  })


  
  function handleRowSelection() {
    const rowAry = getSelectRows();
    emit("onClickRow1",rowAry[0])
  }

  function setDefaultSelectedRow(){
    let dataSource = getDataSource();
     if(dataSource.length>0) {
       let key = dataSource[0].key
       setSelectedRowKeys([key])
       emit("onClickRow1",dataSource[0])
     }
  }


</script>
