<template>
    <div style="height:100%;display:flex;flex-direction: column;">
        <div class="screening">
            <ul>
                <el-popover v-model="type_options_visible" placement="bottom" trigger="click">
                    <li slot="reference">
                    {{ types[type_selected].text }}
                    <span class="iconfont">&#xe74a;</span>
                    </li>
                    <div class="popover-demo-content">
                    <ul>
                        <li
                        v-for="item in types"
                        :key="item.value"
                        @click="handleType(item.value)"
                        :class="type_selected == item.value ? 'tick' : ''">
                        {{ item.text }}
                        </li>
                    </ul>
                    </div>
                </el-popover>
                <li @click="openPicker()">
                    {{ selected_date_str }}
                    <span class="iconfont">&#xe74a;</span>
                </li>
                <el-popover v-model="sch_type_options_visible" placement="bottom" trigger="click">
                    <li slot="reference">
                        {{ schedual_types[schedual_type_selected].text }}
                        <span class="iconfont">&#xe74a;</span>
                    </li>
                    <div class="popover-demo-content">
                        <ul>
                            <li
                            v-for="schedualType in schedual_types"
                            :key="schedualType.value"
                            @click="handletimeType(schedualType.value)"
                            :class="
                                schedual_type_selected == schedualType.value ? 'tick' : ''
                            "
                            >
                            {{ schedualType.text }}
                            </li>
                        </ul>
                    </div>
                </el-popover>
              <el-popover
                v-model="zone_options_visible"

                placement="bottom"
                trigger="click"
              >
                <li slot="reference">
                  {{
                  zones.length <= 1 && zone_selected > 0
                  ? "全部分区"
                  : zones[zone_selected].text
                  }}
                  <span class="iconfont">&#xe74a;</span>
                </li>

                <div class="popover-demo-content">
                  <ul>
                    <li
                      v-for="(zone, index) in zones"
                      :key="zone.value"
                      @click="handleZoneChange(index)"
                      :class="zone_selected == index ? 'tick' : ''"
                    >
                      {{ zone.text }}
                    </li>
                  </ul>
                </div>
              </el-popover>
            </ul>
        </div>
        <div class="beforeDialysisBox" style="padding-left:0">
            <consumables ref="consumables"  v-if="type_selected == 0"  :list="list" :goodInfo="allGoodInfo" :query="query" :zone_selected="zone_selected" :schedual_type_selected="schedual_type_selected" :partition_id="partition_id"></consumables>
            <dialysis-parameters ref="dialysisParameters" v-if="type_selected == 1" :selected_date_str="selected_date_str" :zone_selected="zone_selected" :schedual_type_selected="schedual_type_selected" :search_keyword="search_keyword"></dialysis-parameters>
            <all-summary v-if="type_selected == 2" ref="allSummary" :selected_date_str="selected_date_str" :zone_selected="zone_selected" :schedual_type_selected="schedual_type_selected" :search_keyword="search_keyword"></all-summary>
        </div>

        <mt-datetime-picker
        v-model="selected_date"
        ref="picker"
        type="date"
        year-format="{value} "
        month-format="{value} "
        date-format="{value} "
        @confirm="handleScheduleDateChange"
      ></mt-datetime-picker>
    </div>
</template>


