<template> 
<div class="m-4 mr-0 overflow-hidden bg-white" style="width:60%;padding: 10px;">
    <BasicTable @register="registerTable">
        <template #tableTitle>
            <a-button v-if="metricObj&&metricObj.id" type="primary" @click="handleExeCaluculat" preIcon="ant-design:plus-outlined"> 计算</a-button>   
            <a-tag v-if="metricObj&&metricObj.unit" color="red"  style="padding:5px">单位:{{metricObj.unit}}</a-tag>         
            <a-tag v-if="metricObj&&metricObj.des"  style="padding:5px;margin-left:3px">
              <JEllipsis :value="metricObj.des" :length="20"/>
            </a-tag>      
        </template>
        <template #bodyCell="{ column, record }">
                <!-- <template v-if="column.key == 'fillVals' && !record.editable" >
                   {{record.fillVals}}
                </template> -->
                <template v-if="column.key == 'riskLevel'">
                      <a-badge color="#A9A9A9" status="default" v-if="!record.riskLevel" text="-"/>
                      <a-badge status="success" v-else-if="record.riskLevel==1" text="正常"/> 
                      <a-badge status="processing" v-else-if="record.riskLevel==2" text="预警"/> 
                      <a-badge status="error"  v-else text="干预"/> 
                </template>
              </template>
    </BasicTable>   

 </div>
</template>
<script lang="ts" setup>
  import {BasicColumn} from '/@/components/Table';
  import {ref,defineProps} from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { queryList,exeCaluculat } from './MetricReport.api';
  import { BasicTable, useTable } from '/@/components/Table';
  import { cloneDeep } from 'lodash-es';
  import { Moment } from 'moment';

  import { JEllipsis } from '/@/components/Form';
  import {useModal} from '/@/components/Modal';


  const activeKey = ref('tableList');
  const [registerModal, {openModal}] = useModal();
  const { createMessage } = useMessage();
  const dataList = ref([])
  
  const props = defineProps({
    data: { require: true, type: Object },
  });

  const columns: BasicColumn[] = [
    {
      title: '统计周期',
      align:"center",
      dataIndex: 'fillTime',
      width:150,
    },{
      title: '计算结果值',
      align:"center",
      dataIndex: 'fillVals',
      width:150,
    // },{
    //   title: '单位',
    //   align:"center",
    //   dataIndex: 'unit',
    //   width:80,
    },{
      title: '风险等级',
      align:"center",
      dataIndex: 'riskLevel',
      width:100,
    }
  ];

  const [registerTable,{reload}] = useTable({
        title: '',
        dataSource:dataList,
        columns: columns,
        size:"small",
        showIndexColumn:false,
        showTableSetting:false,
        showActionColumn:false,
        canResize:false,
        useSearchForm:false,
        inset:true,
        pagination:true,
        scroll: { y: 460 },
        bordered:true, 
    });


  const metricObj = ref()
  
  async function setData(param) {
      dataList.value = [];
      metricObj.value = param;
      if(metricObj.value&&metricObj.value.mtrcNo) {
        let list = await queryList({"mtrcNo":metricObj.value.mtrcNo});
        list.forEach(item => {
          item['unit'] = metricObj.value.unit
        });
        dataList.value = list
      } 
  
  }

  function handleExeCaluculat() {
     exeCaluculat(metricObj.value).then(() => {
      setData( metricObj.value);
    }).catch((error) => {
      console.error(error);
    });
  }

  defineExpose({
    setData
  });


</script>
