<template>
  <div class="page_testStatisticsDetail">
    <van-sticky>
      <div class="testStatisticsDetailTitle">
        <i class="iconfont icon-zuojiantou jiantou"></i>
        <span class="titleName" @click="show = true">
          你你你
          <van-icon name="arrow-down" class="arrow" />
        </span>
      </div>
    </van-sticky>
    <van-tabs v-model="active">
      <van-tab title="本月">
        <test-details></test-details>
      </van-tab>
      <van-tab title="近三个月">
        <test-details></test-details>
      </van-tab>
      <van-tab title="近半年">
        <test-details></test-details>
      </van-tab>
      <van-tab title="近一年">
        <test-details></test-details>
      </van-tab>
      <van-tab title="自定义">
        <div class="toolBox">
          <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>
        <test-details></test-details>
      </van-tab>
    </van-tabs>

    <div>
      <van-popup v-model="show" position="top" :style="{ height: '100%' }">
        <div style="padding:10px;font-size:1.25rem;text-align:right" @click="show = false">
          <van-icon name="cross" />
        </div>
        <van-search
          class="doctorAdviceSearch"
          v-model="value"
          placeholder="请输入病人名字"
          @cancel="onCancel"
          @search="onSearch"
        />

        <van-index-bar class="indexBar" sticky highlight-color="#fb6463">
          <div v-for="(item, index) in firstNameTwo" :key="index" :index="index">
            <van-index-anchor :index="index">
              <!-- <span class="indexWord">{{ index }}</span> -->
            </van-index-anchor>
            <van-cell
              @click="chooseCity(citem)"
              v-for="(citem, cindex) in item"
              :key="cindex"
              :title="citem"
            />
          </div>
        </van-index-bar>
      </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>
    </div>
  </div>
</template>

<script>
import testDetails from "../dqc/components/testDetails";
export default {
  components: {
    testDetails
  },
  data() {
    return {
      show: false,
      active: 0,
      startShow: false,
      endShow: false,
      currentDate: new Date(),
      startTime: "请选择",
      endTime: "请选择",
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1)
    };
  },
  methods: {
    getstartTime(value) {
      this.page = 1;
      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}`;

      this.startShow = false;
    },
    getstartTime2(value) {
      this.page = 1;
      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}`;

      this.endShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.page_testStatisticsDetail {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .testStatisticsDetailTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 7rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    .arrow {
      margin-left: 0.375rem;
    }
  }
  .toolBox {
    display: flex;
    height: 2.5rem;
    align-items: center;
    .toolOne {
      width: 6.25rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
<style lang="scss">
.page_testStatisticsDetail {
  .van-cell__value {
    display: flex;
    align-items: center;
  }
  .van-tabs__line {
    background-color: #5b98ff;
  }
}
</style>
