<template>
<el-dialog

  :modal="true"
  width="36%"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close

  title="配置标签"
  :model-value="dialogVisible"

  :before-close="handleClose"

>


  <diy-el-form @click.self="clickC" ref="formRef" v-model:model-form="forms" :forms="formConfig">
    <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 === forms.label"/></span>
              <span>{{ node.label }}</span>

            </div>
          </template>
        </el-tree>
      </div>
    </template>
  </diy-el-form>
  <template #footer>
    <el-button :icon="SuccessFilled" @click="saveLabel">确定</el-button>
    <el-button :icon="Close" @click="handleClose">关闭</el-button>
  </template>
</el-dialog>
</template>

<script>
import {Close, SuccessFilled} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref, watch} from "vue";
import {baseLabelBaseDialogForm, baseLabelThemeDialogFormBase, baseLabelThemeDialogFormTheme} from "@/data/all-forms";
import {getLabelRuleDetailTreeData} from "@/service/zsk/label-rule";
import {
  addLabelRuleDataBaseFirst, addLabelRuleDataBaseSecond, addLabelRuleDataBaseThird,
  addLabelRuleDataTheme, editLabelRuleDataBaseFirst, editLabelRuleDataBaseSecond, editLabelRuleDataBaseThird,
  editLabelRuleDataTheme,
  getLabelRuleHomeTableDataBase
} from "@/service/zsk/base-rule/label-rule";
import {handleLeftMenu} from "@/data/handleLayer";
import {elAlert, handleMes} from "@/unit/element-ui/tip";
import {isValid} from "js-base64";

