<template>
  <div class="full">

    <!--  交通元素数据  -->
<!--    <div style="position:absolute;width: 40%;height: 10%;top: 10%;right: 30%;color: white;">-->
<!--      <div class="full center">-->
<!--        <dv-border-box-7-->
<!--          class="click"-->
<!--          :color="['#42c3b6', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)"-->
<!--          v-for="(item,index) of carList" :key="item"-->
<!--                         style="width: 100px;height: 100px;margin: 10px;"-->
<!--        >-->
<!--          <div class="full center" style="flex-direction: column">-->
<!--            <div style="width: 50px;height: 50px;" :style="{-->
<!--              background: 'url(/icon/car'+index+'.png) no-repeat center/contain'-->
<!--            }"></div>-->
<!--            <div style="width: 100%;height: 50px;" class="center">{{item.name}}</div>-->
<!--          </div>-->
<!--        </dv-border-box-7>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 数据面板 交通流量   -->
    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 10%;top: 10%;left: 10px">
      <div  class="center full" style="flex-direction: column">
        <div  style="width: 90%;height: 30%;color: white;line-height: 40px">今日人员通行统计</div>
        <div class="center" style="width: 70%;height: 60%;color: #47fcd2;font-size: 30px;font-style: italic;">
          <CountIn :startVal='0' :endVal=1200 :speed=6 :decimals="0" :isReverse=false></CountIn>
        </div>
      </div>
    </dv-border-box-8>

    <div class="center" style="position:absolute;top: 25%;width: 23%;height: 30%;left: 10px;flex-direction: column">
      <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">
        <div class="full center" style="flex-direction: column">
          <div style="width: 90%;height: 20%;justify-content: left" class="title center">人员结构</div>
          <div style="width: 100%;height: 80%" id="type"></div>
        </div>
      </dv-border-box-8>
    </div>

    <div style="position:absolute;width: 20%;height: 25%;top: 60%;left: 10px;background: linear-gradient(to right, rgba(0,0,0,0.7),rgba(0,0,0,0.2));">
      <div class="full center" style="flex-direction: column">
        <dv-scroll-board :config="dataConfigA" style="width: 98%;height: 95%" />
      </div>
    </div>

    <div style="position:absolute;width: 20%;height: 40%;top: 10%;right: 10px;background: linear-gradient(to right, rgba(0,0,0,0.7),rgba(0,0,0,0.2));">
      <div id="accept" style="width: 100%;height: 50%"></div>
      <div id="source" style="width: 100%;height: 50%"></div>
    </div>


    <dv-border-box-12 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 40%;top: 55%;right: 10px;color: white;">
      <div style="width: 90%;color: white;margin: 20px;" class="left">人脸抓拍</div>
      <div class="center" >
        <div style="width: 95%;height: 450px">
          <div @click="videoShow" class="center click" v-for="(item,index) of pictures" :key="item" style="width: 50%;height: 50%;float: left">
            <div style="width: 100%;height: 100%;" :style="{
              background: 'url(/trafic/'+item.img+') no-repeat center/cover'
            }">
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script>
import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
import CountIn from "../count-in/count-in";

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('')
}
export default {
  components: {CountIn},
  mounted() {
     this.initCharts();
     this.onload();
    },
  data(){
    return{
      tendency: {},
      accept: {},
      source: {},
      type: {},
      pictures: [
        {img: '0.jpg'},
        {img: '1.jpg'},
        {img: '2.jpg'},
        {img: '3.jpg'},
      ],
      dataConfigA: {
        rowNum: 10,
        header: ['姓名','身份证','电话','时间'],
        headerBGC: '#ab9d3a',
        waitTime:1000,
        data: [
          ['张**', '4409142138138431', '135****1745','2021-5-14'],
          ['李**', '4409142138138431', '135****2245','2021-5-14'],
          ['王**', '4409142138138431', '135****9128','2021-5-14'],
          ['卢**', '4409142138138431', '135****3248','2021-5-14'],
          ['赵**', '4409142138138431', '135****7848','2021-5-14'],
          ['崔**', '4409142138138431', '215****4518','2021-5-14'],
          ['窦**', '4409142138138431', '135****9548','2021-5-14'],
          ['李**', '4409142138138431', '135****9468','2021-5-14'],
          ['黄**', '4409142138138312', '135****9321','2021-5-14'],
          ['严**', '4409123181387431', '135****5254','2021-5-14'],
          ['林**', '4413212578138431', '135****7248','2021-5-14'],
          ['张**', '4409132188138413', '134****6848','2021-5-14'],
        ],
        oddRowBGC: 'rgba(103,97,41,0.7)',
        evenRowBGC: 'rgba(110,86,4,0.7)',
      },
      config: {
        data: [
          {
            name: '内部人员',
            value: 55
          },
          {
            name: '外部人员',
            value: 120
          },
          {
            name: '测温异常',
            value: 78
          }
        ]
      },
    }
  },
  methods: {
    setOption(){
      this.accept.setOption({
        legend: {
          data: ['同比', '环比'],
          bottom: 0,
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 13,
            fill: '#62efc4'
          }
        },
        title: {
          text: '购物分析',
          offset :[-120, -55],
          style: {
            fill: '#5fe9c8',
            fontSize: 14,
            textAlign: 'center',
            textBaseline: 'top'
          }
        },
        radar: {
          polygon: true,
          axisLabel: {
            style: {
              fill: "#70eeec"
            }
          },
          indicator: [
            { name: '家具', max: 300 },
            { name: '生活用品', max: 300 },
            { name: '水果', max: 300 },
            { name: '蔬菜', max: 300 },
            { name: '其他', max: 300 },
          ]
        },
        series: [
          {
            name: '同比',
            type: 'radar',
            data: [111, 256, 178,150,120,10],
            label: {
              show: true,
              style: {
                fill: '#dddddd'
              }
            },
            animationCurve: 'easeOutBounce'
          },
          {
            name: '环比',
            type: 'radar',
            data: [222, 245, 220],
            label: {
              show: true
            },
            animationCurve: 'easeOutBounce'
          }
        ]
      });
      this.type.setOption({
        // title: {
        //   // text: '人员组成',
        //   style: {
        //     fill: '#5fe9c8',
        //     fontSize: 17,
        //     fontWeight: 'bold',
        //     textAlign: 'center',
        //     textBaseline: 'bottom'
        //   }
        // },
        series: [
          {
            type: 'pie',
            data: [
              { name: '硕士', value: 0.5 },
              { name: '博士', value: 0.3 },
              { name: '本科', value: 0.17 },
              { name: '专科', value: 0.03 },
            ],
            insideLabel: {
              show: true
            },
            outsideLabel: {
              style: {
                fontSize: 17,
                fontWeight: 'bold',
                textAlign: 'center',
                textBaseline: 'bottom'
              }
            }
          }
        ]
      });
      this.source.setOption({
        title: {
          text: '人员进出记录',
          style: {
            fill: '#5fe9c8',
          }
        },
        legend: {
          data: [
            {
              name: '受理量',
              color: '#aeeff0'
            },
            {
              name: '办理量',
              color: '#f1829f'
            }
          ]
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            style: {
              fill: '#ffffff',
              fontSize: 10,
              rotate: 0
            }
          }
        },
        yAxis: [
          {
            name: '人员进出',
            data: 'value',
            nameTextStyle: {
              fill: '#ffffff',
              fontSize: 10
            },
            axisLabel: {
              style: {
                fill: '#ffffff',
                fontSize: 10,
                rotate: 0
              }
            }
          },
          {
            name: '社区团购销售额',
            data: 'value',
            position: 'right',
            max: 2000,
            nameTextStyle: {
              fill: '#ffffff',
              fontSize: 10
            },
            axisLabel: {
              style: {
                fill: '#ffffff',
                fontSize: 10,
                rotate: 0
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '人流量',
            data: [1000, 1200, 900, 1500, 900, 1200, 1000],
            type: 'line',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
            },
            lineStyle: {
              stroke: 'rgba(251, 114, 147, 1)',
              lineDash: [3, 3]
            },
            linePoint: {
              style: {
                stroke: 'rgba(251, 114, 147, 1)'
              }
            },
            yAxisIndex: 1
          },
          {
            name: '销售额',
            data: [1500, 1700, 1400, 2000, 1400, 1700, 1500],
            type: 'bar',
            gradient: {
              color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
            },
            barStyle: {
              stroke: 'rgba(103, 224, 227, 1)'
            }
          }
        ]
      });
    },
    initCharts(){
      this.newCharts("source","source");
      this.newCharts("accept","accept");
      this.newCharts("type","type");
    },
    videoShow(){
      this.$emit("videoShow",{});
    },
    newCharts(id,propertyName){
      const container = document.getElementById(id)
      let myChart = new Charts(container);
      this[propertyName] = myChart;
    },
    onload(){
      changeDefaultConfig('color',['rgb(208,200,21)','#747373','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
      this.setOption();
    },
  }
}
</script>

<style scoped>
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .full{
    width: 100%;
    height: 100%;
  }
  .closeButton{
    background:rgba(84,36,17,0.5) ;
  }
  .closeButton:hover{
    background:rgba(84,36,17,0.8) ;
  }
  .click:hover{
    cursor: pointer;
    transform: translate(2px,2px);
  }
</style>
