<template>
 <div class="h100 data-handle-data">
   <div class="content">
     <div class="my-blue-title">待办事项</div>
     <div class="echarts tool">
        <div class="tool-c">
          <div class="t">工具申请待审核</div>
          <div class="line"></div>
          <div class="num">{{toolCheckBum}}</div>
        </div>
     </div>
   </div>
   <div class="content">
     <div class="my-blue-title">事项统计</div>
     <div class="echarts" ref="eventStaRef"></div>
   </div>
   <div class="content">
     <div class="my-blue-title">用户登录统计</div>
     <div class="echarts" ref="userLoginRef"></div>
   </div>
   <div class="content">
     <div class="my-blue-title">数据库监控统计</div>
     <div class="echarts" ref="dataWatchRef"></div>
   </div>
 </div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {
  getDataHandleDataBaseWatchEchartsD,
  getDataHandleHomeEventStaEchartsD,
  getDataHandleUserLoginEchartsD, getToolServiceToCheck
} from "@/service/data-handle/data-handle-home/data-handle-home";
import {setDataDatabaseEcharts, setDataHandleHomeEventStaEcharts, setDataUserLoginStaEcharts} from "@/echarts/option";

export default {
  name: "DataHandleMain",
  setup() {
    let toolCheckBum = ref(0)

    function setEventEcharts(){
      getDataHandleHomeEventStaEchartsD().then(res => {
        var row = res.msg[0].Rows;

        var Originaldata = [
          { value: row[0].COUNT, name: '待发布服务' },
          { value: row[1].COUNT, name: '目录待发布' },
        ]
        setDataHandleHomeEventStaEcharts(eventStaRef.value,Originaldata)
        // var row = result[0].Rows;
        //
        // var Originaldata=[
        //   { value: row[0].COUNT, name: '待发布服务' },
        //   { value: row[1].COUNT, name: '目录待发布' },
        // ]
      })
      getDataHandleUserLoginEchartsD().then(res => {
        let arrN = res.msg[0].Rows.map(i => {
          let obj = {}
          Object.keys(i).forEach(it => {
            obj[it.replace('NUMS','')] = i[it]
          })

          return obj
        })
        let data1O = arrN[0]
        let data2O = arrN[1]
        let data1 = []
        let data2 = []
        for (let key of Object.keys(data1O).sort((pre,cur) => {return pre-cur} )) {
          data1.push(data1O[key])
        }
        for (let key of Object.keys(data2O).sort((pre,cur) => {return pre-cur} )) {
          data2.push(data2O[key])
        }
        console.log(data1,'dada2')
        var colors = ['#5793f3', '#d14a61', '#675bba'];

        setDataUserLoginStaEcharts(userLoginRef.value,colors,data1,data2)
      })
      getDataHandleDataBaseWatchEchartsD().then(res => {
        let row = res.msg[0].Rows;
        let date = [];
        var count1 = [];
        var count2 = [];
        for (let i = 0; i < row.length; i++) {
          date.push(row[i].JC_DATE);
          count1.push(row[i].COUNT1);
          count2.push(row[i].COUNT2);
        }
        setDataDatabaseEcharts(dataWatchRef.value,date,count1,count2)
      })
    }
    onBeforeMount(() => {
      setEventEcharts()
      getToolServiceToCheck().then(res => {
        toolCheckBum.value = res.msg[0].Rows[0].NUM
      })
    })
    const eventStaRef = ref(null)
    const userLoginRef = ref(null)
    const dataWatchRef = ref(null)

    return {
      eventStaRef,
      setEventEcharts,
      userLoginRef,
      dataWatchRef,toolCheckBum

    }
  }
}
</script>

<style scoped lang="scss">
.data-handle-data{
  background: transparent !important;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-between;
  .content{
    display: flex;
    flex-direction: column;
    height: calc(50% - 5px);
    .echarts{
      &.tool{
        .tool-c{
          .line{
            width: 50px;
            height: 1px;
            background-color: #36639c;
            margin: 5% 34.5%;
          }
          text-align: center;
          .num{
            font-size: 26px;
            margin: 7px;
            color: #fff;
            font-weight: 700;
          }
          .t{
            color: #fff;
            font-weight: 500;
            font-size: 15px;
            font-family: '微软雅黑';
          }
          background-color: #6693CC;
          width: 33.3%;
          height: 100px;
          border-radius: 4px;
          border: 1.2px solid #37649C;
          padding-top: 10px;
        }
        display: flex;
        justify-content: center;
        align-items: center;
      }



      flex: 1;
    }
    box-shadow: 0 0 10px 1px #e9e9e9;
    background-color: #fff;
    width: calc(50% - 5px);
  }
}
</style>
