<template>
  <div class="page_targetDetails">
    <p class="targetTitle">指标监控</p>
    <div style="width:100%;overflow-x:auto">
      <div class="qualityBox">
        <div
          class="qualityOne"
          v-for="(item,index) in normData"
          :key="index"
          :class="quality == index ? 'active' : ''"
          @click="clickQuality(index,item.inspection_minor)"
        >
          <p>{{ item.item_name }}</p>
           <!-- <i class="iconfont icon-gou gou" v-if="is_True == true"></i>
           <i class="iconfont icon-gantanhao gth" v-if="is_True == false"></i> -->
           <span v-if="item.range_type == 1 && getvlist(item.inspection_minor)!=''"><span  v-if="parseInt(item.min_range)<=getvlist(item.inspection_minor)&& parseInt(item.large_range)>=getvlist(item.inspection_minor)"><i class="iconfont icon-gou gou"></i></span></span>
           <span v-if="item.range_type == 1 && getvlist(item.inspection_minor)!=''"><span  v-if="parseInt(item.min_range)>getvlist(item.inspection_minor)||parseInt(item.large_range)<getvlist(item.inspection_minor)"><i class="iconfont icon-gantanhao gth"></i></span></span>
           <span v-if="item.range_type == 1 && getvlist(item.inspection_minor)==''"></span>
           <span v-if="item.range_type == 2 && getvlistwo(item.inspection_minor)!=''"><span v-if="item.range_value == getvlistwo(item.inspection_minor)"><i class="iconfont icon-gou gou"></i></span></span>
           <span v-if="item.range_type == 2 && getvlistwo(item.inspection_minor)!=''"><span v-if="item.range_value != getvlistwo(item.inspection_minor)"><i class="iconfont icon-gantanhao gth"></i></span></span>
           <span  v-if="item.range_type == 2 && getvlistwo(item.inspection_minor)==''"></span>
        </div>
      </div>
    </div>
    <p class="targetTitle">指标趋势</p>
     <div class="rangeBox" style="margin-top:.625rem">
        <p class="range"></p >
        <span v-show="showTwo">{{getItemName(itemName)}}</span>
        <span v-show ="showOne">{{itemName}}</span>
     </div>
    <div >
      <bar-chart :options="options" :height="height" v-if='rangtype == 1'></bar-chart>
      <bar-chart1 :options="options2" style="width:100%" v-if="rangtype == 2"></bar-chart1>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import BarChart from '../components/BarChart'
