<template>
    <div class="page_patients">
        <div class="optionsBox">
            <div class="optionsOne" @click="stateShow = true">
                <div style="display: flex;align-items: center;">
                    {{ state }}
                    <van-icon name="arrow-down" />
                    </div>
                </div>
            <div class="optionsOne" @click="typeShow = true">
                <div style="display: flex;align-items: center;">
                    {{ type }}
                    <van-icon name="arrow-down" />
                </div>
            </div>
        </div>
        <div class="chart2">统计图</div>
        <bar-chart :options="options"></bar-chart>

        <div>
            <van-popup v-model="stateShow" position="bottom" :style="{ height: '40%' }">
                <van-picker
                show-toolbar
                :columns="columns"
                @confirm="chooseState"
                @cancel="stateShow = false"
                />
            </van-popup>
            <van-popup v-model="typeShow" position="bottom" :style="{ height: '40%' }">
                <van-picker
                show-toolbar
                :columns="columns1"
                @confirm="chooseType"
                @cancel="typeShow = false"
                />
            </van-popup>
        </div>
        <div style="padding:0 .75rem;margin-top:.75rem;">
            <!-- <van-button type="primary" block color="#338afb" @click="toClick">{{bannerName}}</van-button> -->
            <div class="checkDetail" @click="toClick">{{bannerName}}</div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import BarChart from '../../dqc/components/BarChart'
