<template>
 <div class="data-sync-handle-charts">
   <div class="p-t30 ">
     <diy-el-form :span="4" v-model:model-form="forms" :forms="syncHandleChartHomeFilterForm()">
       <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="unitWatchHomeFilterForm2">
     <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" >{{useRootStore().allSelectUnit.find(i => i.value === item.PROVIDERUNIT)?.label}}</span>
         </el-badge>
       </div>

     </template>
   </diy-el-form>
   <div class="my-line"></div>
   <div class="main-data">
     <div class="data-info">
       <span>目录列表</span>
       <span>共{{totalCount}}个数据资源</span>
     </div>
     <div   class="data-content scroll scroll-bar" v-infinite-scroll="load">
       <el-row :gutter="20" class="my-row">
         <el-col v-for="item in allDataList" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
           <div class="my-content">
             <div class="title">{{item.CATALOG_NAME}}</div>
             <div class="imgs">
               <el-tooltip placement="top">
                 <template #content>归集</template>
                 <span  v-if="item.GJ_STATES === '0'"><img src="../../../../../../assets/imgs/data-watch/gj-gray.png" alt=""></span>
                 <span  v-else-if="item.GJ_STATES === '1'"><img src="../../../../../../assets/imgs/data-watch/gj-green.png" alt=""></span>
                 <span  v-else><img src="../../../../../../assets/imgs/data-watch/gj-red.png" alt=""></span>
               </el-tooltip>

               <el-tooltip placement="top">
                 <template #content v-if="item.KETTLE_STATES === '0'"> kettle</template>
                 <template #content v-else>最新kettle运行时间{{formatDateFun(+new Date(item.KETTLE_RUN_TIME),'yyyy-MM-dd')}}<br/><div class="time">{{formatDateFun(+new Date(item.KETTLE_RUN_TIME),'hh:mm:dd')}}</div></template>
                 <span  v-if="item.KETTLE_STATES === '0'"><img src="../../../../../../assets/imgs/data-watch/kettle-gray.png" alt=""></span>
                 <span  v-else-if="item.KETTLE_STATES === '1'"><img src="../../../../../../assets/imgs/data-watch/kettle-green.png" alt=""></span>
                 <span  v-else><img src="../../../../../../assets/imgs/data-watch/kettle-red.png" alt=""></span>
               </el-tooltip>
               <el-tooltip placement="top">
                 <template #content v-if="item.ZJ_STATES === '0'">质检</template>
                 <template #content v-else>最新质检时间{{formatDateFun(+new Date(item.ZJ_RUN_TIME),'yyyy-MM-dd')}}<br/><div class="time">{{formatDateFun(+new Date(item.ZJ_RUN_TIME),'hh:mm:dd')}}</div></template>
                 <span  v-if="item.ZJ_STATES === '0'"><img src="../../../../../../assets/imgs/data-watch/quality-gray.png" alt=""></span>
                 <span v-else-if="item.ZJ_STATES === '1'"><img src="../../../../../../assets/imgs/data-watch/quality-green.png" alt=""></span>
                 <span v-else><img src="../../../../../../assets/imgs/data-watch/quality-red.png" alt=""></span>
               </el-tooltip>

               <el-tooltip placement="top">
                 <template #content v-if="item.QX_STATES === '0'">清洗</template>
                 <template #content v-else>最新清洗时间{{formatDateFun(+new Date(item.QX_RUN_TIME),'yyyy-MM-dd')}}<br/><div class="time">{{formatDateFun(+new Date(item.QX_RUN_TIME),'hh:mm:dd')}}</div></template>
                 <span  v-if="item.QX_STATES === '0'"><img src="../../../../../../assets/imgs/data-watch/clear-gray.png" alt=""></span>
                 <span  v-else-if="item.QX_STATES === '1'"><img src="../../../../../../assets/imgs/data-watch/clear-green.png" alt=""></span>
                 <span  v-else><img src="../../../../../../assets/imgs/data-watch/clear-red.png" alt=""></span>
               </el-tooltip>

               <el-tooltip placement="top">
                 <template #content v-if="item.BQ_STATES === '0'">标签</template>
                 <template #content v-else>标签最新时间{{formatDateFun(+new Date(item.BQ_RUN_TIME),'yyyy-MM-dd')}}<br/><div class="time">{{formatDateFun(+new Date(item.BQ_RUN_TIME),'hh:mm:dd')}}</div></template>
                 <span  v-if="item.BQ_STATES === '0'"><img src="../../../../../../assets/imgs/data-watch/label-gray.png" alt=""></span>
                 <span  v-else-if="item.BQ_STATES === '1'"><img src="../../../../../../assets/imgs/data-watch/label-green.png" alt=""></span>
                 <span  v-else><img src="../../../../../../assets/imgs/data-watch/label-red.png" alt=""></span>
               </el-tooltip>

               <el-tooltip placement="top">
                 <template #content v-if="item.AQ_STATES === '0'">安全</template>
                 <template #content v-else>安全最新时间{{formatDateFun(+new Date(item.AQ_RUN_TIME),'yyyy-MM-dd')}}<br/><div class="time">{{formatDateFun(+new Date(item.AQ_RUN_TIME),'hh:mm:dd')}}</div></template>

                 <span  v-if="item.AQ_STATES === '0'"><img src="../../../../../../assets/imgs/data-watch/safe-gray.png" alt=""></span>
                 <span  v-else-if="item.AQ_STATES === '1'"><img src="../../../../../../assets/imgs/data-watch/safe-green.png" alt=""></span>
                 <span  v-else><img src="../../../../../../assets/imgs/data-watch/safe-red.png" alt=""></span>
               </el-tooltip>

             </div>
           </div>
         </el-col>

       </el-row>
     </div>
   </div>
 </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {nextTick, onBeforeMount, ref, watch} from "vue";