import BarChart1 from '../components/BarChart1'
import { uParseTime } from '@/utils/tools'
import {getMobileNormData, GetMobileQualityControl, getListPatientDetail, getMobileIdsList} from '@/api/common/common'
const moment = require('moment')
export default {
  props: {
    active: Number,
    index: String,
    startTime: Number,
    endTime: Number
  },
  components: {
    BarChart,
    BarChart1
  },
  data () {
    return {
      is_True: 1,
      rangtype: 0,
      showChartOne: true,
      showCharTwo: false,
      showOne: true,
      showTwo: false,
      itemName: '',
      unit: '',
      normData: [],
      patientid: 0,
      month: 0,
      height: '200px',
      arr: ['钙', '磷', '钙萨达撒所多', '磷', '钙', '磷', '钙', '磷'],
      quality: 0,
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        // legend: {
        //   data: ['达标率%'],
        //   left: 0
        // },
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = '' // 拼接加\n返回的类目项
              var maxLength = 4 // 每项显示文字个数
              var valLength = value.length // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * maxLength // 开始截取的位置
                  var end = start + maxLength // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              color: '#2F3133'
            }
          }
        },
        yAxis: {
          axisLabel: {
            formatter: '{value} %'
          },
          show: false
        },
        series: [
          {
            name: '达标率%',
            type: 'line',
            data: [],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}'
              }
            },
            // 配置样式
            itemStyle: {
              // 通常情况下：

              // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: function (params) {
                  // 我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ['#A9E0F3', '#9FBDFC'],

                    ['#FFD7C0', '#FF9994']
                  ]

                  var index = params.dataIndex
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex % colorList.length
                  }

                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colorList[index][0] },
                    // { offset: 0.5, color: colorList[index][1] },
                    { offset: 1, color: colorList[index][1] }
                  ])
                },
                lineStyle: {
                  color: '#5b98ff' // 改变折线颜色
                },
                barBorderRadius: [5, 5, 0, 0] // 柱状角成椭圆形
              },

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
            // markLine: {// 范围值
            //   silent: true,
            //   data: [
            //     {yAxis: 50, lineStyle: {color: '#999'}},
            //     {yAxis: 100}
            //   ]

            // }
          }
        ],
        dataZoom: [
          {
            // Y轴固定,让内容滚动
            type: 'slider',
            show: false,
            xAxisIndex: [0],
            start: 1,
            end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 20,
            zoomLock: true // 锁定区域禁止缩放
          }
        ]
      },
      options2: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = '' // 拼接加\n返回的类目项
              var maxLength = 4 // 每项显示文字个数
              var valLength = value.length // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * maxLength // 开始截取的位置
                  var end = start + maxLength // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              color: '#2F3133'
            }
          }
        },
        yAxis: {
          axisLabel: {
            show: false,
            formatter: '{value} %'
          },
          show: false,
          max: 2
        },
        series: [
          {
            name: '次数',
            type: 'line',
            data: [],
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 20, // 折线点的大小
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: (params) => {
                  let str = ''
                  str = this.otherData[params.dataIndex]

                  return str
                }
              }
            },
            // 配置样式
            itemStyle: {
              // 通常情况下：

              // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: (params) => {
                  // 我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ['#409EFF', '#409EFF'],
                    ['#f56c6c', '#f56c6c']
                  ]
                  // console.log(this)
                  if (params.seriesName == this.otherData[params.dataIndex]) {
                    var index = 0
                  } else {
                    var index = 1
                  }

                  // var index = params.dataIndex;
                  // if (params.dataIndex >= colorList.length) {
                  //   index = params.dataIndex % colorList.length;
                  // }

                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: colorList[index][0]},
                    // { offset: 0.5, color: colorList[index][1] },
                    {offset: 1, color: colorList[index][1]}
                  ])
                },
                lineStyle: {
                  width: 2,
                  color: '#cccccc'// 折线的颜色
                },
                barBorderRadius: [5, 5, 0, 0] // 柱状角成椭圆形
              },

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        dataZoom: [
          {
            // Y轴固定,让内容滚动
            type: 'slider',
            show: false,
            xAxisIndex: [0],
            start: 1,
            end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 20,
            zoomLock: true // 锁定区域禁止缩放
          }
        ]
      },
      startime: 0,
      endtime: 0,
      item_id: 0,
      modesData: {
        xAxis: [],
        series: []
      },
      unit: '',
      inspectdate: 0,
      tabActive: 0,
      otherData: [],
      ids: [],
      vlist: []
    }
  },
  methods: {
    clickQuality (index, id) {
      localStorage.setItem('qualityActive', index)
      localStorage.setItem('itemActive', id)
      this.modesData.series = []
      this.modesData.xAxis = []
      this.options2.xAxis.data = []
      this.options2.series[0].data = []
      this.showTwo = true
      this.showOne = false
      this.itemName = id
      this.quality = index
      this.item_id = id
      if (this.tabActive == 0) {
        this.ids = []
        var now = new Date()
        var nowMonth = now.getMonth() // 当前月
        var nowYear = now.getFullYear() // 当前年
        if (this.active == 0) {
          var monthStartDate = new Date(nowYear, nowMonth, 1)
          this.startime = Date.parse(monthStartDate) / 1000// s

          // 本月的结束时间
          // var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
          var monthEndDate = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')
          this.endtime = Date.parse(monthEndDate) / 1000 - 1// s
          this.getlist()
          this.getMobileIdsList()
        } else if (this.active == 1) {
          this.ids = []
          this.modesData.series = []
          this.modesData.xAxis = []
          this.options2.xAxis.data = []
          this.options2.series[0].data = []
          const startDate = moment().subtract('month', 3).format('YYYY-MM-DD')
          this.startime = Date.parse(startDate) / 1000
          const endDate = moment(new Date()).format('YYYY-MM-DD')
          this.endtime = Date.parse(endDate) / 1000
          this.getlistdetail()
          this.getMobileIdsList()
        } else if (this.active == 2) {
          this.ids = []
          this.modesData.series = []
          this.modesData.xAxis = []
          this.options2.xAxis.data = []
          this.options2.series[0].data = []
          const startDate = moment().subtract('month', 6).format('YYYY-MM-DD')
          this.startime = Date.parse(startDate) / 1000
          const endDate = moment(new Date()).format('YYYY-MM-DD')
          this.endtime = Date.parse(endDate) / 1000
          this.getlistdetail()
          this.getMobileIdsList()
        } else if (this.active == 3) {
          this.ids = []
          this.modesData.series = []
          this.modesData.xAxis = []
          this.options2.xAxis.data = []
          this.options2.series[0].data = []
          const startDate = moment().subtract('month', 12).format('YYYY-MM-DD')
          this.startime = Date.parse(startDate) / 1000
          const endDate = moment(new Date()).format('YYYY-MM-DD')
          this.endtime = Date.parse(endDate) / 1000
          this.getlistdetail()
          this.getMobileIdsList()
        }
      }
      if (this.tabActive == 1) {
        var now = new Date()
        var nowMonth = now.getMonth() // 当前月
        var nowYear = now.getFullYear() // 当前年
        if (this.active == 0) {
          var monthStartDate = new Date(nowYear, nowMonth, 1)
          this.startime = Date.parse(monthStartDate) / 1000// s
          // 本月的结束时间
          // var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
          var monthEndDate = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')
          this.endtime = Date.parse(monthEndDate) / 1000 - 1// s
          this.getlist()
          this.getMobileIdsList()
        } else if (this.active == 1) {
          this.quality = localStorage.getItem('qualityActive')
          const startDate = moment().subtract('month', 3).format('YYYY-MM-DD')
          this.startime = Date.parse(startDate) / 1000
          const endDate = moment(new Date()).format('YYYY-MM-DD')
          this.endtime = Date.parse(endDate) / 1000
          this.getlistdetail()
          this.getMobileIdsList()
        } else if (this.active == 2) {
          const startDate = moment().subtract('month', 6).format('YYYY-MM-DD')
          this.startime = Date.parse(startDate) / 1000
          const endDate = moment(new Date()).format('YYYY-MM-DD')
          this.endtime = Date.parse(endDate) / 1000
          this.getlistdetail()
          this.getMobileIdsList()
        } else if (this.active == 3) {
          const startDate = moment().subtract('month', 12).format('YYYY-MM-DD')
          this.startime = Date.parse(startDate) / 1000
          const endDate = moment(new Date()).format('YYYY-MM-DD')
          this.endtime = Date.parse(endDate) / 1000
          this.getlistdetail()
          this.getMobileIdsList()
        }
      }
    },
    getMobileNormData () {
      getMobileNormData().then(response => {
        if (response.data.state == 1) {
          var normdata = response.data.data.normdata
          this.ids = []
          for (let i = 0; i < normdata.length; i++) {
            this.ids.push(normdata[i].inspection_minor)
            this.item_id = normdata[0].inspection_minor
            this.itemName = normdata[0].item_name + '(' + normdata[0].min_range + '-' + normdata[0].large_range + ')' + normdata[0].unit
          }
          this.normData = normdata
          this.getlistdetail()
          this.getMobileIdsList()
        }
      })
    },
    getItemName (id) {
      var name = ''
      for (let i = 0; i < this.normData.length; i++) {
        if (id == this.normData[i].inspection_minor) {
          if (this.normData[i].range_type == 1) {
            name = this.normData[i].item_name + '(' + this.normData[i].min_range + '-' + this.normData[i].large_range + ')' + this.normData[0].unit
          }
          if (this.normData[i].range_type == 2) {
            name = this.normData[i].item_name
          }
        }
      }
      return name
    },
    getlist () {
      this.modesData.series = []
      this.modesData.xAxis = []
      this.options2.xAxis.data = []
      this.options2.series[0].data = []
      this.inspectdate = this.$route.query.date
      const params = {
        patientid: parseInt(this.patientid),
        startime: this.startime,
        endtime: this.endtime,
        itemid: this.item_id,
        inspectdate: this.inspectdate
      }

      GetMobileQualityControl(params).then(response => {
        if (response.data.state == 1) {
          var list = response.data.data.list
          var unit = 0
          var otherData = []
          for (let i = 0; i < list.length; i++) {
            if (list[i].range_type == 1) {
              this.rangtype = 1
              this.modesData.xAxis.push(this.getTime(list[i].inspect_date))
              this.modesData.series.push(list[i].inspect_value)
              unit = list[0].unit
              if (list[i].inspect_value + 0 >= list[i].range_min + 0 && list[i].inspect_value + 0 <= list[i].range_max + 0) {
                this.is_True = true
              }
              if (list[i].inspect_value + 0 <= list[i].range_min + 0 || list[i].inspect_value + 0 >= list[i].range_max + 0) {
                this.is_True = false
              }
            }
            if (list[i].range_type == 2) {
              this.rangtype = 2
              this.options2.xAxis.data.push(this.getTime(list[i].inspect_date))
              this.options2.series[0].data.push('1')
              this.otherData.push(list[i].inspect_value)
              this.options2.series[0].name = list[i].range_value
              if (list[i].inspect_value == list[i].range_value) {
                this.is_True = true
              }
              if (list[i].inspect_value != list[i].range_value) {
                this.is_True = false
              }
            }
          }
          this.options.series[0].data = this.modesData.series
          this.options.xAxis.data = this.modesData.xAxis
          this.getArrLength(this.options.xAxis.data)
        }
      })
    },
    getTime (time) {
      return uParseTime(time, '{y}-{m}-{d}')
    },
    getlistdetail () {
      this.modesData.series = []
      this.modesData.xAxis = []
      this.options2.xAxis.data = []
      this.options2.series[0].data = []
      if (this.active == 0) {
        const startDate = moment().subtract('month', 0).format('YYYY-MM') + '-01'

        const endDate = moment(new Date()).format('YYYY-MM-DD')

        var now = new Date()
        var nowMonth = now.getMonth() // 当前月
        var nowYear = now.getFullYear() // 当前年
        // 本月的开始时间
        var monthStartDate = new Date(nowYear, nowMonth, 1)
        this.startime = Date.parse(monthStartDate) / 1000// s

        // 本月的结束时间
        // var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
        var monthEndDate = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')
        this.endtime = Date.parse(monthEndDate) / 1000 - 1// s
        if (localStorage.getItem('itemActive')) {
          this.item_id = localStorage.getItem('itemActive')
        }
        const params = {
          patientid: parseInt(this.patientid),
          startime: this.startime,
          endtime: this.endtime,
          itemid: this.item_id
        }
        // console.log('params', params)
        getListPatientDetail(params).then(response => {
          var list = response.data.data.list
          for (let i = 0; i < list.length; i++) {
            if (list[i].range_type == 1) {
              this.rangtype = 1
              this.modesData.xAxis.push(this.getTime(list[i].inspect_date))
              this.modesData.series.push(list[i].inspect_value)

              if (list[i].inspect_value + 0 >= list[i].range_min + 0 && list[i].inspect_value + 0 <= list[i].range_max + 0) {
                this.is_True = true
              }
              if (list[i].inspect_value + 0 <= list[i].range_min + 0 || list[i].inspect_value + 0 >= list[i].range_max + 0) {
                this.is_True = false
              }
            }
            if (list[i].range_type == 2) {
              this.rangtype = 2
              this.options2.xAxis.data.push(this.getTime(list[i].inspect_date))
              this.options2.series[0].data.push('1')
              this.otherData.push(list[i].inspect_value)
              this.options2.series[0].name = list[i].range_value
              if (list[i].inspect_value == list[i].range_value) {
                this.is_True = true
              }
              if (list[i].inspect_value != list[i].range_value) {
                this.is_True = false
              }
            }
          }
          this.options.series[0].data = this.modesData.series
          this.options.xAxis.data = this.modesData.xAxis
          if (this.rangtype == 1) {
            this.getArrLength(this.options.xAxis.data, 1)
          } else {
            this.getArrLength(this.options2.xAxis.data, 2)
          }
        })
      }

      // 近三月
      if (this.active == 1) {
        const startDate = moment().subtract('month', 3).format('YYYY-MM-DD')

        this.startime = Date.parse(startDate) / 1000

        const endDate = moment(new Date()).format('YYYY-MM-DD')

        this.endtime = Date.parse(endDate) / 1000
        if (localStorage.getItem('itemActive')) {
          this.item_id = localStorage.getItem('itemActive')
        }
        const params = {
          patientid: parseInt(this.patientid),
          startime: this.startime,
          endtime: this.endtime,
          itemid: this.item_id
        }
        getListPatientDetail(params).then(response => {
          var list = response.data.data.list
          for (let i = 0; i < list.length; i++) {
            if (list[i].range_type == 1) {
              this.rangtype = 1
              this.modesData.xAxis.push(this.getTime(list[i].inspect_date))
              this.modesData.series.push(list[i].inspect_value)
            }
            if (list[i].range_type == 2) {
              this.rangtype = 2
              this.options2.xAxis.data.push(this.getTime(list[i].inspect_date))
              this.options2.series[0].data.push('1')
              this.otherData.push(list[i].inspect_value)
              this.options2.series[0].name = list[i].range_value
            }
          }
          this.options.series[0].data = this.modesData.series
          this.options.xAxis.data = this.modesData.xAxis

          if (this.rangtype == 1) {
            this.getArrLength(this.options.xAxis.data, 1)
          } else {
            this.getArrLength(this.options2.xAxis.data, 2)
          }
        })
      }
      if (this.active == 2) {
        const startDate = moment().subtract('month', 6).format('YYYY-MM-DD')

        this.startime = Date.parse(startDate) / 1000
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        this.endtime = Date.parse(endDate) / 1000
        if (localStorage.getItem('itemActive')) {
          this.item_id = localStorage.getItem('itemActive')
        }
        const params = {
          patientid: parseInt(this.patientid),
          startime: this.startime,
          endtime: this.endtime,
          itemid: this.item_id
        }
        // console.log('paras', params)
        getListPatientDetail(params).then(response => {
          var list = response.data.data.list
          for (let i = 0; i < list.length; i++) {
            if (list[i].range_type == 1) {
              this.rangtype = 1
              this.modesData.xAxis.push(this.getTime(list[i].inspect_date))
              this.modesData.series.push(list[i].inspect_value)
            }
            if (list[i].range_type == 2) {
              this.rangtype = 2
              this.options2.xAxis.data.push(this.getTime(list[i].inspect_date))
              this.options2.series[0].data.push('1')
              this.otherData.push(list[i].inspect_value)
              this.options2.series[0].name = list[i].range_value
            }
          }
          this.options.series[0].data = this.modesData.series
          this.options.xAxis.data = this.modesData.xAxis
          if (this.rangtype == 1) {
            this.getArrLength(this.options.xAxis.data, 1)
          } else {
            this.getArrLength(this.options2.xAxis.data, 2)
          }
        })
      }

      if (this.active == 3) {
        const startDate = moment().subtract('month', 12).format('YYYY-MM-DD')
        this.startime = Date.parse(startDate) / 1000
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        this.endtime = Date.parse(endDate) / 1000
        if (localStorage.getItem('itemActive')) {
          this.item_id = localStorage.getItem('itemActive')
        }
        const params = {
          patientid: parseInt(this.patientid),
          startime: this.startime,
          endtime: this.endtime,
          itemid: this.item_id
        }
        getListPatientDetail(params).then(response => {
          var list = response.data.data.list
          for (let i = 0; i < list.length; i++) {
            if (list[i].range_type == 1) {
              this.rangtype = 1
              this.modesData.xAxis.push(this.getTime(list[i].inspect_date))
              this.modesData.series.push(list[i].inspect_value)
            }
            if (list[i].range_type == 2) {
              this.rangtype = 2
              this.options2.xAxis.data.push(this.getTime(list[i].inspect_date))
              this.options2.series[0].data.push('1')
              this.otherData.push(list[i].inspect_value)
              this.options2.series[0].name = list[i].range_value
            }
          }
          this.options.series[0].data = this.modesData.series
          this.options.xAxis.data = this.modesData.xAxis
          if (this.rangtype == 1) {
            this.getArrLength(this.options.xAxis.data, 1)
          } else {
            this.getArrLength(this.options2.xAxis.data, 2)
          }
        })
      }

      if (this.active == 4) {
        if (localStorage.getItem('itemActive')) {
          this.item_id = localStorage.getItem('itemActive')
        }
        const params = {
          patientid: parseInt(this.patientid),
          startime: this.startime,
          endtime: this.endtime,
          itemid: this.item_id
        }
        // console.log('params', params)
        getListPatientDetail(params).then(response => {
          var list = response.data.data.list
          for (let i = 0; i < list.length; i++) {
            if (list[i].range_type == 1) {
              this.rangtype = 1
              this.modesData.xAxis.push(this.getTime(list[i].inspect_date))
              this.modesData.series.push(list[i].inspect_value)
            }
            if (list[i].range_type == 2) {
              this.rangtype = 2
              this.options2.xAxis.data.push(this.getTime(list[i].inspect_date))
              this.options2.series[0].data.push('1')
              this.otherData.push(list[i].inspect_value)
              this.options2.series[0].name = list[i].range_value
            }
          }
          this.options.series[0].data = this.modesData.series
          this.options.xAxis.data = this.modesData.xAxis
          if (this.rangtype == 1) {
            this.getArrLength(this.options.xAxis.data, 1)
          } else {
            this.getArrLength(this.options2.xAxis.data, 2)
          }
        })
      }
    },
    getArrLength (result, type) {
      if (type == 1) {
        if (result.length > 6) {
          var dataZoom_end = (6 / result.length) * 100
          this.options.dataZoom[0].end = dataZoom_end
        } else {
          var dataZoom_end = 100
          this.options.dataZoom[0].end = dataZoom_end
        }
      } else {
        if (result.length > 6) {
          var dataZoom_end = (6 / result.length) * 100
          this.options2.dataZoom[0].end = dataZoom_end
        } else {
          var dataZoom_end = 100
          this.options2.dataZoom[0].end = dataZoom_end
        }
      }
    },
    getMobileIdsList () {
      var ids = []
      ids = this.ids

      getMobileIdsList({ids: ids}, this.patientid).then(response => {
        if (response.data.state == 1) {
          var vlist = response.data.data.vlist
          this.vlist = vlist
        }
      })
    },
    getvlist (id) {
      var itemvalue = ''
      for (let i = 0; i < this.vlist.length; i++) {
        if (id == this.vlist[i].item_id) {
          if (this.vlist[i].inspect_type == 1 && this.vlist[i].inspect_value != '') {
            itemvalue = parseInt(this.vlist[i].inspect_value)
          } else {
            itemvalue = 0
          }
        }
      }
      return itemvalue
    },
    getvlistwo (id) {
      var itemvalue = ''
      for (let i = 0; i < this.vlist.length; i++) {
        if (id == this.vlist[i].item_id) {
          if (this.vlist[i].inspect_type == 2 && this.vlist[i].inspect_value != '') {
            itemvalue = this.vlist[i].inspect_value
          } else {
            itemvalue = ''
          }
        }
      }
      return itemvalue
    }
  },
  created () {
    if (localStorage.getItem('qualityActive')) {
      this.quality = localStorage.getItem('qualityActive')
    }

    this.getMobileNormData()
    this.patientid = this.$route.query.patientid
    this.tabActive = this.$route.query.tabActive
  },
  watch: {
    active: {
      handler () {
        this.getMobileNormData()
      }
    },
    index: {
      handler () {
        this.quality = parseInt(this.index)
      }
    },
    startTime: {
      handler () {
        this.startime = this.startTime
      }
    },
    endTime: {
      handler () {
        this.endtime = this.endTime
      }
    },

    deep: true
  }
}
</script>