import {getMobileNormData, getQuarterTarget, getMonthTarget, getQuarterBloodList, getMonthBloodList} from '@/api/common/common'
const moment = require('moment')
export default {
  components: {
    BarChart
  },
  data () {
    return {
      bannerName: '查看患者指标达标详情',
      state: '指标达标统计',
      type: '按季度对比统计',
      stateShow: false,
      typeShow: false,
      columns: ['指标达标统计', '血压达标统计'],
      columns1: ['按季度统计对比', '按月份统计对比'],
      Num: 1,
      month: 0,
      monthArr: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月'
      ],
      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
              }
            }
          }
        },
        yAxis: {
          axisLabel: {
            formatter: '{value} %'
          },
          show: false
        },
        series: [
          {
            name: '达标率%',
            type: 'bar',
            data: ['1', '2'],
            barWidth: 20,
            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] }
                  ])
                },
                barBorderRadius: [5, 5, 0, 0] // 柱状角成椭圆形
              },

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              }
            }
          },
          {
            name: '达标率%',
            type: 'bar',
            data: ['1', '2'],
            barWidth: 20,
            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] }
                  ])
                },
                barBorderRadius: [5, 5, 0, 0] // 柱状角成椭圆形
              },

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              }
            }
          }
        ],
        dataZoom: [
          {
            // Y轴固定,让内容滚动
            type: 'slider',
            show: false,
            xAxisIndex: [0],
            start: 1,
            end: 90, // 设置X轴刻度之间的间隔(根据数据量来调整)
            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 20,
            zoomLock: true // 锁定区域禁止缩放
          }
        ]
      },
      isRouter: 1,
      tabName: '',
      targeType: 1,
      bloodType: 1,
      totalStand: 0,
      modesData: {
        xAxis: [],
        series: [],
        seriestwo: []
      }
    }
  },
  methods: {
    chooseState (val) {
      if (val === '指标达标统计') {
        this.bannerName = '查看患者指标达标详情'
        this.state = val
        this.bloodType = 1
        this.isRouter = 1
        this.stateShow = false
        if (this.targeType === 1) {
          this.getlist()
        }
        if (this.targeType === 2) {
          this.monthList()
        }
        return false
      }
      if (val == '血压达标统计') {
        this.bannerName = '查看患者血压达标统计详情'
        this.state = val
        this.bloodType = 2
        this.stateShow = false
        this.isRouter = 2
        if (this.targeType == 1) {
          this.getQuarterBloodList()
        }
        if (this.targeType == 2) {
          this.getMonthBloodList()
        }
        return false
      }
    },
    chooseType (val) {
      if (val == '按季度统计对比') {
        this.type = val
        this.targeType = 1
        this.typeShow = false
        if (this.bloodType === 1) {
          this.getlist()
        }
        if (this.bloodType === 2) {
          this.getQuarterBloodList()
        }
      }
      if (val == '按月份统计对比') {
        this.type = val
        this.targeType = 2
        this.typeShow = false
        if (this.bloodType === 1) {
          this.monthList()
        }
        if (this.bloodType === 2) {
          this.getMonthBloodList()
        }
      }
    },
    onClick (id) {
      if (id == 1) {
        this.Num = 1
      } else if (id == 2) {
        this.Num = 2
      } else if (id == 3) {
        this.Num = 3
      } else if (id == 4) {
        this.Num = 4
      }
    },
    clickMonth (index) {
      this.month = index
    },
    toClick () {
      if (this.isRouter == 1) {
        this.$router.push('/bus/targetstandard?isRouter=' + this.isRouter + '&tabName=' + this.tabName)
        return false
      }
      if (this.isRouter == 2) {
        this.$router.push('/bus/targetstandard?isRouter=' + this.isRouter + '&tabName=' + this.tabName)
        return false
      }
    },
    getMobileNormData () {
      getMobileNormData().then(response => {
        if (response.data.state == 1) {
          var normdata = response.data.data.normdata
          var bloodPressure = response.data.data.bloodPressure
          this.getlist()
        }
      })
    },
    // 指标达标统计按季度统计
    getlist () {
      this.modesData.series = []
      this.modesData.seriestwo = []
      this.modesData.xAxis = []
      // 第一季度
      const first_quarter_start = moment().startOf('year').format('YYYY-MM-DD')
      const first_qurter_end = moment().month(2).endOf('month').format('YYYY-MM-DD')

      // 第二季度
      const second_qurter_start = moment().month(3).startOf('month').format('YYYY-MM-DD')
      const second_qurter_end = moment().month(5).endOf('month').format('YYYY-MM-DD')

      // 第三季度
      const three_qurter_start = moment().month(6).startOf('month').format('YYYY-MM-DD')
      const three_qurter_end = moment().month(8).endOf('month').format('YYYY-MM-DD')

      // 第四季度
      const four_qurter_start = moment().month(9).startOf('month').format('YYYY-MM-DD')
      const four_qurter_end = moment().month(11).endOf('month').format('YYYY-MM-DD')

      const params = {
        first_quarter_start: first_quarter_start,
        first_qurter_end: first_qurter_end,
        second_qurter_start: second_qurter_start,
        second_qurter_end: second_qurter_end,
        three_qurter_start: three_qurter_start,
        three_qurter_end: three_qurter_end,
        four_qurter_start: four_qurter_start,
        four_qurter_end: four_qurter_end
      }
      getQuarterTarget(params).then(response => {
        if (response.data.state == 1) {
          var stand = response.data.data.stand
          this.totalStand = stand
          var nostand = response.data.data.noStand
          var contagionTargeStand = response.data.data.contagionTargeStand
          var contagionTargeNoStand = response.data.data.contagionTargeNoStand

          var newArr = [
            {Name: '1', Count: 0},
            {Name: '2', Count: 0},
            {Name: '3', Count: 0},
            {Name: '4', Count: 0}
          ]

          // 获取2个数组不同的部分
          var arrStand = this.arrayDate(stand, newArr)
          var arrNoStand = this.arrayDate(nostand, newArr)
          var arrConTargeStand = this.arrayDate(contagionTargeStand, newArr)
          var arrConTargeNoStand = this.arrayDate(contagionTargeNoStand, newArr)

          arrStand.map(item => {
            stand.push(item)
          })
          arrNoStand.map(item => {
            nostand.push(item)
          })
          arrConTargeStand.map(item => {
            contagionTargeStand.push(item)
          })
          arrConTargeNoStand.map(item => {
            contagionTargeNoStand.push(item)
          })
        }

        stand.sort(this.compare('Name'))
        nostand.sort(this.compare('Name'))
        contagionTargeStand.sort(this.compare('Name'))
        contagionTargeNoStand.sort(this.compare('Name'))

        // 合并季度
        stand.map((item, index) => {
          item.Count = item.Count + contagionTargeStand[index].Count
        })
        stand.map((item, index) => {
          item.Total = item.Count + nostand[index].Count + contagionTargeNoStand[index].Count
        })
        // 不合格数据合并季度
        nostand.map((item, index) => {
          item.Count = item.Count + contagionTargeNoStand[index].Count
        })

        // 不合格数据总数
        for (let i = 0; i < nostand.length; i++) {
          for (let j = 0; j < stand.length; j++) {
            if (nostand[i].Name == stand[j].Name) {
              nostand[i].Total = stand[j].Total
            }
          }
        }

        for (let i = 0; i < stand.length; i++) {
          if (stand[i].Name == '1') {
            stand[i].Name = '第一季度'
          }
          if (stand[i].Name == '2') {
            stand[i].Name = '第二季度'
          }
          if (stand[i].Name == '3') {
            stand[i].Name = '第三季度'
          }
          if (stand[i].Name == '4') {
            stand[i].Name = '第四季度'
          }
          if (stand[i].Total == 0) {
            stand[i].Total = 1
          }
        }

        for (let i = 0; i < nostand.length; i++) {
          if (nostand[i].Name == '1') {
            nostand[i].Name = '第一季度'
          }
          if (nostand[i].Name == '2') {
            nostand[i].Name = '第二季度'
          }
          if (nostand[i].Name == '3') {
            nostand[i].Name = '第三季度'
          }
          if (nostand[i].Name == '4') {
            nostand[i].Name = '第四季度'
          }
          if (nostand[i].Total == 0) {
            nostand[i].Total = 1
          }
        }
        for (let i = 0; i < stand.length; i++) {
          this.modesData.xAxis.push(stand[i].Name)
          this.modesData.series.push(((stand[i].Count / stand[i].Total) * 100).toFixed(1))
        }
        for (let i = 0; i < nostand.length; i++) {
          this.modesData.seriestwo.push(((nostand[i].Count / nostand[i].Total) * 100).toFixed(1))
        }
        this.options.series[0].data = this.modesData.series
        this.options.series[1].data = this.modesData.seriestwo
        this.options.xAxis.data = this.modesData.xAxis
      })
    },
    // 指标按月份
    monthList () {
      this.modesData.series = []
      this.modesData.seriestwo = []
      this.modesData.xAxis = []
      const januaryStart = moment().month(0).startOf('month').format('YYYY-MM-DD')
      const januaryEnd = moment().month(0).endOf('month').format('YYYY-MM-DD')

      const febStart = moment().month(1).startOf('month').format('YYYY-MM-DD')
      const febEnd = moment().month(1).endOf('month').format('YYYY-MM-DD')

      const marchStart = moment().month(2).startOf('month').format('YYYY-MM-DD')
      const marchEnd = moment().month(2).endOf('month').format('YYYY-MM-DD')

      const aprStart = moment().month(3).startOf('month').format('YYYY-MM-DD')
      const aprEnd = moment().month(3).endOf('month').format('YYYY-MM-DD')

      const mayStart = moment().month(4).startOf('month').format('YYYY-MM-DD')
      const mayEnd = moment().month(4).endOf('month').format('YYYY-MM-DD')

      const junStart = moment().month(5).startOf('month').format('YYYY-MM-DD')
      const junEnd = moment().month(5).endOf('month').format('YYYY-MM-DD')

      const julStart = moment().month(6).startOf('month').format('YYYY-MM-DD')
      const julEnd = moment().month(6).endOf('month').format('YYYY-MM-DD')

      const augStart = moment().month(7).startOf('month').format('YYYY-MM-DD')
      const augEnd = moment().month(7).endOf('month').format('YYYY-MM-DD')

      const sepStart = moment().month(8).startOf('month').format('YYYY-MM-DD')
      const sepEnd = moment().month(8).endOf('month').format('YYYY-MM-DD')

      const octStart = moment().month(9).startOf('month').format('YYYY-MM-DD')
      const octEnd = moment().month(9).endOf('month').format('YYYY-MM-DD')

      const novStart = moment().month(10).startOf('month').format('YYYY-MM-DD')
      const novEnd = moment().month(10).endOf('month').format('YYYY-MM-DD')

      const decStart = moment().month(11).startOf('month').format('YYYY-MM-DD')
      const decEnd = moment().month(11).endOf('month').format('YYYY-MM-DD')

      const params = {
        januaryStart: januaryStart,
        januaryEnd: januaryEnd,
        febStart: febStart,
        febEnd: febEnd,
        marchStart: marchStart,
        marchEnd: marchEnd,
        aprStart: aprStart,
        aprEnd: aprEnd,
        mayStart: mayStart,
        mayEnd: mayEnd,
        junStart: junStart,
        junEnd: junEnd,
        julStart: julStart,
        julEnd: julEnd,
        augStart: augStart,
        augEnd: augEnd,
        sepStart: sepStart,
        sepEnd: sepEnd,
        octStart: octStart,
        octEnd: octEnd,
        novStart: novStart,
        novEnd: novEnd,
        decStart: decStart,
        decEnd: decEnd
      }
      getMonthTarget(params).then(response => {
        if (response.data.state == 1) {
          var stand = response.data.data.stand
          var nostand = response.data.data.nostand
          var contagionTargeStand = response.data.data.contagionTargeStand
          var contagionTargeNoStand = response.data.data.contagionTargeNoStand

          var newArr = [
            {Name: '1', Count: 0},
            {Name: '2', Count: 0},
            {Name: '3', Count: 0},
            {Name: '4', Count: 0},
            {Name: '5', Count: 0},
            {Name: '6', Count: 0},
            {Name: '7', Count: 0},
            {Name: '8', Count: 0},
            {Name: '9', Count: 0},
            {Name: '10', Count: 0},
            {Name: '11', Count: 0},
            {Name: '12', Count: 0}
          ]

          // 获取2个数组不同的部分
          var arrStand = this.arrayDate(stand, newArr)
          var arrNoStand = this.arrayDate(nostand, newArr)
          var arrConTargeStand = this.arrayDate(contagionTargeStand, newArr)
          var arrConTargeNoStand = this.arrayDate(contagionTargeNoStand, newArr)

          arrStand.map(item => {
            stand.push(item)
          })
          arrNoStand.map(item => {
            nostand.push(item)
          })
          arrConTargeStand.map(item => {
            contagionTargeStand.push(item)
          })
          arrConTargeNoStand.map(item => {
            contagionTargeNoStand.push(item)
          })

          stand.sort(this.compare('Name'))
          nostand.sort(this.compare('Name'))
          contagionTargeStand.sort(this.compare('Name'))
          contagionTargeNoStand.sort(this.compare('Name'))
          // 合并季度
          stand.map((item, index) => {
            item.Count = item.Count + contagionTargeStand[index].Count
          })
          stand.map((item, index) => {
            item.Total = item.Count + nostand[index].Count + contagionTargeNoStand[index].Count
          })
          // 不合格数据合并季度
          nostand.map((item, index) => {
            item.Count = item.Count + contagionTargeNoStand[index].Count
          })

          // 不合格数据总数
          for (let i = 0; i < nostand.length; i++) {
            for (let j = 0; j < stand.length; j++) {
              if (nostand[i].Name == stand[j].Name) {
                nostand[i].Total = stand[j].Total
              }
            }
          }

          for (let i = 0; i < stand.length; i++) {
            if (stand[i].Name == '1') {
              stand[i].Name = '一月'
            }
            if (stand[i].Name == '2') {
              stand[i].Name = '二月'
            }
            if (stand[i].Name == '3') {
              stand[i].Name = '三月'
            }
            if (stand[i].Name == '4') {
              stand[i].Name = '四月'
            }
            if (stand[i].Name == '5') {
              stand[i].Name = '五月'
            }
            if (stand[i].Name == '6') {
              stand[i].Name = '六月'
            }
            if (stand[i].Name == '7') {
              stand[i].Name = '七月'
            }
            if (stand[i].Name == '8') {
              stand[i].Name = '八月'
            }
            if (stand[i].Name == '9') {
              stand[i].Name = '九月'
            }
            if (stand[i].Name == '10') {
              stand[i].Name = '十月'
            }
            if (stand[i].Name == '11') {
              stand[i].Name = '十一月'
            }
            if (stand[i].Name == '12') {
              stand[i].Name = '十二月'
            }
            if (stand[i].Total == 0) {
              stand[i].Total = 1
            }
          }

          for (let i = 0; i < nostand.length; i++) {
            if (nostand[i].Name == '1') {
              nostand[i].Name = '一月'
            }
            if (nostand[i].Name == '2') {
              nostand[i].Name = '二月'
            }
            if (nostand[i].Name == '3') {
              nostand[i].Name = '三月'
            }
            if (nostand[i].Name == '4') {
              nostand[i].Name = '四月'
            }
            if (nostand[i].Name == '5') {
              nostand[i].Name = '五月'
            }
            if (nostand[i].Name == '6') {
              nostand[i].Name = '六月'
            }
            if (nostand[i].Name == '7') {
              nostand[i].Name = '七月'
            }
            if (nostand[i].Name == '8') {
              nostand[i].Name = '八月'
            }
            if (nostand[i].Name == '9') {
              nostand[i].Name = '九月'
            }
            if (nostand[i].Name == '10') {
              nostand[i].Name = '十月'
            }
            if (nostand[i].Name == '11') {
              nostand[i].Name = '十一月'
            }
            if (nostand[i].Name == '12') {
              nostand[i].Name = '十二月'
            }
            if (nostand[i].Total == 0) {
              nostand[i].Total = 1
            }
          }
          for (let i = 0; i < stand.length; i++) {
            this.modesData.xAxis.push(stand[i].Name)
            this.modesData.series.push(((stand[i].Count / stand[i].Total) * 100).toFixed(1))
          }
          for (let i = 0; i < nostand.length; i++) {
            this.modesData.seriestwo.push(((nostand[i].Count / nostand[i].Total) * 100).toFixed(1))
          }
          this.options.series[0].data = this.modesData.series
          this.options.series[1].data = this.modesData.seriestwo
          this.options.xAxis.data = this.modesData.xAxis
          this.getArrLength(this.options.xAxis.data)
        }
      })
    },

    // 血压指标统计按季度
    getQuarterBloodList () {
      this.modesData.series = []
      this.modesData.seriestwo = []
      this.modesData.xAxis = []
      // 第一季度
      const first_quarter_start = moment().startOf('year').format('YYYY-MM-DD')
      const first_qurter_end = moment().month(2).endOf('month').format('YYYY-MM-DD')

      // 第二季度
      const second_qurter_start = moment().month(3).startOf('month').format('YYYY-MM-DD')
      const second_qurter_end = moment().month(5).endOf('month').format('YYYY-MM-DD')

      // 第三季度
      const three_qurter_start = moment().month(6).startOf('month').format('YYYY-MM-DD')
      const three_qurter_end = moment().month(8).endOf('month').format('YYYY-MM-DD')

      // 第四季度
      const four_qurter_start = moment().month(9).startOf('month').format('YYYY-MM-DD')
      const four_qurter_end = moment().month(11).endOf('month').format('YYYY-MM-DD')

      const params = {
        first_quarter_start: first_quarter_start,
        first_qurter_end: first_qurter_end,
        second_qurter_start: second_qurter_start,
        second_qurter_end: second_qurter_end,
        three_qurter_start: three_qurter_start,
        three_qurter_end: three_qurter_end,
        four_qurter_start: four_qurter_start,
        four_qurter_end: four_qurter_end
      }
      getQuarterBloodList(params).then(response => {
        if (response.data.state == 1) {
          // 第一月合格总数
          var fisrtTotal = 0
          var firstCount = 0
          var firstArr = []
          // 第二个月合格总数
          var secondTotal = 0
          var secondCount = 0
          var secondArr = []
          // 第三个月合格总数
          var threeTotal = 0
          var threeCount = 0
          var threeArr = []
          // 第四个月合格总数
          var fourTotal = 0
          var fourCount = 0
          var fourArr = []
          var firtstlist = response.data.data.firtstlist

          var secondlist = response.data.data.secondlist

          var threelist = response.data.data.threelist

          var fourlist = response.data.data.fourlist

          var bloodPressure = response.data.data.bloodPressure
          var obj = {}
          var newArr = []
          for (let i = 0; i < bloodPressure.length; i++) {
            bloodPressure[0].min = bloodPressure[1].min_range
            bloodPressure[0].large = bloodPressure[1].large_range
          }

          for (let j = 0; j < bloodPressure.length; j++) {
            obj = bloodPressure[0]
          }
          newArr.push(obj)

          if (firtstlist.length > 0) {
            for (let i = 0; i < firtstlist.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((firtstlist[i].systolic_blood_pressure >= parseInt(newArr[j].min_range) && firtstlist[i].systolic_blood_pressure <= parseInt(newArr[j].large_range)) && (firtstlist[i].diastolic_blood_pressure >= parseInt(newArr[j].min) && firtstlist[i].diastolic_blood_pressure <= parseInt(newArr[j].large))) {
                  firstArr.push(firtstlist[i])
                }
              }
            }
          }
          firstCount = firstArr.length
          // debugger
          if (secondlist.length > 0) {
            for (let i = 0; i < secondlist.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((secondlist[i].systolic_blood_pressure >= parseInt(newArr[j].min_range) && secondlist[i].systolic_blood_pressure <= parseInt(newArr[j].large_range)) && (secondlist[i].diastolic_blood_pressure >= parseInt(newArr[j].min) && secondlist[i].diastolic_blood_pressure <= parseInt(newArr[j].large))) {
                  secondArr.push(secondlist[i])
                }
              }
            }
          }
          secondCount = secondArr.length

          if (threelist.length > 0) {
            for (let i = 0; i < threelist.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((threelist[i].systolic_blood_pressure >= parseInt(newArr[j].min_range) && threelist[i].systolic_blood_pressure <= parseInt(newArr[j].large_range)) && (threelist[i].diastolic_blood_pressure >= parseInt(newArr[j].min) && threelist[i].diastolic_blood_pressure <= parseInt(newArr[j].large))) {
                  threeArr.push(threelist[i])
                }
              }
            }
          }
          threeCount = threeArr.length

          if (fourlist.length > 0) {
            for (let i = 0; i < fourlist.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((fourlist[i].systolic_blood_pressure >= parseInt(newArr[j].min_range) && fourlist[i].systolic_blood_pressure <= parseInt(newArr[j].large_range)) && (fourlist[i].diastolic_blood_pressure >= parseInt(newArr[j].min) && fourlist[i].diastolic_blood_pressure <= parseInt(newArr[j].large))) {
                  fourArr.push(fourlist[i])
                }
              }
            }
          }
          fourCount = fourArr.length

          if (firtstlist.length == 0) {
            firstCount = 0
          } else {
            firstCount = firstArr.length
            fisrtTotal = firtstlist.length
          }
          if (secondlist.length == 0) {
            secondCount = 0
          } else {
            secondCount = secondArr.length
            secondTotal = secondlist.length
          }
          if (threelist.length == 0) {
            threeCount = 0
          } else {
            threeCount = threeArr.length
            threeTotal = threelist.length
          }
          if (fourlist.length == 0) {
            fourCount = 0
          } else {
            fourCount = fourArr.length
            fourTotal = fourlist.length
          }

          var arr = [
            {name: '第一季度', Count: 0, Total: 0, NoCount: 0},
            {name: '第二季度', Count: 0, Total: 0, NoCount: 0},
            {name: '第三季度', Count: 0, Total: 0, NoCount: 0},
            {name: '第四季度', Count: 0, Total: 0, NoCount: 0}
          ]

          for (let i = 0; i < arr.length; i++) {
            arr[0].Count = firstCount
            arr[0].Total = fisrtTotal
            arr[0].NoCount = fisrtTotal - firstCount
            arr[1].Count = secondCount
            arr[1].Total = secondTotal
            arr[1].NoCount = secondTotal - secondCount
            arr[2].Count = threeCount
            arr[2].Total = threeTotal
            arr[2].NoCount = threeTotal - threeCount
            arr[3].Count = fourCount
            arr[3].Total = fourTotal
            arr[3].NoCount = fourTotal - fourCount
          }
        }
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].Total == 0) {
            arr[i].Total = 1
          }
        }
        for (let i = 0; i < arr.length; i++) {
          this.modesData.xAxis.push(arr[i].name)
          this.modesData.series.push(((arr[i].Count / arr[i].Total) * 100).toFixed(1))
          this.modesData.seriestwo.push(((arr[i].NoCount / arr[i].Total) * 100).toFixed(1))
        }
        this.options.series[0].data = this.modesData.series
        this.options.series[1].data = this.modesData.seriestwo
        this.options.xAxis.data = this.modesData.xAxis
      })
    },
    // 指标按月份
    getMonthBloodList () {
      this.modesData.series = []
      this.modesData.seriestwo = []
      this.modesData.xAxis = []
      const januaryStart = moment().month(0).startOf('month').format('YYYY-MM-DD')
      const januaryEnd = moment().month(0).endOf('month').format('YYYY-MM-DD')

      const febStart = moment().month(1).startOf('month').format('YYYY-MM-DD')
      const febEnd = moment().month(1).endOf('month').format('YYYY-MM-DD')

      const marchStart = moment().month(2).startOf('month').format('YYYY-MM-DD')
      const marchEnd = moment().month(2).endOf('month').format('YYYY-MM-DD')

      const aprStart = moment().month(3).startOf('month').format('YYYY-MM-DD')
      const aprEnd = moment().month(3).endOf('month').format('YYYY-MM-DD')

      const mayStart = moment().month(4).startOf('month').format('YYYY-MM-DD')
      const mayEnd = moment().month(4).endOf('month').format('YYYY-MM-DD')

      const junStart = moment().month(5).startOf('month').format('YYYY-MM-DD')
      const junEnd = moment().month(5).endOf('month').format('YYYY-MM-DD')

      const julStart = moment().month(6).startOf('month').format('YYYY-MM-DD')
      const julEnd = moment().month(6).endOf('month').format('YYYY-MM-DD')

      const augStart = moment().month(7).startOf('month').format('YYYY-MM-DD')
      const augEnd = moment().month(7).endOf('month').format('YYYY-MM-DD')

      const sepStart = moment().month(8).startOf('month').format('YYYY-MM-DD')
      const sepEnd = moment().month(8).endOf('month').format('YYYY-MM-DD')

      const octStart = moment().month(9).startOf('month').format('YYYY-MM-DD')
      const octEnd = moment().month(9).endOf('month').format('YYYY-MM-DD')

      const novStart = moment().month(10).startOf('month').format('YYYY-MM-DD')
      const novEnd = moment().month(10).endOf('month').format('YYYY-MM-DD')

      const decStart = moment().month(11).startOf('month').format('YYYY-MM-DD')
      const decEnd = moment().month(11).endOf('month').format('YYYY-MM-DD')
      const params = {
        januaryStart: januaryStart,
        januaryEnd: januaryEnd,
        febStart: febStart,
        febEnd: febEnd,
        marchStart: marchStart,
        marchEnd: marchEnd,
        aprStart: aprStart,
        aprEnd: aprEnd,
        mayStart: mayStart,
        mayEnd: mayEnd,
        junStart: junStart,
        junEnd: junEnd,
        julStart: julStart,
        julEnd: julEnd,
        augStart: augStart,
        augEnd: augEnd,
        sepStart: sepStart,
        sepEnd: sepEnd,
        octStart: octStart,
        octEnd: octEnd,
        novStart: novStart,
        novEnd: novEnd,
        decStart: decStart,
        decEnd: decEnd
      }
      getMonthBloodList(params).then(response => {
        if (response.data.state == 1) {
          // 一月总数
          var januaryTotal = 0
          var januaryCount = 0
          var janArr = []
          // 二月总数
          var febTotal = 0
          var febCount = 0
          var febArr = []
          // 三月总数
          var marTotal = 0
          var marCount = 0
          var marArr = []
          // 四月总数
          var aprTotal = 0
          var aprCount = 0
          var aprArr = []
          // 五月总数
          var mayTotal = 0
          var mayCount = 0
          var mayArr = []
          // 六月总数
          var junTotal = 0
          var junCount = 0
          var junArr = []
          // 七月总数
          var julTotal = 0
          var julCount = 0
          var julArr = []
          // 八月总数
          var augTotal = 0
          var augCount = 0
          var augArr = []
          // 九月总数
          var sepTotal = 0
          var sepCount = 0
          var sepArr = []
          // 十月总数
          var octTotal = 0
          var octCount = 0
          var octArr = []
          // 十一月总数
          var novTotal = 0
          var novCount = 0
          var novArr = []
          // 十二月
          var decTotal = 0
          var decCount = 0
          var decArr = []

          var januaryList = response.data.data.januaryList
          var febList = response.data.data.febList
          var marList = response.data.data.marList
          var aprList = response.data.data.aprList
          var mayList = response.data.data.mayList
          var junList = response.data.data.junList
          var julList = response.data.data.julList
          var augList = response.data.data.augList
          var sepList = response.data.data.sepList
          var octList = response.data.data.octList
          var novList = response.data.data.novList
          var decList = response.data.data.decList
          var bloodPressure = response.data.data.bloodPressure
          var obj = {}
          var newArr = []
          for (let i = 0; i < bloodPressure.length; i++) {
            bloodPressure[0].min = bloodPressure[1].min_range
            bloodPressure[0].large = bloodPressure[1].large_range
          }

          for (let j = 0; j < bloodPressure.length; j++) {
            obj = bloodPressure[0]
          }
          newArr.push(obj)
          // 1月
          if (januaryList.length > 0) {
            for (let i = 0; i < januaryList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((januaryList[i].systolic_blood_pressure >= newArr[j].min_range && januaryList[i].systolic_blood_pressure <= newArr[j].large_range) && (januaryList[i].diastolic_blood_pressure >= newArr[j].min && januaryList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  janArr.push(januaryList[i])
                }
              }
            }
          }
          // 2月
          if (febList.length > 0) {
            for (let i = 0; i < febList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((febList[i].systolic_blood_pressure >= newArr[j].min_range && febList[i].systolic_blood_pressure <= newArr[j].large_range) && (febList[i].diastolic_blood_pressure >= newArr[j].min && febList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  febArr.push(febList[i])
                }
              }
            }
          }
          // 3月
          if (marList.length > 0) {
            for (let i = 0; i < marList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((marList[i].systolic_blood_pressure >= newArr[j].min_range && marList[i].systolic_blood_pressure <= newArr[j].large_range) && (marList[i].diastolic_blood_pressure >= newArr[j].min && marList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  marArr.push(marList[i])
                }
              }
            }
          }
          // 4月
          if (aprList.length > 0) {
            for (let i = 0; i < aprList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((aprList[i].systolic_blood_pressure >= newArr[j].min_range && aprList[i].systolic_blood_pressure <= newArr[j].large_range) && (aprList[i].diastolic_blood_pressure >= newArr[j].min && aprList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  aprArr.push(aprList[i])
                }
              }
            }
          }
          // 5月
          if (mayList.length > 0) {
            for (let i = 0; i < mayList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((mayList[i].systolic_blood_pressure >= newArr[j].min_range && mayList[i].systolic_blood_pressure <= newArr[j].large_range) && (mayList[i].diastolic_blood_pressure >= newArr[j].min && mayList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  mayArr.push(mayList[i])
                }
              }
            }
          }
          // 6月
          if (junList.length > 0) {
            for (let i = 0; i < junList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((junList[i].systolic_blood_pressure >= newArr[j].min_range && junList[i].systolic_blood_pressure <= newArr[j].large_range) && (junList[i].diastolic_blood_pressure >= newArr[j].min && junList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  junArr.push(junList[i])
                }
              }
            }
          }
          // 7月
          if (julList.length > 0) {
            for (let i = 0; i < julList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((julList[i].systolic_blood_pressure >= newArr[j].min_range && julList[i].systolic_blood_pressure <= newArr[j].large_range) && (julList[i].diastolic_blood_pressure >= newArr[j].min && julList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  julArr.push(julList[i])
                }
              }
            }
          }
          // 8月
          if (augList.length > 0) {
            for (let i = 0; i < augList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((augList[i].systolic_blood_pressure >= newArr[j].min_range && augList[i].systolic_blood_pressure <= newArr[j].large_range) && (augList[i].diastolic_blood_pressure >= newArr[j].min && augList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  augArr.push(augList[i])
                }
              }
            }
          }
          // 9月
          if (sepList.length > 0) {
            for (let i = 0; i < sepList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((sepList[i].systolic_blood_pressure >= newArr[j].min_range && sepList[i].systolic_blood_pressure <= newArr[j].large_range) && (sepList[i].diastolic_blood_pressure >= newArr[j].min && sepList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  sepArr.push(sepList[i])
                }
              }
            }
          }
          // 10月
          if (octList.length > 0) {
            for (let i = 0; i < octList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((octList[i].systolic_blood_pressure >= newArr[j].min_range && octList[i].systolic_blood_pressure <= newArr[j].large_range) && (octList[i].diastolic_blood_pressure >= newArr[j].min && octList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  octArr.push(octList[i])
                }
              }
            }
          }
          // 11月
          if (novList.length > 0) {
            for (let i = 0; i < novList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((novList[i].systolic_blood_pressure >= newArr[j].min_range && novList[i].systolic_blood_pressure <= newArr[j].large_range) && (novList[i].diastolic_blood_pressure >= newArr[j].min && novList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  novArr.push(novList[i])
                }
              }
            }
          }
          // 12月
          if (decList.length > 0) {
            for (let i = 0; i < decList.length; i++) {
              for (let j = 0; j < newArr.length; j++) {
                if ((decList[i].systolic_blood_pressure >= newArr[j].min_range && decList[i].systolic_blood_pressure <= newArr[j].large_range) && (decList[i].diastolic_blood_pressure >= newArr[j].min && decList[i].diastolic_blood_pressure <= newArr[j].large_range)) {
                  decArr.push(decList[i])
                }
              }
            }
          }

          // 一月
          if (januaryList.length == 0) {
            januaryCount = 0
          } else {
            januaryCount = janArr.length
            januaryTotal = januaryList.length
          }
          // 二月
          if (febList.length == 0) {
            febCount = 0
          } else {
            febCount = febArr.length
            febTotal = febList.length
          }
          // 三月
          if (marList.length == 0) {
            marCount = 0
          } else {
            marCount = marArr.length
            marTotal = marList.length
          }
          // 4月
          if (aprList.length == 0) {
            aprCount = 0
          } else {
            aprCount = aprArr.length
            aprTotal = aprList.length
          }
          // 5月
          if (mayList.length == 0) {
            mayCount = 0
          } else {
            mayCount = mayArr.length
            mayTotal = mayList.length
          }
          // 6月
          if (junList.length == 0) {
            junCount = 0
          } else {
            junCount = junArr.length
            junTotal = junList.length
          }
          // 7月
          if (julList.length == 0) {
            julCount = 0
          } else {
            julCount = julArr.length
            julTotal = julList.length
          }
          // 8月
          if (augList.length == 0) {
            augCount = 0
          } else {
            augCount = augArr.length
            augTotal = augList.length
          }

          // 9月
          if (sepList.length == 0) {
            sepCount = 0
          } else {
            sepCount = sepArr.length
            sepTotal = sepList.length
          }
          // 10月
          if (octList.length == 0) {
            octCount = 0
          } else {
            octCount = octArr.length
            octTotal = octList.length
          }
          // 11月
          if (novList.length == 0) {
            novCount = 0
          } else {
            novCount = novArr.length
            novTotal = novList.length
          }
          // 12月
          if (decList.length == 0) {
            decCount = 0
          } else {
            decCount = decArr.length
            decTotal = decList.length
          }

          var arr = [
            {name: '一月', Count: 0, Total: 0, NoCount: 0},
            {name: '二月', Count: 0, Total: 0, NoCount: 0},
            {name: '三月', Count: 0, Total: 0, NoCount: 0},
            {name: '四月', Count: 0, Total: 0, NoCount: 0},
            {name: '五月', Count: 0, Total: 0, NoCount: 0},
            {name: '六月', Count: 0, Total: 0, NoCount: 0},
            {name: '七月', Count: 0, Total: 0, NoCount: 0},
            {name: '八月', Count: 0, Total: 0, NoCount: 0},
            {name: '九月', Count: 0, Total: 0, NoCount: 0},
            {name: '十月', Count: 0, Total: 0, NoCount: 0},
            {name: '十一月', Count: 0, Total: 0, NoCount: 0},
            {name: '十二月', Count: 0, Total: 0, NoCount: 0}
          ]
          for (let i = 0; i < arr.length; i++) {
            arr[0].Count = januaryCount
            arr[0].Total = januaryTotal
            arr[0].NoCount = januaryTotal - januaryCount
            arr[1].Count = febCount
            arr[1].Total = febTotal
            arr[1].NoCount = febTotal - febCount
            arr[2].Count = marCount
            arr[2].Total = marTotal
            arr[2].NoCount = marTotal - marCount
            arr[3].Count = aprCount
            arr[3].Total = aprTotal
            arr[3].NoCount = aprTotal - aprCount
            arr[4].Count = mayCount
            arr[4].Total = mayTotal
            arr[4].NoCount = mayTotal - mayCount
            arr[5].Count = junCount
            arr[5].Total = junTotal
            arr[5].NoCount = junTotal - junCount
            arr[6].Count = julCount
            arr[6].Total = julTotal
            arr[6].NoCount = julTotal - julCount
            arr[7].Count = augCount
            arr[7].Total = augTotal
            arr[7].NoCount = augTotal - augCount
            arr[8].Count = sepCount
            arr[8].Total = sepTotal
            arr[8].novCount = sepTotal - sepCount
            arr[9].Count = octCount
            arr[9].Total = octTotal
            arr[9].NoCount = octTotal - octCount
            arr[10].Count = novCount
            arr[10].Total = novTotal
            arr[10].NoCount = novTotal - novCount
            arr[11].Count = decCount
            arr[11].Total = decTotal
            arr[11].NoCount = decTotal - decCount
          }
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].Total == 0) {
              arr[i].Total = 1
            }
          }
          // console.log('arr', arr)
          for (let i = 0; i < arr.length; i++) {
            this.modesData.xAxis.push(arr[i].name)
            this.modesData.series.push(((arr[i].Count / arr[i].Total) * 100).toFixed(1))
            this.modesData.seriestwo.push(((arr[i].NoCount / arr[i].Total) * 100).toFixed(1))
          }
          this.options.series[0].data = this.modesData.series
          this.options.series[1].data = this.modesData.seriestwo
          this.options.xAxis.data = this.modesData.xAxis
          this.getArrLength(this.options.xAxis.data)
        }
      })
    },
    arrayDate (array1, array2) {
      var array1 = array1
      var array2 = array2
      var result = []
      for (var i = 0; i < array2.length; i++) {
        var obj = array2[i]
        var num = obj.Name // staff_id   就是要对比的key
        var isExist = false
        for (var j = 0; j < array1.length; j++) {
          var aj = array1[j]
          var n = aj.Name
          if (n == num) {
            isExist = true
            break
          }
        }
        if (!isExist) {
          result.push(obj)
        }
      }
      return result
    },
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    getArrLength (result) {
      if (result.length > 4) {
        var dataZoom_end = (4 / result.length) * 100
        this.options.dataZoom[0].end = dataZoom_end
      } else {
        var dataZoom_end = 100
        this.options.dataZoom[0].end = dataZoom_end
      }
    }
  },
  created () {
    this.tabName = this.$route.query.tabName
    this.getMobileNormData()
  }
}
</script>

