<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 class="form" :forms="labelRuleDialogFormConfig" v-model:model-form="form">
    <template #tree>
      <div class="tree-div">
        <el-tree :data="treeData" node-key="LABEL_ID" :props="{
          label:'LABEL_NAME'
        }">

          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span class="check-span"><el-checkbox @change="changeTree(data,$event)"  :model-value="data.LABEL_ID === form.label"/></span>
              <span>{{ node.label }}</span>

            </div>
          </template>
        </el-tree>
      </div>
    </template>
  </diy-el-form>


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

} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {addLabelRule, editLabelRuleD, getLabelRuleDetailTreeData} from "@/service/zsk/label-rule";
import {getQualityDetailRuleAllFieldSelect} from "@/service/zsk/quality-check-rule";
import {handleMes} from "@/unit/element-ui/tip";
import {handleLeftMenu} from "@/data/handleLayer";



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

    },
    currentOpObj:{

    },
    diaOperationType:{

    },
    dialogOperatioObj:{

    }
  },
  setup(props,{emit}){
    function changeTree(data,isCheck){
      if (isCheck) {
      //   选中
        form.value.label  = data.LABEL_ID
        form.value.labelName  = data.LABEL_NAME
        let findSlot = labelRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName === 'tree')
        findSlot.isHide = true
      }else {
        form.value.label = ''
        form.value.labelName  = ''
      }



    }
    const labelRuleDialogFormConfig =  ref({...labelRuleDialogForm})
   let treeData = ref([])
    onBeforeMount(() => {

      if (props.diaOperationType!=='add'){
        form.value = {...props.dialogOperatioObj,
          labelName:props.dialogOperatioObj.LABEL_NAME,
          ASSOCIATED_FIELD_NAME:props.dialogOperatioObj.ASSOCIATED_FIELD_NAME,
          LABEL_JUDGE:props.dialogOperatioObj.OPERATOR,
          label:props.dialogOperatioObj.LABEL_RULE_ID,
          LABEL_CONTENT:props.dialogOperatioObj.JUDGMENT_BASIS
        }
        console.log('form.value',form.value)
      }
      let findLabel = labelRuleDialogFormConfig.value.formItemsArr.find(i => i.modelValue === 'labelName')
      let findSlot = labelRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName === 'tree')
      findSlot.isHide = true
      findLabel.events = {
        'focus'(e) {
          findSlot.isHide = false
        },
        blur() {

        }
      }
      getLabelRuleDetailTreeData().then(res =>{

        let data = res.msg[0].Rows

        handleLeftMenu(data,data)
        treeData.value = data.filter(i => +i.LABEL_LEVEL ===1)



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

    })
    function changeRule(){
      let url = props.diaOperationType === 'add'?addLabelRule:editLabelRuleD
      let params

      if (props.diaOperationType === 'add'){
         params = {
           CATALOG_ID:props.currentOpObj.CATALOG_ID,
          LABEL_RULE_ID:form.value.label,
          CATALOG_JOIN_FIELD:'',
          ASSOCIATED_FIELD_NAME:form.value.ASSOCIATED_FIELD_NAME,
           LABEL_STATES:"2",
          JUDGMENT_BASIS:form.value.LABEL_CONTENT,
          OPERATOR:form.value.LABEL_JUDGE,
        }
      }else {
        params = {
          LABEL_CONFIG_ID:props.dialogOperatioObj.LABEL_CONFIG_ID,
          LABEL_RULE_ID:form.value.label,
          CATALOG_JOIN_FIELD:'',
          ASSOCIATED_FIELD_NAME:form.value.ASSOCIATED_FIELD_NAME,
          LABEL_STATES:"2",
          JUDGMENT_BASIS:form.value.LABEL_CONTENT,
          OPERATOR:form.value.LABEL_JUDGE,
        }
      }
      url(params).then(res => {
        handleMes(res,() => {
          handleClose()
          emit('getD')
        })
      })
    }
   function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
     handleClose,
      form,
      changeTree,
      changeRule,
      treeData,
      labelRuleDialogForm,
      labelRuleDialogFormConfig
    }
  }
}
</script>

<style scoped lang="scss">
.check-span{
  margin-right: 10px;
}
.tree-div{
  padding: 10px;
}
:deep{

  .tree-el{
    .el-form-item__content{

      background-color: #fff;
      border: 1px solid  var(--el-border-color-light) !important;;
    }
    top: 36px;

    z-index: 1;
    width: 100%;
    position: absolute;
  }
}

</style>