import {syncHandleChartHomeFilterForm, unitWatchHomeFilterForm2} from "@/data/all-forms";
import {Search} from "@element-plus/icons-vue";
import {
  getDataSyncHandleWatchHomeAllUnit,
  getDataSyncHandleWatchHomeTableData
} from "@/service/data-sync-hanlle-watch/data-sync-handle-watch";
import {useRootStore} from "../../../../../../stores/useStore";
import {formatDateFun} from "../../../../../../unit/time";


export default {
  name: "DataSyncHandleCharts",
  computed: {
    Search() {
      return Search
    }
  },
  components: {DiyElForm},
  setup() {
    function load(){
      pageIndex.value+=1
      if (!(totalCount.value > 0) || (allDataList.value.length<totalCount.value)){
        getData()
        console.log('数据')
      }

    }
    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
         forms.value.unitCode =dwForm.value.label
      allDataList.value = []
      pageIndex.value = 1
        getData()
    }
    function getAllBread () {
      getDataSyncHandleWatchHomeAllUnit().then(res => {
        let data = res.msg[0].Rows[0]
        console.log('ss',data)
        delete  data.RN
        allAllBread.value = Object.keys(data).map(i=>{
          return {
            num:data[i],
            PROVIDERUNIT:i
          }
        })
        allAllBread.value.sort((pre,cur) => {
          return cur.num - pre.num
        })
      })
      // allAllBread.value = []
      // let arr = [...allDataList.value]
      // for (let i = 0; i < arr.length; i+1) {
      //
      //
      //   let allFilterUnit = allDataList.value.filter(it => it.PROVIDERUNIT === allDataList.value[i].PROVIDERUNIT)
      //
      //   allAllBread.value.push({
      //     ...allFilterUnit[0],
      //     num:allFilterUnit.filter(i => {
      //       let arr  =['GJ_STATES','KETTLE_STATES','ZJ_STATES','QX_STATES','BQ_STATES','AQ_STATES']
      //       return arr.find(key => !(i[key] === '0' || i[key] === '1'))
      //     }).length
      //   })
      //   // arr = arr.filter(ir => ir.PROVIDERUNIT !== allFilterUnit[0].PROVIDERUNIT)
      //   i += allFilterUnit.length
      // }
      // allAllBread.value.sort((pre,cur) => {
      //   return cur.num - pre.num
      // })
    }
    function getData(){

      getDataSyncHandleWatchHomeTableData({
        unitCode: dwForm.value.label || forms.value.unitCode || '',
        dateStates:forms.value.dateStates || '-1',
        catalogName:forms.value.catalogName || '',
        pageIndex:pageIndex.value,
        pageSize:20
      }).then(res =>{

        allDataList.value = allDataList.value.concat(res.msg[0].Rows)
        allDataList.value.sort((pre,cur) => {
          return pre.PROVIDERUNIT.localeCompare(cur.PROVIDERUNIT)
        })
        totalCount.value =  res.msg[0].TotalRowCount

      })
    }

    onBeforeMount(() => {
            getAllBread()
    })
    const dwForm = ref({})
    const forms = ref({})
    return {
      forms,
      dwForm,
      syncHandleChartHomeFilterForm,
      unitWatchHomeFilterForm2,
      changeUnit,
      allAllBread,
      allDataList,
      formatDateFun, useRootStore,
      search,
      totalCount,
      load

    }
  }
}
</script>

<style scoped lang="scss">
.data-sync-handle-charts{
  padding-left: 20px;
  padding-right: 20px;
}
.data-content{
  .my-row{
    align-content: flex-start;
  }
  height: 400px;
  overflow: auto;
  img{
    width: 25px;
    margin-left: 6px;
  }
  .title{
    display: inline-block;
    width: 55%;
    height: 100%;
    font-size: 17px;
    font-weight: 700;
    line-height: 45px;
    margin-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .el-row{
    width: 100%;
  }
  .my-content{
    margin-bottom: 12px;
    padding-left: 1%;
    box-sizing: inherit;
    display: flex;
    align-items: center;
    height: 45px;
    border: 1px solid var(--el-border-color);
  }
  display: flex;
  flex-wrap: wrap;
}

.data-info{
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.time{
  text-align: center;
}
:deep{
  .el-form-item__content{
    line-height: 23px;
  }
  .el-badge{

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