<template>
  <div class="page_patientStatistics">
    <van-sticky>
      <div class="patientStatisticsTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="toReturn"></i>
        <span class="titleName">患者质控达标统计</span>
      </div>
    </van-sticky>
    <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>
      <div class="options">
        <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>
      <bar-chart :options="options" :width="width" :height="height"></bar-chart>
    </div>

    <div class="chart1" style="margin-bottom: 0.5rem;">统计表</div>
    <div>
      <el-table ref="tab" :data="tableData" style="width: 100%"  :height="tableHeight" v-loadmore="loadMore" v-loading="loading" border :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
        <el-table-column fixed="left"  prop="name" label="姓名" width="80">
        </el-table-column>
        <el-table-column prop="date" label="透析号" width="100">
            <template slot-scope="scope">
                 {{scope.row.dialysis_no}}
              </template>
        </el-table-column>
         <el-table-column
              :label="modeItem.item_name"
              property="number"
              align="center"
              min-width="100"
              v-for="(modeItem, index) in normData"
              :key="index"
            >
            <template slot-scope="scope">
                <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value == ''">0</span>
                <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value !=''&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) < parseInt(scope.row.data[modeItem.item_name].range_min))">
                  <span >{{scope.row.data[modeItem.item_name].inspect_value}}</span><span style="color:#5B98FF;margin-left:5px;">↓</span>
                </span>
                <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value !=''&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) > parseInt(scope.row.data[modeItem.item_name].range_max))">
                  <span>{{scope.row.data[modeItem.item_name].inspect_value}}</span><span style="color:#F56C6C;margin-left:5px;">↑</span>
                </span>
                <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value !=''&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) >= parseInt(scope.row.data[modeItem.item_name].range_min))&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) <= parseInt(scope.row.data[modeItem.item_name].range_max)) ">{{scope.row.data[modeItem.item_name].inspect_value}}</span>
                <span v-if="scope.row.data[modeItem.item_name].range_type == 2 && scope.row.data[modeItem.item_name].inspect_value !=''">
                <span v-if="scope.row.data[modeItem.item_name].range_value == scope.row.data[modeItem.item_name].inspect_value">
                   <span style="color:#5B98FF;margin-left:5px;" >{{scope.row.data[modeItem.item_name].inspect_value}}</span>
                </span>
                 <span v-if="scope.row.data[modeItem.item_name].range_value != scope.row.data[modeItem.item_name].inspect_value">
                   <span style="color:#F56C6C;margin-left:5px;" >{{scope.row.data[modeItem.item_name].inspect_value}}</span>
                </span>
              </span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="70">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="toDetail(scope.row.patient_id,scope.row.inspect_date)"
              style="font-size:15px;"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <scroll-top></scroll-top>

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

