<template>
  <view style="margin-top: 220rpx;">
    <scroll-view scroll-y="true" class="scroll-Y">
      <uni-row>
        <uni-col v-for="(data,index) in top_data" :key="index" :xs="24" :sm="12" :md="6">
          <uni-card :style="{height:'100px',backgroundColor:data.background_color}">
            <uni-row style="margin-top: 12.5px;">
              <uni-col :span="8">
                <view class="top_back">
                  <uni-icons :type="data.icon" size="20" color="#fff" id="top_back_icon"></uni-icons>
                </view>
              </uni-col>
              <uni-col :span="16">
                <text class="title">{{data.title}}</text>
                <br>
                <text class="adress_num">{{data.num}}</text>
              </uni-col>
            </uni-row>
          </uni-card>
        </uni-col>
        <uni-col :xs="24" :sm="12" :md="6"></uni-col>
      </uni-row>
      <!-- 设备信息 -->
      <uni-row>
        <uni-col :xs="24" :sm="12">
          <uni-card title="设备注册" style="height: 350px;">
            <qiun-data-charts type="column" :chartData="chartData1" />
          </uni-card>
        </uni-col>
        <uni-col :xs="24" :sm="12">
          <uni-card title="秘钥申请" style="height: 350px;">
            <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
          </uni-card>
        </uni-col>
      </uni-row>
      <uni-card title="秘钥状态">
        <uni-table border stripe emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th align="center" width="30">序号</uni-th>
            <uni-th align="center">秘钥</uni-th>
            <uni-th align="left">生成日期</uni-th>
            <uni-th align="left">状态</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="index of 15" :key="index">
            <uni-td>{{index}}</uni-td>
            <uni-td>DDD{{index}}5941YHD5</uni-td>
            <uni-td>2022-9-{{index+1}}</uni-td>
            <uni-td>
              <button size="mini" type="primary">已使用</button>
            </uni-td>
          </uni-tr>
        </uni-table>
      </uni-card>
    </scroll-view>
    <UniMenu />
  </view>
</template>
<script>
  import UniMenu from '@/components/uni-menu/uni-menu.vue'
  export default {
    data() {
      return {
        top_data: [{
            background_color: "#ff4c55",
            icon: "tune",
            title: "设备数量",
            num: 184841
          },
          {
            background_color: "#6eadff",
            icon: "flag-filled",
            title: "在线设备",
            num: 25413
          },
          {
            background_color: "#46ff71",
            icon: "flag",
            title: "离线设备",
            num: 14782
          },
          {
            background_color: "#ffb457",
            icon: "person",
            title: "用户总数",
            num: 9523
          }
        ],
        chartData1: {},
        opts: {},
        chartData: {}
      }
    },
    components: {
      UniMenu
    },
    onReady() {
      this.setUcharts1(),
        this.setUcharts2()
    },
    methods: {
      setUcharts1() {
        this.chartData1 = {
          categories: ["9-13", "9-14", "9-15", "9-16", "9-17", "9-18"],
          series: [{
            name: "目标值",
            data: [35, 36, 31, 33, 13, 34]
          }]
        }
      },
      setUcharts2() {
        this.opts = {
            color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
              "#ea7ccc"
            ],
            padding: [15, 10, 0, 15],
            legend: {},
            xAxis: {
              disableGrid: true
            },
            yAxis: {
              gridType: "dash",
              dashLength: 2
            },
            extra: {
              line: {
                type: "curve",
                width: 2
              }
            },
          },
          this.chartData = {
            categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
            series: [{
                name: "用户A",
                data: [35, 8, 25, 37, 4, 20]
              },
              {
                name: "用户B",
                data: [70, 40, 65, 100, 44, 68]
              },
              {
                name: "用户C",
                data: [100, 80, 95, 150, 112, 132]
              }
            ]
          }
      }
    }
  }
</script>
<style>
  .top_back {
    height: 50px;
    width: 50px;
    background-color: rgba(255, 255, 255, 0.5);
    margin-top: 0px;
    border-radius: 100%;
    align-items: center;
  }

  #top_back_icon {
    position: absolute;
    padding: 15px 15px 15px 15px;
  }

  .title {
    color: white;
    font-size: 15px;
    margin-top: 50px;
  }

  .adress_num {
    color: white;
    font-size: 30px;
  }

  .scroll-Y {
    /* height: calc(100vh - 68px); */
    height: calc(100vh - 20px);
  }
</style>