<script>
  import {parseTime} from '@/utils/index'
  import consumables from './components/consumables'
  import dialysisParameters from './components/dialysisParameters'
  import allSummary from "./components/allSummary"
  import {getDialysisGoods,GetAllZone} from '@/api/dialysis'
  import { getAllMobileZone} from "@/api/consumable"

  export default {
    props:{
      search_keyword:String
    },
    components:{
        consumables,
        dialysisParameters,
        allSummary
    },
    data(){
        return{
          keywords:"",
          partitionArr:[],
          total:0,
            query:{
              schedule_date:"",
              schedule_type:0,
              partition_id:0,
              page:1,
            },
            type_selected: 0,
            types: [
                { value: 0, text: '透析耗材', select: true },
                { value: 1, text: '透析参数', select: false },
                { value: 2, text: '汇总', select: false },
            ],
            type_options_visible: false,
            selected_date: new Date(),
            selected_date_str:'',

            schedual_types: [
                { value: 0, text: '全部班', select: true},
                { value: 1, text: '上午', select: false },
                { value: 2, text: '下午', select: false },
                { value: 3, text: '晚上', select: false }
            ],
            schedual_type_selected: 0,

            zone_selected: 0,
            zones: [{ value: 0, text: '全部分区', select: true }],

            zone_options_visible: false,
            sch_type_options_visible: false,
          list:[],
          all_list:[],
          allGoodInfo:[],
          zoneName:[],
          partition_id:0
          // search_keyword:""
        }
    },
    created(){
      const beforeDialysisType = 'before_dialysis_type'
      if(parseInt(window.sessionStorage.getItem(beforeDialysisType))){
        this.type_selected = parseInt(window.sessionStorage.getItem(beforeDialysisType))
      }
      const beforeDialysisZone = 'before_dialysis_zone'
      if(parseInt(window.sessionStorage.getItem(beforeDialysisZone))){
        this.zone_selected = parseInt(window.sessionStorage.getItem(beforeDialysisZone))
      }
      const beforeDialysisSchedual = 'before_dialysis_schedual'
      if(parseInt(window.sessionStorage.getItem(beforeDialysisSchedual))){
        this.schedual_type_selected = parseInt(window.sessionStorage.getItem(beforeDialysisSchedual))
      }


      let date = parseTime(new Date(), "{y}-{m}-{d}")
      this.selected_date_str = date
      var newDate = new Date();
      var y = newDate.getFullYear();
      var m = newDate.getMonth() + 1;
      var d = newDate.getDate();
      var schedule_date =
        y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);


      this.query.schedule_type =  this.schedual_type_selected
      this.query.partition_id =this.zone_selected
      this.query.page = 1
      var newDate = new Date();
      var y = newDate.getFullYear();
      var m = newDate.getMonth() + 1;
      var d = newDate.getDate();
      var schedule_date = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
      this.query.schedule_date = schedule_date

      const beforeDialysisTime = 'before_dialysis_time'
      if(window.sessionStorage.getItem(beforeDialysisTime)){
        this.selected_date_str = window.sessionStorage.getItem(beforeDialysisTime)
        this.query.schedule_date = this.selected_date_str
      }

      this.getZone()
      this.getDialysisGoods()
      //获取所有分区
      this.getAllMobileZone()

    },
    methods:{
      getZone(){
        GetAllZone().then(response => {
          if (response.data.state == 0) {
            // this.$message.error(response.data.msg);
            return false;
          } else {
            var zones = response.data.data.zone;
            for (let i = 0;i < zones.length; i++){
              let obj = {
                value:zones[i].id,
                text:zones[i].name,
              }
              this.zones.push(obj)
            }


          }
        });
      },getGoodInfoName(patient_id,good_type_id){
        for (let i = 0; i < this.allGoodInfo.length; i++) {
          if (this.allGoodInfo[i].good_user.length > 0) {
            let desc = ""
            for (let b = 0; b < this.allGoodInfo[i].good_user.length; b++){
              if(good_type_id == this.allGoodInfo[i].good_user[b].good_type_id && patient_id == this.allGoodInfo[i].patient.id)
                desc = desc + " " + this.allGoodInfo[i].good_user[b].info.specification_name +"*" +this.allGoodInfo[i].good_user[b].count
            }
            return desc
          } else if (this.allGoodInfo[i].good_user.length <= 0) {
            if (this.allGoodInfo[i].last_good_user.length > 0) {
              let desc = ""
              for (let b = 0; b < this.allGoodInfo[i].last_good_user.length; b++){
                if(good_type_id == this.allGoodInfo[i].last_good_user[b].good_type_id && patient_id == this.allGoodInfo[i].patient.id)
                  desc = desc + " " + this.allGoodInfo[i].last_good_user[b].info.specification_name +"*" +this.allGoodInfo[i].last_good_user[b].count
              }
              return desc
            }
            return ""
          }
        }
      },
       getDialysisGoods(){
        getDialysisGoods(this.query).then(rs => {
          var res = rs.data
          if (res.state == 1) {
            this.list = []
            this.allGoodInfo = []
            this.allGoodInfo = res.data.dialysis_goods
            this.total = res.data.dialysis_goods.total

            for(let i = 0; i < res.data.dialysis_goods.length; i++){
              let arr =[]
              let obj = {
                id:0,
                name:"姓名：" + res.data.dialysis_goods[i].patient.name,
                dialysis_no:res.data.dialysis_goods[i].patient.dialysis_no

              }
              arr.push(obj)

              for (let a = 0; a <  res.data.good_type.length; a++){
                let obj = {
                  id:res.data.good_type[a].id,
                  name:res.data.good_type[a].type_name,

                }
                arr.push(obj)
              }
              let newObj = {
                "good_type":arr,
                "good_user":res.data.dialysis_goods[i].good_user,
                "last_good_user":res.data.dialysis_goods[i].last_good_user,
                "good_user_detail":res.data.dialysis_goods[i].good_user_detail,
                "last_good_user_detail":res.data.dialysis_goods[i].last_good_user_detail,
                "prescription":res.data.dialysis_goods[i].prescription
              }
              console.log("几哪来的哦我饿哦饿哦问哦饿哦",this.list)
              this.list.push(newObj)
              // console.log(this.list)
            }

            this.all_list = this.list

            let arr = []
            for (let i = 0; i < this.all_list.length; i++){
              if(this.all_list[i].good_type[0].name.indexOf(this.keywords) != -1 || this.all_list[i].good_type[0].dialysis_no.indexOf(this.keywords) != -1){
                arr = arr.concat(this.all_list[i])
              }
            }
            if(arr.length > 0){
              this.list = arr
            }
          }
        })
      },
        handleType: function (index) {
          this.type_selected = index
          this.type_options_visible = false

          this.query.page = 1
          const beforeDialysisType = 'before_dialysis_type'
          window.sessionStorage.setItem(beforeDialysisType, index)
          const beforeDialysisZone = 'before_dialysis_zone'
          if(parseInt(window.sessionStorage.getItem(beforeDialysisZone))){
            this.query.partition_id = parseInt(window.sessionStorage.getItem(beforeDialysisZone))
          }
          const beforeDialysisSchedual = 'before_dialysis_schedual'
          if(parseInt(window.sessionStorage.getItem(beforeDialysisSchedual))){
            this.query.schedule_type = parseInt(window.sessionStorage.getItem(beforeDialysisSchedual))
          }

          const beforeDialysisTime = 'before_dialysis_time'
          if(window.sessionStorage.getItem(beforeDialysisTime)){
            this.query.schedule_date = window.sessionStorage.getItem(beforeDialysisTime)
          }

          this.getDialysisGoods()

          this.$nextTick(() => {
            if(this.type_selected == 1){
              this.$refs.dialysisParameters.getlist()
            }
            if(this.type_selected == 2){
              this.$refs.allSummary.getMobileList()
            }

          })
        },

        openPicker () {
            this.$refs.picker.open()
        },
        handleScheduleDateChange(date){

          this.selected_date_str = parseTime(date, '{y}-{m}-{d}')
          const beforeDialysisTime = 'before_dialysis_time'
          window.sessionStorage.setItem(beforeDialysisTime, this.selected_date_str)
          this.query.page = 1
          this.query.schedule_date = parseTime(date, '{y}-{m}-{d}')

          const beforeDialysisZone = 'before_dialysis_zone'
          if(parseInt(window.sessionStorage.getItem(beforeDialysisZone))){
            this.query.partition_id = parseInt(window.sessionStorage.getItem(beforeDialysisZone))
          }
          const beforeDialysisSchedual = 'before_dialysis_schedual'
          if(parseInt(window.sessionStorage.getItem(beforeDialysisSchedual))){
            this.query.schedule_type = parseInt(window.sessionStorage.getItem(beforeDialysisSchedual))
          }

          if(window.sessionStorage.getItem(beforeDialysisTime)){
            this.query.schedule_date = window.sessionStorage.getItem(beforeDialysisTime)
          }

          this.getDialysisGoods()
          this.$nextTick(() => {
            if(this.type_selected == 1){
              this.$refs.dialysisParameters.getlist()
            }
            if(this.type_selected == 2){
              this.$refs.allSummary.getMobileList()
            }
          })
        },
        handleZoneChange: function (index) {
          const beforeDialysisZone = 'before_dialysis_zone'
          window.sessionStorage.setItem(beforeDialysisZone, index)
          this.zone_options_visible = false
          this.zone_selected = index
          this.query.page = 1
          this.query.partition_id = this.zones[index].value
          this.partition_id = this.zones[index].value
         
          this.getDialysisGoods()
          this.$nextTick(() => {
            if(this.type_selected == 1){
              this.$refs.dialysisParameters.getlist()
            }
            if(this.type_selected == 2){
              this.$refs.allSummary.getMobileList()
            }
          })
        },
        handletimeType: function (index) {
          const beforeDialysisSchedual = 'before_dialysis_schedual'
          window.sessionStorage.setItem(beforeDialysisSchedual, index)
            this.sch_type_options_visible = false
            this.schedual_type_selected = index
          this.query.schedule_type = this.schedual_types[this.schedual_type_selected].value
          this.getDialysisGoods()
          this.$nextTick(()=>{
            if(this.type_selected == 1){

              this.$refs.dialysisParameters.getlist()
            }
            if(this.type_selected == 2){
              this.$refs.allSummary.getMobileList()
            }
          })

        },
       getAllMobileZone(){
        getAllMobileZone().then(respsone=>{
          if(respsone.data.state == 1){
            var arr = []
            var obj = {id:0,name:"全部"}
            arr.push(obj)
            var zone =  respsone.data.data.zone
            arr.push(...zone)
            this.zoneName = arr
          }
        })
      },
      getKeyword(val){
        this.keywords = val
        let arr = []
        for (let i = 0; i < this.all_list.length; i++){
          if(this.all_list[i].good_type[0].name.indexOf(val) != -1 || 
            this.all_list[i].good_type[0].dialysis_no.indexOf(val) != -1 ||
            this.all_list[i].good_type[0].first_letter.indexOf(val) != -1){
            arr = arr.concat(this.all_list[i])
          }
        }
        if(arr.length > 0){
          this.list = arr
        }else{
          this.list = []
        }

        this.$nextTick(() => {
          if(this.type_selected == 1){
            this.$refs.dialysisParameters.getlist(val)
          }
          if(this.type_selected == 2){
            this.$refs.allSummary.getMobileList(val)
          }
        })
      },

    }
}
</script>

<style lang="scss" scoped>
.screening {
  border-bottom: 1px #e5e5e5 solid;
  widows: 100%;
  
  background: #fff;
 
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 96%;
    margin: 0 auto;
    font-size: 0.45rem;
    color: $title-color;
    li {
      padding: 0.3rem 0;
      .iconfont {
        font-size: 0.45rem;
        margin-left: 0.1rem;
      }
    }
    .active {
      position: relative;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: $main-color;
        // border-bottom: 0.04rem $main-color solid;
        content: "";
      }
    }
  }
}
.beforeDialysisBox{
    // padding-top: 40px;
    background: #fff;
    padding-bottom: 40px;
    flex: 1;
    height: 100%;
    overflow-y: auto;

  @media only screen and (min-width: 768px) {
    // padding-top: 60px;
    padding-bottom: 70px;
  }

  @media only screen and (min-width: 415px) and (max-width: 767px) {
    // padding-top: 50px;
    padding-left: 0.3rem;
    padding-bottom: 56px;
  }
}
</style>
