<!--
 * @Description: example
 * @Author: 王晓颖
 * @Date: 2020-08-15 14:25:57
 -->
<!--suppress ALL -->
<template>
  <div class="container">
    <div class="example-row">
      <div class="example-block">
        <!--<menu-item>菜单标题</menu-item>-->
        <title1 :font="{color:'#0072ff',color2:'#00eaff',color3:'#01aaff'}" level="1">一级标题</title1>
        <title1 :font="{color:'#0072ff',color2:'#00eaff',color3:'#01aaff'}" level="2">二级标题</title1>
        <title1 :font="{color:'#0072ff',color2:'#00eaff',color3:'#01aaff'}" level="3">三级标题</title1>
        <title1 :font="{color:'#0072ff',color2:'#00eaff',color3:'#01aaff'}">三色居左渐变标题</title1>
        <title1 :font="{color:'#0072ff',color2:'#00eaff'}" :center="true">双色居中渐变标题</title1>
        <title1 :font="{color:'#ffffff'}" border="t1" :center="true">纯色标题带边框</title1>
        <!--<title-three>标题2</title-three>-->
        <title2>标题2</title2>
        <title3>标题3</title3>
      </div>
      <div class="example-block">
        <scroll-board :config="boardConfig"/>
      </div>
      <div class="example-block">
        <scroll-board :config="boardConfig2"/>
      </div>
      <div class="example-block" style="width:450px">
        <digital-flop :data="digitalFlopConfig.data">
          <h3 slot="title" style="color:white">数字翻牌器</h3>
          <!--<button slot="title" @click="changeData">点击更换数字</button>-->
        </digital-flop>
        <!--另一种翻牌器-->
        <dv-digital-flop :config="digitalFlopConfig2" style="width:200px;height:50px;" />

      </div>
    </div>
    <div class="example-row">
      <div class="example-block">
        <marquee :content="marqueeData" :delay="0.5" :speed="100">{{marqueeData}}</marquee>
        <marquee :content="marqueeListData" bgColor="rgba(211, 125, 066, 1)">
          <span v-for="(item, index) in marqueeListData" :key="index"> {{item}}</span>
        </marquee>
        <word-cloud id="word-cloud" title="词云" :data="wordCloudData" height="350px"/>
      </div>
      <div class="example-block">
        <progress-bar :data="progressConfig"></progress-bar>
        <progress-bar2 :data="progressConfig2"></progress-bar2>
        <!--<dv-percent-pond :config="progressConfig" style="width:300px;height:100px;" />-->
        <div style="width:100%;height: 230px">
          <simple-bar-chart
            id="simplebar1"
            :x-axis-data="simpleBarChartData.xAxisData"
            :series-data="simpleBarChartData.data"
          />
        </div>
      </div>
      <div class="example-block">
        <div style="width:100%;height: 230px">
          <colorful-bar-chart
            id="colorfulbar1"
            :x-axis-data="simpleBarChartData.xAxisData"
            :series-data="simpleBarChartData.data"
          />
        </div>
      </div>
      <div class="example-block"></div>
    </div>
  </div>

</template>

