<template>
  <div class="mainBox">
    <div class="newBox">
      <div class="mainContent">
        <record-page
          @refAdvice="refAdvice"
          :un_read_wait_num="unReadWaitNum"
          :un_read_dialysis_num="unReadDialysisNum"
          :total="total"
          :adviceList="adviceList"
          :hisAdviceList="hisAdviceList"
          :projectList="projectList"
          :drugStockConfig="drugStockConfig"
          :patientList="patientList"
          :user_type="user_type"
          :projectConfig="projectConfig"
        ></record-page>
      </div>
      <!-- <side-bar :active_index="0" :total_read_dot="readNum"></side-bar> -->
    </div>
  </div>
</template>

<script>
// import "@/styles/reset.scss";
import "@/styles/style.scss";
import "@/styles/media.scss";
import RecordPage from "./RecordPage";
import SideBar from "@/pages/layout/SideBar";
import { getDialysisScheduals, getWaitingScheduals,getAdviceListNoExecution } from "@/api/dialysis";
import { parseTime } from "@/utils/index";

export default {
  name: "Main",
  data() {
    return {
      timer: null,
      scheduals: [],
      advice_groups: [],
      unReadWaitNum: 0,
      unReadDialysisNum: 0,
      sqls: [
        window.matchMedia("(max-width:415px)"), // 和CSS一样，也要注意顺序！
        window.matchMedia("(max-width:767px)"),
        window.matchMedia("(max-width:1024px)"),
        window.matchMedia("(max-width:1200px)")
      ],
      clientHeight: document.body.clientHeight,
      adviceList:[],
      hisAdviceList:[],
      projectList:[],
      drugStockConfig:{},
      patientList:[],
      total:0,
      user_type:0,
      projectConfig:{},
    };
  },
  components: {
    RecordPage,
    SideBar
  },
  created() {
    var user_type =  this.$store.getters.user.user.user_type
    this.user_type = user_type
    if(user_type == 3){
      var admin_user_id =  this.$store.getters.user.admin.id
     //获取未执行的医嘱
     this.getAdviceListNoExecution(admin_user_id)
    }
    
    this.mediaMatches();
    for (var i = 0; i < this.sqls.length; i++) {
      this.sqls[i].addListener(this.mediaMatches);
    }
    // document.documentElement.style.fontSize = 30 + "px";
    // this.requestScheduals()
    // this.requestDialysisScheduals()
  },
  mounted() {
    //  console.log("更新")
    // this.timer = window.setInterval(() => {
    //   setTimeout(this.requestScheduals(), 0)
    // }, 10000)
    var user_type =  this.$store.getters.user.user.user_type
    var admin_user_id = 0
    if(user_type == 3){
      admin_user_id =  this.$store.getters.user.admin.id
     //获取未执行的医嘱
     this.getAdviceListNoExecution(admin_user_id)
    }
    this.timerDia = window.setInterval(() => {
      setTimeout(this.getAdviceListNoExecution(admin_user_id), 0)
    }, 1000*300)
     const that = this
    window.onresize = () => {
        return (() => {
            window.clientHeight = document.body.clientHeight
            that.clientHeight = window.clientHeight
        })()
    }
  },

  methods: {
    refAdvice() {
      this.requestScheduals();
      this.requestDialysisScheduals();
    },
    requestScheduals() {
      var storedata = this.$store.getters.waitscheduals;
      var scheduals = storedata.waitscheduals;
      if (Object.keys(storedata).length > 0) {
        this.scheduals = scheduals;
        // console.log(this.scheduals);
        let doctorAdvice = [];
        let project = [];
        for (let i = 0; i < this.scheduals.length; i++) {
          if(this.scheduals[i].doctor_advice!=null){
            for (let y = 0; y < this.scheduals[i].doctor_advice.length; y++) {
                if (this.scheduals[i].dialysis_order == null) {
                  if (this.scheduals[i].doctor_advice[y].execution_state != 1) {
                    doctorAdvice.push(this.scheduals[i].doctor_advice[y]);
                  }
                }
              }

              if(this.scheduals[i].project && this.scheduals[i].project.length > 0){
                for (let y = 0; y < this.scheduals[i].project.length; y++) {
                  if (this.scheduals[i].dialysis_order == null) {
                    if (this.scheduals[i].project[y].execution_state != 1) {
                      project.push(this.scheduals[i].project[y]);
                    }
                  }
                }
              }

            }

            const sorted = this.groupBy(doctorAdvice, function(item) {
              return [item.groupno];
            });
            this.unReadWaitNum = sorted.length + project.length;
          
          }
      }
   
    },
    requestDialysisScheduals() {
      var storedata = this.$store.getters.scheduals;
      var scheduals = storedata.scheduals;
      
      if (Object.keys(storedata).length > 0) {
        let doctorAdvice = [];
        let project = [];

        for (let index = 0; index < scheduals.length; index++) {
          const schedual = scheduals[index];
          if (schedual.dialysis_order == null) {
            continue;
          }
          if(schedual.doctor_advice != null ){
            for (let y = 0; y < schedual.doctor_advice.length; y++) {
            if (schedual.doctor_advice[y].execution_state != 1) {
              doctorAdvice.push(schedual.doctor_advice[y]);
            }
           }
          }


          if(schedual.project!=null){
            for (let y = 0; y < schedual.project.length; y++) {
                if (schedual.project[y].execution_state  != 1) {
                  project.push(schedual.project[y]);
                }
              }
          }

        }

        const sorted = this.groupBy(doctorAdvice, function(item) {
          return [item.groupno];
        });

        this.unReadDialysisNum = sorted.length + project.length;
      
      }
     
    },
    groupBy(array, f) {
      const groups = {};
      array.forEach(function(o) {
        const group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map(function(group) {
        return groups[group];
      });
    },
    getData() {
      // this.requestScheduals()
      // this.requestDialysisScheduals()
    },
    mediaMatches() {
      if(this.$route.path == '/main'){
        let sqls = [
          window.matchMedia("(max-width:415px)"), //和CSS一样，也要注意顺序！
          window.matchMedia("(max-width:767px)"),
          window.matchMedia("(max-width:1024px)"),
          window.matchMedia("(max-width:1200px)")
        ];
        if (sqls[0].matches) {
          // console.log("415"); // do something...
          // document.documentElement.style.fontSize = 30 + "px";
          document.documentElement.style.setProperty("font-size",30 + "px","important");
        } else if (sqls[1].matches) {
          // console.log(">415 & <=767"); // do something...
          // document.documentElement.style.fontSize = 40 + "px";
          document.documentElement.style.setProperty("font-size",40 + "px","important");
        } else if (sqls[3].matches) {
          // console.log("> 767 & <=1024"); // do something...
          // document.documentElement.style.fontSize = 50 + "px";
          document.documentElement.style.setProperty("font-size",50 + "px","important");
        } else {
          // console.log(">1200");
        }
      }
    },
    getAdviceListNoExecution(admin_user_id){
    
      getAdviceListNoExecution(admin_user_id).then(response=>{
        if(response.data.state == 1){
          this.drugStockConfig = response.data.data.drugStockConfig
          this.projectConfig =  response.data.data.projectConfig
          // 血透客户
           if( this.drugStockConfig.is_open == 2 || this.drugStockConfig.is_open == 0){
             this.adviceList = response.data.data.adviceList
             this.total =0
             if(this.adviceList!=null && this.adviceList.length>0){
                for(let i=0;i<this.adviceList.length;i++){
                  this.total+= this.adviceList[i].count
                }
                
             }
           }
         
            this.hisAdviceList = response.data.data.hisAdviceList
            this.projectList = response.data.data.projectList
          // his客户
           if(this.drugStockConfig.is_open == 1){
            
             var total_one =0
             var total_two = 0
             if(this.hisAdviceList!=null && this.hisAdviceList.length>0){
              for(let i=0;i<this.hisAdviceList.length;i++){
                total_one += this.hisAdviceList[i].count
              }
             
             }
             
             if(response.data.data.projectConfig!=undefined && response.data.data.projectConfig.is_open ==1){
              if(this.projectList!=null && this.projectList.length>0){
                for(let i=0;i<this.projectList.length;i++){
                  total_two += this.projectList[i].count
                }
              }
             }
            
            this.total =0
            this.total = total_one + total_two
           }
           
           this.patientList =  response.data.data.patientList
        }
      })
    }
  },
  computed: {
    readNum: function() {
      return this.unReadWaitNum + this.unReadDialysisNum;
    }
  },
  watch:{
    clientHeight(val){
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if(!this.timer){
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.clientHeight = val
        this.timer = true
        let that = this
        setTimeout(function(){
            // 打印screenWidth变化的值
            // console.log(22222222222222,that.clientHeight)
            that.timer = false
            that.mediaMatches();
        },400)
      }
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
html,
body {
  height: 100%;
}
.mainBox {
  height: 100%;
  font-size: 0.3rem;
  .sideColumn {
    .column {
      .head {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        @include justify-content-center;
        margin: 0.5rem 0 0.5rem 0;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
          width: 0.7rem;
          height: 0.7rem;
        }
      }
      .sidebar {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        padding: 0;
        li {
          padding: 0 0 0.8rem 0;
          a {
            color: #a8b3ba;
            display: inline-block;
            padding: 0;
            margin: 0;
            p {
              font-size: 0.24rem;
              margin-top: 0.2rem;
            }
            .iconfont {
              font-size: 0.5rem;
              display: inline-block;
            }
          }
          &.active {
            a {
              color: #409eff;
            }
          }
        }
      }
    }
  }
}
.mainContent {
  // margin: 0 0 0 1.58rem;
}
.newBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  > :first-child {
    flex: 1;
    overflow: auto;
  }
}
</style>
<style lang="scss">
#app {
  .appPopup {
    top: 7%;
    transform: translate3d(-50%, 0, 0);
    border-radius: 10px;
  }
}
.mainBox{
  .van-popup {
    top: 7%;
    transform: translate3d(-50%, 0, 0);
    border-radius: 10px;
  }
}

</style>
