<template>
  <div class="chart-safe-rule">
    <div class="my-b-title">安全信息</div>
    <div class="my-search-div">
      <el-input v-model="kewWord" class="search-input"/>
    </div>
    <div class="table-a">
      <my-table
        :filter-meothod="row => (row.CATALOG_FIELD||'').includes(kewWord)"

        border
        :has-operation="true"
        :headers="chartQualitySafeRuleTableHeader"
        :table-data="tableData"
        :page-size="8"
      >
        <template #DESENSITIZATION_TYPE="{data}">
          {{getTmS(data.DESENSITIZATION_TYPE)}}
        </template>
        <template #operation="{data}">
          <el-button type="info" @click="changeState(data,'1')" :disabled="!(operationType !== 'detail' && currentOpObj.STATE!=='2')" v-if="data.SAFE_STATES === '2'">启用</el-button>
          <el-button type="danger" @click="changeState(data,'2')" :disabled="!(operationType !== 'detail' && currentOpObj.STATE!=='2')" v-else-if="data.SAFE_STATES !== '2'">禁用</el-button>

        </template>
      </my-table>
    </div>
    <div  class="m-s">
      显示第 1 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录
    </div>
    <div class="detail-operation-btn" v-if="operationType!=='detail'">
      <el-button :icon="Select" @click="$emit('back')">保存</el-button>
      <el-button :icon="Close" @click="$emit('back')">返回</el-button>
    </div>
  </div>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {chartQualitySafeRuleTableHeader} from "@/data/all-table-header";
import {getChartSafeRuleTableData} from "@/service/task-manage/task-set";
import {changeDetailStatus} from "@/service/zsk/safe-task";
import {handleMes} from "@/unit/element-ui/tip";
import {Close, Select} from "@element-plus/icons-vue";

export default {
  name: "ChartSafeRule",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    }
  },
  components: {MyTable},
  props:{
    settingType:{

    },
    operationType:{

    },
    currentOpObj:{

    }
  },
  setup(props,{emit}){
    function getTmS(value, row, index) {

      if (value == '0') {
        return "数据模糊化";
      } else if (value == '1') {
        return "数据裁切";
      } else if (value == '2') {
        return "MD5";
      }else {
        return  ''
      }
    }
    function getTableData() {
      getChartSafeRuleTableData({
        "pageIndex": "1",
        "pageSize": "20000",
        "CATALOG_CID": props.currentOpObj.CATALOG_CODE,
        "FIELD_NAME": "",
        "LABEL_STATES": "",

      }).then(res => {
        tableData.value = (res.msg[0].Rows||[])
        totalCount.value = res.msg[0].TotalRowCount
      })
    }
    onBeforeMount(() => {
      getTableData()
    })
    function changeState(data,states){
      changeDetailStatus({
        "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": states, //默认禁用
      }).then(res => {
        handleMes(res,() => {
          getTableData()
        })
      })
    }
    const kewWord = ref('')
    const totalCount = ref(0)
    const tableData = ref([])
    return {
      totalCount,tableData,kewWord,
      chartQualitySafeRuleTableHeader,
      getTmS,
      changeState
    }
  }
}
</script>

<style scoped lang="scss">
.chart-safe-rule{
  padding:0 20px;
}
</style>
