<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="safeRuleDetailFilterFormConfig" 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>
       <template #dangerBtn>
         <el-button type="primary" :icon="Search" @click="openDangerDialog">风险发现</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="tableData"

       :page-size="8"
       :has-operation="true"
       :headers="editSafeRuleTableHeader"
     >
       <template #DESENSITIZATION_TYPE="{data}">
         {{getTmType(data.DESENSITIZATION_TYPE)}}
       </template>
       <template #operation="{data}">
         <template v-if="data.SAFE_STATES == '2'">
           <el-button type="primary"  size="small" @click="changeStatus(data)">启用</el-button>
           <el-button type="primary" size="small" @click="openDialog('edit',data)">编辑</el-button>
           <el-button type="primary" size="small" @click="delSafeRule(data)">删除</el-button>
         </template>
         <template v-else>
           <el-button type="danger"  size="small"  @click="changeStatus(data)">禁用</el-button>
           <el-button type="primary" size="small" @click="openDialog('detail',data)">查看</el-button>

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

                      @sizeOrPageChange="handleSizeChange"
                      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="isEditSafeRuleDialogShow">
     <safe-rule-seting-dialog @editOrAddRule="editOrAddRule" :all-field="allField" :current-obj="currentOpObj" :dialog-operation-type="dialogOperationType" :current-dialog-obj="currentDialogObj" v-model:dialog-visible="isEditSafeRuleDialogShow"/>
   </template>
   <template v-if="isDangerFindDialogShow">
     <danger-find-dialog @toHandle="openDialog('handle',$event)" :current-op-obj="currentOpObj" v-model:dialog-visible="isDangerFindDialogShow"/>
   </template>
 </div>


