<template>
  <div id="centerBottomRight" class="page-header-index-wide">
    <div class="bg-color-black">
<!--        <div class="d-flex">-->
<!--          <span ><icon name="chart-area" class="text-icon"></icon>最近一周访问量统计</span>-->
<!--          <dv-decoration-6 style="width:100%;height:8px;" />-->
<!--        </div>-->
<!--      <dv-border-box-8>-->
<!--        <chart1/>-->
<!--      </dv-border-box-8>-->
      <a-row>
        <a-col :span="24">
          <div class="d-flex">
            <dv-decoration-6 style="width:100%;height:10px;" />
            <span class="fs-xl text mx-2"><icon name="chart-area" class="text-icon"></icon>设备故障数量统计</span>
<!--            <span ><icon name="chart-area" class="text-icon"></icon>最近一周访问量统计</span>-->
          </div>
<!--          <a-card :loading="loading" :bordered="false"  :style="{ marginTop: '24px' }">-->
<!--            <a-row>-->
<!--              <a-col :span="6">-->
<!--                <head-info title="今日IP" :content="loginfo.todayIp"></head-info>-->
<!--              </a-col>-->
<!--              <a-col :span="2">-->
<!--                <a-spin class='circle-cust'>-->
<!--                  <a-icon slot="indicator" type="environment" style="font-size: 24px"  />-->
<!--                </a-spin>-->
<!--              </a-col>-->
<!--              <a-col :span="6">-->
<!--                <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>-->
<!--              </a-col>-->
<!--              <a-col :span="2">-->
<!--                <a-spin class='circle-cust'>-->
<!--                  <a-icon slot="indicator" type="team" style="font-size: 24px"  />-->
<!--                </a-spin>-->
<!--              </a-col>-->
<!--              <a-col :span="6">-->
<!--                <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>-->
<!--              </a-col>-->
<!--              <a-col :span="2">-->
<!--                <a-spin class='circle-cust'>-->
<!--                  <a-icon slot="indicator" type="rise" style="font-size: 24px"  />-->
<!--                </a-spin>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--            <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>-->
          <bar class="statistic" title="" :dataSource="countSource" y="数量" :height="400"/>
<!--          </a-card>-->
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
// import chart1 from "@/components/echart/bottom/bottomRightChart/chart1";
import {getLoginfo, getVisitInfo} from "@api/api";
import LineChartMultid from '@/components/chart/LineChartMultid';
import HeadInfo from '@/components/tools/HeadInfo.vue';
import {getAction} from "@api/manage";
import Bar from '@/components/chart/Bar'
export default {
  components: {
    LineChartMultid,
    HeadInfo,
    Bar,
  },
  data() {
    return {
      loading: true,
      center: null,
      loginfo:{},
      visitFields:['ip','visit'],
      visitInfo:[],
      countSource: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      url: {
        getDeviceTypeCount: "/device/buDevice/getDeviceTypeCount",
      },
    }
  },
  // mounted() {
  //   // 初始化 ECharts 实例
  //   const myChart = this.$refs.myChart.echartsInstance;
  //
  //   // 监听柱子的点击事件
  //   myChart.on('click', function (params) {
  //     // params 包含了点击的柱子的信息，例如 dataIndex, name 等
  //     console.log(params);
  //     console.log("123456789")
  //     // 在这里处理点击事件
  //   });
  // },
  created() {
    // setTimeout(() => {
      // this.loading = !this.loading
    // }, 1000)
    this.initLogInfo();
  },
  methods: {
    // initLogInfo () {
    //   getLoginfo(null).then((res)=>{
    //     if(res.success){
    //       Object.keys(res.result).forEach(key=>{
    //         res.result[key] =res.result[key]+""
    //       })
    //       this.loginfo = res.result;
    //     }
    //   })
    //   getVisitInfo().then(res=>{
    //     if(res.success){
    //       this.visitInfo = res.result;
    //     }
    //   })
    // },

    initLogInfo() {
      let param = {};
      getAction(this.url.getDeviceTypeCount,param,'get').then((res) => {
        if (res.success) {
          this.countSource = [];
          this.getDataCountSource(res.result);
          } else{
          var that=this;
          that.$message.warning(res.message);
        }
      })
    },
    getDataCountSource(data){
      console.log("")
      for (let i = 0; i < data.length; i++) {
          this.countSource.push({
            x: `${data[i].name}`,
            y: data[i].count
          })
      }
    },

  }
};
</script>

<style lang="scss" class>
$box-height: 520px;
$box-width: 100%;
#centerBottomRight {
  //padding: 14px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 10px;
    border-radius: 5px;
  }
  .text {
    color: #111b21;
  }
  //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
.circle-cust{
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>