<template>
 <div class=" data-table" :class="{'h100':activeTab === 'sync'}">
   <div class="p-t30">
     <diy-el-form :span="4" v-model:model-form="forms" :forms="dataSyncHandleTableFilterForm">
       <template #searchBtn>
         <el-button type="primary" :icon="Search" @click="getSyncTableData">查询</el-button>
       </template>
     </diy-el-form>
   </div>
   <div class="my-line"></div>
   <el-tabs type="card" v-model="activeTab" :class="{'isFlex':activeTab === 'sync'}">
     <el-tab-pane label="同步治理监控表" name="sync">
       <transition name="fade" mode="out-in">
         <div class="sync-div" v-show="activeTab === 'sync'">
           <div>
             <span class="my-data-source">数据资源</span>
             <span class="my-total">共 <strong>{{totalCount}}</strong> 个目录项</span>
           </div>
           <div class="my-op-btns" >
             <ul class="my-operation-btns">
               <li :title="btn.type" v-for="btn in tableControlBtns" @click="clickOperationBtn(btn)" :class="{'disabled':btn.disabled}"   :key="btn.id">
                 <span :class="btn.className"></span>
               </li>
             </ul>
           </div>
           <div class="table-area">
             <my-table
               :is-height-by-auto="false"
               border
               :headers="dataSyncHandleSyncTabTableHeader"
               :table-data="tableData"
               :has-operation="true"
             >
               <template #operation="{data}">
                 <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
               </template>
             </my-table>
           </div>

           <ele-pagination  ref="refEl"

                            @sizeOrPageChange="handleSizeChange"
                            class="page"
                            :default-page-size="pageSize"


                            :total-count="totalCount">

             <template #default>
               <div class="m-s">
                 显示第 {{pageSize * (pageIndex -1) + 1 }} 到第 {{pageSize * pageIndex}} 条记录，总共 {{totalCount}} 条记录 共显示

               </div>
             </template>
           </ele-pagination>
         </div>
       </transition>
     </el-tab-pane>
     <el-tab-pane label="数据归集统计表" name="data">
       <transition name="fade" mode="out-in">
         <div v-show="activeTab === 'data'">
           <iframe :src="baseUrl() + '/LogVisualization/viewExcel'"></iframe>
         </div>
       </transition>
     </el-tab-pane>
     <el-tab-pane label="DM业务时间统计表" name="dm">
       <transition name="fade" mode="out-in">
         <div v-show="activeTab === 'dm'">
           <iframe :src="baseUrl() + '/LogVisualization/viewDMExcel'"></iframe>
         </div>
       </transition>
     </el-tab-pane>
   </el-tabs>
 </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {dataSyncHandleTableFilterForm} from "@/data/all-forms";
import {onBeforeMount, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import MyTable from "@/components/common/MyTable.vue";
import {useActiveGetTableData, usePagination} from "@/unit/use-method/usePagination";
import {dataSyncHandleSyncTabTableHeader} from "@/data/all-table-header";
import ElePagination from "@/components/common/ElePagination.vue";
import {getDataSyncHandleWatchSheet} from "@/service/data-sync-hanlle-watch/data-sync-handle-watch-sheet";
import {baseUrl, baseUrl_Address} from "@/service/config";
import {useRootStore} from "@/stores/useStore";
import {UserInfo} from "@/unit/UserInfo";

export default {
  name: "DataSyncHandleTableHome",
  methods: {
    UserInfo,
    baseUrl() {
      return baseUrl
    },
    baseUrl_Address() {
      return baseUrl_Address
    }
  },
  computed: {
    Search() {
      return Search
    }
  },
  components: {ElePagination, MyTable, DiyElForm},
  setup() {
    useActiveGetTableData(getSyncTableData)
    function clickOperationBtn(item) {
      if (item.type === '导出'){
        window.location.href = baseUrl + "/LogVisualization/ExcelDownload?appkey="+useRootStore().userInfo.ptjk_userkeycode

      }
    }
    function getSyncTableData() {
      getDataSyncHandleWatchSheet({
        pageIndex:pageIndex.value,
        catalogName:forms.value.catalogName,
        unitCode:forms.value.unitCode,
        pageSize:pageSize.value,
      }).then(res => {
        tableData.value = res.msg[0].Rows
        totalCount.value = res.msg[0].TotalRowCount
      })

    }
    const {pageIndex,pageSize,handleSizeChange,totalCount,tableData,refEl}=  usePagination(getSyncTableData)
    onBeforeMount((item) => {

    })
    const tableControlBtns  = [

      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'导出',
        className:'glyphicon glyphicon-save'
      }
    ]
    const forms =ref({})
    const activeTab = ref('sync')
    return {
      dataSyncHandleTableFilterForm,
      tableControlBtns,
      forms,
      activeTab,
      pageIndex,pageSize,handleSizeChange,totalCount,tableData,refEl,
      dataSyncHandleSyncTabTableHeader,getSyncTableData,
      clickOperationBtn

    }
  }
}
</script>

<style scoped lang="scss">
.el-tabs.isFlex{
  :deep{
    .el-tabs__content{
        .sync-div{
          display: flex;
          flex-direction: column;
          .table-area{
            overflow: hidden;
            flex: 1;
          }
            height: 100%;
        }
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.data-table{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px 20px 10px;
}
:deep{
  .el-tab-pane[aria-hidden="false"]{
      flex: 1;
    overflow: hidden;

  }
  .el-tab-pane[aria-hidden="true"]{
    display: block !important;
    height: 0;
    overflow: hidden;
  }
}
iframe{
  overflow: auto;
  height: 800px;
  width: 100%;
}
</style>