<script>
import { PostSearch } from '@/api/patient'
import echarts from 'echarts'
import BarChart from '../dqc/components/BarChart'
import ScrollTop from '../dqc/components/ScrollTop'
import {getMobileNormData, getMobilePatientsControl, getMobileCartogramlist, getMobilePatientList, toSearchPatientsControl} from '@/api/common/common'
export default {
  components: {
    BarChart,
    ScrollTop
  },
  data () {
    return {
      search_value: '',
      loading: false,
      isStop: false,
      width: '100%',
      height: '184px',
      tableHeight: '',
      searchValue: '',
      state: '全部病人',
      type: '全部',
      stateShow: false,
      typeShow: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      columns1: ['全部', '留治', '转出'],
      columns2: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      startShow: false,
      endShow: false,
      currentDate: new Date(),
      startTime: '请选择',
      endTime: '请选择',
      currentDate1: new Date(new Date().setMonth(new Date().getMonth() - 3)),
      currentDate2: new Date(),
      // minDate: new Date(1970, 0, 1),
      // maxDate: new Date(2025, 10, 1),
      options: {
        backgroundColor: '#fff',
        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: ['78.57', '50'],
            barWidth: 20,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: (params) => {
                  if (this.obj.length > 0) {
                    let str = ''
                    str = '(' + this.obj[params.dataIndex] + '人' + ',' + params.data + '%' + ')'
                    return str
                  } else {
                    let str = ''
                    str = params.data + '%'
                    return str
                  }
                }
              }
            },
            // 配置样式
            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.5)'
              }
            }
          }
        ]
      },
      tableData: [],
      tablePatients: [],
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
      maxDate: new Date(),
      normData: [],
      ObjectData: {},
      lapstor: 0,
      page: 1,
      limit: 20,
      total: 0,
      modesData: {
        xAxis: [],
        series: []
      },
      dataName: [
        {id: 0, name: '达标'},
        {id: 1, name: '未达标'}
      ],
      dataCount: [
        {id: 0, count: 0},
        {id: 1, count: 0}
      ],
      patientsArr: [],
      obj: [],
      tab: 0
    }
  },
  methods: {
    chooseState (val) {
      this.state = val
      this.stateShow = false
    },
    chooseType (val) {
      this.typeShow = false
      if (val == '全部') {
        this.lapstor = 0
      }
      if (val == '留治') {
        this.lapstor = 1
      }
      if (val == '转出') {
        this.lapstor = 2
      }
    },
    getstartTime (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.startTime = `${year}-${month}-${day}`

      this.startShow = false
    },
    getstartTime2 (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.endTime = `${year}-${month}-${day}`

      this.endShow = false
    },
    loadMore () {
      if (!this.isStop) {
        this.isStop = true
        this.page++
        const params = {
          lapstor: this.lapstor,
          startime: this.startTime,
          endtime: this.endTime,
          limit: this.limit,
          page: this.page
        }
        getMobilePatientsControl(params).then(response => {
          if (response.data.state === 1) {
            var patients = response.data.data.patients
            this.tablePatients = patients
            var total = response.data.data.total
            this.total = total
            var control = response.data.data.control

            var newArr = []

            // 分页
            for (let i = 0; i < control.length; i++) {
              for (let j = 0; j < patients.length; j++) {
                if (control[i].inspect_date == patients[j].inspect_date) {
                  newArr.push(control[i])
                }
              }
            }
            let dataInfo = {}
            newArr.forEach((item, index) => {
              let { inspect_date } = item
              if (!dataInfo[inspect_date]) {
                dataInfo[inspect_date] = {
                  inspect_date,
                  name: item.name,
                  child: [],
                  inspect_date: item.inspect_date

                }
              }
            })
            let list = Object.values(dataInfo)
            // console.log('list', list)
            list.map(item => {
              for (let i = 0; i < newArr.length; i++) {
                if (item.inspect_date == newArr[i].inspect_date) {
                  item.child.push(newArr[i])
                }
              }
            })
            // console.log('listwi', list)
            var newarrtwo = []
            list.map(item => {
              item.child.map(it => {
                newarrtwo.push(it)
              })
            })

            // 配置的才显示

            var arrthree = []
            for (let i = 0; i < newarrtwo.length; i++) {
              for (let j = 0; j < this.normData.length; j++) {
                if (newarrtwo[i].item_id == this.normData[j].inspection_minor) {
                  arrthree.push(newarrtwo[i])
                }
              }
            }

            var arrfour = this.arrayDate(arrthree, newarrtwo)
            arrfour.map(item => {
              item.item_name = ''
              arrthree.push(item)
            })

            var dd = {}
            for (const index in arrthree) {
              if (!(arrthree[index].inspect_date in dd)) {
                dd[arrthree[index].inspect_date] = {}
              }
              if (!(arrthree[index].item_name in dd[arrthree[index].inspect_date]) && arrthree[index].item_name != 0) {
                dd[arrthree[index].inspect_date][arrthree[index].item_name] = arrthree[index]
              }
            }
            // console.log('dd', dd)
            for (const key in dd) {
              for (const mkey in this.ObjectData) {
                if (!(this.ObjectData[mkey].item_name in dd[key])) {
                  dd[key][this.ObjectData[mkey].item_name] = {
                    item_name: this.ObjectData[mkey].item_name,
                    name: mkey,
                    inspect_value: 0
                  }
                }
              }
              this.tableData.push({ name: key, data: dd[key]})
            }
            // console.log('this.tableData', this.tableData)

            let dataInfotwo = {}
            newArr.forEach((item, index) => {
            // eslint-disable-next-line camelcase
              let { inspect_date } = item
              if (!dataInfotwo[inspect_date]) {
                dataInfotwo[inspect_date] = {
                  inspect_date,
                  name: item.name
                }
              }
            })
            let listtwo = Object.values(dataInfotwo)
            listtwo.map(item => {
              this.tableData.map(it => {
                if (item.inspect_date == parseInt(it.name)) {
                  it.name = item.name
                  it.inspect_date = item.inspect_date
                }
              })
            })
            // console.log('表哥', this.tableData)
            let newData = this.tableData

            this.tableData = []
            newData.map(item => {
              this.tableData.push(item)
            })
            if (response.data.data.patients.length <= 0) {
              this.isStop = true
            } else {
              this.isStop = false
            }
          }
        })
      }
    },
    initStartTime (value) {
      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}`
    },
    initEndTime (value) {
      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}`
    },
    getMobileNormData () {
      getMobileNormData().then(response => {
        var normdata = response.data.data.normdata
        // console.log('normdate', normdata)
        this.normData = normdata
        var a = []
        for (let i = 0; i < normdata.length; i++) {
          a.push(normdata[i])
        }
        this.newArr = a
        var arr = this.arrayToObj(a)
        this.ObjectData = arr
      })
    },
    getlist () {
      this.loading = true
      const params = {
        lapstor: this.lapstor,
        startime: this.startTime,
        endtime: this.endTime,
        limit: this.limit,
        page: this.page
      }
      getMobilePatientsControl(params).then(response => {
        if (response.data.state === 1) {
          this.loading = false
          var patients = response.data.data.patients
          // console.log('patients', patients)
          this.tablePatients = patients
          var total = response.data.data.total
          this.total = total
          var control = response.data.data.control
          var infectiousControl = response.data.data.infectiousControl
          // console.log('infectiousControl', infectiousControl)
          infectiousControl.map(item => {
            control.push(item)
          })
          // console.log('control', control)
          // 分页
          var newArr = []
          for (let i = 0; i < control.length; i++) {
            for (let j = 0; j < patients.length; j++) {
              if (control[i].inspect_date == patients[j].inspect_date) {
                newArr.push(control[i])
              }
            }
          }
          // console.log('newArr', newArr)
          let dataInfo = {}
          newArr.forEach((item, index) => {
            // eslint-disable-next-line camelcase
            let { inspect_date } = item
            if (!dataInfo[inspect_date]) {
              dataInfo[inspect_date] = {
                inspect_date,
                name: item.name,
                child: [],
                patient_id: item.patient_id,
                range_type: item.range_type
              }
            }
          })
          let list = Object.values(dataInfo)
          // console.log('list', list)
          list.map(item => {
            for (let i = 0; i < newArr.length; i++) {
              if (item.inspect_date == newArr[i].inspect_date) {
                item.child.push(newArr[i])
              }
            }
          })
          // console.log('list', list)
          var newarrtwo = []
          list.map(item => {
            item.child.map(it => {
              newarrtwo.push(it)
            })
          })
          var arrthree = []
          for (let i = 0; i < newarrtwo.length; i++) {
            for (let j = 0; j < this.normData.length; j++) {
              if (newarrtwo[i].item_id == this.normData[j].inspection_minor) {
                arrthree.push(newarrtwo[i])
              }
            }
          }

          var arrfour = this.arrayDate(arrthree, newarrtwo)
          arrfour.map(item => {
            item.item_name = ''
            arrthree.push(item)
          })
          // console.log('arrfour', arrfour)
          var dd = {}
          for (const index in arrthree) {
            if (!(arrthree[index].inspect_date in dd)) {
              dd[arrthree[index].inspect_date] = {}
            }
            if (!(arrthree[index].item_name in dd[arrthree[index].inspect_date]) && arrthree[index].item_name != 0) {
              dd[arrthree[index].inspect_date][arrthree[index].item_name] = arrthree[index]
            }
          }
          // console.log('dd', dd)
          let dataInfotwo = {}
          newArr.forEach((item, index) => {
            // eslint-disable-next-line camelcase
            let { inspect_date } = item
            if (!dataInfotwo[inspect_date]) {
              dataInfotwo[inspect_date] = {
                inspect_date,
                name: item.name,
                child: [],
                patient_id: item.patient_id
              }
            }
          })
          let listtwo = Object.values(dataInfotwo)
          // console.log('listtwo', listtwo)

          for (const key in dd) {
            for (const mkey in this.ObjectData) {
              if (!(this.ObjectData[mkey].item_name in dd[key])) {
                dd[key][this.ObjectData[mkey].item_name] = {
                  item_name: this.ObjectData[mkey].item_name,
                  name: mkey,
                  inspect_value: 0,
                  range_type: this.ObjectData[mkey].range_type
                }
              }
            }
            this.tableData.push({ name: key, data: dd[key]})
          }
          listtwo.map(item => {
            this.tableData.map(it => {
              if (item.inspect_date == parseInt(it.name)) {
                it.name = item.name
                it.inspect_date = item.inspect_date
              }
            })
          })
          for (let i = 0; i < this.patientsArr.length; i++) {
            for (let j = 0; j < this.tableData.length; j++) {
              if (this.patientsArr[i].name == this.tableData[j].name) {
                this.tableData[j].dialysis_no = this.patientsArr[i].dialysis_no
                this.tableData[j].patient_id = this.patientsArr[i].id
              }
            }
          }
          // console.log('表哥123', this.tableData)
          this.$nextTick(() => {
            this.$refs.tab.doLayout()
          })
        } else {
          this.loading = false
        }
      })
    },

    arrayToObj (arr) {
      return Object.assign({}, arr)
    },

    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.item_id // staff_id   就是要对比的key
        var isExist = false
        for (var j = 0; j < array1.length; j++) {
          var aj = array1[j]
          var n = aj.item_id
          if (n == num) {
            isExist = true
            break
          }
        }
        if (!isExist) {
          result.push(obj)
        }
      }
      return result
    },
    getDialysisNo (name) {
      var dialysis_no = 0
      for (let i = 0; i < this.tablePatients.length; i++) {
        if (name == this.tablePatients[i].name) {
          dialysis_no = this.tablePatients[i].dialysis_no
        }
      }
      return dialysis_no
    },
    getMobileCartogramlist () {
      this.modesData.series = []
      this.modesData.xAxis = []
      const params = {
        lapstor: this.lapstor,
        startime: this.startTime,
        endtime: this.endTime,
        limit: this.limit,
        page: this.page
      }
      getMobileCartogramlist(params).then(response => {
        if (response.data.state == 1) {

          var patients = response.data.data.patients

          this.tablePatients = patients

        var total = response.data.data.total
        this.total = total
        var control = response.data.data.control

        var infectiousControl = response.data.data.infectiousControl

      infectiousControl.map(item => {
        control.push(item)
      })

        var newArr = []
        // 分页
        for (let i = 0; i < control.length; i++) {
          for (let j = 0; j < patients.length; j++) {
            if (control[i].patient_id == patients[j].patient_id) {
              newArr.push(control[i])
            }
          }
        }
          let dataInfo = {}
          newArr.forEach((item, index) => {
            let { patient_id } = item
            if (!dataInfo[patient_id]) {
              dataInfo[patient_id] = {
                name: item.name,
                child: [],
                patient_id: item.patient_id,
                range_type: item.range_type
              }
            }
          })
        let list = Object.values(dataInfo)


        list.map(item => {
          for (let i = 0; i < newArr.length; i++) {
            if (item.patient_id == newArr[i].patient_id) {
              item.child.push(newArr[i])
            }
          }
        })



          var newarrtwo = []
          list.map(item => {
            item.child.map(it => {
              newarrtwo.push(it)
            })
          })

          // console.log(list)
          // console.log(newarrtwo)


          // 配置的才显示
          var arrthree = []
          for (let i = 0; i < newarrtwo.length; i++) {
            for (let j = 0; j < this.normData.length; j++) {
              if (newarrtwo[i].item_id == this.normData[j].inspection_minor) {
                arrthree.push(newarrtwo[i])
              }
            }
          }
        // console.log('arrthree', arrthree)
        var arrfour = this.arrayDate(arrthree, newarrtwo)
        arrfour.map(item => {
          item.item_name = ''
          arrthree.push(item)
        })



          var dd = {}
          for (const index in arrthree) {
            if (!(arrthree[index].patient_id in dd)) {
              dd[arrthree[index].patient_id] = {}
            }
            if (!(arrthree[index].item_name in dd[arrthree[index].patient_id]) && arrthree[index].item_name != 0) {
              dd[arrthree[index].patient_id][arrthree[index].item_name] = arrthree[index]

            }
          }

        let dataInfotwo = {}
        newArr.forEach((item, index) => {
          let { patient_id } = item
          if (!dataInfotwo[patient_id]) {
            dataInfotwo[patient_id] = {
              patient_id,
              name: item.name,
              inspect_value: item.inspect_value,
              id: item.id,
            }
          }
        })
        let listtwo = Object.values(dataInfotwo)

      for (const key in dd) {
        for (const mkey in this.ObjectData) {
          if (!(this.ObjectData[mkey].item_name in dd[key])) {
            dd[key][this.ObjectData[mkey].item_name] = {
              item_name: this.ObjectData[mkey].item_name,
              name: mkey,
              inspect_value: 0,
              range_type: this.ObjectData[mkey].range_type
            }
          }
        }
        this.tableData.push({ name: key, data: dd[key] })
      }

      listtwo.map(item => {
        this.tableData.map(it => {
          if (item.patient_id == parseInt(it.name)) {
            it.name = item.name
            it.id = item.id
            it.inspect_date = item.inspect_date
          }
        })
      })

      for (let i = 0; i < this.patientsArr.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          if (this.patientsArr[i].name == this.tableData[j].name) {
            this.tableData[j].dialysis_no = this.patientsArr[i].dialysis_no
            this.tableData[j].patient_id = this.patientsArr[i].id
          }
        }
      }
        }
      })
    },
    toDetail (id, inspectdate) {
      this.$router.push({ path: '/dqc/patientdetailstatics?patientid=' + id + '&date=' + inspectdate + '&tabActive=' + this.tab})
    },
    deleteRow () {
    },
    getMobilePatientList () {
      getMobilePatientList().then(response => {
        if (response.data.state == 1) {
          var patients = response.data.data.patients
          this.patientsArr = patients
          this.getlist()
          // console.log('病人列表', patients)
        }
      })
    },
    querySearchAsync (keyword, cb) {
      let key = ''
      if (keyword != undefined) {
        key = keyword
      }
      let searchArray = []
      PostSearch(key).then(response => {
        if (response.data.state == 1) {
          searchArray = response.data.data.patient
          cb(searchArray)
        } else {
          cb([])
        }
      })
    },
    handleSelect (val) {
      this.search_value = val.name
      this.isStop = false
      const params = {
        id: val.id,
        startime: this.startTime,
        endtime: this.endTime
      }
      toSearchPatientsControl(params).then(response => {
        if (response.data.state == 1) {
          var control = response.data.data.control

          let dataInfo = {}
          control.forEach((item, index) => {
            let { inspect_date } = item
            if (!dataInfo[inspect_date]) {
              dataInfo[inspect_date] = {
                inspect_date,
                name: item.name,
                child: [],
                patient_id: item.patient_id,
                range_type: item.range_type,
                dialysis_no: item.dialysis_no
              }
            }
          })
          let list = Object.values(dataInfo)
          list.map(item => {
            for (let i = 0; i < control.length; i++) {
              if (item.inspect_date == control[i].inspect_date && item.patient_id == control[i].patient_id) {
                item.child.push(control[i])
              }
            }
          })
          var newarrtwo = []
          list.map(item => {
            item.child.map(it => {
              newarrtwo.push(it)
            })
          })

          // 配置的才显示

          var arrthree = []
          for (let i = 0; i < newarrtwo.length; i++) {
            for (let j = 0; j < this.normData.length; j++) {
              if (newarrtwo[i].item_id == this.normData[j].inspection_minor) {
                arrthree.push(newarrtwo[i])
              }
            }
          }

          var arrfour = this.arrayDate(arrthree, newarrtwo)
          arrfour.map(item => {
            item.item_name = ''
            arrthree.push(item)
          })

          var dd = {}
          for (const index in arrthree) {
            if (!(arrthree[index].inspect_date in dd)) {
              dd[arrthree[index].inspect_date] = {}
            }
            if (!(arrthree[index].item_name in dd[arrthree[index].inspect_date]) && arrthree[index].item_name != 0) {
              dd[arrthree[index].inspect_date][arrthree[index].item_name] = arrthree[index]
            }
          }
          this.tableData = []

          for (const key in dd) {
            for (const mkey in this.ObjectData) {
              if (!(this.ObjectData[mkey].item_name in dd[key])) {
                dd[key][this.ObjectData[mkey].item_name] = {
                  item_name: this.ObjectData[mkey].item_name,
                  name: mkey,
                  inspect_value: 0,
                  range_type: this.ObjectData[mkey].range_type
                }
              }
            }
            this.tableData.push({ name: key, data: dd[key]})
          }
          let dataInfotwo = {}
          control.forEach((item, index) => {
            let { inspect_date } = item
            if (!dataInfotwo[inspect_date]) {
              dataInfotwo[inspect_date] = {
                inspect_date,
                name: item.name,
                dialysis_no: item.dialysis_no
              }
            }
          })
          let listtwo = Object.values(dataInfotwo)
          listtwo.map(item => {
            this.tableData.map(it => {
              if (item.inspect_date == parseInt(it.name)) {
                it.name = item.name
                it.dialysis_no = item.dialysis_no
              }
            })
          })
          this.$nextTick(() => {
            this.$refs.tab.doLayout()
          })

          // for (let i = 0; i < this.patientsArr.length; i++) {
          //   for (let j = 0; j < this.tableData.length; j++) {
          //     if (this.patientsArr[i].name == this.tableData[j].name) {
          //       this.tableData[j].dialysis_no = this.patientsArr[i].dialysis_no
          //       this.tableData[j].patient_id = this.patientsArr[i].id
          //     }
          //   }
          // }
        }
      })
    },
    toReturn () {
      this.$router.push('/dqc/index')
    }
  },
  created () {
    // 列表
    this.getMobilePatientList()
    this.initStartTime(this.currentDate1)
    this.initEndTime(this.currentDate2)
    this.tableHeight = (document.documentElement.clientHeight - (Number(document.documentElement.style.fontSize.slice(0, -2)) * 3.125)) + 'px'
    // 获取指标数据
    this.getMobileNormData()
    // 获取统计图数据
    this.getMobileCartogramlist()
  }
}
</script>

