<template>
  <div class="h100">
    <common-layout
      :table-attrs="{
        'has-operation':true
      }"
      :form-attrs="{
      spanAttrs: {
        span:4
      }
      }"
      :get-table-list="getTableData"
      :table-header="dataServiceStateWatchHomeTabTableHeader"
      :filter-form="dataServiceStateWatchHomeFilterForm()"
      ref="layoutRef"
    >
      <template #FORWARD_MAIN="{data}">
        {{getServiceType(data.FORWARD_MAIN)}}
      </template>
      <template #STATE="{data}">
        <span :class="{'my-error':data.STATE==='2'}">{{getStatus(data.STATE)}}</span>

      </template>
      <template #DETAIL_SUM="{data}">
        <span :class="{'my-error':data.DETAIL_SUM > 0}">{{data.DETAIL_SUM}}</span>

      </template>
      <template #form-bottom>
        <div>
          <diy-el-form :span="24" v-model:model-form="dwForm" :forms="unitWatchHomeFilterForm2">
            <template #label>

              <div >
                <el-badge class="my-badge error" @click="changeUnit(item)" :class="{'active':dwForm.label === item.PROVIDERUNIT,'no-num':!(+item.ERRORSUM > 0)}" v-for="item in allBread" :value="item.ERRORSUM"  type="error">
                  <el-badge class="my-badge" :class="{'no-num':!(+item.TOTALSUM > 0)}"  :value="item.TOTALSUM"  type="primary">
                    <span class="my-badge-label" >{{item.NAME}}</span>
                  </el-badge>
                </el-badge>

              </div>

            </template>
          </diy-el-form>
          <div class="my-line"></div>
        </div>
      </template>
     <template #operation="{data}">
       <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
     </template>
    </common-layout>
  </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {onActivated, onBeforeMount, ref} from "vue";
import {dataServiceStateWatchHomeFilterForm, unitWatchHomeFilterForm2} from "@/data/all-forms";
import {dataServiceStateWatchHomeTabTableHeader} from "@/data/all-table-header";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {
  getDaraServiceSatWatchHomeTableData,
  getDataServiceStaWatchDetail
} from "@/service/data-service-watch/data-service-status-watch";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";

export default {
  name: "DataServiceStateWatchHome",
  components: {DiyElForm, CommonLayout},
  setup() {
    useActiveGetTableData(getTableData)
    const dwForm = ref({})
    const allBread = ref([])
    function getServiceType (field) {
      if (field == "0") {
        return "共享服务";
      } else if (field == "1") {
        return "转发服务";
      }
    }
    function changeUnit(data) {
      dwForm.value.label = dwForm.value.label === data.PROVIDERUNIT?'':data.PROVIDERUNIT


      getTableData()
    }
    onActivated(() => {
      getDataServiceStaWatchDetail().then(res => {
        allBread.value = res.msg[0].Rows
      })
    })
    function getStatus(field) {
      if (field == "1") {
        return "正常";
      } else if (field == "2") {
        return "异常";
      }
    }
    function getTableData() {
      getDaraServiceSatWatchHomeTableData({
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize,
        CATALOG_NAME:layoutRef.value.form.CATALOG_NAME,
        UNIT_CODE:dwForm.value.label || layoutRef.value.form.UNIT_CODE,
        START_DATE:layoutRef.value.form.START_DATE,
        END_DATE:layoutRef.value.form.END_DATE,
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })

    }
    const layoutRef = ref(null)
    return {
      layoutRef,
      getTableData,
      dataServiceStateWatchHomeFilterForm,
      dataServiceStateWatchHomeTabTableHeader,
      dwForm,
      unitWatchHomeFilterForm2,
      getServiceType,
      getStatus,
      allBread,
      changeUnit
    }
  }
}
</script>

<style scoped lang="scss">

.error{
  :deep{
    >.el-badge__content{
      right: 44px;
    }
  }
}
.my-badge{
  margin-bottom: 5px;
}
:deep{
  .my-badge-label{
    padding: 0;
    text-align: center;
    display: inline-block;
    width: 9em;
  }
  .el-form-item__content{
    line-height: 23px;
  }
  .el-badge{

    --el-badge-font-size: 12px;
    --el-badge-padding:3px;
    --el-badge-size: 14px;
  }
}
</style>
