<template>
<el-dialog

  :modal="true"
  modal-class="scroll-model"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close
  title="配置规则"
  :model-value="dialogVisible"

  :before-close="handleClose"

>
  <div class="my-block">
    <div class="b-title">基本信息</div>
    <diy-el-form ref="form1" class="form" :forms="safeRuleDialogForm1Config" v-model:model-form="form"/>
  </div>
  <div class="my-block">
    <div class="b-title">加密配置</div>
    <diy-el-form class="form" ref="form2" :forms="safeRuleDialogForm2Config" v-model:model-form="form"/>
  </div>
  <div class="my-block">
    <div class="b-title">脱敏配置</div>
    <diy-el-form class="form"  :forms="safeRuleDialogForm3Config" v-model:model-form="form"/>
    <diy-el-form con class="form" ref="form3"  :forms="fConfigT" v-model:model-form="form"/>
  </div>



  <template #footer v-if="dialogOperationType !== 'detail'">
    <el-button :icon="SuccessFilled" @click="conform">确定</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 {computed, nextTick, onBeforeMount, ref, watch} from "vue";
import {

  safeRuleDialogForm1,
  safeRuleDialogForm2,
  safeRuleDialogForm3,
  safeRuleDialogForm31, safeRuleDialogForm32, safeRuleDialogForm33

} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {getEncodeTypeSelect, getSafeRuleMetaInfo} from "@/service/zsk/safe-rule";
import {isValid} from "js-base64";



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

    },
    dialogOperationType: {

    },
    currentDialogObj:{

    },
    allField:{},
    currentObj:{

    }
  },
  setup(props,{emit}){



    const form= ref({

    })
   function handleClose() {
      emit('update:dialogVisible',false)
    }
    const form1 = ref(null)
    const form2 = ref(null)
    const form3 = ref(null)
    const safeRuleDialogForm2Config = ref({...safeRuleDialogForm2})
    const safeRuleDialogForm1Config = ref({...safeRuleDialogForm1})

    const safeRuleDialogForm3Config = ref({...safeRuleDialogForm3})
   const fConfigT = ref([])
    function conform() {
      form1.value.refEl.validate(isValid => {
        if (isValid){
          form2.value.refEl.validate(isValid2 =>{
            if (isValid2) {
              form3.value.refEl.validate(isValid3 => {
                if (isValid3) {
                  emit('editOrAddRule',form.value)
                }
              })
            }
          })
        }
      })

    }
    function getSelectM(){
      getEncodeTypeSelect(form.value.SAFE_LEVEL,'1').then(res => {
        let findI = safeRuleDialogForm2Config.value.formItemsArr.find(i => i.modelValue === 'JM_TYPE')
        findI.options = [{value:'',label:'全部'}].concat(res.msg[0].Rows.map(it => ({
          value:it.SAFE_TYPE_ID,
          label:it.SAFE_TYPE_NAME,
        })))

      })
      getEncodeTypeSelect(form.value.SAFE_LEVEL,'0').then(res => {
        let findI = safeRuleDialogForm3Config.value.formItemsArr.find(i => i.modelValue === 'TM_TYPE')
        findI.options = [{value:'',label:'全部'}].concat(res.msg[0].Rows.map(it => ({
          value:it.SAFE_TYPE_ID,
          label:it.SAFE_TYPE_NAME,
        })))
      })
    }

    watch(() => form.value['TM_TYPE'],val => {
      if (!form.value['TM_TYPE']){
        fConfigT.value = {
          formItemsArr: []
        }
      }else {
        let configF = form.value['TM_TYPE'] === '1'?safeRuleDialogForm31:(form.value['TM_TYPE'] === '2'?safeRuleDialogForm33:safeRuleDialogForm32())

        nextTick(() => {
          form3.value?.setDefaultForm()
        })
        let var2 = form.value.SJMHH_THWZ
        const findStart = configF.formItemsArr.find(i => i.modelValue === 'SJMHH_THKT')
        const endStart = configF.formItemsArr.find(i => i.modelValue === 'SJMHH_THJW')
        if (findStart){
          findStart.isHide = !(var2 === '2' || var2 === '3')
        }
        if (endStart){
          endStart.isHide = !(var2 === '2' || var2 === '1')
        }
        fConfigT.value = configF


      }
    },{
      immediate:true
    })
    watch(() => form.value.SJMHH_THWZ,value => {
      console.log('SJMHH_THWZ便阿虎',value)

      const findStart = fConfigT.value.formItemsArr.find(i => i.modelValue === 'SJMHH_THKT')
      const endStart = fConfigT.value.formItemsArr.find(i => i.modelValue === 'SJMHH_THJW')
      if (findStart){
        findStart.isHide = !(value === '2' || value === '3')
      }
      if (endStart){
        endStart.isHide = !(value === '2' || value === '1')
      }
      nextTick(() => {
        form3.value?.setDefaultForm()
      })

    },{immediate:true})
    // const form3IConfig = computed(() => {
    //
    //   console.log('执行替换为在改变函数')
    //
    //
    //
    //   // return configF
    // })
    onBeforeMount(() => {
      safeRuleDialogForm1Config.value.formAttrs.disabled  = props.dialogOperationType !== 'add'
      let findZd = safeRuleDialogForm1Config.value.formItemsArr.find(i => i.modelValue === 'CATALOG_FIELD')
      findZd.options = [].concat(props.allField)
      findZd.events = {
        'change':() => {

          getSafeRuleMetaInfo(props.currentObj.CATALOG_CODE).then(res => {
            let item2 = res.msg[0].Rows.find(i => i.PARAMS === form.value['CATALOG_FIELD'])
            if (item2){
              form.value = {
                ...form.value,
                ...item2,
                SAFE_FIELD_CHINESE:item2.COMMENTS,
                IS_ENCRYPTION:item2.ENCRYPTION,
                IS_DESENSITIZATION:item2.DESENSITIZATION,
                TM_TYPE:'',
                JM_TYPE:'',
              }
            }
            getSelectM()
          })
        }
      }
      if (props.dialogOperationType !=='add'){
        form.value = {
          ...form.value,
          ...props.currentDialogObj
        }
        let DESENSITIZATION_PARAMS
        try {
          DESENSITIZATION_PARAMS = JSON.parse(props.currentDialogObj.DESENSITIZATION_PARAMS)
          form.value = {
            ...form.value,
            SJMHH_THWZ:DESENSITIZATION_PARAMS[0].CHECK_REPACLE_LOACTION,
            SJMHH_YGZF:DESENSITIZATION_PARAMS[0].CHACK_REPLACE_COMMENT,
            SJMHH_THKT:DESENSITIZATION_PARAMS[0].CHACK_REPLACE_START,
            SJMHH_THJW:DESENSITIZATION_PARAMS[0].CHACK_REPLACE_END,
            SJCQ_SSZFC:DESENSITIZATION_PARAMS[0].CHECK_CUT_STRING,
            SJCQ_WZ:DESENSITIZATION_PARAMS[0].CHACK_CUT_LOCATION,
            SJCQ_SCZFC:DESENSITIZATION_PARAMS[0].CHACK_DELETE_STRING,
          }
        }catch (e) {
          //

        }
        getSafeRuleMetaInfo(props.currentDialogObj.CATALOG_CID).then(res => {
          let item2 = res.msg[0].Rows.find(i => i.PARAMS === form.value['CATALOG_FIELD'])
          if (item2){
            form.value = {
              ...form.value,
              ...item2,
              SAFE_FIELD_CHINESE:item2.COMMENTS,
              IS_ENCRYPTION:item2.ENCRYPTION,
              IS_DESENSITIZATION:item2.DESENSITIZATION,
              TM_TYPE:props.currentDialogObj.DESENSITIZATION_TYPE,
              JM_TYPE:props.currentDialogObj.ENCRYPTION_TYPE,
            }
          }
          getSelectM()
          console.log(res.msg[0].Rows.find(i => i.PARAMS === form.value['CATALOG_FIELD']),'find')
        })

      }

    })
    return {
     handleClose,
      form,

      fConfigT,

      safeRuleDialogForm1Config,
      safeRuleDialogForm31,
      safeRuleDialogForm32,
      safeRuleDialogForm33,
      safeRuleDialogForm2Config,
      safeRuleDialogForm3Config,
      conform,
      form1,
      form2,
      form3

    }
  }
}
</script>

<style scoped lang="scss">
.my-block{
  .b-title{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    color: #676a6c;
    border-bottom: 1px solid var(--el-border-color-light);
  }
}


</style>
