<template>
<el-dialog

  :modal="true"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close

  title="标签记录详情"
  :model-value="dialogVisible"

  :before-close="handleClose"
>
 <div>
   <span class="my-data-source">数据资源</span>
   <span class="my-total">共 <strong>{{ totalCount }}</strong> 个目录项</span>
 </div>
  <my-table
    border
  :headers="labelRecordDialogTableHeader"
  :table-data="tableData"

  >
    <template #RUN_STATES="{data}">
      {{data['RUN_STATES'] ==='1'?'成功':(data['RUN_STATES'] ==='2'?'失败':'')}}
    </template>
  </my-table>
  <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>
</el-dialog>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {labelRecordDialogTableHeader} from "@/data/all-table-header";
import {usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import {onBeforeMount, onMounted} from "vue";
import {getLabelRecordDialogTableData} from "@/service/label-record";

export default {
  name: "LabelRecordDetailDialog",
  components: {ElePagination, MyTable},
  props:{
    dialogVisible:{

    },
    currentOpObj:{

    }
  },
  setup(props,{emit}) {
   function getTableList(){

       getLabelRecordDialogTableData({
         "pageIndex": pageIndex.value,
         "pageSize": pageSize.value,
         "CATALOG_ID": props.currentOpObj.CATALOG_LOG,
         "RUN_STATES": "",

       }).then(res => {
         tableData.value = res.msg[0].Rows
         totalCount.value = res.msg[0].TotalRowCount
       })


   }
    const {handleSizeChange,pageSize,pageIndex,refEl,tableData,totalCount} = usePagination(getTableList)
    function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      labelRecordDialogTableHeader,
      handleSizeChange,pageSize,pageIndex,refEl,tableData,totalCount
    }
  }
}
</script>

<style scoped lang="scss">

</style>
