<template>
 <div class="position-re h100 task-watch">
   <my-breadcrumb class="my-breadcrumb" :breadcrumb-arr="taskWatchDetailArr"/>
   <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>

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


 </div>
</template>

<script>
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";

import DiyElForm from "@/components/common/DiyElForm.vue";
import {Search} from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import {taskWatchWatchDetailFilterForm} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import CommonLayout from "@/components/CommonLayout.vue";
import {taskWatchHomeDetailHomeHeader} from "@/data/all-table-header";
import {useActiveGetTableData, usePagination} from "@/unit/use-method/usePagination";
import {getTaskWatchDetailTableData} from "@/service/task-manage/task-watch";

export default {
  name: "TaskWatchDetailHome",
  computed: {
    Search() {
      return Search
    }
  },
  props:{
    currentOpObj:{}

  },
  components: {CommonLayout, MyTable, DiyElForm, MyBreadcrumb},
  setup(props) {
    useActiveGetTableData(getTableList)
    const taskWatchDetailArr = computed(() => {
      return  [
        {
          name:'任务管理  ',
        },
        {
          name:'任务监控',
        },
        {
          name:props.currentOpObj.TASK_DATE_START,
        },

      ]
    })
    const layoutRef = ref(null)
    const {pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl} = usePagination(getTableList)
    const form = ref()
    function getTableList(){
      getTaskWatchDetailTableData({
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize,
        CATALOG_NAME:layoutRef.value.form.CATALOG_NAME,
        UNIT_CODE:layoutRef.value.form.UNIT_CODE,
        START_DATE:props.currentOpObj.TASK_DATE_START || '',
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })
    }
    const tableControlBtns = ref([
      {
        id:'9af449d8-cdb4-4804-b15e-0f60d866c15f',
        type:'查询',
        className:'glyphicon glyphicon-credit-card'
      },
      {
        id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
        type:'元数据查询',
        className:'glyphicon glyphicon-credit-card'
      },
      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'导入',
        className:'glyphicon glyphicon-credit-card'
      }
    ])
    return {
      taskWatchDetailArr,
      taskWatchWatchDetailFilterForm,
      form,
      tableControlBtns,
      taskWatchHomeDetailHomeHeader,
      layoutRef,
      getTableList,
      pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl,
    }
  }
}
</script>

<style scoped lang="scss">
.task-watch{
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
</style>
