<template>
    <div class="page_dialysisDrugs">
      <div class="cell clearfix">
        <label class="title"> <span class="name">排班班次</span> : </label>
        <div class="time">
          <ul class>
            <li
              :class="item.value == schedulType ? 'active' : ''"
              @click="selectSchedulType(item.value)"
              v-for="item in schedulArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>

        <label class="title"><span class="name">日期查询</span> : </label>
        <el-date-picker size="small" v-model="selected_date" prefix-icon="el-icon-date" @change="handleScheduleDateChange" :editable="false" :clearable="false" style="width: 196px;margin-right:10px;" type="date" placeholder="选择日期时间" align="right" ></el-date-picker>
        <el-input size="small" style="width: 180px;" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="searchAction">搜索</el-button>
      </div>
      <div class="cell clearfix" style="justify-content: space-between;">
        <div style="display:flex;">
          <label class="title"> <span class="name">分区</span> : </label>
          <div class="time">
          <ul class>
            <li
            :class="item.id == partitionType ? 'active' : ''"
            @click="selectPartitionType(item.id)"
            v-for="item in partitionArr"
            :key="item.id"
            >
            {{ item.name }}
            </li>
          </ul>
          </div>
        </div>
        <div>
            <!-- <el-button size="small" icon="el-icon-printer" type="primary">打印</el-button> -->
            <el-button size="small" type="primary" @click="statistics">统计表</el-button>
        </div>
      </div>
      <div>
          <el-table
            :data="tableData"
            height="350"
            border
            style="width: 100%">
            <el-table-column
            align="center"
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            align="center"
            prop="name"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            align="center"
            prop="address"
            label="地址">
            </el-table-column>
        </el-table>
      </div>

      <dialysis-drugs-dialog ref="dialysisDrugs"></dialysis-drugs-dialog>
    </div>
</template>


<script>
import { GetAllZone } from "@/api/dialysis";
import dialysisDrugsDialog from './dialysisDrugsDialog'
export default {
    components:{
        dialysisDrugsDialog
    },
    data(){
        return{
            schedulType: 0,
            schedulArr: [
                { value: 0, label: "全部" },
                { value: 1, label: "上午" },
                { value: 2, label: "下午" },
                { value: 3, label: "晚上" }
            ],
            selected_date:new Date(),
            partitionArr:[],
            partitionType: 0,
            tableData: []
        }
    },
    created(){
        this.getAllZone()
        
    },
    methods:{
        selectSchedulType(scheduleType) {
            this.schedulType = scheduleType;
        },
        selectPartitionType(partitionType) {
            this.partitionType = partitionType;
        },
        getAllZone: function() {
            GetAllZone().then(response => {
                if (response.data.state == 0) {
                this.$message.error(response.data.msg);
                return false;
                } else {
                this.partitionArr = response.data.data.zone;
                this.partitionArr.unshift({ id: 0, name: "全部" });
                }
            });
        },
        statistics(){
            this.$refs.dialysisDrugs.show();
        }
    }
}
</script>


<style lang="scss" scoped>
.page_dialysisDrugs{
   .clearfix:after{
       content:none;
   }
}
</style>
