<template>
 <div class="position-re">
   <div>
     <el-breadcrumb separator="/" class="my-breadcrumb">
       <el-breadcrumb-item>数据安全 </el-breadcrumb-item>
       <el-breadcrumb-item>安全任务</el-breadcrumb-item>
     </el-breadcrumb>
   </div>
   <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>

   <div class="main-detail">
     <div class="block">
       <div class="my-b-title">基本信息</div>
       <div class="form"><diy-el-form v-model:model-form="forms" :forms="safeTaskDetailBaseForm"/></div>
     </div>
     <div class="block">
       <div class="my-b-title">标签项信息</div>
       <div>
         <span class="my-data-source">数据资源</span>
         <span class="my-total">共 <strong>{{totalCount}}</strong> 个目录项</span>
       </div>
       <div class="search-div">
         <el-input v-model="keyWord" class="search-input"/>
       </div>
       <my-table
         border
         :filter-meothod="row=>(row.CATALOG_FIELD || '').includes(keyWord)"
         :has-operation="operationType !== 'detail'"
         :is-height-equal-max-height="true"
         :page-size="8"

         :table-data="tableData"
         :headers="safeTaskDetailTableHeader"

       >
         <template #operation="{data}">
           <el-button v-if="data.SAFE_STATES=== '2'" @click="changeS(data)" type="primary">启用</el-button>
           <el-button v-if="data.SAFE_STATES=== '1'" @click="changeS(data)" type="danger">禁用</el-button>
         </template>
         <template #DESENSITIZATION_TYPE="{data}">
           {{getStatus(data.DESENSITIZATION_TYPE)}}
         </template>
       </my-table>
       <div class="m-s">显示第 1 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录</div>
     </div>
   </div>
   <div class="detail-operation-btn" v-if="operationType !== 'detail'">
     <el-button :icon="Refresh" @click="saveS('1')">运行</el-button>
     <el-button :icon="Select" @click="saveS('2')">保存</el-button>
     <el-button :icon="Close" @click="$emit('changeOperation','')">返回</el-button>
   </div>
 </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {safeTaskDetailBaseForm} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {safeTaskDetailTableHeader} from "@/data/all-table-header";
import {
  changeDetailStatus,
  changeSafeTaskTaskStatus,
  changeSafeTaskTaskStatus2,
  getSafeTaskDTable
} from "@/service/zsk/safe-task";
import {elAlert, handleMes} from "@/unit/element-ui/tip";
import {Close, Refresh, Select} from "@element-plus/icons-vue";
import {changeSafeStatus} from "@/service/zsk/safe-rule";

export default {
  name: "SafeTaskDetail",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    },
    Refresh() {
      return Refresh
    }
  },
  components: {MyTable, DiyElForm},
  props:{
    currentOpObj:{

    },
    operationType:{

    }
  },
  setup(props,{emit}) {
    const keyWord = ref('')
    const totalCount = ref(0)
    function saveS(states){
      if (!(tableData.value.length > 0)){
        elAlert('请先配置该目录安全规则')

      }else {
        let params = {
          "SAFE_CONFIG_ID": props.currentOpObj.SAFE_CONFIG_ID,   //目录八位码
          //"CATALOG_CID": "60420437",
          CATALOG_ID:props.currentOpObj.CATALOG_CODE,
          "SAFE_STATES": states, //默认禁用
        }
        changeSafeTaskTaskStatus2(params).then(res => {
          handleMes(res,() => {
            emit('changeOperation','')
          })
        })
      }

      // changeSafeStatus（
    }
    function changeS(data){
      let params = {
        "CATALOG_CID":props.currentOpObj["CATALOG_CODE"],   //目录八位码
        //"CATALOG_CID": "60420437",
        "SAFE_RULES_ID": data.SAFE_RULES_ID,  //规则配置主键
        "CATALOG_FIELD": data.CATALOG_FIELD,// 字段名称
        "ENCRYPTION_TYPE": data.ENCRYPTION_TYPE, //加密方式
        "ENCRYPTION_REMARKS": data.ENCRYPTION_REMARKS,//加密规则描述
        "DESENSITIZATION_TYPE": data.DESENSITIZATION_TYPE,  //脱敏方式
        "DESENSITIZATION_PARAMS": data.DESENSITIZATION_PARAMS,  //脱敏方式
        "SAFE_STATES": data.SAFE_STATES=== '2'?'1':'2', //默认禁用
      };
      changeDetailStatus(params).then(res => {
        handleMes(res,()=>{
          getTableList()
        })
      })
    }
   function getTableList(){
     getSafeTaskDTable(props.currentOpObj.CATALOG_CODE).then(res => {
       tableData.value = res.msg[0].Rows
       totalCount.value = res.msg[0].TotalRowCount

     })
   }
    onBeforeMount(() => {
      if (props.operationType!=='add'){
        forms.value = {
          ...props.currentOpObj
        }
        getTableList()
      }

    })
   const getStatus = function (value) {
     if (value == '0') {
       return "数据模糊化";
     } else if (value == '1') {
       return "数据裁切";
     } else if (value == '2') {
       return "MD5";
     }else {
       return  ''
     }
   }
    const forms = ref({

    })
    const tableData = ref([

    ])
    return {
      forms,
      safeTaskDetailBaseForm,
      tableData,
      safeTaskDetailTableHeader,
      getStatus,
      changeS,
      totalCount,
      keyWord,
      saveS
    }
  }
}
</script>

<style scoped lang="scss">
.form{
  max-width: 600px;
}
.main-detail{
  padding: 0 20px 20px;
}
.search-div{
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  width: 300px;
}
</style>
