<template>
  <box
    title="人流量监测"
    @fullscreen="onFullscreen"
  >
    <div
      class="l-flex__fill l-flex--col c-device-dashboard-traffic"
      :class="{ fullscreen }"
    >
      <div class="l-flex__none l-flex--row c-device-dashboard-traffic__header">
        <div class="l-flex--row types">
          <div
            class="type u-pointer"
            :class="{ active: active === 'hour' }"
            @click="timeType('hour')"
          >
            1小时
          </div>
          <div
            class="type u-pointer"
            :class="{ active: active === 'day' }"
            @click="timeType('day')"
          >
            1天
          </div>
        </div>
        <el-date-picker
          v-model="dateValue"
          class="c-device-dashboard-traffic__picker"
          type="datetime"
          placeholder="选择日期时间"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          size="mini"
          @change="onDateTimeChange"
        />
      </div>
      <div
        ref="canvas"
        class="l-flex__fill"
      />
    </div>
  </box>
</template>

<script>
import Box from './Box'
import * as echarts from 'echarts'

export default {
  components: {
    Box
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      fullscreen: false,
      dateValue: new Date(),
      active: 'hour',
      echartsData: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted () {
    this.timeType(this.active)
  },
  methods: {
    onFullscreen (fullscreen) {
      this.fullscreen = fullscreen
      if (this.$echarts) {
        this.$nextTick(() => {
          this.$echarts.resize()
        })
      }
    },
    getXData () {
      if (this.active === 'day') {
        return Array.from({ length: 24 }, (item, index) => `${index + 1}:00`)
      }
      const hour = new Date(this.dateValue).getHours()
      return [`${hour}:15`, `${hour}:30`, `${hour}:45`, `${hour + 1}:00`]
    },
    getYData () {
      if (this.active === 'day') {
        return Array.from({ length: 24 }, () => Math.floor(Math.random() * 100))
      }
      return Array.from({ length: 4 }, () => Math.floor(Math.random() * 100))
    },
    initEchart () {
      const data = this.echartsData.filter(item => item.insidePeopleNum !== 0)
      const xdata = this.getXData(data)
      const ydata = this.getYData(data)
      if (!this.$echarts) {
        this.$echarts = echarts.init(this.$refs.canvas)
      }
      this.$echarts.setOption({
        title: {
          text: '',
          textStyle: {
            color: '#fff',
            fontWeight: 'bold'
          }
        },
        xAxis: {
          type: 'category',
          data: xdata,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#4779BC'
            }
          },
          axisLabel: {
            color: '#A9CEFF'
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitLine: {
            lineStyle: {
              color: '#4779BC',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#4779BC'
            }
          },
          axisLabel: {
            color: '#A9CEFF'
          }
        },
        grid: {
          left: '30',
          right: '20',
          top: '40',
          bottom: '20'
        },
        series: [
          {
            data: ydata,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'transparent'
            },
            itemStyle: {
              color: '#2956F0'
            },
            select: {
              itemStyle: {
                color: 'rgb(0, 234, 255)'
              }
            }
          }
        ],
        emphasis: {
          itemStyle: {
            color: '#FFCA1A', // hover时改变柱子颜色
            // shadowColor: 'rgba(102,102,102,0.50)',
            // shadowOffsetX: 0,
            // shadowOffsetY: 2,
            // shadowBlur: 6,
            borderWidth: 1,
            borderColor: '#FF2222',
            borderType: 'solid'
          }
        },
        tooltip: {
          formatter: '时间：{b}<br />人流量：{c}'
        }
      })
    },
    timeType (type) {
      this.active = type
      this.initEchart()
    },
    onDateTimeChange () {
      if (new Date(this.dateValue).getTime() > Date.now()) {
        this.dateValue = new Date()
      }
      this.initEchart()
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-dashboard-traffic {
  &__header {
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .types {
    border-radius: 4px;
    overflow: hidden;
  }

  .type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 28px;
    font-size: 12px;
    background-color: #2e3756;

    &.active {
      background-color: #2956f0;
    }
  }

  &__picker {
    width: 160px;

    ::v-deep .el-input__inner {
      color: #fff;
      border-color: #353c59;
      background-color: transparent;

      &:hover {
        border-color: #fff;
      }
    }

    ::v-deep .el-input__prefix {
      transition: none;
    }

    ::v-deep .el-input__icon {
      transition: none;
    }
  }

  &.fullscreen {
    .type {
      width: 110px;
      height: 40px;
      font-size: 20px;
    }

    .c-device-dashboard-traffic__header {
      justify-content: flex-end;
    }

    .c-device-dashboard-traffic__picker {
      font-size: 20px;
      width: 280px;
      margin-left: $spacing;

      ::v-deep .el-input__inner {
        height: 40px;
        padding-left: 40px;
        line-height: 40px;
      }

      ::v-deep .el-input__icon {
        line-height: 40px;
      }
    }
  }
}
</style>
