<template>
<el-dialog

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

  title="数据项2"
  :model-value="dialogVisible"

  :before-close="handleClose"

>
  <diy-el-form ref="formRef" :span-attrs="{
    span:10
  }" v-model:model-form="form" :forms="formConfig"></diy-el-form>
  <my-table
    border
    :page-size="8"
    :headers="editDataDictionaryDialogTableHeader"
  :table-data="filterTable"
  >

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


                   @sizeOrPageChange="mySizeChange"
                   class="page"
                   :default-page-size="pageSize"


                   :total-count="totalCount">

    <template #default>
      <div class="m-s">
        显示第 {{pageSize * (pageIndex -1) + 1 }} 到第 {{pageSize * pageIndex>totalCount?totalCount:pageSize * pageIndex}} 条记录，总共 {{totalCount}} 条记录 共显示

      </div>
    </template>
  </ele-pagination>
  <template #footer>
    <el-button :icon="SuccessFilled" @click="editDataDictionaryD">确定</el-button>
    <el-button @click="handleClose" :icon="Close">取消</el-button>
  </template>
</el-dialog>
</template>

<script>
import {Close, SuccessFilled} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {computed, onBeforeMount, ref, watch} from "vue";
import {editDataDictionaryDialogForm} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import {editDataDictionaryDialogTableHeader} from "@/data/all-table-header";
import {getDataDictionary} from "@/service/zsk/base-rule/data-dictionary";
import {useRootStore} from "@/stores/useStore";
import {isValid} from "js-base64";

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

    },
    currentDialogObj:{

    }
  },
  setup(props,{emit}){
    const form= ref({

    })
    const formRef = ref(null)
    const store=  useRootStore()
   const formConfig = ref({...editDataDictionaryDialogForm})
    function editDataDictionaryD(){
      formRef.value.refEl.validate(isValid => {
        if (isValid){

          emit('editDataDictionaryD',form.value)
        }
      })
    }
    function mySizeChange(page, pageSize2) {
      pageIndex.value = page
      pageSize.value = pageSize2
    }
    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 getTableList() {
      console.log('那带getTableList')
      tableData.value = store.paraArr.filter(i => i.PARA_CODE &&( +i.PARA_CODE === +form.value['DICTIONARY_VALUE']))
      totalCount.value =  tableData.value.length
    }
    onBeforeMount(() => {
      watch(() => form.value['DICTIONARY_VALUE'],value => {
        getTableList()
      },{

      })
      form.value = {
        ...props.currentDialogObj,
        DICTIONARY_VALUE:+props.currentDialogObj.DICTIONARY_VALUE
      }
      console.log(' store.paraArr.filter(i => i.PARA_CODE && i.PARA_CODE === props.currentDialogObj.INFOITEMENGLISHNAME)',store.paraArr.filter(i => i.PARA_CODE &&( +i.PARA_CODE === +props.currentDialogObj.INFOITEMENGLISHNAME)))
      // 设置配置字典的下拉框
      getDataDictionary().then(res => {
        let fidnI = formConfig.value.formItemsArr.find(i => i.modelValue === 'DICTIONARY_VALUE')
        fidnI.options = [{value:'',label:'请选择'}].concat(res.msg[0].Rows.map(i =>({
          label:i.PARA_NAME || '无',
          value:i.PARA_CODE,
        })))
      })
    })
    const {pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl}  = usePagination(getTableList.bind(null))

   function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
     handleClose,
      form,
      formConfig,
      pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,
      editDataDictionaryDialogTableHeader,
      filterTable,
      mySizeChange,
      editDataDictionaryD,
      formRef
    }
  }
}
</script>

<style scoped lang="scss">

</style>