<script>
import Title1 from '../../components/text/title/Title1'
import Text2 from '../../components/text/Text2'
import ScrollBoard from '../../components/board/ScrollBoard'
import DigitalFlop from '../../components/text/digitalFlop/DigitalFlop'
import Title2 from "../../components/text/title/Title2";
import Title3 from "../../components/text/title/Title3";
import Marquee from "../../components/text/marquee/marquee";
import WordCloud from "../../components/text/wordCloud/wordCloud";
import ProgressBar from "@/components/progressBar/ProgressBar1";
import ProgressBar2 from "@/components/progressBar/ProgressBar2";
import SimpleBarChart from "../../components/barChart/simpleBarChart";
import ColorfulBarChart from "../../components/barChart/colorfulBarChart";
import {testApi,fetchProjectBuild} from '@/api/cityPlan'
export default {
  name: 'All',
  components: {
    ColorfulBarChart,
    SimpleBarChart,
    ProgressBar2, ProgressBar, WordCloud, Marquee, Title3, Title2, DigitalFlop, ScrollBoard, Text2, Title1},
  data () {
    return {
      boardConfig: {
        header: ['列1', '列2', '列3'],
        index: true,
        rowNum: 6,
        columnWidth: [50],
        align: ['center'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3']
        ]
      },
      boardConfig2: {
        header: ['名称', '数量'],
        rowNum: 7,
        hoverColor: true,
        headerBGC: 'transparent',
        oddRowBGC: '',
        evenRowBGC: '',
        headerColor: '#FFFFFF',
        rowColor: '#09f2ff',
        data: [
          ['中央景观走廊', '3'],
          ['城市长廊', '5'],
          ['圣塔公园', '7'],
          ['圣塔公园', '7'],
          ['圣塔公园', '7'],
          ['圣塔公园', '7'],
          ['城市公园', '18'],
          ['湖泊', '4'],
          ['河流', '3'],
          ['名胜古迹', '2']
        ]
      },
      digitalFlopConfig: {
        data: 23112
      },
      digitalFlopConfig2: {
        number: [123456],
        toFixed: 2,
        content: '{nt}个'
      },
      marqueeData:'我是跑马灯跑马灯跑马灯，跑马灯跑跑跑跑跑跑！！!！',
      marqueeListData:[
        '2020年8月17日 ',
        '庚子年六月廿八 ',
        '今天天气28~35摄氏度',
        '宜:搬家, 装修，开业，结婚呢，入宅，领证，开工',
        '忌：安床，安葬，修坟，破土，造床，词讼，分居'
      ],
      wordCloudData: [
        {name: "十九大精神", value: 15000},
        {name: "两学一做",value: 10081},
        {name: "中华民族",value: 9386},
        {name: "马克思主义", value: 7500},
        {name: "民族复兴", value: 7500},
        {name: "社会主义制度", value: 6500},
        {name: "国防白皮书", value: 6500},
        {name: "创新", value: 6000},
        {name: "民主革命", value: 4500},
        {name: "文化强国", value: 3800},
        {name: "国家主权", value: 3000},
        {name: "武装颠覆", value: 2500},
        {name: "领土完整", value: 2300}
      ],
      progressConfig:{
        title: '单进度条',
        num: 50,
        max: 100
      },
      progressConfig2:{
        title: '多进度条',
        num1: 50,
        num2: 100
      },
      parking_space: {
        id: 'parking_space_id',
        width: 400,
        height: 400,
        yAxisData: ['9-23', '9-23', '9-23', '9-23', '9-23', '9-23'],
        legend: ['总数量', '占用数', '空闲数'],
        seriesData: [
          {name: '空闲数', data: [45, 45, 45, 45, 45, 45], color: '#d5384d', zlevel: 10},
          {name: '占用数', data: [34, 34, 34, 34, 34, 34], color: '#ff9e00', zlevel: 5},
          {name: '总数量', data: [100, 80, 100, 90, 140, 100], color: '#0468f1', zlevel: 0}
        ]
      },
      simpleBarChartData: {
        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
        data:[320, 302, 301, 334, 390, 330, 320]
      }
    }
  },
  mounted () {
    this.changeData()
    this.test()
  },
  methods: {
    test(){
      // testApi().then(res=>{
      //   console.log(res)
      // })
      fetchProjectBuild().then(res=>{
        console.log(res)
      })
    },
    //自动数字变换
    changeData () {
      setInterval(() => {
        const data = +this.digitalFlopConfig.data + 1
        this.digitalFlopConfig.data = data

        const data2 = this.digitalFlopConfig2.number[0] +5
        this.digitalFlopConfig2={
          number: [data2],
          toFixed: 2,
          content: '{nt}个'
        }
      }, 1000)
      // const data = Math.floor(Math.random() * (9999999 - 100)) + 100
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .router-view{
    top:0px !important;
  }
  .container{
    top:0px !important;
    background: url("../../assets/images/background1.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-color: black;
    .example-row{
      width:100%;
      height:300px;
      display: flex;
      justify-content: space-between;
      .example-block{
        width:300px;
        height: 100%;
        /*height:100px;*/
        padding: 0.1rem;
      }
    }
  }

</style>