</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {editDataDictionaryForm, safeRuleDetailFilterForm, syncDetailFilterForm} from "@/data/all-forms";
import {Plus, 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 {
  editClearRuleTableHeader,
  editDataDictionaryTableHeader, editSafeRuleTableHeader,
  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 ClearRuleSetingDialog from "@/view/other/c-views/data-handle/zsk/clear-rule/ClearRuleSetingDialog.vue";
import SafeRuleSetingDialog from "@/view/other/c-views/data-handle/zsk/safe-rule/SafeRuleSetingDialog.vue";
import DangerFindDialog from "@/view/other/c-views/data-handle/zsk/safe-rule/DangerFindDialog.vue";
import {getQualityDetailRuleAllFieldSelect} from "@/service/zsk/quality-check-rule";
import {changeSafeStatus, delSafeRuleD, getSafeRuleDetailTableData} from "@/service/zsk/safe-rule";
import {handleMes, showConfirm} from "@/unit/element-ui/tip";

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

    },

  },
  setup(props) {
    const isEditSafeRuleDialogShow =  ref(false)
    const isDangerFindDialogShow = ref(false)
    function getTmType(value, row, index) {

      if (value == '0') {
        return "数据模糊化";
      } else if (value == '1') {
        return "数据裁切";
      } else if (value == '2') {
        return "MD5";
      }else {
        return ''
      }
    }
    function openDangerDialog() {
      isDangerFindDialogShow.value = true
    }
    function editOrAddRule(form) {
      console.log('from',form)
      let tm_params = []
      let json_data

      if (form.TM_TYPE === '0'){
        let tm_params_rules = {
          "CHECK_REPACLE_LOACTION": form.SJMHH_THWZ,
          "CHACK_REPLACE_COMMENT": form.SJMHH_YGZF,
          "CHACK_REPLACE_START": form.SJMHH_THKT,
          "CHACK_REPLACE_END": form.SJMHH_THJW
        };
        tm_params.push(tm_params_rules);
      }
      else if (form.TM_TYPE === '1'){
        let tm_params_rules = {
          "CHECK_CUT_STRING": form.SJCQ_SSZFC,
          "CHACK_CUT_LOCATION": form.SJCQ_WZ,
          "CHACK_DELETE_STRING": form.SJCQ_SCZFC,
        };
        tm_params.push(tm_params_rules);
      }
       if (!form.SAFE_RULES_ID){
          json_data = {
           "CATALOG_CID": props.currentOpObj.CATALOG_CODE,   //目录八位码
           //"CATALOG_CID": "60420437",   //目录八位码
           "CATALOG_FIELD":  form.CATALOG_FIELD  ,// 字段名称
           "ENCRYPTION_TYPE": form.JM_TYPE, //加密方式
           //"ENCRYPTION_REMARKS": $("#AQ_REMARKS").val(),//加密规则描述
           "ENCRYPTION_REMARKS": "",//加密规则描述
           "DESENSITIZATION_TYPE": form.TM_TYPE,  //脱敏方式
           "DESENSITIZATION_PARAMS": tm_params,  //脱敏方式
           "SAFE_STATES": "2", //默认禁用
         };
       }
       else {
          json_data = {
           "CATALOG_CID": props.currentOpObj.CATALOG_CODE,   //目录八位码
           //"CATALOG_CID": "60420437",
           "SAFE_RULES_ID": form.SAFE_RULES_ID,  //规则配置主键
           "CATALOG_FIELD":  form.CATALOG_FIELD,  //子段名称
           "ENCRYPTION_TYPE": form.JM_TYPE, //加密方式
           //"ENCRYPTION_REMARKS": $("#AQ_REMARKS").val(),//加密规则描述
           "ENCRYPTION_REMARKS": "",//加密规则描述
           "DESENSITIZATION_TYPE":  form.TM_TYPE,  //脱敏方式
           "DESENSITIZATION_PARAMS": tm_params,  //脱敏方式
           "SAFE_STATES": "2", //默认禁用
         }
       }
      changeSafeStatus(json_data).then(res => {
          handleMes(res,() => {
            isEditSafeRuleDialogShow.value = false
            getTableList()
          })
      })
    }
    function delSafeRule(data) {

      showConfirm(() => {
        delSafeRuleD(data.SAFE_RULES_ID).then(res => {
          handleMes(res,() => {
            getTableList()
          })
        })
      },'确定要删除吗','系统提示',{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
    }
    function changeStatus(item){
      changeSafeStatus({
        CATALOG_CID:props.currentOpObj.CATALOG_CODE,
        SAFE_RULES_ID:item.SAFE_RULES_ID,
        CATALOG_FIELD:item.CATALOG_FIELD,
        "ENCRYPTION_TYPE": item.ENCRYPTION_TYPE, //加密方式
        "ENCRYPTION_REMARKS": item.ENCRYPTION_REMARKS,//加密规则描述
        "DESENSITIZATION_TYPE": item.DESENSITIZATION_TYPE,  //脱敏方式
        "DESENSITIZATION_PARAMS": item.DESENSITIZATION_PARAMS,  //脱敏方式
        SAFE_STATES:item.SAFE_STATES === '2'?'1':'2'
      }).then(res => {
        handleMes(res,() => {
          getTableList()
        },()=>{},item.SAFE_STATES === '2'?'已启用':'已禁用')
      })
    }
    function getTableList() {
      getSafeRuleDetailTableData({
        pageIndex:pageIndex.value,
        pageSize:pageSize.value,
        CATALOG_CID:props.currentOpObj.CATALOG_CODE,
        FIELD_NAME:forms.value.FIELD_NAME,
        LABEL_STATES:forms.value.LABEL_STATES,
      }).then(res => {
        tableData.value = res.msg[0].Rows
        totalCount.value =res.msg[0].TotalRowCount

      })

    }
    const allField =ref([])
    const {changeOperation:changeDialogOperation,operationType:dialogOperationType,currentOpObj:currentDialogObj} = useDetailOrEdit()
    const safeRuleDetailFilterFormConfig = ref({...safeRuleDetailFilterForm})
    const {pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,initSearch}  = usePagination(getTableList.bind(null))
    const forms = ref({

    })
    onBeforeMount(() =>{
      getQualityDetailRuleAllFieldSelect(props.currentOpObj.CATALOG_CODE).then(res => {
        //    INFOITEMENGLISHNAME
        let findItem = safeRuleDetailFilterFormConfig.value.formItemsArr.find(i => i.modelValue === 'FIELD_NAME')
        allField.value =  findItem.options = [
          {
            value:'',
            label:'全部字段'
          }
        ].concat(res.msg[0].Rows.map(i => ({
          ...i,
          label:i.INFOITEMENGLISHNAME,
          value:i.INFOITEMENGLISHNAME,
        })))
      })
    })
    function openDialog(type,item){
      isEditSafeRuleDialogShow.value = true
      changeDialogOperation(type,item)
    }
    return {
      forms,
      safeRuleDetailFilterFormConfig,
      pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,getTableList,initSearch,
      editSafeRuleTableHeader,
      isEditSafeRuleDialogShow,
      openDialog,
      isDangerFindDialogShow,
      openDangerDialog,
      changeStatus,
      delSafeRule,
      changeDialogOperation,dialogOperationType,currentDialogObj,
      allField,
      editOrAddRule,
      getTmType
    }
  }
}
</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>
