<template>
  <div class="h100 position-re">
    <common-layout
      :form-attrs="{
     spanAttrs: {span:4}
     }"
      rel="layoutRef"
      :filter-form="dataLifeCycleDetailFilterForm"
      :table-header="dataLifeCycleDetailTableHeader"
      :table-attrs="{

     }"
      :get-table-list="getTableList"
      ref="layoutRef"
    >

      <template #form-bottom>
        <div class="info">
          <span>入库时间</span>
          <span class="time">{{currentOpObj.RKSJ}}</span>
        </div>
      </template>
      <template v-for="item in dataLifeCycleDetailTableHeader.filter(i => i.prop !== 'PROVIDERUNIT' && i.prop !== 'NAME')" #[item.prop]="{data}">
        <el-link @click="changeDetailObj('detail',data,item)" type="primary" v-if="+data[item.prop] > 0">{{data[item.prop]}}</el-link>
        <span v-else>{{data[item.prop]}}</span>
      </template>
      <template #PROVIDERUNIT="{data}">
        {{useRootStore().allSelectUnit.find(i => i.value === data.PROVIDERUNIT)?.label}}
      </template>
      <template #top>
        <my-breadcrumb class="my-breadcrumb" :breadcrumb-arr="bradeArr"></my-breadcrumb>
        <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
      </template>

    </common-layout>
  </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {ref} from "vue";
import {dataLifeCycleDetailTableHeader, dataLifeCycleHomeTableHeader} from "@/data/all-table-header";
import {dataLifeCycleDetailFilterForm, dataLifeCycleHomeFilterForm} from "@/data/all-forms";
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import {
  getLifeCycleDetailHomeTableData,

} from "@/service/data-sync-hanlle-watch/data-life-cycle";
import {useRootStore} from "@/stores/useStore";

export default {
  name: "DataLifeCycleDetailHome",
  methods: {useRootStore},
  components: {MyBreadcrumb, CommonLayout},
  props:{
    currentOpObj:{

    }
  },
  setup(props,{emit}) {
    function changeDetailObj(op,data,prop) {
      emit('changeDetailOperation',op,{
        ...data,
        prop:prop
      })
    }
    const bradeArr =[
      {name:'数据同步治理监控 '},
      {name:' 数据同步治理监控表 '},
    ]
    function getTableList() {
      getLifeCycleDetailHomeTableData({
        PAGEINDEX:layoutRef.value.pageIndex,
        PAGESIZE:layoutRef.value.pageSize,
        name:layoutRef.value.form.name,
        unitId:layoutRef.value.form.unitId,
        time:props.currentOpObj.RKSJ,
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })

    }
    const layoutRef = ref(null)
    return {
      layoutRef,
      getTableList,
      dataLifeCycleDetailTableHeader,
      dataLifeCycleDetailFilterForm,
      bradeArr,
      changeDetailObj
    }
  }
}
</script>

<style scoped lang="scss">
.time{
  margin-left: 3px;
  color: #37639c;
  font-weight: bolder;
}
.info{
  top: 160px;
  right: 30px;
  position: absolute;
}
</style>
