<template>
  <div class="position-re">

     <my-breadcrumb :breadcrumb-arr="myBread" class="my-breadcrumb"/>
    <div class="back" @click="$emit('changeOperation','')"><span class="fa fa-reply cur-po " >返回</span></div>
    <div class="my-detail-main">
      <div class="block">
        <div class="my-b-title">基础信息</div>
        <diy-el-form ref="baseFormRef" :span="12" v-model:model-form="forms" :forms="moduleManageDetailFormConfig"/>
      </div>
      <div class="block">
        <div class="my-b-title">按钮信息</div>
        <div class="my-op-btns" v-if="operationType!=='detail'">
          <ul class="my-operation-btns">
            <li :title="btn.type" v-for="(btn,index) in moduleDetailTableBtn" :class="{'disabled':btn.disabled}"  @click="clickOperationBtn(btn,'btn')" :key="btn.id">
              <span :class="btn.className"></span>
            </li>
          </ul>
        </div>
        <my-table
          @getCheckedTable="getCheckedTableBtn"
          :multi-select="true"
          :table-data="btnTableData"
          border
          :headers="moduleManageDetailTableHeader"
          :is-height-equal-max-height="true"
          :page-size="8"
        >
        <template #TYPE="{data}">
          {{getBtnType(data.TYPE)}}
        </template>
        </my-table>
      </div>
      <div class="block">
        <div class="my-b-title">接口信息</div>
        <div class="my-op-btns" v-if="operationType!=='detail'">
          <ul class="my-operation-btns">
            <li :title="btn.type" v-for="(btn,index) in moduleDetailTableBtn" :class="{'disabled':btn.disabled}"  @click="clickOperationBtn(btn,'interface')" :key="btn.id">
              <span :class="btn.className"></span>
            </li>
          </ul>
        </div>
        <my-table
          ref="tableRef"
          @getCheckedTable="getCheckedTableInterface"
          :multi-select="true"
          :table-data="interfaceTableData"
          border
          :headers="moduleManageDetailInterfaceTableHeader"
          :is-height-equal-max-height="true"
          :page-size="8"
        >
          <template #TYPE="{data}">
            {{getBtnType(data.TYPE)}}
          </template>
          <template #REQUEST_TYPE="{data}">
            {{getRequestMethod(data.REQUEST_TYPE)}}
          </template>
        </my-table>
      </div>
      <div class="detail-operation-btn" v-if="operationType!=='detail'">
        <el-button :icon="Select" @click="saveModuleInfo">保存</el-button>
        <el-button :icon="Close" @click="$emit('changeOperation','')">返回</el-button>
      </div>
    </div>
    <template v-if="isTableEditDialogIsShow">
      <module-manage-detail-edit-table-dialog
        :operation-obj="currentDialogOpObj"
           :dialog-operation-type="dialogOperationType"
        @operationTable="operationTable"
        :model-type="modelType" :title="modelType==='btn'?'按钮信息':'接口信息'" v-model:dialog-visible="isTableEditDialogIsShow"/>
    </template>
    <system-icon-dialog :dialog-obj="forms" @changeIcon="changeIcon" v-model:dialog-visible="isIconDialogIsShow"/>
  </div>
</template>

<script>
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {moduleManageDetailForm} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {moduleManageDetailInterfaceTableHeader, moduleManageDetailTableHeader} from "@/data/all-table-header";
import {Close, Select} from "@element-plus/icons-vue";
import {moduleDetailTableBtn} from "@/data/all-operation-btns";
import DictionarySetingDilog from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/base-dictionary/DictionarySetingDetailDilog.vue";
import {useDetailOrEdit} from "@/unit/use-method/usePagination";
import {elAlert, handleMes, showConfirm} from "@/unit/element-ui/tip";
import ModuleManageDetailEditTableDialog
  from "@/view/other/c-views/system-manage/system-manage/module-manage/ModuleManageDetailEditTableDialog.vue";
import {getBtnInfoTableData, getModuleDetailD} from "@/service/system-manage/module-manage";
import {addOrEditModuleInfo, addUserRoleInterfaceInfo} from "@/service/system-manage/root-manage";
import {uuidv4} from "@/unit/code";
import SystemIconDialog from "@/view/other/c-views/system-manage/system-manage/module-manage/SystemIconDialog.vue";
import {isValid} from "js-base64";

