<template>
    <div class="page_consumablesDetail">
        <van-sticky>
            <div class="consumablesDetailTitle">
                <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
                <span class="titleName">汇总统计</span>
                <span style="visibility: hidden;">张三</span>
            </div>
        </van-sticky>
        <div class="toolBox1">
            <div class="toolOne" @click="startShow = true">
                <div style="display: flex;align-items: center;">
                    {{ startTime }}
                    <van-icon name="arrow-down" />
                </div>
            </div>
            <div class="toolOne" @click="endShow = true">
                <div style="display: flex;align-items: center;">
                    {{ endTime }}
                    <van-icon name="arrow-down" />
                </div>
            </div>
        </div>
        <div class="consumablesList">
            <div class="consumablesListTitle">
                <span>商品类型</span>
                <span>规格名称</span>
                <span>数量</span>
            </div>
            <div class="consumablesListOne" v-for="(item,index) in this.tableData"  :key="index">
                 <span v-if="item.stage == 1">{{item.type_name}}</span>
                 <span v-if="item.stage == 2">抗凝剂</span>
                <span v-if="item.stage == 1">{{item.specification_name}}</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 1">无肝素</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 2">普通肝素</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 3">低分子肝素</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 4">阿加曲班</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 5">枸橼酸钠</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 6">低分子肝素钙</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 7">低分子肝素钠</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 8">依诺肝素</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 9">达肝素</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 10">体外抗凝</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 11">那屈肝素</span>
                  <span v-if="item.stage == 2 && item.anticoagulant == 12">无抗凝剂</span>
                <span>{{item.count}}</span>
            </div>
        </div>

        <!-- 弹出层 -->
        <div>
            <van-popup
                v-model="typeShow"
                position="bottom"
                :style="{ height: '40%' }"
            >
                <van-picker
                show-toolbar
                :columns="columns"
                @cancel="typeShow = false"
                @confirm="chooseType"
                />
            </van-popup>
            <van-popup
                v-model="areaShow"
                position="bottom"
                :style="{ height: '40%' }"
            >
                <van-picker
                show-toolbar
                :columns="areaColumns"
                @cancel="areaShow = false"
                @confirm="chooseArea"
                />
            </van-popup>
            <van-popup
                v-model="startShow"
                position="bottom"
                :style="{ height: '40%' }"
            >
                <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="getstartTime"
                @cancel="startShow = false"
                />
            </van-popup>
            <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
                <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="getstartTime2"
                @cancel="endShow = false"
                />
            </van-popup>
            <van-action-sheet
                v-model="newShow"
                :actions="actions"
                cancel-text="取消"
                @select="onCancelOne"
            />
        </div>
    </div>
</template>

<script>
import {getMobileWareHouseOutList, getMobileGatherList} from '@/api/consumable'
const moment = require('moment')
export default {
  data () {
    return {
      type: '全部班',
      area: '全部分区',
      typeShow: false,
      areaShow: false,
      startShow: false,
      endShow: false,
      startTime: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
      endTime: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      columns: ['全部班', '早上班', '下午班', '晚上班'],
      areaColumns: ['A区', 'B区'],
      actions: [],
      newShow: false,
      start_time: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
      end_time: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
      tableData: []
    }
  },
  methods: {
    getstartTime (value) {
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.startTime = `${year}-${month}-${day}`
      // console.log('this.startTime', this.startTime)
      this.start_time = `${year}-${month}-${day}`
      this.startShow = false
      this.getlist()
    },
    getstartTime2 (value) {
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.endTime = `${year}-${month}-${day}`
      // console.log('endTime', this.endTime)
      this.end_time = `${year}-${month}-${day}`
      this.endShow = false
      this.getlist()
    },
    chooseType (value) {
      this.type = value
      this.typeShow = false
      this.getlist()
    },
    chooseArea (value) {
      this.area = value
      this.areaShow = false
      this.getlist()
    },
    onCancelOne () {

    },

    getlist () {
      const params = {
        start_time: this.start_time,
        end_time: this.end_time
      }

      getMobileGatherList(params).then(response => {
        if (response.data.state == 1) {
          var arr = []
          var warehouselist = response.data.data.warehouselist
          for (let i = 0; i < warehouselist.length; i++) {
            warehouselist[i].stage = 1
          }

          arr.push(...warehouselist)
          var consumables = response.data.data.consumables

          var count = response.data.data.count
          for (let j = 0; j < count.length; j++) {
            count[j].stage = 2
          }
          arr.push(...count)

          this.tableData = arr
        }
      })
    }
  },
  created () {
    // 获取统计图数据
    this.getlist()
  }

}
</script>

<style lang="scss" scoped>
.page_consumablesDetail{
    height:100%;
    background:#fafafa;
    .consumablesDetailTitle {
        background: #fff;
        padding: 0 0.4rem;
        height: 1.66rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .jiantou {
        font-size: 0.8rem;
        font-weight: 600;
        margin-right: 0.53rem;
    }
    .titleName {
        font-size: 0.6rem;
        font-weight: 600;
    }
    .toolBox1 {
        display: flex;
        height: 1.6rem;
        align-items: center;
        background:#fff;
        .toolOne {
            width: 3.4rem;
            height: 1rem;
            background: rgba(246, 246, 246, 1);
            border-radius: 5px;
            text-align: center;
            font-size: 0.42rem;
            color: #8d8d8d;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-left: 0.53rem;
        }
        .toolNewOne{
            width: 2.4rem;
        }
    }
    .consumablesList{
        font-size: 0.53rem;
        background:#fff;
        .consumablesListOne{
            height: 1.66rem;
            padding: 0 0.53rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #e5e5e5;
            text-align:center;
            color:#313234;
            >span:nth-of-type(1){
                width:33%;
                text-align:left;
            }
            >span:nth-of-type(2){
                width:33%
            }
            >span:nth-of-type(3){
                width:33%
            }
        }
    }
    .consumablesListTitle{
        display:flex;
        align-items:center;
        justify-content:space-between;
        background:#f7f7fa;
        color:#000;
        height: 1.66rem;
        padding: 0 0.53rem;
        >span{
            text-align:center;
            width:33%;
            font-weight: 700;
            font-size:0.53rem;
        }
        >span:nth-of-type(1){
            text-align:left;
        }
    }
}
</style>

<style lang="scss">
.page_consumablesDetail{
    .van-picker__toolbar{
        height: 1.46rem;
        line-height: 1.46rem;
    }
    .van-picker__cancel, .van-picker__confirm{
        padding: 0 0.53rem;
        font-size: 0.46rem;
    }
    .van-picker-column{
        font-size: 0.53rem;
    }
    .van-picker-column__item{
        padding: 0 0.14rem;
    }
    .van-action-sheet__item{
        height: 1.6rem;
    }
    .van-action-sheet__cancel, .van-action-sheet__item{
        height: 1.6rem;
        font-size: 0.53rem;
        line-height: 1.6rem;
    }
    .van-action-sheet__gap{
        height: 0.26rem;
    }
    .van-action-sheet__cancel::before{
        height: 0.26rem;
    }
    .van-action-sheet__item{
        height: 1.6rem;
    }
    .van-action-sheet__cancel, .van-action-sheet__item{
        height: 1.6rem;
        font-size: 0.53rem;
        line-height: 1.6rem;
    }
    .van-action-sheet__gap{
        height: 0.26rem;
    }
    .van-action-sheet__cancel::before{
        height: 0.26rem;
    }
}
</style>
