<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"

>
  <my-table
    ref="tableRef"
    @getCheckedTable="getCheckedTable"
    :is-has-order="false"
    :multi-select-attrs="{
    'width':'300px'
    }"
    selection-width="300px"
    :multi-select="true"
    :headers="unitManageDialogIndustaryTableHeader"
    :page-size="8"
    :table-data="filterTable"

  >

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

                   @sizeOrPageChange="mySizeChange"
                   class="page"
                   :page-sizes="[20000]"
                   :default-page-size="20000"


                   :total-count="totalCount">

    <template #default>
      <div class="m-s">
        显示第 {{1 }} 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录 共显示

      </div>
    </template>
  </ele-pagination>
  <template #footer>
    <el-button :icon="SuccessFilled" @click="$emit('getDialogInfo',checkedTable)">确定</el-button>
    <el-button @click="handleClose" :icon="Close">取消</el-button>
  </template>
</el-dialog>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {computed, nextTick, onBeforeMount, onBeforeUnmount, ref} from "vue";
import {unitManageDialogIndustaryTableHeader} from "@/data/all-table-header";
import {getUnitManageDetailAllIndustry} from "@/service/system-manage/unit-manage/unit-maneg";
import {usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import {Close, SuccessFilled} from "@element-plus/icons-vue";

export default {
  name: "UnitManageIndustaryDialog",
  computed: {
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  components: {ElePagination, MyTable},
  props:{
    dialogVisible:{

    },
    currentDialogObj:{

    },
    detailForm:{}

  },
  setup(props,{emit}){
    const tableRef = ref([])
    const checkedTable = ref([])
    function getCheckedTable(ck){
      checkedTable.value = ck
    }
    function mySizeChange(page, pageSize2) {
      console.log('mySizeChangechnage了')
      pageIndex.value = page
      pageSize.value = 20000
    }
    const filterTable = computed(() => {
      let pageIndex2 = pageIndex.value
      let pageSize2 = pageSize.value
      console.log('pageIndex.value',pageIndex.value,pageSize.value)
      return tableData.value.slice((pageIndex2 - 1) * pageSize2,(pageIndex2 - 1) * pageSize2 + pageSize2)
    })

    function getTableListData() {
      console.log('saas',props.currentDialogObj)

      getUnitManageDetailAllIndustry({
        pageIndex:1,
        pageSize:20000,
        a_code:props.currentDialogObj.CODE || '',

      }).then(res => {
        tableData.value  =res.msg[0].Rows
        totalCount.value = res.msg[0].TotalRowCount
        nextTick(() => {
          console.log('tableRef.value.table',tableData.value.filter(i => +i.SELECTED))

          tableRef.value.selectChange(tableData.value.filter(i => props.detailForm.industyCodeArr.includes(i.CODE)))
        })
      })
    }
    const {pageSize,pageIndex,totalCount,handleSizeChange,initSearch,refEl,tableData} = usePagination(getTableListData)
    function handleClose() {
      emit('update:dialogVisible',false)
    }
    onBeforeMount(() => {
      getTableListData()
    })
    return {
      handleClose,

      unitManageDialogIndustaryTableHeader,
      pageSize,pageIndex,totalCount,handleSizeChange,initSearch,refEl,tableData,
      getCheckedTable,
      tableRef,
      checkedTable,
      mySizeChange,
      filterTable
    }
  }
}
</script>

<style scoped lang="scss">

</style>
