<template>
  <div class="dashboard-editor-container">
    <!-- <div class="header">
      <p @click="day(1)" :class="[dayList == 1 ? 'heade_cod' : '']">天</p>
      <p>{{ '\xa0\xa0' }}|{{ '\xa0\xa0' }}</p>
      <p @click="day(2)" :class="[dayList == 2 ? 'heade_cod' : '']">周</p>
      <p>{{ '\xa0\xa0' }}|{{ '\xa0\xa0' }}</p>
      <p @click="day(3)" :class="[dayList == 3 ? 'heade_cod' : '']">月</p>
    </div> -->
    <el-row style="background-color: #fff; margin-bottom: 50px; margin-top: 30px; border-radius: 6px;">
      <el-col :xs="24" :sm="24">
        <el-row style="padding: 0 30px; border-radius: 6px;">
          <el-col :xs="12" :sm="6" style="display: flex;  height: 100%;">
            <div style="display: flex;">
              <div style=" text-align: center; " class="hedse_radt">
                <div class="hedse_radtone">
                  <p>总计送检次数</p>
                  <!-- <p>{{deviceIpOptions.jrsmrc}}</p> -->
                  <p style="color: #3E9EFF;">{{panelChartDatas.inspectNum}}</p>
                </div>
                <div class="hedse_radttwo">
                  <p>今日送检次数</p>
                  <!-- <p>{{deviceIpOptions.zsmrc}}</p> -->
                  <p style="color: #3E9EFF;">{{panelChartDatas.inspectTodayNum}}</p>
                </div>
              </div>
              <panel-groupther :chart-data="panelChartDatas" />
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" style="display: flex;  height: 100%;">
            <div style="display: flex;">
              <div style=" text-align: center; " class="hedse_radt">
                <div class="hedse_radtone">
                  <p >总计生成报告</p>
                  <!-- <p>{{deviceIpOptions.jrsmrc}}</p> -->
                  <p style="color:#F53C49 ; ">{{panelChartDatas.reportDetailNum}}</p>
                </div>
                <div class="hedse_radttwo">
                  <p>今日生成报告</p>
                  <!-- <p>{{deviceIpOptions.zsmrc}}</p> -->
                  <p style="color:#F53C49 ; ">{{panelChartDatas.reportDetailTodayNum}}</p>
                </div>
              </div>
              <panel-groupone :chart-data="panelChartDatas" />
              <!-- <panel-groups :chart-data="panelChartDatas" /> -->
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" style="display: flex;  height: 100%;">
            <div style="display: flex;">
              <div style=" text-align: center; " class="hedse_radt">
                <div class="hedse_radtone">
                  <p>总计查询次数</p>
                  <!-- <p>{{deviceIpOptions.jrsmrc}}</p> -->
                  <p style="color:#46D871  ; ">{{panelChartDatas.reportQueryLogNum}}</p>
                </div>
                <div class="hedse_radttwo">
                  <p>今日查询次数</p>
                  <!-- <p>{{deviceIpOptions.zsmrc}}</p> -->
                  <p style="color:#46D871  ; ">{{panelChartDatas.reportQueryLogTodayNum}}</p>
                </div>
              </div>
              <panel-groups :chart-data="panelChartDatas" />
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" style="display: flex;  height: 100%;">
            <div style="display: flex;">
              <div style=" text-align: center; " class="hedse_radt">
                <div class="hedse_radtone">
                  <p>总计发布文章</p>
                  <!-- <p>{{deviceIpOptions.jrsmrc}}</p> -->
                  <p style="color:#FFBC3E ; ">{{panelChartDatas.columnNewsNum}}</p>
                </div>
                <div class="hedse_radttwo">
                  <p>今日发布文章</p>
                  <!-- <p>{{deviceIpOptions.zsmrc}}</p> -->
                  <p style="color:#FFBC3E ; ">{{panelChartDatas.columnNewsTodayNum}}</p>
                </div>
              </div>
              <panel-groupfour :chart-data="panelChartDatas" />
            </div>
          </el-col>
          <!-- <el-col :xs="12" :sm="6" style="display: flex; flex-direction: column;">
            <div class="nav_raet">
              <p>绿码</p>
              <p>{{deviceIpOptions.lmrs}}</p>
              <p>56793435</p>
            </div>
            <panel-groups :chart-data="panelChartDatas" />
          </el-col> -->

          <!-- <el-col :xs="12" :sm="4">
            <div class="nav_raet">
              <p>红码</p>
              <p style=" color: #F52F2F;">{{deviceIpOptions.hongmrs}}</p>
            </div>
            <panel-groupone :chart-data="panelChartDatas" />
          </el-col>
          <el-col :xs="12" :sm="4">
            <div class="nav_raet">
              <p>灰码</p>
              <p style=" color: #9A9A9A;">{{deviceIpOptions.huimrs}}</p>
            </div>
            <panel-grouptwo :chart-data="panelChartDatas" />
          </el-col>
          <el-col :xs="12" :sm="4">
            <div class="nav_raet">
              <p>未申领</p>
              <p style=" color: #9836C1;">{{deviceIpOptions.wsl}}</p>
            </div>
            <panel-groupther :chart-data="panelChartDatas" />
          </el-col>
          <el-col :xs="12" :sm="4">
            <div class="nav_raet">
              <p>体温异常</p>
              <p style=" color: #F69F24;">{{deviceIpOptions.twycrs}}</p>
            </div>
            <panel-groupfour :chart-data="panelChartDatas" />
          </el-col> -->
        </el-row>
      </el-col>
    </el-row>

    <!-- 列表 -->

    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px; border-radius: 6px;">
      <line-chart :chart-data="lineChartData"  v-if="hye"/></el-row>

   <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper"><raddar-chart :chart-data="panelChartDataleid"/></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper"><pie-chart :chart-data="panelChartDatayuanh" /></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper" ><bar-chart :chart-data="panelChartDatazhuzh" /></div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import {treeselect,listDevice, exportPost,listzhex,listleida,listdbyh, listzhuzh} from "@/api/index";
