<template>
  <div class="app-container">
    <div class="statistic-container">
      <el-row class="chart-tools">
        <el-col :span="19">
          <span class="chart-tool-button" @click="changeDate('today')">今日</span>
          <span class="chart-tool-button" @click="changeDate('yesterday')">昨日</span>
          <span class="chart-tool-button" @click="changeDate('sevendays')">最近7日</span>
          <span class="chart-tool-button" @click="changeDate('lastmonth')">最近30日</span>
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="mini"/>
        </el-col>
        <el-col :span="5" >
          <el-select v-model="listQuery.doorCode" size="mini" placeholder="请选择门禁" @change="fetchData">
            <el-option
              v-for="item in doorList"
              :key="item.id"
              :label="item.doorName"
              :value="item.doorCode"/>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="chart-body" >
          <div class="chart-body-title">各部门进出记录统计</div>
          <el-row type="flex" align="center">
            <el-col :span="24">
              <div class="chart-body-select">
                <el-form ref="selectForm1" :inline="true" class="form-container">
                  <el-form-item class="selectForm-container-item" label="监控指标 ：">
                    <el-select v-model="inoutType" class="select-input" size="small" @change="fetchDeptStatistic">
                      <el-option
                        v-for="item in chooseIndex"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
          <pie-chart :list="chartList"/>
        </el-col>
        <el-col :span="12" class="chart-body">
          <div class="chart-body-title">人员进出记录统计</div>
          <div class="chart-body-select">
            <el-form ref="selectForm" :inline="true" class="form-container">
              <el-row>
                <el-col :span="12">
                  <el-form-item class="selectForm-container-item" label="部门:">
                    <dept-select v-model="deptId" :need-top="false" :dept-show="true" size="small" filterable placeholder="请选择部门" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="selectForm-container-item" label="员工:">
                    <el-select v-model="personId" :disabled="!allowChoose" placeholder="全部" size="small" filterable @change="fetchPersonStatistic">
                      <el-option
                        v-for="item in personList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <bar-chart :data="chartData"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getStatisticByDept, getStatisticByPerson } from '@/api/statistics'
import { getDoorSourceList } from '@/api/query'
import { getDayTime } from '@/utils/dateutils'
import { getPersonListAll } from '@/api/person'
import DeptSelect from '@/components/DeptSelect/index'
import PieChart from './pieChart'
import BarChart from './barChart'

export default {
  name: 'AlarmStaticsByDept',
  components: { BarChart, PieChart, DeptSelect },
  data() {
    return {
      chartSettings: {
        labelMap: {
          'inoutType': '进出类型',
          'num': '进出数量'
        },
        itemStyle: {
          'barCategoryGap': 5
        },
        demension: 'inoutType',
        barWidth: 15
      },
      extend: {
        series: {
          label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          barMaxWidth: 35
        }
      },
      listQuery: {
        doorCode: '', // 门禁编号
        beginTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      inoutType: '', // 进出类型
      personId: '', // 员工id
      deptId: '', // 部门
      chooseIndex: [
        {
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '进门'
        }, {
          value: '0',
          label: '出门'
        }
      ],
      timeRange: [],
      doorList: [],
      personList: [],
      showDeviceType: true,
      chartData: {
        columns: ['inoutType', 'num'],
        rows: []
      },
      chartList: [],
      allowChoose: false,
      dataEmpty: false,
      chooseshow: false,
      chartshow: false,
      loading1: false,
      loading2: false
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        this.listQuery.beginTime = val[0]
        this.listQuery.endTime = val[1]
        this.fetchData() // 时间改变刷新数据
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    },
    deptId(val) {
      if (val !== '') {
        this.personId = ''
        this.getPersonList(val)
        this.fetchPersonStatistic()
      } else {
        this.fetchPersonStatistic()
        this.allowChoose = false
      }
    }
  },
  mounted() {
    this.getDoorSource()
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    // 获取统计数据
    fetchData() {
      console.log('this.fetchData')
      this.fetchDeptStatistic()
      this.fetchPersonStatistic()
    },
    // 获取部门统计结果
    fetchDeptStatistic() {
      debugger
      const query1 = {
        doorCode: this.listQuery.doorCode, // 门禁编号
        beginTime: this.listQuery.beginTime, // 开始时间
        endTime: this.listQuery.endTime, // 结束时间
        inoutType: this.inoutType // 进出类型
      }
      this.loading1 = true
      getStatisticByDept(query1).then(response => {
        var data = response.data
        for (var i = 0; i < data.length; i++) {
          data[i].num = parseInt(data[i].num)
        }
        this.chartList = data
        this.loading1 = false
      })
    },
    fetchPersonStatistic() {
      const query2 = {
        doorCode: this.listQuery.doorCode, // 门禁编号
        beginTime: this.listQuery.beginTime, // 开始时间
        endTime: this.listQuery.endTime, // 结束时间
        personId: this.listQuery.personId
      }
      query2.deptId = this.deptId
      query2.personId = this.personId
      // 获取个人统计结果
      this.loading2 = true
      getStatisticByPerson(query2).then(response => {
        this.chartData.rows = response.data
        this.loading2 = false
      })
    },
    // 获取门禁列表
    getDoorSource() {
      getDoorSourceList().then(response => {
        const doorAll = { doorCode: '', doorName: '全部' }
        this.doorList = [doorAll, ...response.data]
      })
    },
    getPersonList(deptid) {
      const params = {
        personType: '1',
        deptid: deptid
      }
      getPersonListAll(params).then(response => {
        const personAll = { id: '', name: '全部' }
        this.personList = [personAll, ...response.data]
        this.allowChoose = true
      })
    },
    changeDate(date) {
      let beginTime, endTime
      if (date === 'today') {
        beginTime = getDayTime(new Date().getTime())
        endTime = new Date()
        this.timeRange = [beginTime, endTime]
      } else if (date === 'yesterday') {
        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
        endTime = getDayTime(new Date().getTime())
      } else if (date === 'sevendays') {
        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
        endTime = new Date()
      } else if (date === 'lastmonth') {
        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
        endTime = new Date()
      }
      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
      // this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    padding: 5px 10px 10px 10px;
    .statistic-container{
      padding:0px;
      border: 1px solid #d3dce6;
      .chart-tools{
        background-color: #f2f2f2;
        line-height: 35px;
        padding-left: 10px;
        padding-right: 5px;
        .chart-tool-text{
          padding: 5px;
          line-height: 16px;
          margin-top:5px;
          font-size:13px;
        }
        .chart-tool-button{
          padding: 5px;
          line-height: 16px;
          margin-top:5px;
          font-size:13px;
        }
        .chart-tool-button:hover{
          background-color: #8cc5ff;
          cursor: pointer;
          color:white
        }
        .chart-tool-button:active{
          background-color: #8cc5ff;
          color:white
        }
        .editor--datetimerange.el-input__inner{
          width: 300px;
        }
      }
      .chart-title{
        margin: auto;
        text-align: center;
        margin-top: 15px;
      }
    }
    .chart-body{
      padding:15px;
      .chart-body-title {
        font-size:22px;
        text-align: center;
        background-color: white;
        padding-top: 20px;
      }
      .chart-body-select{
        margin-top:20px;
        text-align: center;
        .select-label{
          font-size: 15px;
          color: #606266;
          line-height: 40px;
          font-weight:500;
          padding: 0 6px 0 0
        }
      }
    }
  }
</style>
