<template>
  <section class="AppDVDemo">
    <ai-list>
      <ai-title slot="title" title="数据大屏草稿板" isShowBottomBorder/>
      <template #content>
        <div class="showPanel">
          <ai-dv-wrapper :views="views" v-model="active">
            <AiMonitor style="width: 600px; height: 300px" type="slw"
                       src="http://120.221.159.18:8000/flv/MT_20220319123025570adZa68OLywxi?encrypt=m3sbNQg2wFw9HdZn&timestamp=1647992818471"></AiMonitor>
          </ai-dv-wrapper>
        </div>
      </template>
    </ai-list>
  </section>
</template>

<script>

import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
import ops from './components/AiEchart/template/pie/pieChart2'
import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
import AiMonitor from "./components/AiMonitor/AiMonitor";

export default {
  name: "AppDVDemo",
  label: "数据大屏草稿板",
  components: {AiMonitor, AiDvPanel, AiDvWrapper, AiDvDisplay, AiDvSummary},
  data() {
    return {
      ops,
      active: '',
      views: [
        {label: '标准大屏', id: '0'},
        {label: '当前大屏', id: '1'},
        {label: '平安乡村', id: '2'},
        {label: '人口数据', id: '3'},
        {label: '人口数据', id: '4'},
        {label: '人口数据', id: '5'},
        {label: '宅基地', id: '6'},
      ],
      list: [
        {name: '阿斯达', v1: 23, v2: 33},
        {name: '水电费', v1: 12, v2: 34},
        {name: '凡哥', v1: 67, v2: 25},
        {name: '党费', v1: 98, v2: 85},
        {name: '阿萨德', v1: 98, v2: 85},
        {name: '电饭锅', v1: 98, v2: 85},
        {name: '户籍科', v1: 98, v2: 85},
      ],
      data: [
        {
          "key": "阿斯达",
          "value": '22',
          "percentage": 33,
          text: '同比上月'
        },
        {
          "key": "阿斯达",
          "value": '22',
          "percentage": -33,
          text: '同比上月'
        }
      ],
      value: [
        {
          "key": "宅基地 ",
          "value": 1252292,
          "value1": 12592,
          "value2": 12592,
          "value3": 12592,
          "value4": 12592
        },
        {
          "key": "人数",
          "value": 12592,
          "value1": 12592,
          "value2": 12592,
          "value3": 12592,
          "value4": 12592
        },
        {
          "key": "户数 ",
          "value": 12592,
          "value1": 12592,
          "value2": 12592,
          "value3": 12592,
          "value4": 12592
        },
        {
          "key": "村社区",
          "value": 12592,
          "value1": 12592,
          "value2": 12592,
          "value3": 12592,
          "value4": 12592
        }
      ],
      markers: []
    }
  },
  methods: {
    getMarkers() {
      this.$request.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
        params: {current: 1, size: 1000000},
        withoutToken: true
      }).then(res => {
        if (res?.data) {
          this.markers = res.data.map(e => ({
            ...e,
            icon: "https://cdn.cunwuyun.cn/dvcp/dv/monitor.svg",
            label: e.communityName
          }))
        }
      })
    }
  },
  created() {
    // this.getMarkers()
    setTimeout(() => {
      this.list = this.list.map(e => ({name: e.name, '电费': e.v1, '水费': e.v2 * 2}))
    }, 2000)
  },
  mounted() {
    this.$initWxOpenData()
  }
}
</script>

<style lang="scss" scoped>
@import "./lib/animation";

.AppDVDemo {
  height: 100%;

  .showPanel {
    height: 600px;
  }

  .AiDvPanel {
    width: 600px;
  }
}
</style>