export default {
  name: "ModuleManageDetail",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    }
  },
  props:{
    currentOpObj:{

    },
    operationType:{

    },


  },
  components: {
    SystemIconDialog,
    ModuleManageDetailEditTableDialog, DictionarySetingDilog, MyTable, DiyElForm, MyBreadcrumb},
  setup(props,{emit}) {
    const baseFormRef = ref(null)
    const tableRef = ref(null)
    function changeIcon(check){
      forms.value.O_LCON = check.ICON_CODE?'iconfont '+(check.ICON_CODE||'').replace('iconfont',''):''
      isIconDialogIsShow.value = false
      console.log('wode',check)
    }
    const isIconDialogIsShow = ref(false)
    function getBtnType(value, row, index) {
      switch(value){
        case "1":
          return "新增修改";
        case "2":
          return "查看";
        case "0":
          return "删除";
        case "3":
          return "上传";
        case "4":
          return "下载";
        case "5":
          return "打印";

      }

    }
    function getRequestMethod (value, row, index) {
      switch(value){
        case "1":
          return "get";
        case "2":
          return "post";

      }
      return value;
    }
    const {currentOpObj:currentDialogOpObj,operationType:dialogOperationType,changeOperation:changeDialogOperation} = useDetailOrEdit()
    const checkTableBtb = ref([])
    const checkTableInterface = ref([])
    const moduleManageDetailFormConfig = ref({...moduleManageDetailForm})
    const operationIndex = ref(null)
    function saveModuleInfo() {
      baseFormRef.value.refEl.validate(isValid => {
        if (isValid){
          let params = {
            a_name:forms.value.NAME,
            a_higher:forms.value.HIGHER || '0',
            a_o_path:forms.value.O_PATH,
            a_code:props.operationType!=='add'?props.currentOpObj.id:'',
            a_o_levels_path:forms.value.O_LEVELS_PATH,
            a_o_lcon:(forms.value.O_LCON || '').includes('iconfont')?forms.value.O_LCON:(forms.value.O_LCON?'iconfont '+forms.value.O_LCON:''),
            a_type:forms.value.TYPE,
            bettons:btnTableData.value.map(i => {
              return {
                UUID:i.UUID,
                NAME:i.NAME,
                TYPE:i.TYPE,
                CODE:i.CODE,
                PATH:i.PATH,
              }
            }),
            interfaces:interfaceTableData.value.map(i => {
              return {
                UUID:i.UUID,
                NAME:i.NAME,
                TYPE:i.TYPE,
                INTERFACE_NAME:i.INTERFACE_NAME,
                REQUEST_TYPE:i.REQUEST_TYPE,
              }
            })
            // a_code:forms.value.NAME,
          }


          addOrEditModuleInfo(params).then(res => {
            handleMes(res,() => {
              emit('changeOperation','')
            })
          })
        }
      })

    }

    function operationTable(form){
      isTableEditDialogIsShow.value =false
      let tableV = modelType.value === 'btn'?btnTableData.value:interfaceTableData.value
      if (dialogOperationType.value === 'add'){
        tableV.push({...form})
      }else if (dialogOperationType.value === 'edit'){
        console.log(tableV.indexOf(currentDialogOpObj.value),'indexOf')
        // currentOpObj.value
        tableV.splice(tableV.indexOf(currentDialogOpObj.value),1,{...form})
      }
      changeDialogOperation('')
    }
   function getCheckedTableBtn(checked) {
      checkTableBtb.value  = checked
   }
    function getCheckedTableInterface(checked) {
      checkTableInterface.value  = checked
    }
    function clickOperationBtn(item,modelType2){

      modelType.value = modelType2
      let opArr = [
        {type:'新增',id:'add'},
        {type:'编辑',id:'edit'},
      ]
      let isFind = opArr.find(i =>i.type === item.type)
      if(isFind){
        // 新增或者编辑
        if (isFind.id === 'edit'){
          if (modelType.value === 'btn' && !(checkTableBtb.value.length === 1)){
            elAlert('请选择一条数据编辑')
            return
          }
          if (modelType.value === 'interface' && !(checkTableInterface.value.length === 1)){
            elAlert('请选择一条数据编辑')
            return
          }
          console.log('checkTableBtb[0]',checkTableBtb[0],modelType.value === 'btn'?checkTableBtb.value[0]:checkTableInterface.value[0])
          changeDialogOperation(isFind.id,modelType.value === 'btn'?checkTableBtb.value[0]:checkTableInterface.value[0])


        }else {
        //   新增
          changeDialogOperation('add',{})
        }
        isTableEditDialogIsShow.value = true

      }
      else if (item.type ==='删除'){
        showConfirm(() => {
          if (modelType.value ==='btn'){
            btnTableData.value = btnTableData.value.filter(i => {
              return checkTableBtb.value.indexOf(i) === -1
            })
          }
          else if (modelType.value ==='interface'){
            interfaceTableData.value = interfaceTableData.value.filter(i => {
              return checkTableInterface.value.indexOf(i) === -1
            })
          }
        },'确定要删除吗','系统提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
      }


    }
    const modelType = ref('')
    const btnTableData = ref([])
    const interfaceTableData = ref([])
    const isTableEditDialogIsShow = ref(false)
    const forms = ref({

    })
    const myBread  = [
      {name:'系统管理'},
      {name:'模块管理'},

    ]



    onBeforeMount(() => {
      console.log('详情创建','ss')
      if (props.currentOpObj){
        if (props.operationType!=='add'){
          getModuleDetailD(props.currentOpObj.id).then(res => {
            try {
              forms.value = {...res.msg[0].Rows[0],TYPE:res.msg[0].Rows[0].TYPE + ''}
            }catch {
              forms.value = {}
            }
            finally {
              forms.value.isRoot = forms.value.HIGHER_NAME?'0':'1'

            }
          })
        }else {
          forms.value = {
            isRoot:'0',
            TYPE:props.currentOpObj.type + '',
            HIGHER_NAME:props.currentOpObj.name,
            HIGHER:props.currentOpObj.id,
          }
        }
        getBtnInfoTableData(props.currentOpObj.id).then(res => {
          btnTableData.value = res.msg[0].Rows
        })
        addUserRoleInterfaceInfo(props.currentOpObj.id).then(res => {
          interfaceTableData.value = res.msg[0].Rows
        })
        //   详情或者新增
      }
      else {
        forms.value = {
          isRoot:'1',
          HIGHER:'0',
          // HIGHER_NAME:props.currentOpObj.name,
        }
      }

      let isRootForm = moduleManageDetailFormConfig.value.formItemsArr.find(i => i.modelValue==='isRoot')
      let parentIdForm = moduleManageDetailFormConfig.value.formItemsArr.find(i => i.modelValue==='HIGHER_NAME')
      let typeForm = moduleManageDetailFormConfig.value.formItemsArr.find(i => i.modelValue==='TYPE')
      typeForm.elSelectEleAttrs.disabled   = Boolean(props.currentOpObj)
      const findI = moduleManageDetailFormConfig.value.formItemsArr.find(i => i.modelValue === 'O_LCON')
      findI.events  = {
        'focus'(e){
          e.target.blur()
          isIconDialogIsShow.value = true
        },

      }

    })


    return {
      myBread,
      forms,
      moduleManageDetailFormConfig,
      moduleManageDetailTableHeader,
      moduleManageDetailInterfaceTableHeader,moduleDetailTableBtn,
      isTableEditDialogIsShow,

      modelType,
      clickOperationBtn,
      currentDialogOpObj,dialogOperationType,changeDialogOperation,
      operationIndex,
      btnTableData,
      interfaceTableData,
      operationTable,
      checkTableBtb,
      checkTableInterface,
      getCheckedTableBtn,
      getCheckedTableInterface,
      getRequestMethod,
      getBtnType,
      isIconDialogIsShow,
      changeIcon,
      tableRef,
      saveModuleInfo,
      baseFormRef

    }
  }
}
</script>

<style scoped lang="scss">

</style>
