<template>
  <div class="dashboard-editor-container" style="border:1px solid #000">

    <!-- <div class="iIndex">
    </div>     -->
    <!-- 搜索工作栏 -->
    <el-form :model="querySection" ref="querySection" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="开始时间" prop="startDate1">
        <el-date-picker v-model="querySection.startDate1" style="width: 240px" value-format="yyyy-MM-dd" type="date"/>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate1">
        <el-date-picker v-model="querySection.endDate1" style="width: 240px" value-format="yyyy-MM-dd" type="date"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            用户使用量
          </div>
          <count-to :start-val="0" :end-val='cntTotal' :duration="1000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="bell-green" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            挂号
          </div>
          <count-to :start-val="0" :end-val='cntgegisteredCount1' :duration="1000"  class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="bell-red" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            退号
          </div>
          <count-to :start-val="0" :end-val='cntungegisteredCount1' :duration="1000"  class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            结算
          </div>
          <count-to :start-val="0" :end-val='cntoutpatientPaymentCount1' :duration="1000"  class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="print" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            报告查询
          </div>
          <count-to :start-val="0" :end-val='cntreportCount1' :duration="1000"  class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="paper" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            问卷
          </div>
          <count-to :start-val="0" :end-val='cntquestionnaireCount1' :duration="1000"  class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>    
    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <div class="chart-wrapper">
          <bar-chart :chart1-data="barChartData" />
        </div>
    </el-row> 
    
  </div>
</template>

<script>
// import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import CountTo from 'vue-count-to'

import { getUseCountToDate, getUseCountTo, getUseCountToSection} from "@/api/system/useCount";

const lineChartData = {
  newVisitis: {
    weekdata: ['aa', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    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]
  }
}

export default {
  name: 'Index',
  components: {
    // PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    CountTo
  },
  data() {
    return {
      // 显示搜索条件
      cntTotal: null,
      cntgegisteredCount1: null,
      cntungegisteredCount1: null,
      cntoutpatientPaymentCount1: null,
      cntreportCount1: null,
      cnthospitalizationCount1: null,
      cntquestionnaireCount1: null,
      showSearch: true,
      date7: [],
      list: [],
      listSection: [],
      querySection: {
        startDate1: null,
        endDate1: null
      },
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null,
        startTime: [],
        endTime: []
      },
      lineChartDataRsp: {
        newVisitis: {
          weekdata: [],
          expectedData: [],
          actualData: []
        }
      },     
      barChartDataRsp: {
          newVisitis: {
            weekdata: [],         
            guahaodata: [],
            tuihaodata: [],
            jiedata: [],
            chaxundata: [],            
            wenjuandata: []        
        }
      },   

      lineChartData: lineChartData.newVisitis,
      barChartData: lineChartData.newVisitis
    }
  },
  created() {
    const end = new Date();//获取当前的日期
    // end.setTime(end.getTime() - 3600 * 1000 * 24 );
    // end.setTime(end.getTime());
    //计算，将当期日期-1天
    //此时得到的是中国标准时间，格式不是yyyy-MM-dd，需要用dateFormat这个函数转换下
    this.querySection.startDate1=this.dateFormat(end);
    this.querySection.endDate1=this.dateFormat(end);

    this.getList();   
    this.getCountToList();
    this.getCountToSection();
  },  
  methods: {
    dateFormat(dateData) {
        var date = new Date(dateData)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        const time = y + '-' + m + '-' + d;
        return time;
    },
    getCountToSection() {
      let that = this;
      // 执行查询
      getUseCountToSection(that.querySection).then(response => {
        that.list = response.data;
        that.cntgegisteredCount1 = that.list[0][0];
        that.cntungegisteredCount1 = that.list[0][1];
        that.cntoutpatientPaymentCount1 = that.list[0][2];
        that.cntreportCount1 = that.list[0][3];
        that.cnthospitalizationCount1 = that.list[0][4];
        that.cntquestionnaireCount1 = that.list[0][5];
        that.cntTotal = that.cntgegisteredCount1 + that.cntungegisteredCount1 + that.cntoutpatientPaymentCount1 + 
         that.cntreportCount1 + that.cnthospitalizationCount1 + that.cntquestionnaireCount1;
        
      });      
    },
    getCountToList() {
      let that = this;
      // 执行查询
      getUseCountTo(that.queryParams).then(response => {
        that.list = response.data;
        that.cntgegisteredCount1 = that.list[0][6];
        that.cntungegisteredCount1 = that.list[1][6];
        that.cntoutpatientPaymentCount1 = that.list[2][6];
        that.cntreportCount1 = that.list[3][6];
        that.cnthospitalizationCount1 = that.list[4][6];
        that.cntquestionnaireCount1 = that.list[5][6];
        that.cntTotal = that.cntgegisteredCount1 + that.cntungegisteredCount1 + that.cntoutpatientPaymentCount1 + 
         that.cntreportCount1 + that.cnthospitalizationCount1 + that.cntquestionnaireCount1;

         that.lineChartDataRsp.newVisitis.expectedData = that.list[0];
        that.lineChartDataRsp.newVisitis.actualData =that.list[1];
        that.lineChartData = that.lineChartDataRsp.newVisitis;         

        that.barChartDataRsp.newVisitis.guahaodata = that.list[0];
        that.barChartDataRsp.newVisitis.tuihaodata = that.list[1];
        that.barChartDataRsp.newVisitis.jiedata = that.list[2];
        that.barChartDataRsp.newVisitis.chaxundata = that.list[3];
        that.barChartDataRsp.newVisitis.wenjuandata = that.list[5];

        that.barChartData = that.barChartDataRsp.newVisitis;         
        
      });
    },    
    getList() {
      let that = this;
      // 执行查询
      getUseCountToDate(that.queryParams).then(response => {
        that.date7 = response.data;
        that.lineChartDataRsp.newVisitis.weekdata = that.date7;
        that.barChartDataRsp.newVisitis.weekdata = that.date7;
        // that.lineChartDataRsp.newVisitis.expectedData =  [100, 120, 161, 134, 105, 160, 165];
        // that.lineChartDataRsp.newVisitis.actualData = [120, 82, 91, 154, 162, 140, 145];
        // that.lineChartData = that.lineChartDataRsp.newVisitis;
        
      });
    },    
    /** 搜索按钮操作 */
    handleQuery() {
      this.getCountToSection();
    },

    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type]
    // }
  }
}
</script>

<!-- <style lang="scss" scoped>
@import "~@/assets/styles/common.scss";

.iIndex {
  margin: 0;
  padding: 0 0 0;
  height: 800px;
  width: 100%;
  // border: 1px solid red;
  background-image: url('../assets/images/indexbg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-szie:100% 100%;
  background-position: center;
}

</style> -->


<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

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

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 20px 0 0 20px;
      padding: 10px;
      transition: all 0.38s ease-out;
      border-radius: 6px;

    }

    .card-panel-icon {
      float: left;
      font-size: 40px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 5px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 13px;
        margin-bottom: 15px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
