<template>
<div class="base-dictionary">
  <div class="my-search-div-and-input"><el-input  v-model="keyWord" class="search"/><el-button @click="openEditModel('add')"  :icon="Plus"  /></div>
  <div>
    <my-table

      :has-operation="true"
      border

      :page-size="8"
      :table-data="filterTable"
      :headers="baseRuleBaseDictionaryTableHeader"


    >
      <template #operation="{data}">
        <el-button type="info" @click="openModel('edit',data)">配置字典</el-button>
        <el-button type="info" @click="openEditModel('edit',data)">编辑</el-button>
      </template>
    </my-table>
  </div>
  <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}} 条记录 共显示

      </div>
    </template>
  </ele-pagination>
  <template v-if="isSetDictionaryIsShow">
    <dictionary-seting-detail-dilog @editDictionary="editDictionary" :current-op-obj="currentDialogObj" v-model:dialog-visible="isSetDictionaryIsShow"/>
  </template>
  <template v-if="isSetDictionarySIsShow">
    <dictionary-seting-dialog @editDataDictionary="editDictionaryTable"  :dialog-operation-type="dialogOperationType" :current-dialog-op-obj="currentDialogObj" v-model:dialog-visible="isSetDictionarySIsShow"/>
  </template>
</div>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {computed, nextTick, onBeforeMount, ref, watch} from "vue";
import {baseRuleBaseDictionaryTableHeader} from "@/data/all-forms";
import {useDetailOrEdit, usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import DictionarySetingDialog
  from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/base-dictionary/DictionarySetingDialog.vue";
import {editDataDictionary, getDataDictionary, saveDataDictionaryTable} from "@/service/zsk/base-rule/data-dictionary";
import {handleMes} from "@/unit/element-ui/tip";
import {Plus} from "@element-plus/icons-vue";
import DictionarySetingDetailDilog
  from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/base-dictionary/DictionarySetingDetailDilog.vue";
import {useRootStore} from "@/stores/useStore";

export default {
  name: "BaseDictionary",
  computed: {
    Plus() {
      return Plus
    }
  },
  components: {DictionarySetingDetailDilog, DictionarySetingDialog, ElePagination, MyTable},
  setup() {
   const allTableList = ref([])
    const currentOpObj=  ref({})
    const keyWord = ref('')
    function openModel(type,data) {
      isSetDictionaryIsShow.value = true
      changeDialogOperation(type,data)
    }
    const {currentOpObj:currentDialogObj,operationType:dialogOperationType,changeOperation:changeDialogOperation} = useDetailOrEdit()
    const isSetDictionaryIsShow = ref(false)
    const isSetDictionarySIsShow = ref(false)
    onBeforeMount(() => {
      watch(keyWord,(va) => {

        tableData.value = allTableList.value.filter(i =>( i.PARA_NAME || '').includes(va))
        console.log('限制',va)
        nextTick(() => {
          totalCount.value = tableData.value.length
          // initSearch()
        })

      })
      getTableData()
    })
    function openEditModel(type,item){
        isSetDictionarySIsShow.value = true
        changeDialogOperation(type,item)
    }
    function editDictionaryTable(form) {
      let params = {
        PARA_CODE:form.PARA_CODE || '',
        DES:form.DES,
        PARA_NAME:form.PARA_NAME,
      }
      if (dialogOperationType.value === 'edit'){
        params.PARA_CODE = currentDialogObj.value.PARA_CODE
      }
      saveDataDictionaryTable(params).then(res => {
        handleMes(res,() => {
          isSetDictionarySIsShow.value = false
          getTableData()
        })
      })
    }
    function editDictionary(tableV) {
      console.log('编辑庶几乎飒飒',)
      editDataDictionary(currentDialogObj.value.PARA_CODE,tableV.map(i =>{
        console.log('sasa',useRootStore().paraArr.findLast(i =>  new RegExp(`^${+i.PARA_CODE}$`,'i').test(currentOpObj.value.PARA_CODE)))
        return {
          PARA_CODE:currentDialogObj.value.PARA_CODE,
          PARA_NAME:currentDialogObj.value.PARA_NAME,
          DES:currentDialogObj.value.DES,
          CODE:i.CODE,
          NAME:i.NAME,
        }
      })).then(res => {
        handleMes(res,() => {
          isSetDictionaryIsShow.value = false
          useRootStore().getParaConfig()
          getTableData()
        })
      })
    }
    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 mySizeChange(page, pageSize2) {
      console.log('mySizeChangechnage了')
      pageIndex.value = page
      pageSize.value = pageSize2
    }
    function getTableData() {

      getDataDictionary().then(res => {
        allTableList.value  = tableData.value = res.msg[0].Rows
        totalCount.value = res.msg[0].TotalRowCount
      })
    }
    const { pageSize,
      pageIndex,
      totalCount,
      tableData,
      initSearch,
      handleSizeChange,
      refEl} = usePagination(getTableData)
    return {
      keyWord,
      mySizeChange,
      baseRuleBaseDictionaryTableHeader,
      pageSize,
      pageIndex,
      totalCount,
      tableData,
      initSearch,
      handleSizeChange,
      refEl,
      isSetDictionaryIsShow,
      openModel,
      currentOpObj,
      editDictionary,
      filterTable,
      isSetDictionarySIsShow,
      openEditModel,
      currentDialogObj,dialogOperationType,changeDialogOperation,
      editDictionaryTable,
      allTableList
    }
  }
}
</script>

<style scoped lang="scss">
.filter{
  width: 30%;
  margin-bottom: 20px;
  max-width: 300px;
  margin-left:auto;
}
</style>
