<template>
  <div class="space-service-status">
    <div class="p-t30">
      <diy-el-form :span="4" v-model:model-form="forms" :forms="spaceServiceStatusForm()">
        <template #searchBtn>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
        </template>
      </diy-el-form>
    </div>
    <div class="my-line"></div>
    <diy-el-form :span="24" v-model:model-form="dwForm" :forms="spaceServiceStatusFilterForm2">
      <template #label>
        <div >
          <el-badge  @click="changeUnit(item)" class="my-badge" v-for="item in allAllBread" :class="{'no-num':!(+item.num > 0),'active':dwForm.label === item.PROVIDERUNIT}" :value="item.num"  >
            <span class="my-badge-label" >{{item.PROVIDERUNIT}}</span>
          </el-badge>
        </div>
      </template>
    </diy-el-form>
    <div class="my-line"></div>
    <my-table
        :page-size="10000"
        :table-data="allDataList"
        :headers="spaceServiceStatusHeader"
    >
      <template #[item.prop]="{data}" v-for="item in spaceServiceStatusHeader.filter(i => i.prop!=='operation')">
        <template v-if="data[item.prop]=='异常'">
          <span style="color: red">{{data[item.prop]}}</span>
        </template>
        <template v-else>
          <span>{{data[item.prop]}}</span>
        </template>
      </template>
<!--      <template #operation="{data,index}">-->
<!--        <el-button circle :icon="Edit" @click="changeIsEdit(data)"></el-button>-->
<!--        <el-button circle :icon="Delete" @click="delD(index)"></el-button>-->
<!--      </template>-->
    </my-table>
  </div>
</template>

<script>
import {Close, Delete, Edit, Plus, Search, SuccessFilled} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {spaceServiceStatusForm, spaceServiceStatusFilterForm2} from "@/data/all-forms";
import {formatDateFun} from "@/unit/time";
import {useRootStore} from "@/stores/useStore";
import {selectMonitorServicePageList, selectServerNode} from "@/service/space-service-status/space-service-service";
import MyTable from "@/components/common/MyTable.vue";
import {spaceServiceStatusHeader} from "@/data/all-table-header";

export default {
  name: "SpaceServiceStatus",
  computed: {
    Search() {
      return Search
    },
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    Plus() {
      return Plus
    },
    SuccessFilled() {
      return SuccessFilled
    },
    Close() {
      return Close
    }
  },
  components: {MyTable, DiyElForm},
  setup() {
    function search(){
      pageIndex.value = 1
      dwForm.value.label = forms.value.unitCode
      allDataList.value = []
      getData()
    }
    const pageIndex = ref(0)
    const allDataList = ref([])
    const totalCount = ref([])
    const allAllBread = ref([])
    function changeUnit(data) {
      dwForm.value.label = dwForm.value.label === data.PROVIDERUNIT?'':data.PROVIDERUNIT
      debugger
      forms.value.MAIN_IP =allAllBread.value.find(i => i.PROVIDERUNIT === data.PROVIDERUNIT).SERVERNAME
      allDataList.value = []
      pageIndex.value = 1
      getData()
    }
    function getAllBread () {
      selectServerNode().then(res => {
        let data = res.msg[0].Rows
        delete  data.RN
        allAllBread.value = Object.keys(data).map(i=>{
          return {
            num:data[i].ERROR_NUM,
            PROVIDERUNIT:data[i].NODE_NAME,
            SERVERNAME:data[i].MAIN_HOST_NAME,
          }
        })
        allAllBread.value.sort((pre,cur) => {
          return cur.num - pre.num
        })
      })
    }
    function getData(){
      selectMonitorServicePageList({
        MAIN_IP: forms.value.MAIN_IP || '',
        KEY_FOCUS:forms.value.KEY_FOCUS,
        SERVICE_NAME:forms.value.SERVICE_NAME,
        pageIndex:1,
        pageSize:10000
      }).then(res =>{
        debugger
        let data = res.data.Rows;
        data.forEach(item =>{
          for(let key in item){
            switch (key){
              case "STATE":
                if(item[key] =='1'){
                  item[key] = '正常'
                }else if(item[key] =='0'){
                  item[key] = '异常'
                }
              break
              case "MAIN_NODE_STATE":
              case "BACK_NODE_STATE":
              case "PROXY_STATE":
                if(item[key] =='1'){
                  item[key] = '正常'
                }else if(item[key] =='-1'){
                  item[key] = '异常'
                }
                break
              case "IS_AVAILABLE":
              case "KEY_FOCUS":
                if(item[key] =='1'){
                  item[key] = '是'
                }else if(item[key] =='0'){
                  item[key] = '否'
                }
              break
              case "MESSAGE_STATE":
                if(item[key] =='1'){
                  item[key] = '已发送'
                }else if(item[key] =='0'){
                  item[key] = '未发送'
                }
              break

            }
          }
        })
        allDataList.value = res.data.Rows;
        totalCount.value =  res.data.Rows.TotalRowCount
      })
    }
    function changeIsEdit(){

    }
    function delD(){

    }
    onBeforeMount(() => {
      getAllBread();
      search();
    })
    const dwForm = ref({})
    const forms = ref({})
    return {
      forms,
      dwForm,
      spaceServiceStatusForm,
      spaceServiceStatusFilterForm2,
      spaceServiceStatusHeader,
      changeUnit,
      allAllBread,
      allDataList,
      formatDateFun,
      useRootStore,
      search,
      totalCount,
      changeIsEdit,
      delD
    }
  }
}
</script>

<style scoped lang="scss">
.space-service-status{
  padding-left: 20px;
  padding-right: 20px;
}

</style>