<template>
 <div class="position-re">
    <my-breadcrumb class="my-breadcrumb" :breadcrumb-arr="dataImputationRecordDetailBreadcrumbArr"/>
    <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
    <div class="my-detail-main">
      <div class="mb15">
        <span class="my-data-source">数据资源</span>
        <span class="my-total">共 <strong>{{totalCount}}</strong> 个目录项</span>
      </div>
      <my-table
        :page-size="8"

        :is-height-equal-max-height="true"
        border
        :headers="dataImputationRecordDetailTableHeader"
        :table-data="tableData"
        :has-operation="true"
      >
        <template #RUN_STATE="{data}">
          {{data.RUN_STATE === '0'?'异常':'正常'}}
        </template>
        <template #KETTLE_MODE="{data}">
          {{getMode(data.KETTLE_MODE)}}
        </template>
        <template #operation="{data}">
          <el-button type="info"  @click="openDialog(data)">查看</el-button>

        </template>

      </my-table>
      <ele-pagination  ref="refEl"


                       @sizeOrPageChange="handleSizeChange"
                       class="page hidden"
                       :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 class="m-s">
        显示第 {{1 }} 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录

      </div>
    </div>
   <template v-if="isDialogShow">
     <data-imputation-record-detail-dialog :current-dialog-obj="currentDialogObj"  v-model:dialog-visible="isDialogShow"/>
   </template>

 </div>
</template>

<script>
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import {dataImputationRecordDetailBreadcrumbArr} from "@/data/all-el-breadcrumb-arr";
import {useDetailOrEdit, usePagination} from "@/unit/use-method/usePagination";
import MyTable from "@/components/common/MyTable.vue";
import {dataImputationRecordDetailTableHeader} from "@/data/all-table-header";
import ElePagination from "@/components/common/ElePagination.vue";
import DataImputationRecordDetailDialog
  from "@/view/other/c-views/data-handle/data-imputation/data-imputation-record/DataImputationRecordDetailDialog.vue";
import {onBeforeMount, ref} from "vue";
import {getDtaImputationDetailTableData} from "@/service/data-gj/data-imputation-record";

export default {
  name: "DataImputationRecordDetail",
  components: {DataImputationRecordDetailDialog, ElePagination, MyTable, MyBreadcrumb},
  setup(props) {
    const isDialogShow = ref(false)
    function getMode(value){
      if (value == '0') {
        return "入共享库";
      } else if (value == '1') {
        return "入政务库";
      } else if (value == '2') {
        return "入信用库";
      } else if (value == '3') {
        return "入大数据中心";
      } else if (value == '4') {
        return "入市信用";
      }else if (value == '5') {
        return "入档案";
      }

    }
    function getTableList(){
       tableData.value = [{name:'lis'}]
    }
    function openDialog(data) {
      isDialogShow.value = true
      changeDialogOperation('detail',data)
    }
    onBeforeMount(() => {
      getDtaImputationDetailTableData(props.currentOpObj.CID).then(res => {
        tableData.value = res.msg[0].Rows
        totalCount.value = res.msg[0].TotalRowCount

      })
    })
    const {currentOpObj:currentDialogObj,operationType:dialogOperationType,changeOperation:changeDialogOperation} = useDetailOrEdit()

    const {pageSize,handleSizeChange,pageIndex,totalCount,tableData} = usePagination(getTableList)
    return {
      dataImputationRecordDetailBreadcrumbArr,
      pageSize,handleSizeChange,pageIndex,totalCount,tableData,
      dataImputationRecordDetailTableHeader,
      isDialogShow,
      openDialog,
      getMode,
      currentDialogObj,dialogOperationType,changeDialogOperation
    }
  },
  props:{
    operationType:{

    },
    currentOpObj:{

    }
  }
}
</script>

<style scoped lang="scss">
.my-detail-main{
  margin-top: 20px;
}
</style>