<style lang="scss" scoped>
.page_patients{
    .optionsBox {
    display: flex;
    height: 3.125rem;
    align-items: center;
    .optionsOne {
      //   max-width: 8.75rem;
      //   min-width: 6.25rem;
      padding: 0 0.75rem;
      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;
    }
  }
  .quarterBox {
    display: flex;
    justify-content: space-around;
    p {
      width: 4.6875rem;
      height: 1.875rem;
      line-height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      opacity: 0.8;
      border-radius: 0.3125rem;
      color: #8d8d8d;
      cursor: pointer;
      text-align: center;
      font-size: 0.8125rem;
    }
    .active {
      background: rgba(51, 138, 251, 1);
      color: #fff;
      border: 1px solid #338afb;
    }
  }
  .month {
    overflow-x: auto;
  }
  .monthBox {
    width: 50rem;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    p {
      //   width: 2.5rem;
      padding: 0 0.875rem;
      height: 1.875rem;
      line-height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      opacity: 0.8;
      border-radius: 0.3125rem;
      color: #8d8d8d;
      cursor: pointer;
      text-align: center;
      font-size: 0.8125rem;
      margin-left: 0.625rem;
    }
    .active {
      background: rgba(51, 138, 251, 1);
      color: #fff;
      border: 1px solid #338afb;
    }
  }
  .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;
    }
  }
  .checkDetail{
    height:2.75rem;
    line-height: 2.75rem;
    text-align: center;
    width: 100%;
    background: #338afb;
    color:#fff;
    font-size: 0.875rem;
    border-radius: 30px;
  }
  .chart2 {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin: 0 0 0 0.8125rem;
  }
  .chart {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
    // margin-top: 1.375rem;
  }
  .rangeBox {
    margin-left: 0.8125rem;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    .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;
    }
  }
  .rangeMain {
    display: flex;
    flex-wrap: wrap;
    padding-left: 2.125rem;
    p {
      margin-right: 1.625rem;
      font-size: 0.75rem;
      color: #a09ba3;
      margin-bottom: 0.875rem;
    }
  }
}
::-webkit-scrollbar {
  height: 0 !important;
  width: 0;
}

</style>
