<template>
 <div class="h100 position-re">
   <common-layout
     :table-attrs="{
     'has-operation':true
     }"
     :is-flex-table="true"
     ref="layoutRef"
     :form-attrs="{
       spanAttrs: {
         span:4
       }
     }"
     :filter-form="dataServiceStateWatchDetailFilterForm"
    :get-table-list="getTableList"
     :table-header="dataServiceStateWatchDetailTabTableHeader"
   >
     <template #STATE="{data}">
       <span :class="{'my-error':data.STATE==='2'}">     {{getStatus(data.STATE)}}</span>
     </template>
     <template #IS_SOVLED="{data}">
       <span :class="{'my-error':data.IS_SOVLED==='2'}">     {{getResloveState(data.IS_SOVLED)}}</span>
     </template>
     <template #operation="{data}">
       <el-button type="info" @click="openModel('detail',data)">查看</el-button>
       <el-button type="info" v-if="data.IS_SOVLED==='2'" @click="openModel('edit',data)">编辑</el-button>
     </template>
     <template #top>
       <my-breadcrumb class="my-breadcrumb" :breadcrumb-arr="bradeArr"></my-breadcrumb>
       <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
     </template>
   </common-layout>
   <template v-if="isDialogShow">
     <data-service-state-watch-detail-dialog
       @changeD="changeD"
       :dialog-operation-type="dialogOperationType" :current-dialog-op-obj="currentDialogOpObj" v-model:dialog-visible="isDialogShow"/>
   </template>
 </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import {ref} from "vue";
import {dataServiceStateWatchDetailFilterForm} from "@/data/all-forms";
import {dataServiceStateWatchDetailTabTableHeader} from "@/data/all-table-header";
import DictionarySetingDilog from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/base-dictionary/DictionarySetingDetailDilog.vue";
import DataServiceStateWatchDetailDialog
  from "@/view/other/c-views/data-watch/data-service-watch/data-service-state-watch/DataServiceStateWatchDetailDialog.vue";
import {
  changeDaraServiceSatWatchDetailTableData,
  getDaraServiceSatWatchDetailTableData
} from "@/service/data-service-watch/data-service-status-watch";
import {useDetailOrEdit} from "@/unit/use-method/usePagination";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "DataServiceStateWatchDetail",
  components: {DataServiceStateWatchDetailDialog, DictionarySetingDilog, MyBreadcrumb, CommonLayout},
  setup(props,{emit}) {
    const {currentOpObj:currentDialogOpObj,changeOperation:changeDialogOperation,operationType:dialogOperationType} = useDetailOrEdit()
    const isDialogShow = ref(false)
    const layoutRef = ref(null)
    function getStatus(field) {
      if (field == "1") {
        return "正常";
      } else if (field == "2") {
        return "异常";
      }
    }
    function getResloveState(field) {
      if (field == "1") {
        return "已解决";
      } else if (field == "2") {
        return "未解决";
      }
    }
    function changeD(form) {
      changeDaraServiceSatWatchDetailTableData({
        SOLVE_STATUS:form.IS_SOVLED,
        SOLVE_PLAN:form.SOLVE_PLAN,
        ID:currentDialogOpObj.value.ID,
      }).then(res => {
        handleMes(res,() => {
          isDialogShow.value = false
          getTableList()
        })
      })
    }
    function openModel(type,item){
      isDialogShow.value = true
      changeDialogOperation(type,item)
    }
    function getTableList() {
      getDaraServiceSatWatchDetailTableData({
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize,
        START_DATE :layoutRef.value.form.START_DATE,
        IS_SOLVED:layoutRef.value.form.IS_SOLVED,
         CATALOG_CODE:props.currentOpObj.CID,
        END_DATE:layoutRef.value.form.END_DATE,
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })

    }
    const bradeArr = ref([
      {name:'数据服务监控'},
      {name:'数据服务状态监控'},
    ])
    return {
      bradeArr,
      layoutRef,
      getTableList,
      dataServiceStateWatchDetailFilterForm,
      dataServiceStateWatchDetailTabTableHeader,
      isDialogShow,
      openModel,
      getStatus,
      getResloveState,
      currentDialogOpObj,changeDialogOperation,dialogOperationType,
      changeD
    }
  },
  props:{
    currentOpObj:{

    }
  }
}
</script>

<style scoped lang="scss">

</style>