import PanelGroup from './dashboard/PanelGroup';
import PanelGroups from './dashboard/PanelGroups';
import PanelGroupone from './dashboard/PanelGroupone';
import PanelGrouptwo from './dashboard/PanelGrouptwo';
import PanelGroupther from './dashboard/PanelGroupther';
import PanelGroupfour from './dashboard/PanelGroupfour';
import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
import PieChart from './dashboard/PieChart';
import BarChart from './dashboard/BarChart';
// const lineChartData = {
//   newVisitis: {
//     expectedData: [80, 120, 111, 104, 105, 100, 105],
//     actualData: [120, 140, 130, 110, 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]
//   },

// };

export default {
  name: 'Index',
  components: {
    PanelGroup,
    PanelGroups,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    PanelGroupone,
    PanelGrouptwo,
    PanelGroupther,
    PanelGroupfour
  },
  data() {
    return {
      lineChartData: {},
      dayList: 1, //判断天周月
      taye: 'newVisitis', //根据点击天周月变换，折线图数据变换
      panelChartData: {},
      panelChartDatas:{},
      panelChartDataleid:{},
      panelChartDatayuanh:[],
      tableData: [
      ], //表格数据
      // 总条数
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: false,
      deviceIpOptions:{},
      panelChartDatazhuzh:{},
      hye:false
    };
  },
  mounted(){
   // this.yuanhaun(1)
   // this.tableList()
   // // 折线
   this.zhexianList()
   // // 雷达
   // this.leidaList()
   // // 底部圆环
   // this.dbyhList()
   // // 柱状图
   // this.zhuzhList()
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    // 月 周 天 点击
    day(index) {
      this.dayList = index;
      this.yuanhaun(index)
      if (index == 1) {
        // 天
        this.taye = 'newVisitis';
        this.lineChartData = lineChartData[this.taye];
      } else if (index == 2) {
        // 周
        this.taye = 'messages';
        this.lineChartData = lineChartData[this.taye];
      } else {
        // 月
        this.taye = 'purchases';
        this.lineChartData = lineChartData[this.taye];
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // this.ids = selection.map(item => item.id)
      // this.single = selection.length !== 1
      // this.multiple = !selection.length
    },
    // 表格点击事件
    tabclick(val){
      console.log(val)
      this.$router.push({
        path:'./school/temperatures',
        query:{
          val:val,
        }
      })
      },
    // 圆环数据
    yuanhaun(val){
      treeselect(val).then(response => {
        this.deviceIpOptions = response.data;
        this.panelChartDatas = this.deviceIpOptions
      });
    },
    // 列表数据
   tableList(){
     listDevice().then(response => {
       this.tableData = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 折线图数据
   zhexianList(){
     listzhex().then(response => {
       this.lineChartData = response.data;
       this.hye = true
       console.log(56,this.lineChartData)
       this.panelChartDatas = this.lineChartData
     });
   },
   // 雷达图
   leidaList(){
     listleida().then(response => {
       this.panelChartDataleid = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 底部圆环数据
   dbyhList(){
     listdbyh().then(response => {
       this.panelChartDatayuanh = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 柱状图数据
   zhuzhList(){
     listzhuzh().then(response => {
       this.panelChartDatazhuzh = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },

   /** 导出按钮操作 */
   handleExport() {
     const queryParams = this.queryParams;
     this.$confirm('是否确认导出?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function() {
         return exportPost();
       }).then(response => {
         this.download(response.msg);
       })
   }

  }
};
</script>

<style lang="scss">
.tabsty {
  .el-table .el-table__header-wrapper th {
    background-color: #7bcbff;
    color: #fff;
    border:0 !important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #e9f1f7;
  }
  .el-table--group,
  .el-table--border {
    // border-color: #0CA0FF;
    border: 1px solid #0CA0FF;
  }
}
</style>

<style lang="scss" scoped>
.header {
  display: flex;
  text-align: left;
  justify-content: flex-end;
  margin-bottom: 12px;
  p {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 700;
    color: #666666;
    cursor: pointer;
  }
  p:nth-child(1)::before {
    width: 1px;
    background-color: #666;
  }
  .heade_cod {
    color: #00a8ec;
  }
  .el-table--border {
    border: 1px solid #0ca0ff !important;
  }
}
p {
  margin: 0;
}
.hedse_radt {
  height: 100%;
  // padding-top: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .p {
    position: absolute;
    right: 8px;
    width: 1px;
    height: 83px;
    background-color: #c7cbd7;
    top: 40%;
  }
  .hedse_radtone {
    margin-bottom: 18px;
    p:nth-child(1) {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      text-align: left;
    }
    p:nth-child(2) {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #459CF9;
      margin-top: 5px;
      text-align: left ;
    }
  }
  .hedse_radttwo {
    p:nth-child(1) {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      text-align: left;
    }
    p:nth-child(2) {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #459CF9;
      margin-top: 5px;
      text-align: left;
    }
  }
}
.nav_raet {
  padding-top: 24px;
  p:nth-child(1) {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
  p:nth-child(2) {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #50bd04;
    text-align: left ;
  }
}
.dashboard-editor-container {
  padding: 32px;
  padding-top: 12px;
  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;
  }
}

// 表格央视
.tabsty {
  background-color: #fff;
  width: 100%;
  margin-top: 16px;
  padding: 0 30px;
  padding-top: 23px;
  padding-bottom: 40px;
  margin-bottom: 36px;
}
.tabbuut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  p:nth-child(1) {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
}
</style>
