<template>
  <div class="home">
    <div class="home-left">
      <!-- 地图 -->
      <wgsl></wgsl>
    </div>
    <div class="home-right">
      <!-- 陕西省接入概括 -->
      <div class="jrgk">
        <div class="header">
          陕西省接入概括
        </div>
        <!-- 陕西省接入概括列表 -->
        <el-row>
          <el-col :span="9">
            <ul class="gkList">
              <li>总数量</li>
              <div class="zsl">
                <dv-digital-flop :config="config" style="height:70px;" />
                <p></p>
              </div>
            </ul>
          </el-col>
          <el-col :span="5">
            <ul class="jrl">
              <div class="jrlList jrllsit1">
                <p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
              </div>
              <li>日均接入量</li>
            </ul>
          </el-col>
          <el-col :span="5">
            <ul class="jrl">
              <div class="jrlList jrllsit2">
                <p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
              </div>
              <li>日均接入量</li>
            </ul>
          </el-col>
          <el-col :span="5">
            <ul class="jrl">
              <div class="jrlList jrllsit3">
                <p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
              </div>
              <li>总体质量</li>
            </ul>
          </el-col>
        </el-row>
      </div>
      <div class="jrdgk">
        <!-- 接入点概括 -->
        <div class="sxsjr">
          <div class="header">
            接入点概括
          </div>
          <el-row>
            <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
              <ul>
                <li>{{ item.value }}</li>
                <li>{{ item.title }}</li>
              </ul>
            </el-col>
          </el-row>
        </div>
        <!-- 上报情况概括 -->
        <div class="sbqkgk">
          <div class="header">
            上报情况概括
          </div>
          <ul class="sbqkgs">
            <div class="sbqkgsList">
              <p v-for="(item, index) in sbqkgsList" :key="index"
                :class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
                {{ item }}
              </p>
            </div>
            <li>总数量</li>
          </ul>
        </div>
      </div>
      <!-- 底部表格 -->
      <div class="jrxxlb tableClass">
        <div class="title">陕西省平台接入情况</div>
        <!-- 陕西省平台接入情况table -->
        <lb-table ref="table" :pagination="false" :heightNum="440" :column="tableData.columns" :data="tableData.data">
        </lb-table>
      </div>
    </div>
  </div>
</template>

<script>
// 上报首页
import wgsl from "./wgsl.vue";
// 引入表格数据
import data from "./data"
export default {
  name: "home",
  components: { wgsl },
  data () {
    function formatter (number) {
      const numbers = number.toString().split('').reverse()
      const segs = []
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
      return segs.join(',').split('').reverse().join('')
    }
    return {
      // 总数量
      config: {
        number: [6523],
        content: '{nt}',
        formatter,
        style: {
          fontSize: 50,
          fontWeight: 700,
          fill: '#FFDD00'
        }
      },
      // 日均接入量
      jjrl: 300,
      // 当天接入量
      dtjrl: 100,
      // 总体质量
      ztzl: 3620,
      // 上报情况概括
      sbqkgs: 6296,
      // 接入点概括
      jrdList: [
        {
          value: 60,
          title: '总数量'
        },
        {
          value: 60,
          title: '正常'
        },
        {
          value: 60,
          title: '异常'
        }
      ],
      // 表格数据
      tableData: {
        // 表格头部信息
        columns: data.columns(),
        // 表格列表数据
        data: [{
          xzqmc: '咸阳市',
          xzqzs: 100,
          jrl: 300,
          jscgl: 20,
          dk: 60,
          wjrqx: '长安县',
          jrdf: 50
        },
        {
          xzqmc: '咸阳市',
          xzqzs: 100,
          jrl: 300,
          jscgl: 20,
          dk: 60,
          wjrqx: '长安县',
          jrdf: 50
        }]
      }
    }
  },
  computed: {
    jrlList: function () {
      return this.jjrl.toString().split('')
    },
    dtjrlList: function () {
      return this.dtjrl.toString().split('')
    },
    ztzlList: function () {
      return this.ztzl.toString().split('')
    },
    sbqkgsList: function () {
      const numbers = this.sbqkgs.toString().split('').reverse()
      const segs = []
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
      return segs.join(',').split('').reverse().join('')
    }
  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
@import "./home.scss";
</style>