export default {
  name: "LabelTypeDialog",
  components: {DiyElForm},
  computed: {
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  props:{
    dialogVisible:{},
    type:{},
    dialogOperationType:{

    },
    currentDialogOpObj: {

    },
    originTreeData:{

    }
  },
  setup(props,{emit}){
    console.log('查询创建层级',baseLabelThemeDialogFormTheme)
    const originTreeData = ref([])
    const formRef =ref(null)
    const forms = ref({})
    const formConfig = ref(props.type === 'theme'? {...baseLabelThemeDialogFormTheme}: {...baseLabelThemeDialogFormBase})
    const treeData = ref([])
    let findLabel = formConfig.value.formItemsArr.find(i => i.modelValue === 'labelName')
    let findSlot = formConfig.value.formItemsArr.find(i => i.slotName === 'tree')
    findSlot.isHide = true
    function clickC(){
      findSlot.isHide = true
      console.log('输入焦点聚焦在 Dialog 内容时的回调')
    }
    findLabel.events = {
      'focus'(e) {
        console.log('聚焦了')
        findSlot.isHide = false
      },
      blur() {

      }
    }
    function saveLabel(){
           formRef.value.refEl.validate(isValid => {
             if (isValid){
               if (props.type === 'theme'){
                 let params = {
                   LABEL_NAME:forms.value.LName,
                   PARENT_LABEL_ID:forms.value.label || '',
                   REMARKS:forms.value.REMARKS,
                   LABEL_LEVEL:forms.value.label?(+(originTreeData.value.find(i =>forms.value.label === i.LABEL_ID)?.LABEL_LEVEL) + 1) + '':'1'
                 }
                 let url = props.dialogOperationType === 'edit'?editLabelRuleDataTheme:addLabelRuleDataTheme
                 if (props.dialogOperationType === 'edit'){
                   params.LABEL_ID = props.currentDialogOpObj.LABEL_ID
                 }
                 url(params).then(res => {
                   handleMes(res,() => {
                     emit('getTableNow')
                   })
                 })
               }

               else {
                 let url
                 let findRank = forms.value.label?(+(originTreeData.value.find(i =>forms.value.label === i.SHOWCODE)?.LABEL_LEVEL) + 1) + '':'1'
                 let params ={
                   CID_LABEL_NAME:forms.value['LName'],
                   CID_CODE:props.currentDialogOpObj.CODE,
                   CID_REMARKS:forms.value['CID_REMARKS'],
                 }
                 if (props.dialogOperationType === 'add'){
                   if (findRank === '4'){
                     elAlert('暂不开放新增4级标签')
                     return
                   }else if (originTreeData.value.find(i => i.CODE === forms.value['LCode'] && i.PARENT === forms.value['label'])){
                     return;
                   }
                   if (findRank === '1'){
                     url = addLabelRuleDataBaseFirst
                   }
                   if (findRank === '2'){
                     url = addLabelRuleDataBaseSecond
                     params.CID_BIG_ID =forms.value['label']
                   }else if (findRank === '3'){
                     url = addLabelRuleDataBaseThird
                     params.CID_MIDDLE_ID =forms.value['label']
                     params.CID_BIG_ID = originTreeData.value.find(i => i.SHOWCODE === forms.value.label)?.SHOWCODE
                   }

                 }
                  else {


                   if (findRank === '1'){
                     url = editLabelRuleDataBaseFirst
                   }
                   if (findRank === '2'){
                     url = editLabelRuleDataBaseSecond
                     params.CID_BIG_ID =props.currentDialogOpObj.PARENT
                   }else if (findRank === '3'){
                     url = editLabelRuleDataBaseThird
                     params.CID_MIDDLE_ID = forms.value['label'].slice(2,4)
                     params.CID_BIG_ID = forms.value['label'].slice(0,2)
                   }

                 }
                 url(params).then(res => {
                   handleMes(res,() => {
                     emit('getTableNow')
                   })
                 })
               }
             }
           })

    }
    function changeTree(data,isCheck){
      if (isCheck) {
        //   选中
        forms.value.label  = data.LABEL_ID
        forms.value.labelName  = data.LABEL_NAME
        let findSlot = formConfig.value.formItemsArr.find(i => i.slotName === 'tree')

      }else {
        forms.value.label = ''
        forms.value.labelName  = ''
      }
      findSlot.isHide = true


    }

    onBeforeMount(() => {

      const findMc = formConfig.value.formItemsArr.find(i =>i.modelValue === 'labelName')

      findMc.elInputEleAttrs.disabled = (props.dialogOperationType !=='add')

      if (props.type === 'theme'){

        getLabelRuleDetailTreeData().then(res =>{
          let arr =res.msg[0].Rows
          originTreeData.value = arr
          emit('update:originTreeData',arr)
          handleLeftMenu(arr,arr)
          treeData.value = arr.filter(i => +i.LABEL_LEVEL ===1)
          if (props.dialogOperationType!=='add'){
            forms.value = {
              ...props.currentDialogOpObj,
              LName:props.currentDialogOpObj.LABEL_NAME,
              label:props.currentDialogOpObj.PARENT_LABEL_ID,
              labelName:props.currentDialogOpObj.PARENT_LABEL_ID?originTreeData.value.find(i => i.LABEL_ID === props.currentDialogOpObj.PARENT_LABEL_ID)?.LABEL_NAME:''
            }
          }

        })
      }else {
        const findMcode = formConfig.value.formItemsArr.find(i =>i.modelValue === 'LCode')
        findMcode.elInputEleAttrs.disabled = (props.dialogOperationType !=='add')
        findMcode.itemOtherAttrs.required = (props.dialogOperationType ==='add')
        getLabelRuleHomeTableDataBase({
          pageIndex:1,
          pageSize:1000,
          CID_LEVEL:'',
          CID_NAME:''
        }).then(res =>{
          let arr =res.msg[0].Rows
          originTreeData.value = arr
          emit('update:originTreeData',arr)
          handleLeftMenu(arr,arr)
          treeData.value = arr.filter(i => +i.LABEL_LEVEL ===1)
          if (props.dialogOperationType!=='add'){
            forms.value = {
              ...props.currentDialogOpObj,
              LName:props.currentDialogOpObj.NAME,
              CID_REMARKS:props.currentDialogOpObj.REMARKS,
              LCode:props.currentDialogOpObj.SHOWCODE,
              label:props.currentDialogOpObj.PARENT.replace('#',''),
              labelName:props.currentDialogOpObj.PARENT !== '#'?originTreeData.value.find(i => i.SHOWCODE === props.currentDialogOpObj.PARENT)?.NAME:''
            }
          }

        })
      }

    })
    function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      forms,
      formConfig,
      changeTree,
      treeData,
      formRef,
      saveLabel,
      originTreeData,
      clickC
    }
  }
}
</script>

<style scoped lang="scss">
:deep{

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

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

    z-index: 1;
    width: 100%;
    position: absolute;
  }
}
</style>
