<template>
  <div class="page_assayDetail">
    <van-sticky>
      <div class="assayDetailTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
        <span class="titleName" @click="show = true">
          {{this.patient_name}}
          <van-icon name="arrow-down" class="arrow"/>
        </span>
      </div>
    </van-sticky>

    <div>

      <van-tabs v-model="active" sticky @change="changeTab">
        <van-tab title="近一个月">
          <div class="chart1">指标趋势</div>
          <div class="rangeBox">
            <p class="range"></p>
            <span>{{project_info}}</span>
          </div>
          <assay-template ref="one"></assay-template>
        </van-tab>
        <van-tab title="近3个月">
          <div class="chart1">指标趋势</div>
          <div class="rangeBox" style="margin-top:.625rem">
            <p class="range"></p>
            <span>{{project_info}}</span>
          </div>
          <assay-template ref="two"></assay-template>
        </van-tab>

        <van-tab title="近半年">
          <div class="chart1">指标趋势</div>
          <div class="rangeBox" style="margin-top:.625rem">
            <p class="range"></p>
            <span>{{project_info}}</span>
          </div>
          <assay-template ref="three" ></assay-template>
        </van-tab>

        <van-tab title="一年">
          <div class="chart1">指标趋势</div>
          <div class="rangeBox" style="margin-top:.625rem">
            <p class="range"></p>
            <span>{{project_info}}</span>
          </div>
          <assay-template ref="four"></assay-template>
        </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>
          <div class="chart1">指标趋势</div>
          <div class="rangeBox" style="margin-top:.625rem">
            <p class="range"></p>
            <span>{{project_info}}</span>
          </div>
          <assay-template ref="five"></assay-template>
        </van-tab>
      </van-tabs>

      <van-popup v-model="startShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate1"
          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="currentDate2"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>

      <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>
        <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 v-for="(subItem, index) in patients" :key="index" :index="index">
            <van-index-anchor :index="index">
              <!-- <span class="indexWord">{{ index }}</span> -->
            </van-index-anchor>
            <van-cell
              @click="choosePatient(item)"
              v-for="(item, subIndex) in subItem"
              :key="subIndex"
              :title="item.name"
            />
          </div>
        </van-index-bar>
      </van-popup>

    </div>
  </div>
