<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"

>
  <diy-el-form :span="20"  v-model:model-form="forms" :forms="dataRootDirForm"/>
  <el-tree :icon="ArrowRight" v-if="forms.STATE === '3'" :data="tableData" ref="treeRef" show-checkbox node-key="CODE" :props="{
    label:'NAME'
  }">

  </el-tree>

  <template #footer>
    <el-button :icon="SuccessFilled" @click="saveS">确定</el-button>
    <el-button :icon="Close" @click="handleClose">关闭</el-button>
  </template>


</el-dialog>
</template>

<script>
import {ArrowRight, Close, SuccessFilled} from "@element-plus/icons-vue";
import {nextTick, onBeforeMount, ref, watch} from "vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {dataRootDirForm} from "@/data/all-forms";
import {
  getDataRootDetail,
  getDataRootDetailTreeData,
  saveDataRootDetailTreeData
} from "@/service/system-manage/user-manaeg";
import {handleLeftMenu2} from "@/data/handleLayer";
import MyTable from "@/components/common/MyTable.vue";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "DataRootDialog",
  components: {MyTable, DiyElForm},
  computed: {
    ArrowRight() {
      return ArrowRight
    },
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  props:{

    dialogVisible:{

    },
    currentDialogObj:{

    }
  },
  setup(props,{emit}){
    const forms = ref({

    })
    const treeRef = ref(null)
    const tableRef = ref(null)

    const originTableData = ref([])

    watch(() => forms.value.STATE,(val) => {
      if (val === '3'){
        nextTick(() => {
          originTableData.value.filter(i => +i.STATE).forEach(i => {
            treeRef.value.setChecked(i.CODE,true)
            // tableRef.value.table.toggleRowSelection(i,true)
          })
        })

      }
    })
    const tableData = ref([])
    onBeforeMount(() => {
      getDataRootDetailTreeData({

        USER_ID:props.currentDialogObj.USERID,
        SYSTEM_TYPE:props.currentDialogObj.systemType

      }).then(res => {
        let data = res.msg[0].Rows
        originTableData.value = data
         handleLeftMenu2(data,data)
        tableData.value = data.filter(i => +i.HIGHER ===0)
        nextTick(() => {
          originTableData.value.filter(i => +i.STATE).forEach(i => {
            treeRef.value.setChecked(i.CODE,true)
            // tableRef.value.table.toggleRowSelection(i,true)
          })
        })
      })
      getDataRootDetail({
        USER_ID:props.currentDialogObj.USERID,
        SYSTEM_TYPE:props.currentDialogObj.systemType
      }).then(res => {
        forms.value = {
          ...res.msg[0].Rows[0]
        }
      })
    })

    const formRef = ref(null)
    function saveS(){
      saveDataRootDetailTreeData({
        "USER_ID": props.currentDialogObj.USERID,
        "STATE": forms.value.STATE,
        "SYSTEM_TYPE": props.currentDialogObj.systemType,
        "POWER": forms.value.STATE === '3'?treeRef.value.getCheckedNodes(true).map(i => i.CODE).join('-'):''
      }).then(res => {
        handleMes(res,()=>{
          emit('successChange')
        })
      })
    }
    function handleClose(){
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      formRef,
      forms,
      dataRootDirForm,
      tableData,

      originTableData,
      tableRef,
      saveS,
      treeRef
    }
  }
}
</script>

<style scoped lang="scss">
:deep{
  .el-tree-node__content{
    margin-top: -1px ;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid var(--el-border-color);
  }
}
</style>
