<template>
  <div class="page_pcd">
    <van-sticky>
      <div class="pcdTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="toReturn"></i>
        <span class="titleName" @click="show = true">
            {{name}}
          <van-icon name="arrow-down" class="arrow" />
        </span>
      </div>
    </van-sticky>
    <van-tabs v-model="active" @change="changeActive">
      <van-tab title="本月">
        <target-details :index="index" :active="active"></target-details>
      </van-tab>
      <van-tab title="近三个月">
        <target-details :index="index" :active="active"></target-details>
      </van-tab>
      <van-tab title="近半年">
        <target-details :index="index" :active="active"></target-details>
      </van-tab>
      <van-tab title="近一年">
        <target-details :index="index" :active="active"></target-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>
        <target-details :active="active" :startTime="start_time" :endTime="end_time"></target-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"
        /> -->
         <div class="searchBox">
            <el-autocomplete
              class="checkSearch"
              popper-class="my-autocomplete"
              v-model="search_value"
              :fetch-suggestions="querySearchAsync"
              :trigger-on-focus="false"
              placeholder="输入病人透析号/姓名"
              @select="handleSelect"
            >
              <i class="el-icon-search el-input__icon" slot="suffix"></i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.name }}</div>
              </template>
            </el-autocomplete>
           </div>

        <van-index-bar class="indexBar" sticky highlight-color="#fb6463">
          <div>
            <van-index-anchor>
              <!-- <span class="indexWord">{{ item.name }}</span> -->
            </van-index-anchor>
            <van-cell
              @click="chooseCity(citem.id)"
              v-for="(citem, cindex) in patients"
              :key="cindex"
              :title="citem.name"
            />
          </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 { PostSearch } from '@/api/patient'
import targetDetails from '../dqc/components/targetDetails'
import {getMobilePatientList} from '@/api/common/common'
export default {

  components: {
    targetDetails
  },
  inject: ['reload'],
  data () {
    return {
      search_value: '',
      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),
      value: '',
      patients: [],
      patientArr: [],
      patientid: 0,
      name: '',
      start_time: 0,
      end_time: 0,
      inspectdate: 0,
      tabActive: 1,
      tab: 0,
      index: 0
    }
  },
  methods: {
    querySearchAsync (keyword, cb) {
      let key = ''
      if (keyword != undefined) {
        key = keyword
      }
      let searchArray = []
      PostSearch(key).then(response => {
        if (response.data.state == 1) {
          searchArray = response.data.data.patient
          cb(searchArray)
        } else {
          cb([])
        }
      })
    },
    handleSelect (val) {
      this.type = val.name
      this.search_value = val.name
      var arr = []
      for (let i = 0; i < this.patients.length; i++) {
        if (val.name == this.patients[i].name) {
          arr.push(this.patients[i])
        }
      }
      this.patients = arr
    },
    chooseCity (id) {
      this.show = false
      this.$router.push('/dqc/patientdetailstatics?patientid=' + id + '&tabActive=' + this.tabActive)
      this.reload()
    },
    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}`
      var start = `${year}-${month}-${day}`
      this.start_time = Date.parse(start) / 1000
      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}`
      var end = `${year}-${month}-${day}`
      this.end_time = Date.parse(end) / 1000
      this.endShow = false
    },
    onCancel () {
    },
    onSearch () {
      var arr = []
      for (let i = 0; i < this.patients.length; i++) {
        if (this.value == this.patients[i].name) {
          arr.push(this.patients[i])
        }
      }
      this.patients = arr
    },
    getMobilePatientList () {
      getMobilePatientList().then(response => {
        if (response.data.state == 1) {
          var patients = response.data.data.patients
          this.patients = patients
          var patientid = this.$route.query.patientid
          patients.map(item => {
            this.patientArr.push(item.name)
            if (item.id == patientid) {
              this.name = item.name
            }
          })
        }
      })
    },

    toReturn () {
      localStorage.removeItem('qualityActive')
      localStorage.removeItem('itemActive')
      this.$router.push('/dqc/patientStatistics')
    },
    changeActive () {
      if (localStorage.getItem('qualityActive')) {
        this.index = localStorage.getItem('qualityActive')
      }
    }
  },
  created () {
    this.getMobilePatientList()
    this.patientid = this.$route.query.patientid
    this.inspectdate = this.$route.query.inspectdate
  },
  watch: {
    $route (newVal) {
      this.patient_id = newVal.query.patientid
    }
  }
}
</script>

<style lang="scss" scoped>
.page_pcd {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .searchBox{
    background: #F6F6F6;
    height: 3rem;
    display: flex;
    align-items: center;
    padding:0 0.625rem;
  }
  .pcdTitle {
    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_pcd {
  .van-cell__value {
    display: flex;
    align-items: center;
  }
  .van-tabs__line {
    background-color: #5b98ff;
  }
  .searchBox{
    .el-input{
      font-size: 14px !important;
    }
    .el-autocomplete{
      width: 100%;
    }
    .el-input__inner{
      border-radius:1rem;
      line-height: 2rem;
      height:2rem;
      border:none;
    }
    .el-input__icon{
      line-height:2rem;
    }
  }
  .van-tab--active{
    font-size:1rem;
    font-weight: bold;
  }
}
</style>
