<template>
 <div class="position-re">
  <el-breadcrumb separator="/" class="my-breadcrumb">
    <el-breadcrumb-item>知识库</el-breadcrumb-item>
    <el-breadcrumb-item>数据字典</el-breadcrumb-item>
  </el-breadcrumb>
   <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " @click="$emit('changeOperation','')">返回</span></div>
   <div class="filter-form">
     <diy-el-form :span-attrs="{
     span:5
   }" :forms="editDataDictionaryFormConfig" v-model:model-form="forms">
       <template #searchBtn>
         <el-button type="primary" :icon="Search" @click="getTableList">查询</el-button>
       </template>
     </diy-el-form>
   </div>
   <div class="data-source-a">
     <span class="data-source">数据资源</span>
     <span class="total">共 <strong>{{totalCount}}</strong> 个目录项</span>

   </div>
   <div class="my-detail-main">

     <my-table
       border

       :table-data="filterTable"

       :page-size="8"
       :has-operation="true"
       :headers="editDataDictionaryTableHeader"
     >
       <template #JUDGE_NAME="{data}">
         {{data['JUDGE_NAME']?'已配置':'未配置'}}
       </template>
       <template #operation="{data}">
         <el-button v-if="data.JUDGE_NAME" type="primary" size="small" @click="openDialog('edit',data)">编辑</el-button>
         <el-button v-else type="primary" size="small" @click="openDialog('set',data)">配置</el-button>
       </template>
     </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}} 条记录 共显示

         </div>
       </template>
     </ele-pagination>
   </div>
   <template v-if="isEditDictionaryDialogShow">
     <data-dictionary-seting-dialog
       @editDataDictionaryD="editDataDictionaryD"

       :current-dialog-obj="currentDialogObj" v-model:dialog-visible="isEditDictionaryDialogShow"/>
   </template>
 </div>


</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {computed, onBeforeMount, ref} from "vue";
import {editDataDictionaryForm} from "@/data/all-forms";
import {Search} from "@element-plus/icons-vue";
import MyTable from "@/components/common/MyTable.vue";
import {useDetailOrEdit, usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import {editDataDictionaryTableHeader} from "@/data/all-table-header";
import DataDictionarySetingDialog
  from "@/view/other/c-views/data-handle/zsk/data-dictionary/DataDictionarySetingDialog.vue";
import {editDataDictionaryDetailD, getDataDictionaryDetailTableData} from "@/service/zsk/data-dictionary";
import {getQualityDetailRuleAllFieldSelect} from "@/service/zsk/quality-check-rule";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "DataDictionaryEdit",
  computed: {
    Search() {
      return Search
    }
  },
  components: {DataDictionarySetingDialog, ElePagination, MyTable, DiyElForm},
  props:{
    currentOpObj:{

    },

  },
  setup(props) {

    const allTableList = ref([])

    const editDataDictionaryFormConfig = ref({...editDataDictionaryForm})
    const isEditDictionaryDialogShow =  ref(false)
    const {pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,initSearch}  = usePagination(getTableList.bind(null))
    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)
    })
    const {changeOperation:changeDialogOperation,currentOpObj:currentDialogObj,operationType:currentOperationType} = useDetailOrEdit()
    function mySizeChange(page, pageSize2) {
      pageIndex.value = page
      pageSize.value = pageSize2
    }

    function editDataDictionaryD(form){
      editDataDictionaryDetailD({
        XX_NAME:form.INFOITEMENGLISHNAME,
        coloum:form.INFOITEMENGLISHNAME,
        DICTIONARY_VALUE:form.DICTIONARY_VALUE,
        CATALOG_CODE:props.currentOpObj.CODE
      }).then(res=>{
        handleMes(res,() => {
          isEditDictionaryDialogShow.value = false
          getTableList()
        })
      })
    }
    function getTableList() {

      getDataDictionaryDetailTableData({
          cid:props.currentOpObj.CODE,
          FIELD_NAME:forms.value.FIELD_NAME,
          STATE:forms.value.STATE
      }).then(res => {
        allTableList.value  = tableData.value = res.msg[0].Rows
        totalCount.value = res.msg[0].TotalRowCount
      })

    }

    const forms = ref({

    })
     onBeforeMount(() => {
       getQualityDetailRuleAllFieldSelect(props.currentOpObj.CODE).then(res => {
          let findF = editDataDictionaryFormConfig.value.formItemsArr.find(i =>i.modelValue === 'FIELD_NAME')
          findF.options= [
            {value:'',label:'请选择'}
          ].concat(res.msg[0].Rows.map(i => ({label:i.INFOITEMENGLISHNAME,value:i.INFOITEMENGLISHNAME})))
       })
       getTableList()
     })
    function openDialog(opera,item){
      isEditDictionaryDialogShow.value = true
      changeDialogOperation(opera,item)
    }
    return {
      forms,
      editDataDictionaryFormConfig,
      pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,getTableList,initSearch,
      editDataDictionaryTableHeader,
      isEditDictionaryDialogShow,
      openDialog,
      mySizeChange,
      filterTable,
      changeDialogOperation,currentDialogObj,currentOperationType,
      editDataDictionaryD,
      allTableList
    }
  }
}
</script>

<style scoped lang="scss">
.filter-form{
  margin-top: 20px;
  border-bottom: 1px solid #e7eaec !important;
}
.my-breadcrumb{
  padding: 20px 20px 20px 20px;
  border-bottom: 1px solid #e7eaec !important;
}
.data-source-a{
  margin: 20px 0;
}
.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;
}
.data-source-a,.filter-form{
  margin-left: 20px;
  margin-right: 20px;
}

</style>
