<template>
<el-dialog

  :modal="true"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close
  title="风险配置"
  :model-value="dialogVisible"

  :before-close="handleClose"

>
  <div class="mb15">
    <span class="my-data-source">数据资源</span>
    <span class="my-total">共 <strong>{{totalCount}}</strong> 个目录项</span>
  </div>
  <my-table
    border
    operation-width="130px"
    :has-operation="true"
    :page-size="8"
    :table-data="tableData"

    :headers="safeRuleDangerDialogTableHeader"

  >

    <template #SAFE_LEVEL="{data}">
      {{safeRankArr.find(i => i.value === data['SAFE_LEVEL'])?.label}}
    </template>
    <template #ENCRYPTION="{data}">
      {{+data['ENCRYPTION']?'是':'否'}}
    </template>
    <template #DESENSITIZATION="{data}">
      {{+data['DESENSITIZATION']?'是':'否'}}
    </template>
    <template #operation="{data}">
      <el-button disabled type="info" v-if="data.CATALOG_FIELD">已处理</el-button>
      <el-button  type="primary" v-else @click="handle(data)">去处理</el-button>
    </template>
  </my-table>
  <div>
    <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 #footer>
    <el-button :icon="SuccessFilled">确定</el-button>
    <el-button @click="handleClose" :icon="Close">取消</el-button>
  </template>
</el-dialog>
</template>

<script>
import {Close, Delete, Edit, Plus, SuccessFilled} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";

import MyTable from "@/components/common/MyTable.vue";
import {ref} from "vue";
import {safeRuleDangerDialogTableHeader} from "@/data/all-table-header";
import ElePagination from "@/components/common/ElePagination.vue";
import {usePagination} from "@/unit/use-method/usePagination";
import {getDetailDangerTableData} from "@/service/zsk/safe-rule";
import {safeRankArr} from "@/data/all-forms";


export default {
  name: "DangerFindDialog",
  components: {ElePagination, MyTable, DiyElForm},
  computed: {
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    Plus() {
      return Plus
    },
    SuccessFilled() {
      return SuccessFilled
    },
    Close() {
      return Close
    }
  },
  props:{
    dialogVisible:{

    },
    currentOpObj:{

    },
  },
  setup(props,{emit}){
    function handle(data) {
      handleClose()
      emit('toHandle', {...data,CATALOG_FIELD:data.PARAMS,CATALOG_CID:data.CATALOG_ID})
    }
    const {handleSizeChange,pageSize,pageIndex,tableData,totalCount,refEl} = usePagination(getTableData)
    function getTableData() {
      getDetailDangerTableData({
        CATALOG_CID:props.currentOpObj.CATALOG_CODE,
        pageIndex:pageIndex.value,
        pageSize:pageSize.value,
      }).then(res => {
        totalCount.value = res.msg[0].TotalRowCount
        tableData.value = res.msg[0].Rows

      })

    }
   function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
     handleClose,
      getTableData,
      safeRuleDangerDialogTableHeader,
      handleSizeChange,pageSize,pageIndex,tableData,totalCount,refEl,
      safeRankArr,
      handle
    }
  }
}
</script>

<style scoped lang="scss">

</style>
