<template>
 <div class="position-re">
   <my-breadcrumb class="my-breadcrumb" :breadcrumb-arr="breadAr"></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 class="column-form" :forms="appArrangeDetailFilterFormConfig" v-model:model-form="forms">
         <template #TAPE_WIDTHappend>
           <el-button>Mbps</el-button>
         </template>
         <template #CPUappend>
           <el-button>核</el-button>
         </template>
         <template #MEMORYappend>
           <el-button>GB</el-button>
         </template>
         <template #STORAGEappend>
           <el-button>GB</el-button>
         </template>
         <template #SYSTEM_DISKappend>
           <el-button>GB</el-button>
         </template>
         <template #DATA_DISKappend>
           <el-button>GB</el-button>
         </template>
         <template #DATABASE_DISKappend>
           <el-button>GB</el-button>
         </template>
       </diy-el-form>
     </div>
     <div class="block">
       <div class="my-b-title">网络策略</div>
       <div class="my-search-div btn" v-if="operationType !== 'detail'"><el-button :icon="Plus" @click="addTableItem('cl')"></el-button></div>
       <my-table
         border
         :has-operation="true"
         :is-height-equal-max-height="true"
         :page-size="6"
         :headers="appArrangeDetailBtclTableHeader"
       :table-data="netClTable"
       >
         <template v-for="header in appArrangeDetailBtclTableHeader" #[header.prop]="{data}" :key="header">
           <span v-if="!data.isEdit">{{data[header.prop]}}</span>
           <el-input v-else v-model="data[header.prop]"></el-input>
         </template>
         <template #operation="{data,index}">
           <template v-if="operationType=== 'detail'">
             <el-button type="info" disabled>编辑</el-button>
             <el-button type="info"  disabled>删除</el-button>
           </template>
           <template v-else>
             <template v-if="!data.isEdit">
               <el-button type="info" @click="editTableItem(data)">编辑</el-button>
               <el-button type="info" @click="delTable(data,'cl',index)" >删除</el-button>
             </template>
             <template v-else>
               <el-button type="info" @click="editTableItem(data)">保存</el-button>
             </template>
           </template>
         </template>
       </my-table>
     </div>
     <div class="block">
       <div class="my-b-title">部署信息</div>
       <div class="my-search-div btn" v-if="operationType !== 'detail'"><el-button :icon="Plus"  @click="addTableItem('bs')"></el-button></div>
       <my-table
         border
         :has-operation="true"
         :is-height-equal-max-height="true"
         :page-size="6"
         :headers="appArrangeDetailBsxxTableHeader"
         :table-data="netBsTable"
       >
         <template v-for="header in appArrangeDetailBsxxTableHeader" #[header.prop]="{data}" :key="header">
           <span v-if="!data.isEdit">{{data[header.prop]}}</span>
           <el-input v-else v-model="data[header.prop]"></el-input>
         </template>
         <template #operation="{data,index}">
           <template v-if="operationType=== 'detail'">
             <el-button type="info" disabled>编辑</el-button>
             <el-button type="info"  disabled>删除</el-button>
           </template>
           <template v-else>
             <template v-if="!data.isEdit">
               <el-button type="info" @click="editTableItem(data)">编辑</el-button>
               <el-button type="info" @click="delTable(data,'bs',index)" >删除</el-button>
             </template>
             <template v-else>
               <el-button type="info" @click="editTableItem(data)">保存</el-button>
             </template>
           </template>
         </template>
       </my-table>
     </div>
     <div class="block">
       <div class="my-b-title">告警规则配置</div>
       <div class="my-search-div btn" v-if="operationType !== 'detail'"><el-button :icon="Plus"  @click="addTableItem('gs')"></el-button></div>
       <my-table
         border
         :has-operation="true"
         :is-height-equal-max-height="true"
         :page-size="6"
         :headers="appArrangeDetailGzxxTableHeader"
         :table-data="alertBsTable"
       >
         <template v-for="header in appArrangeDetailGzxxTableHeader" #[header.prop]="{data}" :key="header">
           <span v-if="!data.isEdit">{{data[header.prop]}}</span>
           <el-input v-else v-model="data[header.prop]"></el-input>
         </template>
         <template #operation="{data,index}">
           <template v-if="operationType === 'detail'">
             <el-button type="info" disabled>编辑</el-button>
             <el-button type="info"  disabled>删除</el-button>
           </template>
           <template v-else>
            <template v-if="!data.isEdit">
              <el-button type="info" @click="editTableItem(data)">编辑</el-button>
              <el-button type="info" @click="delTable(data,'gs',index)" >删除</el-button>
            </template>
             <template v-else>
               <el-button type="info" @click="editTableItem(data)">保存</el-button>
             </template>
           </template>
         </template>
       </my-table>
     </div>
     <div class="detail-operation-btn" v-if="operationType !== 'detail'">

       <el-button :icon="Select" @click="saveS">保存</el-button>
       <el-button :icon="Close" @click="$emit('changeOperation','')">返回</el-button>
     </div>
   </div>
 </div>
</template>


