<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20">
      <el-col :span="18">
        <panel-group :chart-data="hidCount" />
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:15px;">
          <line-qingdan-chart :chart-data="qingdanChartData" />
        </el-row>

        <el-row :gutter="15">
          <el-col :xs="24" :sm="24" :lg="10">
            <div class="chart-wrapper">
              <pie-yhlx-chart :chart-data="hiddenTypeMap" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="14">
            <div class="chart-wrapper">
              <div class="chart-search" style="position: absolute;right: 20px">
                <el-date-picker v-model="jinduData" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" class="filter-item" />
                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getJindu">
                  搜索
                </el-button>
              </div>

              <bar-jindu-chart :chart-data="jinduChartData" style="margin-top: 35px" />
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <work-group />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import TodoList from './components/TodoList'
import WorkGroup from './components/WorkGroup'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
import { requestFN } from '@/utils/request'
import BarJinduChart from './components/BarJinduChart'
import LineQingdanChart from './components/LineQingdanChart'
import PieYhlxChart from './components/PieYhlxChart'

export default {
  name: 'DashboardAdmin',
  components: {
    PieYhlxChart,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    TodoList,
    WorkGroup,
    BarJinduChart,
    LineQingdanChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      hidCount: {
        dzg: 0,
        ycq: 0,
        yys: 0
      },
      riskCount: {

        unitcount: 0,
        idcount: 0,
        cnzfx: 0
      },
      jinduList: [],
      jinduData: ['0', '0'],
      jinduChartData: {
        x_Data: [],
        y_Data: [],
        sum_Data: []
      },
      qingdanChartData: {
        valName: [],
        xcqd: [],
        jcqd: [],
        zhqd: []
      },
      hiddenTypeMap: {
        data: []
      }
    }
  },
  created() {
    var date = new Date()
    var nowYear = date.getFullYear()
    this.jinduData[0] = nowYear + '-01-01'
    this.jinduData[1] = nowYear + '-12-31'
    this.getJindu()
    this.getQingdan()
    this.getWorkNumber()
    this.getRiskNumber()
    this.getHiddenTypeCount()/*
    this.getNoticeList()
    this.getNoticeCorpList()*/
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    // 工作进度
    getJindu() {
      this.loading = true
      requestFN(
        '/checkrecord/goIndexCount',
        {
          STARTTIME: this.jinduData[0],
          ENDTIME: this.jinduData[1],
          tm: new Date().getTime()
        }
      ).then((data) => {
        if (data.result == 'success') {
          for (var i = 0; i < data.varList.length; i++) {
            this.$set(this.jinduChartData.x_Data, i, data.varList[i].percentage)
            this.$set(this.jinduChartData.y_Data, i, data.varList[i].name)
            this.$set(this.jinduChartData.sum_Data, i, data.varList[i].denominator)
          }
        } else if (data.result == 'exception') {
          // showException('系统首页', '数据异常')// 显示异常
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getQingdan() {
      this.loading = true
      requestFN(
        '/listmanager/goIndexCount',
        {
          tm: new Date().getTime()
        }
      ).then((data) => {
        if (data.result == 'success') {
          for (let i = 0; i < data.xAxisData.length; i++) {
            this.qingdanChartData.xcqd[i] = 0
            this.qingdanChartData.jcqd[i] = 0
            this.qingdanChartData.zhqd[i] = 0
          }
          this.$set(this.qingdanChartData, 'valName', data.xAxisData)
          for (let i = 0; i < data.xAxisData.length; i++) {
            for (let j = 0; j < data.valList.length; j++) {
              var type = data.valList[j].screenType
              var count = data.valList[j].count
              if (data.xAxisData[i] === data.valList[j].months) {
                if (type == 'riskChecklistType0001') {
                  this.$set(this.qingdanChartData.xcqd, i, count)
                } else if (type == 'riskChecklistType0002') {
                  this.$set(this.qingdanChartData.jcqd, i, count)
                } else {
                  this.$set(this.qingdanChartData.zhqd, i, count)
                }
              }
            }
          }
        } else if (data.result == 'exception') {
          // showException('系统首页', '数据异常')// 显示异常
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getWorkNumber() {
      this.loading = true
      requestFN(
        '/hidden/getCountByUserId',
        {
          tm: new Date().getTime()
        }
      ).then((data) => {
        if (data.result == 'success') {
          this.hidCount = Object.assign(data.hidCount, this.riskCount)
        } else if (data.result == 'exception') {
          // showException('系统首页', '数据异常')// 显示异常
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getRiskNumber() {
      this.loading = true

      requestFN(
        '/riskpoint/statistic',
        {
          tm: new Date().getTime()
        }
      ).then((data) => {
        if (data.result == 'success') {
          this.hidCount = Object.assign(this.hidCount, data.riskCount)
        } else if (data.result == 'exception') {
        // showException('系统首页', '数据异常')// 显示异常
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 工作进度
    getHiddenTypeCount() {
      this.loading = true
      requestFN(
        '/hidden/getCountByHiddenType',
        {
          tm: new Date().getTime()
        }
      ).then((data) => {
        if (data.result == 'success') {
          this.hiddenTypeMap.data = data.hiddenTypeCount
        } else if (data.result == 'exception') {
          // showException('系统首页', '数据异常')// 显示异常
        }
      }).catch((e) => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  // border: 1px solid red;
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100%;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 0px;
    .chart-search {
      text-align: right;
      align-items: center;
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