<style lang="scss" scoped>
.page_targetDetails {
  padding-left: 1rem;
  .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;
    }
  }
  .targetTitle {
    font-size: 1rem;
    font-weight: bold;
    margin: 1.25rem 0 1rem;
  }
  .qualityBox {
    display: flex;
    flex-wrap: nowrap;
    min-width: 50rem;
    .qualityOne {
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 0.3125rem;
      border: 1px solid rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-right: 0.875rem;
      //   justify-content: space-around;
      .gth {
        color: #ff974a;
        font-size: 1.25rem;
      }
      .gou {
        color: #5cd924;
        font-size: 1.25rem;
      }
      p {
        width: 100%;
        margin-top: 1.25rem;
        margin-bottom: 0.625rem;
        font-weight: bold;
        color: #666666;
        font-size: 0.875rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .active {
      color: #5b98ff;
      border:1px solid #5b98ff;
      // background: #5b98ff;
      p {
        color: #5b98ff;
      }
      .gth {
        // color: #fff;
        font-size: 1.25rem;
      }
      .gou {
        // color: #fff;
        font-size: 1.25rem;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.none1::-webkit-scrollbar {
  display:none;
}
</style>
<style lang="scss">
.page_targetDetails{
  .van-tab--active{
    font-size:1rem;
    font-weight: bold;
  }
}
</style>