<script>
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {appArrangeDetailFilterForm} from "@/data/all-forms";
import {Close, Plus, Select} from "@element-plus/icons-vue";
import MyTable from "@/components/common/MyTable.vue";
import {
  appArrangeDetailBsxxTableHeader,
  appArrangeDetailBtclTableHeader,
  appArrangeDetailGzxxTableHeader
} from "@/data/all-table-header";
import {
  getAppArrangeWatchDataAlertInfo,
  getAppArrangeWatchDetailArrangeInfo,
  getAppArrangeWatchDetailInfo,
  getAppArrangeWatchDetailNetXy,
  updateOrAddWatchDetailD
} from "@/service/data-process-watch/app-arrange-watch";
import {useDetailOrEdit} from "@/unit/use-method/usePagination";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "AppArrangeDetail",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    },
    Plus() {
      return Plus
    }
  },
  components: {MyTable, DiyElForm, MyBreadcrumb},
  props:{
    currentOpObj:{

    },
    operationType:{

    }
  },
  setup(props, {emit}) {
    function delTable(data,name,index) {

      let arr = [
        {'name':'cl',header:appArrangeDetailBtclTableHeader,table:netClTable.value},
        {'name':'bs',header:appArrangeDetailBsxxTableHeader,table:netBsTable.value},
        {'name':'gs',header:appArrangeDetailGzxxTableHeader,table:alertBsTable.value},
      ]
      let findItem = arr.find(i =>i.name === name)
      findItem.table.splice(index,1)
      console.log('dide',index,findItem)

    }
    function addTableItem(name) {
      let arr = [
        {'name':'cl',header:appArrangeDetailBtclTableHeader,table:netClTable.value},
        {'name':'bs',header:appArrangeDetailBsxxTableHeader,table:netBsTable.value},
        {'name':'gs',header:appArrangeDetailGzxxTableHeader,table:alertBsTable.value},
      ]
      let findItem = arr.find(i =>i.name === name)
      let tableTr = {}
      findItem.header.forEach(it => tableTr[it.prop] = '')
      findItem.table.push({...tableTr,isEdit:true})
    }
    function editTableItem(item) {
      item.isEdit = !item.isEdit
    }
    const netClTable = ref([])
    const netBsTable = ref([])
    const appArrangeDetailFilterFormConfig = ref({...appArrangeDetailFilterForm})
    const alertBsTable = ref([])
    const netRuleTable = ref([])
    const {changeOperation:changeAlertTableData,operationType:alertAlertOperation,currentOpObj:currentAlertOpObj} = useDetailOrEdit()
    const {changeOperation:changeBsTableData,operationType:currentBsOperation,currentOpObj:currentBsOpObj} = useDetailOrEdit()
    const breadAr  =[{name:'运行监控'},{name:'软件部署监控'},{name:' 服务器部署'}]
    const forms = ref({

    })
    function saveS() {

      updateOrAddWatchDetailD({
        wlclList:netClTable.value,
        bsxxList:netBsTable.value,
        gjgzList:alertBsTable.value,
        deployment:{
          UUID:props.currentOpObj.UUID || '',
          HOST_NAME:forms.value.HOST_NAME,
          HOST_TYPE:forms.value.HOST_TYPE,
          NETWORK_ZONE:forms.value.NETWORK_ZONE,
          USE_TYPE:forms.value.USE_TYPE,
          MONITOR_SYSTEM:forms.value.MONITOR_SYSTEM,
          INTRANET_IP:forms.value.INTRANET_IP,
          EXTERNAL_IP:forms.value.EXTERNAL_IP,
          PUBLIC_SERVICE:forms.value.PUBLIC_SERVICE,
          INTRANET_ADDRESS:forms.value.INTRANET_ADDRESS,
          TAPE_WIDTH:forms.value.TAPE_WIDTH,
          DATABASE_DISK:forms.value.DATABASE_DISK,
          CPU:forms.value.CPU,
          MEMORY:forms.value.MEMORY,
          STORAGE:forms.value.STORAGE,
          SYSTEM_DISK:forms.value.SYSTEM_DISK,
          DATA_DISK:forms.value.DATA_DISK,
          REMARKS:forms.value.REMARKS,
        }
      }).then(res => {
        handleMes(res,() => {
          emit('changeOperation','')
        })
      })
    }

    onBeforeMount(() => {
      appArrangeDetailFilterFormConfig.value.formAttrs.disabled = (props.operationType ==='detail')
      if (props.operationType !== 'add'){
        getAppArrangeWatchDataAlertInfo(props.currentOpObj.UUID).then(res => {
          alertBsTable.value = res.msg[0].Rows
        })
        getAppArrangeWatchDetailArrangeInfo(props.currentOpObj.UUID).then(res => {
          netBsTable.value = res.msg[0].Rows
        })
        getAppArrangeWatchDetailNetXy(props.currentOpObj.UUID).then(res => {
          netClTable.value = res.msg[0].Rows
        })
        getAppArrangeWatchDetailInfo(props.currentOpObj.UUID).then(res => {
          try {
            forms.value = {
              ...forms.value,
              ...res.msg[0].Rows[0]
            }
          }catch {

          }
        })
      }

    })
    return {
      netClTable,
      breadAr,
      forms,
      appArrangeDetailFilterForm,
      appArrangeDetailBtclTableHeader,
      appArrangeDetailBsxxTableHeader,
      appArrangeDetailGzxxTableHeader,
      addTableItem,
      netBsTable,
      netRuleTable,
      alertBsTable,
      changeAlertTableData,alertAlertOperation,currentAlertOpObj,
      changeBsTableData,currentBsOperation,currentBsOpObj,
      editTableItem,
      delTable,
      appArrangeDetailFilterFormConfig,
      updateOrAddWatchDetailD,
      saveS
    }
  }
}
</script>

<style scoped lang="scss">

</style>
