<template>
    <div>
        <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>
               <el-popover v-model="time_options_visible" placement="bottom" trigger="click">
                    <li slot="reference">
                    {{ time_types[time_selected].text }}
                    <span class="iconfont">&#xe74a;</span>
                    </li>
                    <div class="popover-demo-content">
                    <ul>
                        <li
                        v-for="item in time_types"
                        :key="item.value"
                        @click="handleTypeOne(item.value)"
                        :class="time_selected == item.value ? 'tick' : ''">
                        {{ item.text }}
                        </li>
                    </ul>
                    </div>
                </el-popover>
                <el-popover v-model="prescription_options_visible" placement="bottom" trigger="click">
                    <li slot="reference">
                    {{ prescription_types[prescrition_selected].text }}
                    <span class="iconfont">&#xe74a;</span>
                    </li>
                    <div class="popover-demo-content">
                    <ul>
                      <li
                        v-for="item in prescription_types"
                        :key="item.value"
                        @click="handleTypeTwo(item.value)"
                        :class="prescrition_selected == item.value ? 'tick' : ''">
                        {{ item.text }}
                      </li>
                    </ul>
                    </div>
                </el-popover>
                <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">
          
        </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 {getDialysisGoods,GetAllZone,getMobileScheduleList} from '@/api/dialysis'
  import { getAllMobileZone} from "@/api/consumable"

  export default {
    props:{
      search_keyword:String
    },
    components:{
    },
    data(){
        return{
          keywords:"",
          partitionArr:[],
          total:0,
          
          type_selected: 0,
          time_selected:0,
          prescrition_selected:0,
          types: [
            { value: 0, text: '本周', select: true },
            { value: 1, text: '下一周', select: false },
          ],
          time_types:[
              { value:0,text:"时间",select:true},
              { value:1,text:"周一",select:false},
              { value:2,text:"周二",select:false},
              { value:3,text:"周三",select:false},
              { value:4,text:"周四",select:false},
              { value:5,text:"周五",select:false},
              { value:6,text:"周六",select:false},
              { value:7,text:"周日",select:false},
            ],
            type_options_visible: false,
            selected_date: new Date(),
            selected_date_str:'',
            time_options_visible:false,
            prescription_options_visible:false,
            schedual_types: [
                { value: 0, text: '全部班', select: true},
                { value: 1, text: '上午', select: false },
                { value: 2, text: '下午', select: false },
                { value: 3, text: '晚上', select: false }
            ],
            prescription_types:[
               { value:0,text:'全部',select:true},
               { value:1,text:"已确认",select:false},
               { value:2,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:[],
          page:1,
          limit:10,
        }
    },
    created(){
      this.getZone()
      //获取所有分区
      this.getAllMobileZone()
      this.getMobileScheduleList()
    },
    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)
            }


          }
        });
      },
        handleType: function (index) {
          this.type_selected = index
          this.type_options_visible = false
        },
        handleTypeOne: function (index) {
        
          this.time_selected = index
          this.time_options_visible = false
        },
        handleTypeTwo:function(index){
          this.prescrition_selected = index
          this.prescription_options_visible = false
        },

        openPicker () {
            this.$refs.picker.open()
        },
        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.getDialysisGoods()
          this.$nextTick(() => {
            if(this.type_selected == 1){
              this.$refs.dialysisParameters.getlist()
            }
            if(this.type_selected == 2){
              this.$refs.allSummary.getMobileList()
            }
          })
        },
        handletimeType: function (index) {

        },
       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
          }
        })
       },
       getMobileScheduleList(){
        
         if(this.type_options_visible == false){
           this.type_options_visible = 0
         }
         if(this.sch_type_options_visible == false){
           this.sch_type_options_visible = 0
         }
         if(this.zone_options_visible == false){
            this.zone_options_visible = 0
         }
          var params = {
            limit:this.limit,
            page:this.page,
            type_options_visible:this.type_options_visible, 
            zone_options_visible:this.zone_options_visible,
            sch_type_options_visible:this.sch_type_options_visible,
          }
          getMobileScheduleList(params).then(response=>{
         })
       }
    }
}
</script>

<style lang="scss" scoped>
.screening {
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 83px;
  @media only screen and (min-width: 768px) {
    top: 138px;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    top: 111px;
  }
  right: 0;
  z-index: 66;
  left: 0;
  background: #fff;
  // @media only screen and (max-width: 812px) {
  //   top: 50px !important;
  // }
  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: 94px;
    background: #fff;

  @media only screen and (min-width: 768px) {
    padding-top: 150px;
  }

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