<template>
 <div>
   <div class="mb15">
     <span class="data-source">数据资源</span>
     <span class="total">共 <strong>{{totalCount}}</strong> 个目录项</span>
   </div>
   <my-table
     border
     :page-size="8"
     :has-operation="true"
     :table-data="tableData"
     :headers="tableHeader"
   >
     <template #operation="{data}">
       <el-button type="info" @click="editC('edit',data)">编辑</el-button>
       <el-button type="info" v-if="type === 'theme'" @click="$emit('delRule',data)">删除</el-button>
     </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>
<!--   <template v-if="isLabelDialogShow">-->
<!--     <label-type-dialog :type="type" v-model:dialog-visible="isLabelDialogShow"/>-->
<!--   </template>-->
 </div>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {baseUseBaseLabelHeader, baseUseThemeLabelHeader} from "@/data/all-table-header";
import LabelTypeDialog from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/LabelTypeDialog.vue";
import {usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import {getLabelRuleHomeTableDataBase, getLabelRuleHomeTableDataTheme} from "@/service/zsk/base-rule/label-rule";
import {UserInfo} from "@/unit/UserInfo";

export default {
  name: "LabelTypeTabContent",
  components: {ElePagination, LabelTypeDialog, MyTable},
  props:{
  type:'',
    form:{

    }
},
  setup(props,{emit}) {
    function editC(op,data){
      console.log('editc',op,data)
      emit('openModel2',op,data)
    }
    function getTableList(){
      console.log('获取数据',props.type)
       if (props.type === 'base'){
         getLabelRuleHomeTableDataBase({
           pageIndex:pageIndex.value,
           pageSize:pageSize.value,
           CID_NAME:props.form.LABEL_NAME,
           appey:new UserInfo().GetUserKeyCode(),

           CID_LEVEL:props.form.LABEL_LEVEL,
         }).then(res => {
           tableData.value = res.msg[0].Rows
           totalCount.value = res.msg[0].TotalRowCount

         })
       }
       else {
         getLabelRuleHomeTableDataTheme({
          PAGEINDEX:pageIndex.value,
          PAGESIZE:pageSize.value,
          LABEL_NAME:props.form.LABEL_NAME,
          PARENT_LABEL_ID:'',
          LABEL_LEVEL:props.form.LABEL_LEVEL,
        }).then(res => {
          tableData.value = res.msg[0].Rows
          totalCount.value = res.msg[0].TotalRowCount

        })
      }
    }
    const isLabelDialogShow = ref(false)
    const currentOpObj = ref({})
    const {pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl}  = usePagination(getTableList.bind())
    const tableHeader = ref(props.type ==='theme'?baseUseThemeLabelHeader:baseUseBaseLabelHeader)
   onBeforeMount(() => {

   })
    return {
      editC,
      baseUseThemeLabelHeader,
      tableHeader,
      isLabelDialogShow,
      currentOpObj,
      pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl,
      getTableList
    }
  }
}
</script>

<style scoped lang="scss">

.data-source{

  margin-right: 10px;
  color: rgb(103, 106, 108);
  font-size: 16px;
  font-weight: 600;
}
.total{
  strong{
    color: rgb(55, 99, 156);
    font-weight: 700;
  }
  color: rgb(103, 106, 108);
  font-size: 13px;
}
</style>
