<template>
  <div class="page_scheduleStatistics">
    <div class="searchBox">
      <van-search
        v-model="keywords"
        placeholder="请输入医护人员姓名"
        @search="toSearch"
        @input="toSearch"
      />
    </div>
    <div class="optionsBox">
      <div class="optionsOne" @click="typeShow = true">
        <div style="display: flex;align-items: center;">
          {{ type }}
          <van-icon name="arrow-down" />
        </div>
      </div>
      <div class="optionsOne" @click="projectShow = true">
        <div style="display: flex;align-items: center;">
          {{ project }}
          <van-icon name="arrow-down" />
        </div>
      </div>
    </div>
    <div class="operateTitle" v-if="project == '按周统计'">
      <div class="operatePrevious" @click="lastclick">&lt;上一周({{ weekNum - 1 }})</div>
      <div class="operateTime">{{ weekDayArr[0] }}-{{ weekDayArr[6] }}({{ weekNum }})</div>
      <div class="operateNext" @click="nextclick">下一周({{ weekNum + 1 }})&gt;</div>
    </div>
    <div class="optionsBox" v-if="project == '按月统计'" style="height:2.5rem;">
      <div class="toolOne" @click="currentMonthShow = true">
        <div style="display: flex;align-items: center;">
          {{ currentMonth }}

          <van-icon name="arrow-down" />
        </div>
      </div>
    </div>
    <div class="optionsBox" v-if="project == '自定义'" style="height:2.5rem;">
      <div class="toolOne" @click="startShow = true">
        <div style="display: flex;align-items: center;">
          {{ startTime }}

          <van-icon name="arrow-down" />
        </div>
      </div>
      <div class="toolOne" @click="endShow = true">
        <div style="display: flex;align-items: center;">
          {{ endTime }}
          <van-icon name="arrow-down" />
        </div>
      </div>
    </div>
    <div class="chart1">统计图</div>
    <div class="rangeBox" style="margin-top:.625rem">
      <p class="range"></p>
      <span>工时/小时</span>
    </div>
    <div>
      <bar-chart :options="options"></bar-chart>
    </div>
    <div class="chart1" style="margin-bottom: 0.625rem;">统计表</div>
    <el-table ref="tab" :data="tableData" style="width: 100%" :height="tableHeight" border :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
      <el-table-column fixed align="center" prop="date" label="医护姓名" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.user_name}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="modeItem.class_name" property="number" align="center" min-width="100" v-for="(modeItem, index) in scheduleList" :key="index">
        <template slot-scope="scope">
          <span>{{ getCount(scope.row.doctor_id,modeItem.class_name) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="总工时/小时">
        <template slot-scope="scope">
          <span v-if="scope.row.totalminute">{{ scope.row.totalminute / 60 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="attendance" label="出勤/天">
        <!-- <span v-if='scope.row.attendance'>{{ scope.row.attendance ? scope.row.attendance : '' }}</span> -->
      </el-table-column>
      <el-table-column align="center" prop="absence" label="缺勤/天">
        <!-- <span v-if="scope.row.absence">{{ scope.row.absence ? scope.row.absence : '' }}</span> -->
      </el-table-column>
    </el-table>

    <div>
      <van-popup v-model="typeShow" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="type_columns"
          @confirm="chooseType"
          @cancel="typeShow = false"
        />
      </van-popup>
      <van-popup v-model="projectShow" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="project_columns"
          @confirm="chooseProject"
          @cancel="projectShow = false"
        />
      </van-popup>
      <van-popup v-model="currentMonthShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          :formatter="formatter"
          @confirm="getCurrentMonth"
          @cancel="currentMonthShow = false"
        />
      </van-popup>

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

<script>
  import echarts from 'echarts'
  import BarChart from '../dqc/components/BarChart'
  import {getMobileDoctorList, getMobileScheduleList, getMobileScheduleListTotal, getmobilechartlist, toSearchMobileTotal, changeMobileOption} from '@/api/staff_schedule'
  export default {
    components: {
      BarChart
    },
    data () {
      return {
        tableHeight: '',
        project: '按周统计',
        projectShow: false,
        project_columns: ['按周统计', '按月统计', '自定义'],
        type: '全部',
        typeShow: false,
        type_columns: ['全部', '医生', '护士'],

        weekNum: '',
        weekDayArr: [],
        todayDate: '',
        clen: 7,
        nowYear: new Date().getFullYear(),

        currentMonthShow: false,
        currentMonth: '',
        currentDate: new Date(),
        minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
        maxDate: new Date(),

        startTime: '请选择',
        endTime: '请选择',
        startShow: false,
        endShow: false,
        currentDate1: new Date(),
        currentDate2: new Date(),

        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: [],
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              // 配置样式
              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: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
              zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
              type: 'inside',
              xAxisIndex: [0],
              start: 1,
              end: 20,
              zoomLock: true // 锁定区域禁止缩放
            }
          ]
        },
        tableData: [],
        start_time: 0,
        end_time: 0,
        doctorlist: [],
        scheduleList: [],

        keywords: '',
        doctorArr: [],
        nurseArr: []
      }
    },
    created () {
      this.tableHeight = (document.documentElement.clientHeight - (Number(document.documentElement.style.fontSize.slice(0, -2)) * 3.125)) + 'px'
      let year = new Date().getFullYear()
      let month = new Date().getMonth() + 1
      let date = new Date().getDate()
      this.weekNum = this.getYearWeek(year, month, date)
      this.setDate(new Date())
      if (month < 10) {
        this.currentMonth = year + '-0' + month
      } else {
        this.currentMonth = year + '-' + month
      }

      // 获取该机构下的所有医生和护士
      this.getMobileDoctorList()
      // 获取班种
      this.getMobileScheduleList()
      // 获取列表数据
      this.getlist()
      // 获取统计图数据
      this.getmobilechartlist()
    },
    methods: {
      chooseProject (val) {
        this.project = val
        this.projectShow = false
        this.getlist()
      },
      chooseType (val) {
        var doctor_type = 0
        if (val == '全部') {
          doctor_type = 0
        }
        if (val == '医生') {
          doctor_type = 2
        }
        if (val == '护士') {
          doctor_type = 3
        }
        this.type = val
        this.typeShow = false
        const params = {
          doctor_type: doctor_type,
          start_time: this.start_time,
          end_time: this.end_time
        }
        changeMobileOption(params).then(response => {
          if (response.data.state == 1) {
            var scheudleTotal = response.data.data.scheduletotal
            var list = response.data.data.list
            var workday = response.data.data.workday
            var noWorkDay = response.data.data.worknoday

            let tempArr = [], newArr = []
            for (let i = 0; i < scheudleTotal.length; i++) {
              if (tempArr.indexOf(scheudleTotal[i].user_name) === -1) {
                newArr.push({
                  user_name: scheudleTotal[i].user_name,
                  doctor_id: scheudleTotal[i].doctor_id,
                  list: [{class_name: scheudleTotal[i].class_name, doctor_id: scheudleTotal[i].doctor_id, Count: scheudleTotal[i].Count}]
                })
                tempArr.push(scheudleTotal[i].user_name)
              } else {
                for (let j = 0; j < newArr.length; j++) {
                  if (newArr[j].user_name == scheudleTotal[i].user_name) {
                    newArr[j].list.push({class_name: scheudleTotal[i].class_name, doctor_id: scheudleTotal[i].doctor_id, Count: scheudleTotal[i].Count})
                  }
                }
              }
            }

            newArr.map(item => {
              list.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.totalminute = it.totalminute
                }
              })
            })
            newArr.map(item => {
              workday.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.attendance = it.Count
                }
              })
            })
            newArr.map(item => {
              noWorkDay.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.absence = it.Count
                }
              })
            })

            let arr = [...newArr]
            if (doctor_type == 0) {
              arr.sort(this.compare('doctor_id'))
              this.doctorlist.sort(this.compare('admin_user_id'))
              this.doctorlist.forEach((item, index) => {
                if (arr[index] && item.admin_user_id == arr[index].doctor_id) {

                } else {
                  arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                }
              })

              this.tableData = arr
              this.$nextTick(() => {
                this.$refs.tab.doLayout()
              })
            } else if (doctor_type == 2) {
              arr.sort(this.compare('doctor_id'))
              this.doctorArr.sort(this.compare('admin_user_id'))
              this.doctorArr.forEach((item, index) => {
                if (arr[index] && item.admin_user_id == arr[index].doctor_id) {

                } else {
                  arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                }
              })
              this.tableData = arr
              this.$nextTick(() => {
                this.$refs.tab.doLayout()
              })
            } else if (doctor_type == 3) {
              arr.sort(this.compare('doctor_id'))
              this.nurseArr.sort(this.compare('admin_user_id'))
              this.nurseArr.forEach((item, index) => {
                if (arr[index] && item.admin_user_id == arr[index].doctor_id) {

                } else {
                  arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                }
              })

              this.tableData = arr
              this.$nextTick(() => {
                this.$refs.tab.doLayout()
              })
            }
          }
        })
      },
      formatDate (date) {
        var year = date.getFullYear() + '.'
        var month = (date.getMonth() + 1) + '.'
        var day = date.getDate()
        return year + month + day
      },
      addDate (date, n) {
        date.setDate(date.getDate() + n)
        return date
      },
      //
      setDate (date) {
        var week = date.getDay() - 1
        date = this.addDate(date, week * -1)
        this.currentFirstDate = new Date(date)
        this.currentDate = new Date(date)
        for (var i = 0; i < this.clen; i++) {
          this.weekDayArr.push(this.formatDate(i == 0 ? date : this.addDate(date, 1)))
        }
      },
      // 上一周
      lastclick () {
        this.weekDayArr = []
        this.setDate(this.addDate(this.currentFirstDate, -7))
        if (this.weekNum == 1) {
          let year = this.nowYear - 1
          let month = 12
          let date = 31
          this.weekNum = this.getYearWeek(year, month, date)
          this.nowYear = this.nowYear - 1
        }
        this.weekNum = this.weekNum - 1
        this.getlist()
        this.getmobilechartlist()
      },
      // 下一周
      nextclick () {
        this.weekDayArr = []
        this.setDate(this.addDate(this.currentFirstDate, 7))
        this.weekNum = this.weekNum + 1
        if (this.weekNum == 53) {
          let year = this.nowYear + 1
          let month = 1
          let date = 1
          this.weekNum = this.getYearWeek(year, month, date)
          this.nowYear = this.nowYear + 1
        }
        this.getlist()
        this.getmobilechartlist()
      },

      getYearWeek (year, month, date) {
        /*
                          dateNow是当前日期
                          dateFirst是当年第一天
                          dataNumber是当前日期是今年第多少天
                          用dataNumber + 当前年的第一天的周差距的和在除以7就是本年第几周
                      */
        let dateNow = new Date(year, parseInt(month) - 1, date)
        let dateFirst = new Date(year, 0, 1)
        let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000)
        return Math.ceil((dataNumber + ((dateFirst.getDay() + 1) - 1)) / 7)
      },
      formatter (type, val) {
        if (type === 'year') {
          return `${val}年`
        } else if (type === 'month') {
          return `${val}月`
        }
        return val
      },
      getCurrentMonth (value) {
        let monthStartTime = value.getTime() / 1000
        var nowDate = new Date(value)
        var cloneNowDate = new Date(value)
        var fullYear = nowDate.getFullYear()
        var month = nowDate.getMonth() + 1 // getMonth 方法返回 0-11，代表1-12月
        var endOfMonth = new Date(fullYear, month, 0).getDate() // 获取本月最后一天
        let monthEndTime = this.getFullDate(cloneNowDate.setDate(endOfMonth))

        if (month < 10) {
          this.currentMonth = fullYear + '-0' + month
        } else {
          this.currentMonth = fullYear + '-' + month
        }
        this.currentMonthShow = false
        this.start_time = value.getTime() / 1000
        this.end_time = this.getTimestamp(monthEndTime)
        this.getlist()
      },
      getFullDate (targetDate) {
        var D, y, m, d
        if (targetDate) {
          D = new Date(targetDate)
          y = D.getFullYear()
          m = D.getMonth() + 1
          d = D.getDate()
        } else {
          y = fullYear
          m = month
          d = date
        }
        m = m > 9 ? m : '0' + m
        d = d > 9 ? d : '0' + d
        return y + '-' + m + '-' + d
      },
      getTimestamp (time) { // 把时间日期转成时间戳
        return (new Date(time)).getTime() / 1000
      },

      getstartTime (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}`
        this.startShow = false
        this.start_time = this.getTimestamp(this.startTime)
        this.getlist()
        this.getmobilechartlist()
      },
      getstartTime2 (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}`
        this.endShow = false
        this.end_time = this.getTimestamp(this.endTime)
        this.getlist()
        this.getmobilechartlist()
      },
      // 获取该机构下的所有医生和护士
      getMobileDoctorList () {
        getMobileDoctorList().then(response => {
          if (response.data.state == 1) {
            var staffList = response.data.data.staffList
            var doctorlist = response.data.data.doctorList
            var nurselist = response.data.data.nurseList
            this.doctorArr = doctorlist
            this.nurseArr = nurselist

            this.doctorlist.push(...nurselist)
            this.doctorlist.push(...doctorlist)
          }
        })
      },
      // 获取所以班次列表
      getMobileScheduleList () {
        getMobileScheduleList().then(response => {
          if (response.data.state == 1) {
            var list = response.data.data.list
            // console.log('list', list)
            this.scheduleList = list
          }
        })
      },
      // 统计表数据
      getlist () {
        if (this.project == '按周统计') {
          this.start_time = this.getTimestamp(this.weekDayArr[0])
          this.end_time = this.getTimestamp(this.weekDayArr[6])
        }
        const params = {
          start_time: this.start_time,
          end_time: this.end_time
        }
        // console.log('params', params)
        getMobileScheduleListTotal(params).then(response => {
          if (response.data.state == 1) {
            // 统计班次
            var scheudleTotal = response.data.data.scheudletotal
            // console.log('scheduletotal', scheudleTotal)
            // 统计总工时
            var list = response.data.data.list
            // console.log('list', list)
            // 统计出勤天数
            var workday = response.data.data.workDay
            // console.log('出勤天数', workday)
            // 统计缺勤天数
            var noWorkDay = response.data.data.noWorkDay
            // console.log('缺勤天数', noWorkDay)

            let tempArr = [], newArr = []
            for (let i = 0; i < scheudleTotal.length; i++) {
              if (tempArr.indexOf(scheudleTotal[i].user_name) === -1) {
                newArr.push({
                  user_name: scheudleTotal[i].user_name,
                  doctor_id: scheudleTotal[i].doctor_id,
                  list: [{class_name: scheudleTotal[i].class_name, doctor_id: scheudleTotal[i].doctor_id, Count: scheudleTotal[i].Count}]
                })
                tempArr.push(scheudleTotal[i].user_name)
              } else {
                for (let j = 0; j < newArr.length; j++) {
                  if (newArr[j].user_name == scheudleTotal[i].user_name) {
                    newArr[j].list.push({class_name: scheudleTotal[i].class_name, doctor_id: scheudleTotal[i].doctor_id, Count: scheudleTotal[i].Count})
                  }
                }
              }
            }

            newArr.map(item => {
              list.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.totalminute = it.totalminute
                }
              })
            })
            newArr.map(item => {
              workday.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.attendance = it.Count
                }
              })
            })
            newArr.map(item => {
              noWorkDay.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.absence = it.Count
                }
              })
            })

            let arr = [...newArr]

            arr.sort(this.compare('doctor_id'))
            this.doctorlist.sort(this.compare('admin_user_id'))
            this.doctorlist.forEach((item, index) => {
              if (arr[index] && item.admin_user_id == arr[index].doctor_id) {

              } else {
                arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
              }
            })

            // console.log('newArr',arr)
            this.tableData = arr
            this.$nextTick(() => {
              this.$refs.tab.doLayout()
            })
          }
        })
      },
      compare (property) {
        return function (a, b) {
          var value1 = a[property]
          var value2 = b[property]
          return value2 - value1
        }
      },
      getCount (id, name) {
        if (id != undefined) {
          let Count = ''
          this.tableData.map(item => {
            if (item.doctor_id == id) {
              if (item.list) {
                item.list.map(it => {
                  if (it.class_name == name) {
                    Count = it.Count
                  }
                })
              }
            }
          })
          return Count
        }
      },

      // 统计图数据
      getmobilechartlist () {
        if (this.project == '按周统计') {
          this.start_time = this.getTimestamp(this.weekDayArr[0])
          this.end_time = this.getTimestamp(this.weekDayArr[6])
        }
        const params = {
          start_time: this.start_time,
          end_time: this.end_time
        }
        getmobilechartlist(params).then(response => {
          if (response.data.state == 1) {
            var workdaylist = response.data.data.workDaylist
            // console.log('workdaylist', workdaylist)

            let arr = [...workdaylist]

            arr.sort(this.compare('doctor_id'))
            this.doctorlist.sort(this.compare('admin_user_id'))
            this.doctorlist.forEach((item, index) => {
              if (arr[index] && item.admin_user_id == arr[index].doctor_id) {

              } else {
                arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, workminute: 0})
              }
            })

            let chartX = []
            let chartY = []
            arr.map(item => {
              chartX.push(item.user_name)
              chartY.push(item.workminute / 60)
            })
            // console.log('chartX', chartX)
            this.options.xAxis.data = chartX
            this.options.series[0].data = chartY

            this.getArrLength(this.options.xAxis.data)
          }
        })
      },

      // 搜索
      toSearch () {
        const params = {
          keyword: this.keywords,
          start_time: this.start_time,
          end_time: this.end_time
        }
        toSearchMobileTotal(params).then(response => {
          if (response.data.state == 1) {
            var scheudleTotal = response.data.data.scheduletotal
            // console.log('搜索', scheudleTotal)
            var list = response.data.data.list
            var workday = response.data.data.workDay
            var noWorkDay = response.data.data.noWorkDay

            let tempArr = [], newArr = []
            for (let i = 0; i < scheudleTotal.length; i++) {
              if (tempArr.indexOf(scheudleTotal[i].user_name) === -1) {
                newArr.push({
                  user_name: scheudleTotal[i].user_name,
                  doctor_id: scheudleTotal[i].doctor_id,
                  list: [{class_name: scheudleTotal[i].class_name, doctor_id: scheudleTotal[i].doctor_id, Count: scheudleTotal[i].Count}]
                })
                tempArr.push(scheudleTotal[i].user_name)
              } else {
                for (let j = 0; j < newArr.length; j++) {
                  if (newArr[j].user_name == scheudleTotal[i].user_name) {
                    newArr[j].list.push({class_name: scheudleTotal[i].class_name, doctor_id: scheudleTotal[i].doctor_id, Count: scheudleTotal[i].Count})
                  }
                }
              }
            }

            newArr.map(item => {
              list.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.totalminute = it.totalminute
                }
              })
            })
            newArr.map(item => {
              workday.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.attendance = it.Count
                }
              })
            })
            newArr.map(item => {
              noWorkDay.map(it => {
                if (item.doctor_id == it.doctor_id) {
                  item.absence = it.Count
                }
              })
            })

            let arr = [...newArr]

            if (this.keywords != '') {
              this.tableData = arr
            } else {
              arr.sort(this.compare('doctor_id'))
              this.doctorlist.sort(this.compare('admin_user_id'))
              this.doctorlist.forEach((item, index) => {
                if (arr[index] && item.admin_user_id == arr[index].doctor_id) {

                } else {
                  arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                }
              })
              // console.log('newArr', arr)
              this.tableData = arr
              this.$nextTick(() => {
                this.$refs.tab.doLayout()
              })
            }
          }
        })
      },
      getArrLength (result) {
        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
        }
      }

      // // 筛选
      // changeOption (val) {
      //   const params = {
      //     doctor_type: parseInt(val),
      //     start_time: this.start_time,
      //     end_time: this.end_time
      //   }
      //   changeMobileOption(params).then(response => {
      //     if (response.data.state == 1) {
      //       var scheduletotal = response.data.data.scheduletotal
      //       var list = response.data.data.list
      //       var workDay = response.data.data.workday
      //       var noWorkDay = response.data.data.worknoday
      //     }
      //   })
      // }

    }
  }
</script>

<style lang="scss" scoped>
  .page_scheduleStatistics{
  .optionsBox {
    display: flex;
    height: 3.125rem;
    align-items: center;
    width: 100%;
    background: #fff;
    min-height:0;
  .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;
  }
  }
  .operateTitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .625rem 0.625rem;
  .operatePrevious{
    color: #3a8ee6;
  }
  .operateNext{
    color: #3a8ee6;
  }
  .operateTime{
    border: 1px solid #DCDFE6;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 0 0.625rem;
    border-radius: 4px;
    font-size: .75rem;
  }
  }
  .chart1 {
    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;
  }
  .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;
  }
  }
  }

</style>

<style lang="scss">
  .page_scheduleStatistics{
  .searchBox {
  .van-search__content {
    border-radius: 1.875rem;
  }
  .van-cell__value {
    display: flex;
    align-items: center;
  }
  .van-field__body {
    width: 100%;
  }
  }
  }
  ::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
  }
</style>
