<template>
 <div class="rule 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 ">返回</span></div>
   <div class="filter-form">
     <diy-el-form :span-attrs="{
     span:5
   }" :forms="syncDetailFilterFormConfig" v-model:model-form="forms">
       <template #searchBtn>
         <el-button type="primary" :icon="Search" @click="initSearch">查询</el-button>
       </template>
       <template #addBtn>
         <el-button type="primary" :icon="Plus"  @click="openDialog({},'add')">新增</el-button>
       </template>
     </diy-el-form>
   </div>
   <div class="data-source-a">
     <span class="data-source">数据资源</span>
     <span class="total">共 <strong>{{totalCount}}</strong> 个规则项</span>
     <my-table
       border

       :table-data="tableData"

       :page-size="8"
       :has-operation="true"
       :headers="editSyncRuleTableHeader"
     >
       <template #operation="{data}">
         <el-button type="danger"  size="small" @click="changeState(data)" v-if="data.KETTLE_RULE_STATES === '1'">禁用</el-button>
         <el-button type="primary"  size="small" @click="changeState(data)"  v-if="data.KETTLE_RULE_STATES === '2'">启用</el-button>

         <template v-if="data.KETTLE_RULE_STATES === '2'">
           <el-button type="primary" size="small" @click="openDialog(data,'edit')">编辑</el-button>
           <el-button type="primary" size="small" @click="delSync(data)">删除</el-button>
         </template>
         <template v-if="data.KETTLE_RULE_STATES === '1'">
           <el-button type="primary" size="small" @click="openDialog(data,'detail')">查看</el-button>
         </template>
       </template>
     </my-table>
     <ele-pagination   ref="refEl"



                      @sizeOrPageChange="handleSizeChange"
                      :is-has-first="false"
                      class="page hidden"
                      :default-page-size="2000"


                      :total-count="totalCount">

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

         </div>
       </template>
     </ele-pagination>

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

     </div>
   </div>
   <template v-if="isEditDictionaryDialogShow">
     <sync-rule-seting-dialog  @addOrEditRule="addOrEditRule" :operation-type="dialogOperation" :current-dialog-obj="currentDialogOpObj" :current-op-obj="currentOpObj" v-model:dialog-visible="isEditDictionaryDialogShow"/>
   </template>
 </div>


</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {editDataDictionaryForm, syncDetailFilterForm} from "@/data/all-forms";
import {Plus, Search} from "@element-plus/icons-vue";
import MyTable from "@/components/common/MyTable.vue";
import {usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import {editDataDictionaryTableHeader, editSyncRuleTableHeader} from "@/data/all-table-header";
import DataDictionarySetingDialog
  from "@/view/other/c-views/data-handle/zsk/data-dictionary/DataDictionarySetingDialog.vue";
import SyncRuleSetingDialog from "@/view/other/c-views/data-handle/zsk/sync-rule/SyncRuleSetingDialog.vue";
import {changeSyncDetailState, delSyncRule, getSyncDetailTableData} from "@/service/zsk/sync-rule";
import {handleMes, showConfirm} from "@/unit/element-ui/tip";
import {deleteQualityCheck, getQualityDetailRuleAllFieldSelect} from "@/service/zsk/quality-check-rule";

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

    },

  },
  setup(props) {

    const currentDialogOpObj = ref({})
    const syncDetailFilterFormConfig = ref({...syncDetailFilterForm})
    function delSync(data) {
      showConfirm(() => {
        delSyncRule(data.KETTLE_RULE_ID).then(res => {
          handleMes(res,() => {
            getTableList()
          })
        })
      },'确定要删除吗','系统提示',{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
    }
    function changeState(data){
      changeSyncDetailState(data.KETTLE_RULE_ID,data.KETTLE_RULE_STATES==='2'?'1':'2').then(res => {
        handleMes(res,() => {
          getTableList()
        },() =>{},data.KETTLE_RULE_STATES==='2'?'已启用':'已禁用')
      })

    }
    function addOrEditRule() {
      isEditDictionaryDialogShow.value = false
      currentDialogOpObj.value = {}
      getTableList()
    }
    const isEditDictionaryDialogShow =  ref(false)
    const dialogOperation = ref('')
    function getTableList() {
      getSyncDetailTableData({
        pageSize:pageSize.value,
        pageIndex:pageIndex.value,
        CATALOG_CID:props.currentOpObj.CATALOG_CODE,
        STATE:forms.value.STATE
      }).then(res => {
        tableData.value = res.msg[0].Rows
        totalCount.value = res.msg[0].TotalRowCount
      })

    }
    const {pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,initSearch}  = usePagination(getTableList.bind(null))
    const forms = ref({

    })
    function openDialog(item,operation){
      isEditDictionaryDialogShow.value = true
      currentDialogOpObj.value = item || {}
      dialogOperation.value = operation || ''
    }
    return {
      forms,
      syncDetailFilterFormConfig,
      pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,getTableList,
      editSyncRuleTableHeader,
      isEditDictionaryDialogShow,
      openDialog,
      changeState,
      initSearch,
      currentDialogOpObj,
      dialogOperation,
      addOrEditRule,
      delSync
    }
  }
}
</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>
