<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="my-block">
    <div class="b-title">清洗规则</div>
    <diy-el-form class="form" ref="formRef" :forms="clearRuleDialogForm1Config" v-model:model-form="form"/>
  </div>
  <div class="my-block">
    <div class="b-title">质检规则</div>
    <diy-el-form class="form" :forms="clearRuleDialogForm2Config" v-model:model-form="form"/>
  </div>



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

} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {getClearRuleDetailClearSelect} from "@/service/zsk/clear-rule";
import {getQualityDetailRuleAllFieldSelect, getQualityDetailRuleSelect} from "@/service/zsk/quality-check-rule";
import {isValid} from "js-base64";



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

    },
    operationType:{},
    currentDialogOpObj:{

    },
    currentOpObj:{

    }

  },
  setup(props,{emit}){
    const formRef = ref(null)
    const clearRuleDialogForm1Config = ref({...clearRuleDialogForm1})
    function editRuleSer() {
      formRef.value.refEl.validate(isValid => {
        let CLEANING_RULE  =(form.value.CLEANING_RULE_UUID === 'C3341A36D341BC44E053017910AC02CA')?JSON.stringify({
          IllegalCharacter:form.value.addContent,
          DefaultValue:''
        }):(form.value.CLEANING_RULE_UUID === 'C3341A36D33FBC44E053017910AC02CA'?JSON.stringify({
          IllegalCharacter:'',
          DefaultValue:form.value.addContent
        }):'')
        if (form.value.CLEANING_RULE_UUID === 'C3341A36D346BC44E053017910AC02CA'){
        //   关联性验证
          CLEANING_RULE = JSON.stringify({
            IllegalCharacter:"null",
            DefaultValue:''
          })
        }
        if (isValid) {
          emit('editRuleSer', {...form.value,
            CLEANING_RULE
          })
        }
      })
    }
    const clearRuleDialogForm2Config = ref({...clearRuleDialogForm2})
    onBeforeMount(() => {
      let findS = clearRuleDialogForm1Config.value.formItemsArr.find(i => i.modelValue === 'CLEANING_RULE_UUID')
      findS.events = {
        'change'(vakl){
          if (vakl === 'C3341A36D341BC44E053017910AC02CA'){
          //   格式内容清洗
            form.value['addType'] = 'IllegalCharacter'
            form.value['addContent'] = ''

          }else if (vakl === 'C3341A36D33FBC44E053017910AC02CA'){
            form.value['addType'] = 'DefaultValue',
              form.value['addContent'] = ''
          }
          console.log('发生了辩护',vakl)
        }
      }
      watch(() => form.value.CLEANING_RULE_UUID,(value) => {
        let findI = clearRuleDialogForm1Config.value.formItemsArr.find(i => i.modelValue === 'addType')
        let findI2 = clearRuleDialogForm1Config.value.formItemsArr.find(i => i.modelValue === 'addContent')

        findI.isHide = findI2.isHide = !((value === 'C3341A36D341BC44E053017910AC02CA') || (value === 'C3341A36D33FBC44E053017910AC02CA'))
        console.log('CLEANING_RULE_UUID',value)
      },{

      })
      if (props.operationType!=='add'){
        let valur = JSON.parse(props.currentDialogOpObj.CLEANING_RULE || JSON.stringify({}))
        console.log('a2',valur,valur.IllegalCharacter?valur.IllegalCharacter:(valur.DefaultValue?valur.DefaultValue:''))
        form.value = {...props.currentDialogOpObj
          ,cleaningRuleUuid:props.currentDialogOpObj.NAME,
          inspRuleUuid:props.currentDialogOpObj.FIELD_NAME?(props.currentDialogOpObj.FIELD_NAME || '').split(','):[],
          addType:valur.IllegalCharacter?'IllegalCharacter':(valur.DefaultValue?'DefaultValue':''),
          addContent:valur.IllegalCharacter?valur.IllegalCharacter:(valur.DefaultValue?valur.DefaultValue:'')
        }
      }
      getClearRuleDetailClearSelect().then(res => {
        let findGz = clearRuleDialogForm1Config.value.formItemsArr.find(i => i.modelValue === 'CLEANING_RULE_UUID')
        findGz.options = [
          {
            value:'',
            label:'全部'
          },

        ].concat(res.msg[0].Rows.map(i => ({
          ...i,
          value:i.CLEANING_RULE_UUID,
          label:i.CLEANNAME
        })))
      })
      getQualityDetailRuleSelect().then(res => {
        let findGz = clearRuleDialogForm2Config.value.formItemsArr.find(i => i.modelValue === 'cleaningRuleUuid')
        findGz.options = [
          {
            value:'',
            label:'请选择'
          }

        ].concat(res.msg[0].Rows.map(i => ({

          value:i.CODE,
          label:i.NAME
        })))

      })
      getQualityDetailRuleAllFieldSelect(props.currentOpObj.CATALOG_CODE).then(res => {
        //    INFOITEMENGLISHNAME
        let findItem = clearRuleDialogForm2Config.value.formItemsArr.find(i => i.modelValue === 'inspRuleUuid')
        findItem.options = [
          {
            value:'',
            label:'全部字段'
          }
        ].concat(res.msg[0].Rows.map(i => ({
          ...i,
          label:i.INFOITEMENGLISHNAME,
          value:i.INFOITEMENGLISHNAME,
        })))
      })
    })

    const form= ref({

    })
   function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
     handleClose,
      form,
      editRuleSer,


      clearRuleDialogForm1Config,
      clearRuleDialogForm2Config,
      formRef

    }
  }
}
</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>
