<template>
  <div>

    <div class="statistics">
      <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
        <div style="background: #fff;border-radius: 4px;height: 40px;line-height: 40px;border: 1px solid #DCDFE6;padding: 0 30px;">
          <i class="el-icon-message-solid" style="padding-right: 10px;"></i>
          <a href="./江苏省宿迁环境监测中心图书管理规定.docx" target="_blank">江苏省宿迁环境监测中心图书管理规定</a>
        </div>
        <el-date-picker v-model="dateMonth" value-format="yyyy-MM" type="month" @change="loadData" placeholder="选择月份">
        </el-date-picker>
      </div>
      <panel-group :totaldata="list" />
    </div>

    <div class="chart">
      <div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">
        <el-date-picker v-model="year" value-format="yyyy" type="year" @change="getCharData" placeholder="选择年份">
        </el-date-picker>
      </div>
      <div>

        <el-row :gutter="16">
          <el-col :xs="12" :sm="12" :lg="8">
            <div class="chart-wrapper">
              <div class="chart-title">
                <router-link to="/toolbox/exception">人员借阅统计</router-link>
              </div>
              <ybar-chart :chartData="lineUserData" />
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="8">
            <div class="chart-wrapper">
              <div class="chart-title">
                <router-link to="/toolbox/exception">部门借阅统计</router-link>
              </div>
              <ybar-chart :chartData="lineDeptData" />
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="8">
            <div class="chart-wrapper">
              <div class="chart-title">
                <router-link to="/toolbox/exception">书籍借阅统计</router-link>
              </div>
              <ybar-chart :chartData="lineBookData" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>


    <el-row :gutter="16" style="margin-top: 20px;">

      <el-col :xs="12" :sm="12" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">类目借阅统计</router-link>
          </div>
          <ybar-chart :chartData="lineTypeData" />
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="16">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">月度借阅趋势</router-link>
          </div>
          <line-chart :chartData="lineArr" />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import echarts from "echarts"
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart.vue'
  import YbarChart from './components/YbarChart.vue'
  import {
    getChartsData,
    getCounts
  } from "../../api/dashboard.js"

  export default {
    components: {
      PanelGroup,
      LineChart,
      YbarChart
    },
    data() {
      return {
        dateMonth: "",
        year: "",
        col: '',
        line: '',
        business_data: [],
        collect_data: [],
        list: {},
        customerArr: [],
        orderArr: [],
        chartData: {},
        lineTypeData: {
          xArr: [],
          yArr: []
        },
        lineUserData: {
          xArr: [],
          yArr: []
        },
        lineDeptData: {
          xArr: [],
          yArr: []
        },
        lineBookData: {
          xArr: [],
          yArr: []
        },
        lineArr: {
          xArr: [],
          legendArr: ["借阅次数"],
          series: [{
            name: '借阅次数',
            type: 'line',
            stack: 'Total',
            data: []
          }]
        }
      }
    },
    watch: {},
    methods: {
      async loadData() {
        await getCounts({
          date: this.dateMonth
        }).then((res) => {
          this.list = res;
        }).catch(error => {

        });

      },
      async getCharData() {

        await getChartsData({
          year: this.year
        }).then((res) => {

          var xArrMonth = [];
          var yArrData = [];
          for (var i = 1; i <= 12; i++) {
            xArrMonth.push(i + "月");
            let d = res.month.filter(function(item) {
              return item.month == i;
            })
            if (d.length > 0)
              yArrData.push(d[0].total);
            else
              yArrData.push(0);
          }
          this.lineArr.xArr = xArrMonth;

          this.lineArr.series[0].data = yArrData;


          let xTypeArr = [];
          let yTypeArr = [];


          for (var mod of res.type) {
            xTypeArr.push(mod.total)
            yTypeArr.push(mod.type.name)
          }
          this.lineTypeData = {
            xArr: xTypeArr,
            yArr: yTypeArr
          }



          xTypeArr = [];
          yTypeArr = [];


          for (var mod of res.person) {
            xTypeArr.push(mod.total)
            yTypeArr.push(mod.user?.name)
          }
          this.lineUserData = {
            xArr: xTypeArr,
            yArr: yTypeArr
          }




          xTypeArr = [];
          yTypeArr = [];


          for (var mod of res.book) {
            xTypeArr.push(mod.total)
            yTypeArr.push(mod.book?.name)
          }
          this.lineBookData = {
            xArr: xTypeArr,
            yArr: yTypeArr
          }


          xTypeArr = [];
          yTypeArr = [];


          for (var mod of res.department) {
            xTypeArr.push(mod.total)
            yTypeArr.push(mod.department?.name)
          }
          this.lineDeptData = {
            xArr: xTypeArr,
            yArr: yTypeArr
          }





        }).catch(error => {

        })
      }
    },
    created() {

      this.dateMonth = this.$moment().format("YYYY-MM");
      this.year = this.$moment().format("YYYY");
      this.loadData();
      this.getCharData();
    },
    mounted() {
      window.onresize = () => {
        this.col.resize()
        this.line.resize()
      }

    },
    destroyed() {
      window.onresize = null
    }
  }
</script>

<style lang="scss" scoped>
  .chart-wrapper {
    background: #fff;
    padding: 15px;
  }

  .statistics {
    display: flex;
    flex-direction: column;

    margin-top: 20px;

    &-title {

      padding-left: 6px;
    }

    &-content {
      text-align: center;
      font-size: 13px;

      &-top {

        &__num {
          font-weight: 600;
        }

        &__name {
          font-size: 10px;
          color: rgb(140, 140, 140);
        }
      }

      &-bottom {
        display: flex;
        justify-content: space-between;

        &-left {

          &__num {
            font-weight: 600;
          }

          &__name {
            font-size: 10px;
            color: rgb(140, 140, 140);
          }
        }

        &-right {

          &__num {
            font-weight: 600;
          }

          &__name {
            font-size: 10px;
            color: rgb(140, 140, 140);
          }
        }
      }
    }

    &>div {
      flex: 1;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .chart {
    display: flex;

    margin-top: 20px;
    flex-direction: column;

    .chartBox {
      display: flex;

      .chartItem {

        width: 49%;

        .chartItemTitle {
          font-size: 16px;
          margin-bottom: 20px;
        }

        #col-chart {
          background: #fff;
          border-radius: 10px;
          flex: 1;
          margin-right: 20px;
          padding: 20px;
          box-sizing: border-box;
          min-height: 400px;
          width: 100%;
        }

        #line-chart {
          background: #fff;
          border-radius: 10px;
          flex: 1;
          padding: 20px;
          box-sizing: border-box;
          min-height: 400px;
        }
      }
    }


  }
</style>
