<template>
    <BasicDrawer placement="right" @register="registerDrawer" v-bind="$attrs" :title="pageTitle" width="80%" @close="closeThisDrawer"> 
    <PageWrapper  contentFullHeight="true" contentClass="flex" style="height:100%;overflow: none;">
      <a-row :gutter="12" style="background:#d9d9d9;padding:10px">
            <a-col :span="6" style="height: calc(90vh - 10px);background:#FFF">
                <div style="font-size:15px;overflow-y: auto;height:calc(90vh - 30px);">
                    <a-directory-tree :showLine="showLine" :tree-data="stDomainData"
                        v-model:expandedKeys="expandedKeys"
                        v-model:selectedKeys="selectedKeys"
                        @select="onTreeSelect"
                        >
                    </a-directory-tree>
                </div>
            </a-col>
            <a-col :span="18" style="height: calc(90vh - 10px);">
              <a-card
                  style="font-size:15px;overflow-y: auto;height:calc(90vh - 10px);"
                  :tab-list="rightTabs"
                  :active-tab-key="rightActiveKey"
                  @tabChange="key => rightTabChange(key)"
                >

              <template #tabBarExtraContent>
                <a-button type="link" @click="handleSubmit" block>保存</a-button>
              </template>
                            
              <div class="scroll-wrap" v-show="rightActiveKey == 'base'">
                <MetricMonitorSetForm  ref="registerMetricMonitorSetForm"></MetricMonitorSetForm>
              </div>

              <div class="scroll-wrap" v-show="rightActiveKey == 'formula'">
                <MetricMonitorSetFormulaForm  ref="registMetricFormulaForm"></MetricMonitorSetFormulaForm>
              </div>

              <div class="scroll-wrap" v-show="rightActiveKey == 'other'">
                <MetricMonitorSetOtherForm  ref="registMetricOtherForm"></MetricMonitorSetOtherForm>
              </div>
                
              </a-card>
            </a-col>
      </a-row>      
    </PageWrapper>    
    </BasicDrawer>
  </template>
  <script lang="ts" setup>
  //   import {ref} from 'vue';
  //   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  //   import {saveOrUpdate,loadDomainTreeData,saveOrUpdateOther} from '../MetricMonitorSet.api';
 
  //   import MetricMonitorSetForm from './MetricMonitorSetForm.vue';
  //   import MetricMonitorSetOtherForm from './MetricMonitorSetOtherForm.vue';
  //   import MetricMonitorSetFormulaForm from './MetricMonitorSetFormulaForm.vue';

  //   const emit = defineEmits(['register','success']);

  //   const rightActiveKey = ref('base');
  //   const pageTitle = ref("创建或修改指标")
  //   const stDomainData = ref([]);

  //   const curSelNode = ref({})
  //   const showLine = ref(false)

  //   const expandedKeys = ref([]);
  //   const selectedKeys = ref([]);

  //   const registerMetricMonitorSetForm = ref();
  //   const registMetricFormulaForm = ref();
  //   const registMetricOtherForm = ref();
   
  //   const isUpdate = ref();

  //   const [registerDrawer,{closeDrawer,setDrawerProps}] = useDrawerInner(async (data) => {
        
  //       await setDomainData("")

  //       isUpdate.value = false
  //       if(data&&data.id) {
  //         isUpdate.value = true
  //         registerMetricMonitorSetForm.value.setData(data)
  //         registMetricFormulaForm.value.setData(data);
  //         const metricOther = await getMetricOtherByMid({id:data.id});
         
  //         if(metricOther){
  //           registMetricOtherForm.value.setData(metricOther);
  //         }

  //         selectedKeys.value.push(data.domainNo)
    
  //       }
  //   });


  // const rightTabs = [{
  //     key: 'base',
  //     tab: '基本内容',
  //   },{
  //     key: 'formula',
  //     tab: '公式',
  //   },{
  //     key: 'other',
  //     tab: '其它',
  //   }
  // ];


  // const rightTabChange = (type: string) => {
  //   rightActiveKey.value = type;
  // };

  // async function handleSubmit() {
  //     try {
  //         setDrawerProps({confirmLoading: true});
  //         let  metricData =  await registerMetricMonitorSetForm.value.getData()
  //         let  formulaData = await registMetricFormulaForm.value.getData();
  //         let  otherData =  await registMetricOtherForm.value.getData();

  //         if(formulaData.params) {
  //           metricData["params"] = formulaData.params
  //         }
  //         if(formulaData.formulas) {
  //           metricData["formulas"] = formulaData.formulas
  //         }
  //         metricData["mtrcCtp"] = 2; 
  //         let retMetric = await saveOrUpdate(metricData);
  //         let otherIsUpdate = isUpdate.value&&otherData.id
  //         if(isUpdate.value) {
  //           otherData["id"] = metricData.id
  //         } else {
  //           otherData["id"] = retMetric.id
  //         }
  //         await saveOrUpdateOther(otherData,otherIsUpdate);
  //         closeDrawer();
  //         emit('success');
  //     } finally {
  //         setDrawerProps({confirmLoading: false});
  //     }
  //   }

  //   function onTreeSelect(selectedKeys, e:{selected: Boolean, selectedNodes,node,event}) {
  //       if(e.selected) {
          
  //         if(rightActiveKey.value=="base") {
  //           registerMetricMonitorSetForm.value.setDomain({
  //             domainNo:selectedKeys[0]
  //           })
  //         } else if(rightActiveKey.value=="formula") {
  //           //registMetricFormulaForm.value.setData();
  //         } else  {
  //           //registMetricOtherForm.value.setData();
  //         }
  //       }
  //   }

  //   function closeThisDrawer()  {
  //     selectedKeys.value = []
  //   }


  //   async function setDomainData(pcode) {
  //     stDomainData.value = []
  //     if(!pcode) {
  //       let list  = await loadDomainTreeData({'async': true,'pcode':pcode});
  //       for(let i=0;i<list.length;i++){
  //         if(list[i].key=="10") {
  //           stDomainData.value.push(list[i])
  //           expandedKeys.value.push("10");

  //         }
  //       }
  //     } else {
  //       stDomainData.value = await loadDomainTreeData({'async': false,'pcode':pcode});
  //     }
  // }


  </script>

<style scope>
.underline-input {
  border-left:none;
  border-top:none;
  border-right:none;
  width: 100%;
}
</style>