</template>
<script>
import AssayTemplate from '@/pages/dqc/components/AssayTemplate'
import {
  GetRangeValue, GetAllPatients, GetInspectionIndexInit
} from '@/api/statistics'
import {PostSearch} from '@/api/patient'
let pinyin = require('js-pinyin')
export default {
  components: {
    AssayTemplate
  },
  data () {
    return {
      FirstPin: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      patients: {},
      active: 0,
      search_value: '',
      show: false,

      startShow: false,
      endShow: false,
      project_info: '',
      currentDate1: new Date(new Date().setMonth(new Date().getMonth() + 1)),
      currentDate2: new Date(),
      patient_name: this.$route.query.name,
      startTime: '请选择',
      endTime: '请选择',
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
      maxDate: new Date(),
      query: {
        range_value: ''

      }
    }
  },
  methods: {
    choosePatient (val) {
      this.query.patient_id = val.id
      this.query.page = 1
      this.patient_name = val.name
      this.show = false
      switch (this.active) {
        case 0:
          this.$nextTick(function () {
            this.$refs.one.changePatient(val.id)
          })
          break
        case 1:
          this.$nextTick(function () {
            this.$refs.two.changePatient(val.id)
          })
          break
        case 2:
          this.$nextTick(function () {
            this.$refs.three.changePatient(val.id)
          })
          break
        case 3:
          this.$nextTick(function () {
            this.$refs.four.changePatient(val.id)
          })
          break
        case 4:
          this.$nextTick(function () {
            this.$refs.five.changePatient(val.id)
          })
          break
      }
    },
    GetAllPatients () {
      GetAllPatients().then(response => {
        if (response.data.state == 1) {
          var patient = response.data.data.patients
          let cityNameList = []
          for (let p in patient) {
            cityNameList.push(patient[p])
          }
          let firstName = {}
          this.FirstPin.forEach(item => {
            firstName[item] = []
            cityNameList.forEach(el => {
              let first = pinyin.getFullChars(el.name).substring(0, 1)
              if (first == item) {
                firstName[item].push(el)
              }
            })
            this.patients = firstName
            // 判断非空
            let newObj = {}
            Object.keys(this.patients).map((item, index) => {
              if (this.patients[item].length != 0) {
                newObj[item] = this.patients[item]
              }
            })
            this.patients = newObj
          })
        } else {

        }
      })
    },
    handleSelect (val) {
      this.query.patient_id = val.id
      this.query.page = 1
      this.patient_name = val.name
      this.show = false
      // this.GetPatientInspectionIndexBarChart(this.query)
      // this.GetPatientInspectionIndexChart(this.query)
      switch (this.active) {
        case 0:
          this.$nextTick(function () {
            this.$refs.one.changePatient(val.id)
          })
          break
        case 1:
          this.$nextTick(function () {
            this.$refs.two.changePatient(val.id)
          })
          break
        case 2:
          this.$nextTick(function () {
            this.$refs.three.changePatient(val.id)
          })
          break
        case 3:
          this.$nextTick(function () {
            this.$refs.four.changePatient(val.id)
          })
          break
        case 4:
          this.$nextTick(function () {
            this.$refs.five.changePatient(val.id)
          })
          break
      }
    },
    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([])
        }
      })
    },
    changeTab (val) {
      switch (val) {
        case 0:
          this.$nextTick(function () {
            this.$refs.one.setTime(1, this.$route.query.project_id, this.$route.query.item_id, this.$route.query.range_type, this.$route.query.range_value, this.query.patient_id)
          })
          break
        case 1:
          this.$nextTick(function () {
            this.$refs.two.setTime(2, this.$route.query.project_id, this.$route.query.item_id, this.$route.query.range_type, this.$route.query.range_value, this.query.patient_id)
          })
          break
        case 2:
          this.$nextTick(function () {
            this.$refs.three.setTime(3, this.$route.query.project_id, this.$route.query.item_id, this.$route.query.range_type, this.$route.query.range_value, this.query.patient_id)
          })
          break
        case 3:
          this.$nextTick(function () {
            this.$refs.four.setTime(4, this.$route.query.project_id, this.$route.query.item_id, this.$route.query.range_type, this.$route.query.range_value, this.query.patient_id)
          })
          break
        case 4:
          this.$nextTick(function () {
            this.$refs.five.setTime(5, this.$route.query.project_id, this.$route.query.item_id, this.$route.query.range_type, this.query.range_value, this.query.patient_id, this.startTime, this.endTime)
          })
          break
      }
    },
    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
      this.query.start_time = this.startTime
    },
    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.query.end_time = this.endTime

      this.endShow = false
    },
    GetRangeValue (range_type, project_id, id) {
      let params = {
        range_type: range_type,
        project_id: project_id,
        item_id: id
      }
      GetRangeValue(params)
        .then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            if (range_type == 1) {
              this.query.range_value = resp.data.range_vaule[0] + ',' + resp.data.range_vaule[1]
            } else {
              this.query.range_value = resp.data.range_vaule.join(',')
            }

            this.$nextTick(function () {
              this.$refs.one.initData()
            })
          } else {
            this.$toast({
              message: resp.msg
            })
          }
        })
        .catch(error => {

        })
    },
    GetInspectionIndexInit () {
      GetInspectionIndexInit()
        .then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            let project_name = []
            let item_name = []
            this.all_inspection_reference = resp.data.references

            for (let i = 0; i < this.all_inspection_reference.length; i++) {
              if (this.all_inspection_reference[i].id == this.$route.query.item_id && this.all_inspection_reference[i].project_id == this.$route.query.project_id) {
                if (this.all_inspection_reference[i].range_type == 1) {
                  this.project_info = this.all_inspection_reference[i].item_name + '(' + this.all_inspection_reference[i].range_min + ' ~ ' + this.all_inspection_reference[i].range_max + ')' + ' ' + this.all_inspection_reference[i].unit
                } else {
                  this.project_info = this.all_inspection_reference[i].item_name
                }
              }
            }
          } else {
            this.$toast({
              message: resp.msg
            })
          }
        })
        .catch(error => {

        })
    }

  },
  created () {
    var date = new Date()
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var last_month = date.getMonth()
    var day = date.getDate()

    if (month < 10) {
      month = '0' + month.toString()
    }
    if (last_month < 10) {
      last_month = '0' + last_month.toString()
    }
    if (day < 10) {
      day = '0' + day.toString()
    }
    this.query.patient_id = this.$route.query.patient_id
    this.startTime = year.toString() + '-' + last_month.toString() + '-' + day.toString()
    this.endTime = year.toString() + '-' + month.toString() + '-' + day.toString()
    this.GetInspectionIndexInit()

    this.GetAllPatients()
    this.GetRangeValue(this.$route.query.range_type, this.$route.query.project_id, this.$route.query.item_id)
  }
}
</script>

<style lang="scss" scoped>
  .page_assayDetail {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    .searchBox{
      background: #F6F6F6;
      height: 3rem;
      display: flex;
      align-items: center;
      padding:0 0.625rem;
    }
  .assayDetailTitle {
    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;
  }

  .toolBox {
    display: flex;
    height: 3.125rem;
    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;
  }
  

  }
  .chart1 {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin: .625rem 0 .625rem 0.8125rem;
  }
  .chart {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
  }
  .rangeBox {
    margin-left: 0.8125rem;
    display: flex;
    align-items: center;
    .range {
      width: 0.8125rem;
      height: 0.8125rem;
      background: linear-gradient(
        0deg,
        rgba(169, 224, 243, 1),
        rgba(159, 189, 252, 1)
      );
      border-radius: 0.25rem;
      margin-right: 0.5rem;
    }
    span {
      color: #5d5a5f;
      font-size: 0.75rem;
    }
  }
  }
  ::-webkit-scrollbar {
    width: 0;
  }
</style>

<style lang="scss">
.page_assayDetail{
  .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;
      }
    }
}
</style>
