<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" >
        <chart-card >
          <div class="img-layout">
            <img src="../../assets/device_red.png" />
            <span style="position:absolute;margin-left: 58px;margin-top:32px;font-size: 16px;font-weight: 900">故障设备：</span>
            <span id="oneValue" style="position:absolute;left: 233px;top:66px;font-size: 29px;font-weight: 900"></span>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card >
          <div class="img-layout">
            <img src="../../assets/device_orange.png" />
            <span style="position:absolute;margin-left: 58px;margin-top:32px;font-size: 16px;font-weight: 900">检修设备：</span>
            <span id="twoValue" style="position:absolute;left: 233px;top:66px;font-size: 29px;font-weight: 900"></span>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card >
          <div class="img-layout">
            <img src="../../assets/device_green.png"/>
            <span style="position:absolute;margin-left: 58px;margin-top:32px;font-size: 16px;font-weight: 900">运行设备：</span>
            <span id="threeValue" style="position:absolute;left: 233px;top:66px;font-size: 29px;font-weight: 900"></span>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card >
          <div class="img-layout">
            <img src="../../assets/device_blue.png"/>
            <span style="position:absolute;margin-left: 58px;margin-top:32px;font-size: 16px;font-weight: 900">停机设备：</span>
            <span id="fourValue" style="position:absolute;left: 233px;top:66px;font-size: 29px;font-weight: 900"></span>
          </div>
        </chart-card>
      </a-col>
    </a-row>

<!--    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">-->
<!--      <a-col :span="12">-->
<!--        <div >-->
<!--          <div id="myChart1" :style="{height: '350px'}" style="display: inline-block;width: 100%;margin-bottom:24px;top:30px"></div>-->
<!--        </div>-->
<!--      </a-col>-->
<!--      <a-col :span="12">-->
<!--        <div >-->
<!--          <div id="myChart2" :style="{height: '350px'}" style="display: inline-block;width: 100%;margin-bottom:24px;top:30px"></div>-->
<!--        </div>-->
<!--      </a-col>-->
<!--    </a-card>-->

    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周设备运行统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="4">
              <head-info title="工装设备" :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="4">
              <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="4">
              <head-info title="检修设备" :content="loginfo.totalVisitCount"></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="4">
              <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>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'

  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import {postAction ,getAction} from "../../api/manage";


  import '@/assets/less/TableExpand.less'

  const rankList = []
  for (let i = 0; i < 7; i++) {
    rankList.push({
      name: '白鹭岛 ' + (i+1) + ' 号店',
      total: 1234.56 - i * 100
    })
  }
  const barData = []
  for (let i = 0; i < 12; i += 1) {
    barData.push({
      x: `${i + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200
    })
  }
    export default {
      name: "IndexText",
      components: {
        ATooltip,
        ACol,
        ChartCard,
        MiniArea,
        MiniBar,
        MiniProgress,
        RankList,
        Bar,
        Trend,
        LineChartMultid,
        HeadInfo
      },
      data() {
        return {
          loading: true,
          center: null,
          rankList,
          barData,
          loginfo:{},
          visitFields:['ip','visit'],
          visitInfo:[],
          url: {
            postAllCheckNumber:"/bigScreen/postAllCheckNumber?base=1%23梅陇",
            postAllPassRate:"/bigScreen/postAllPassRate?base=1%23梅陇",
            getDeviceStatus:"/bigScreen/getDeviceStatus"
            // getDeviceStatus:"/device/buDevice/querySensorStatus"
          },
          indicator: <a-icon type="loading" style="font-size: 24px" spin />
        }
      },
      created() {
        // setTimeout(() => {
          this.getAllCheckNumber();
          // this.getAllPassRate();
          this.getDeviceStatus();
          this.loading = !this.loading
        // }, 5000);
        this.initLogInfo();
      },
      methods: {
        getDeviceStatus(){
          getAction(this.url.getDeviceStatus,"",'get').then((res) => {
          document.getElementById("oneValue").innerText=res.result[0]+"台";
          document.getElementById("twoValue").innerText=res.result[1]+"台";
          document.getElementById("threeValue").innerText=res.result[2]+"台";
          document.getElementById("fourValue").innerText=res.result[3]+"台";
        });
        },
        getAllCheckNumber() {
          let param = [];
          postAction(this.url.postAllCheckNumber, param, 'post').then((res) => {
            this.initChart2("myChart2", res);
          });
        },
        getAllPassRate() {
          let param = [];
          postAction(this.url.postAllPassRate, param, 'post').then((res) => {
            this.initChart1("myChart1", res);
          });
        },
        initChart1(id, data) {
          let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
          if (!myChart) {
            myChart = this.$echarts.init(document.getElementById(id));
          }
          let xData = [];
          let yData = [];
          for (let a = 0; a < data.length; a++) {
            xData.push(data[a]["合格"]);
            yData.push(data[a]["不合格"]);
          }
          const myOptions = {
            tooltip: {
              trigger: 'axis',
            },
            backgroundColor: '#fff',
            title: {
              text: '全年设备故障率统计',
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            },
            yAxis: {
              type: 'value',
            },
            legend: {
              data: ['正常', '故障']
            },
            series: [
              {
                name: '正常',
                data: xData,
                type: 'bar',
              },
              {
                name: '故障',
                data: yData,
                type: 'bar',
              },
            ]
          };
          myChart.setOption(myOptions, true)
        },
        initChart2(id, data) {
          let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
          if (!myChart) {
            myChart = this.$echarts.init(document.getElementById(id));
          }
          let yData = [];
          for (let a = 0; a < data.length; a++) {
            yData.push(data[a]["value"]);
          }
          const myOptions = {
            tooltip: {
              trigger: 'axis',
            },
            backgroundColor: '#fff',
            title: {
              text: '全年使用率统计',
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            },
            yAxis: {
              type: 'value',
            },
            legend: {
              data: ['合格', '不合格']
            },
            series: [
              {
                data: yData,
                type: 'line',
                smooth: 0.6,
                symbol: 'none',
              },
            ]
          };
          myChart.setOption(myOptions, true)
        },
        initLogInfo() {
          getLoginfo(null).then((res) => {

            if (res.success) {
              Object.keys(res.result).forEach(key => {
                res.result[key] = res.result[key] + ""
              })
              // debugger
              this.loginfo = res.result;
              console.log(this.loginfo);
            }
          })
          getVisitInfo().then(res => {
            if (res.success) {
              this.visitInfo = res.result;
            }
          })
        },
      }
    }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .title-text {
    border-left: 20px;
  }
  .img-layout {
    padding-bottom: 6px;
    padding-left: 20px;
  }
  .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>