<style lang="scss" scoped>
.page_patientStatistics {
   .searchBox{
    background: #F6F6F6;
    height: 3rem;
    display: flex;
    align-items: center;
    padding:0 0.625rem;
  }
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .patientStatisticsTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 5rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .options {
    width: 31.25rem;
    display: flex;
    height: 3.125rem;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    .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: #646566;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
    .toolOne {
      width: 6.25rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #646566;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
  }
  .chart1 {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
  }
  .chart {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
  }
}
::-webkit-scrollbar {
  height: 0;
  width: 0;
}
</style>

<style lang="scss">
.page_patientStatistics {
  .searchBox{
      .el-input{
        font-size: 14px !important;
      }
      .el-autocomplete{
        width: 100%;
      }
      .el-input__inner{
        border-radius:1rem;
        line-height: 2rem;
        height:2rem;
        border:none;
      }
      .el-input__icon{
        line-height:2rem;
      }
    }
  .van-field__body{
    width:100%;
  }
  .van-cell__value {
    display: flex;
    align-items: center;
  }
  .van-search__content {
    border-radius: 1.875rem;
  }
  .el-table__fixed-body-wrapper {
    top: 2.625rem;
  }
  .el-table {
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .el-table__fixed-right {
      right: 0 !important;
    }
    // .el-table__fixed {
    //   height: 15.625rem !important;
    // }
    // .el-table__fixed-right {
    //   height: 15.625rem !important;
    // }

  }
  .el-table td, .el-table th{
    text-align: center;
  }

}
// .el-table td, .el-table th{
//   padding:8px 0;
//   font-size: .9375rem;
// }
</style>
