<template>
 <div class="h100">
   <common-layout
     :form-attrs="{
     spanAttrs: {span:4}
     }"
     :filter-form="dataLifeCycleHomeFilterForm"
     :table-header="dataLifeCycleHomeTableHeader"
     :table-attrs="{
     'has-operation':true
     }"
     :get-table-list="getTableList"
    ref="layoutRef"
   >
     <template #operation="{data}">
       <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
     </template>
   </common-layout>
 </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {ref} from "vue";
import {dataLifeCycleHomeTableHeader} from "@/data/all-table-header";
import {dataLifeCycleHomeFilterForm} from "@/data/all-forms";
import {getDataLifeCycleHomeTable} from "@/service/data-sync-hanlle-watch/data-life-cycle";

export default {
  name: "DataLifeCycleHome",
  components: {CommonLayout},
  setup() {
    function getTableList() {
      getDataLifeCycleHomeTable({
        PAGEINDEX:layoutRef.value.pageIndex,
        PAGESIZE:layoutRef.value.pageSize,
        startTime:layoutRef.value.form.startTime,
        endTime:layoutRef.value.form.endTime,
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })

    }
    const layoutRef = ref(null)
    return {
      layoutRef,
      getTableList,
      dataLifeCycleHomeTableHeader,
      dataLifeCycleHomeFilterForm
    }
  }
}
</script>

<style scoped lang="scss">

</style>
