<template>
  <div class="page_basic">
    <div class="basicTemplate">
      <div v-if="typeNum == 1">
        <div class="basicOne">
          <div class="titleBox">
            <p class="point"></p>
            <p class="title">透析总量({{dialysisTotal}}次)</p>
          </div>
          <div class="basicMain">
            <div v-for="(item,index) in dialysisModeType" :key="index">
              <p class="mode">{{item.mode_id}}：{{item.count}}次（{{(item.count/dialysisTotal*100).toFixed(1)}}%）</p>
              <div class="progress">
                <van-progress
                  v-if="item.count"
                  color="linear-gradient(to right, #A9E0F3, #9FBDFC)"
                  :percentage="(item.count/dialysisTotal*100).toFixed(1)"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="basicOne">
          <div class="titleBox">
            <p class="point1"></p>
            <p class="title">转归统计(总人数{{patienttotal}}人)</p>
          </div>
          <div class="basicMain">
            <p class="mode">留治：{{rollouttotal}}次（({{((rollouttotal)/patienttotal*100).toFixed(1)}})%）</p>
            <div class="progress">
              <van-progress
                v-if="rollouttotal"
                color="linear-gradient(to right, #FFD7C0, #FF9994)"
                :percentage="((rollouttotal)/patienttotal*100).toFixed(1)"
              />
            </div>
            <p class="mode">转出：{{outtotal}}次（{{(outtotal/patienttotal*100).toFixed(1)}}%）</p>
            <div class="progress">
              <van-progress
                v-if="outtotal"
                color="linear-gradient(to right, #FFD7C0, #FF9994)"
                :percentage="(outtotal/patienttotal*100).toFixed(1)"
              />
            </div>
          </div>
        </div>
        <div class="basicOne">
          <div class="titleBox">
            <p class="point2"></p>
            <p class="title">男女比例</p>
          </div>
          <div class="basicMain">
            <p class="mode">男：{{totalMan}}次（{{(totalMan/patienttotal*100).toFixed(1)}}%）</p>
            <div class="progress">
              <van-progress
                v-if="totalMan"
                color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                :percentage="(totalMan/patienttotal*100).toFixed(1)"
              />
            </div>
            <p class="mode">女：{{totalWoman}}次（{{((totalWoman)/patienttotal*100).toFixed(1)}}%）</p>
            <div class="progress">
              <van-progress
                v-if="totalMan"
                color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                :percentage="((totalWoman)/patienttotal*100).toFixed(1)"
              />
            </div>
          </div>
        </div>

        <div class="basicOne">
          <div class="titleBox">
            <p class="point"></p>
            <p class="title">年龄统计</p>
          </div>
          <div class="basicMain">
            <div v-for="(item,z) in ageCount" :key="z">
              <span v-if="item.age == 20">
                <p class="mode">年龄≤20：{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
                <div class="progress">
                  <van-progress
                    v-if="item.count"
                    color="linear-gradient(to right, #A9E0F3, #9FBDFC)"
                    :percentage="(item.count/patienttotal*100).toFixed(1)"
                  />
                </div>
              </span>
              <span v-if="item.age == 40">
                  <p class="mode">20&lt;年龄≤40：{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
                  <div class="progress">
                    <van-progress
                      v-if="item.count"
                      color="linear-gradient(to right, #A9E0F3, #9FBDFC)"
                      :percentage="(item.count/patienttotal*100).toFixed(1)"
                    />
                  </div>
              </span>
              <span v-if="item.age == 60">
                  <p class="mode">40&lt;年龄≤60：{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
                  <div class="progress">
                    <van-progress
                      v-if="item.count"
                      color="linear-gradient(to right, #A9E0F3, #9FBDFC)"
                      :percentage="(item.count/patienttotal*100).toFixed(1)"
                    />
                  </div>
              </span>
              <span v-if="item.age == 80">
                <p class="mode">60&lt;年龄≤80：{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
                <div class="progress">
                  <van-progress
                    v-if="item.count"
                    color="linear-gradient(to right, #A9E0F3, #9FBDFC)"
                    :percentage="(item.count/patienttotal*100).toFixed(1)"
                  />
                </div>
              </span>
              <span v-if="item.age == 150">
                <p class="mode">大于80：{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
                <div class="progress">
                  <van-progress
                    v-if="item.count"
                    color="linear-gradient(to right, #A9E0F3, #9FBDFC)"
                    :percentage="(item.count/patienttotal*100).toFixed(1)"
                  />
                </div>
              </span>
            </div>
          </div>
        </div>
        <div class="basicOne">
          <div class="titleBox">
            <p class="point1"></p>
            <p class="title">透龄统计</p>
          </div>
          <div class="basicMain">
            <div v-for="(item,index) in  ageData" :key="index">
            <span v-if="item.age == 1">
            <p class="mode">透析龄≤12;{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
            <div class="progress">
              <van-progress
                v-if="patienttotal"
                color="linear-gradient(to right, #FFD7C0, #FF9994)"
                :percentage="(item.count/patienttotal*100).toFixed(1)"
              />
            </div>
            </span>
              <span v-if="item.age == 2">
              <p class="mode">12&lt;透析龄≤36：{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
              <div class="progress">
                <van-progress
                  v-if="patienttotal"
                  color="linear-gradient(to right, #FFD7C0, #FF9994)"
                  :percentage="(item.count/patienttotal*100).toFixed(1)"
                />
              </div>
            </span>
              <span v-if="item.age == 3">
            <p class="mode">36&lt;透析龄≤60：{{item.count}}人 ({{(item.count/patienttotal*100).toFixed(1)}}%)</p>
              <div class="progress">
                <van-progress
                  v-if="patienttotal"
                  color="linear-gradient(to right, #FFD7C0, #FF9994)"
                  :percentage="(item.count/item.count*100).toFixed(1)"
                />
              </div>
            </span>
              <span v-if="item.age == 4">
              <p class="mode">透析龄>60：{{item.count}}人 ({{((item.count)/patienttotal*100).toFixed(1)}}%)</p>
              <div class="progress">
                <van-progress
                  v-if="patienttotal"
                  color="linear-gradient(to right, #FFD7C0, #FF9994)"
                  :percentage="((item.count)/patienttotal*100).toFixed(1)"
                />
              </div>
            </span>
            </div>
          </div>
        </div>
        <div class="basicOne">
          <div class="titleBox">
            <p class="point2"></p>
            <p class="title">传染病统计</p>
          </div>
          <div class="basicMain">
            <div v-for="(item,j) in infectious" :key="j">
            <span v-if="item.disease_id == 2">
              <p class="mode">乙肝：{{item.count}}人（{{(item.count/patienttotal*100).toFixed(1)}}%）</p>
                <div class="progress">
                  <van-progress
                    v-if="item.count"
                    color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                    :percentage="(item.count/patienttotal*100).toFixed(1)"
                  />
                </div>
              </span>
              <span v-if="item.disease_id == 3">
                  <p class="mode">丙肝：{{item.count}}人（{{(item.count/patienttotal*100).toFixed(1)}}%）</p>
                  <div class="progress">
                    <van-progress
                      v-if="item.count"
                      color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                      :percentage="(item.count/patienttotal*100).toFixed(1)"
                    />
                  </div>
              </span>
              <span v-if="item.disease_id == 4">
                  <p class="mode">艾滋病：{{item.count}}人（{{(item.count/patienttotal*100).toFixed(1)}}%）</p>
                  <div class="progress">
                    <van-progress
                      v-if="item.count"
                      color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                      :percentage="(item.count/patienttotal*100).toFixed(1)"
                    />
                  </div>
              </span>
              <span v-if="item.disease_id == 5">
                  <p class="mode">肺结核：{{item.count}}人（{{(item.count/patienttotal*100).toFixed(1)}}%）</p>
                  <div class="progress">
                    <van-progress
                      v-if="item.count"
                      color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                      :percentage="(item.count/patienttotal*100).toFixed(1)"
                    />
                  </div>
              </span>
              <span v-if="item.disease_id == 6">
                  <p class="mode">梅毒：{{item.count}}人（{{(item.count/patienttotal*100).toFixed(1)}}%）</p>
                  <div class="progress">
                    <van-progress
                      v-if="item.count"
                      color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                      :percentage="(item.count/patienttotal*100).toFixed(1)"
                    />
                  </div>
              </span>
              <span v-if="item.disease_id == 1">
                  <p class="mode">其他：{{item.count}}人（{{((item.count)/patienttotal*100).toFixed(1)}}%）</p>
                  <div class="progress">
                    <van-progress
                      v-if="item.count"
                      color="linear-gradient(to right, #D7C3FD, #B3A8F7)"
                      :percentage="((item.count)/patienttotal*100).toFixed(1)"
                    />
                  </div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="typeNum == 2" style="margin-left: 0.8125rem;">
      <div class="toolBox">
        <div class="newToolOne" @click="typeShow = true">
          <div style="display: flex;align-items: center;">
            {{ type }}
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
      <bar-chart :options="options"></bar-chart>

      <div class="toolBox">
        <div class="newToolOne" @click="typeShowtwo = true">
          <div style="display: flex;align-items: center;">
            {{ typetwo }}
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
      <bar-chart :options="barOptions"></bar-chart>
    </div>


    <van-popup v-model="typeShow" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="chooseType"
        @cancel="typeShow = false"
      />
    </van-popup>

    <van-popup v-model="typeShowtwo" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columnstwo"
        @confirm="chooseTypetwo"
        @cancel="typeShowtwo = false"
      />
    </van-popup>
  </div>
</template>
<script>
  const moment = require('moment')
  import echarts from 'echarts'
  import BarChart from '../components/BarChart'
  import {getMobileTreatModelist,getMobileCountModeId,getMobileRolloutCount} from '@/api/common/common'
  export default {
    props: {
      dialysisTotal: {
        type: Number
      },
      dialysisModeType: {
        type: Array
      },
      patienttotal: {
        type: Number
      },
      rollouttotal: {
        type: Number
      },
      outtotal: {
        type: Number
      },
      totalMan: {
        type: Number
      },
      totalWoman:{
        type:Number
      },
      infectious: {
        type: Array
      },
      otherInfetiousTotal: {
        type: Number
      },
      ageCount: {
        type: Array
      },
      ageData: {
        type: Array
      },
      typeNum: {
        type: Number
      },
      startDate:{
        type:String
      },
      endDate:{
        type:String
      }
    },
    components: {
      BarChart
    },
    data () {
      return {
        modesData: {
          xAxis: [],
          series: []
        },
        modesDataTwo: {
          xAxis: [],
          series: []
        },
        options: {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['次数'],
            left: 0
          },
          xAxis: {
            data: [1, 2, 3, 3, 3, 3, 33, 3],
            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: 'line',
              data: [50, 3, 32, 45, 45, 12, 56],
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{c}次'
                }
              },
              // 配置样式
              itemStyle: {
                // 通常情况下：

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

                    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 // 锁定区域禁止缩放
            }
          ]
        },

        barOptions: {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['次数'],
            left: 0
          },
          xAxis: {
            data: [1, 2, 3, 3, 3, 3, 33, 3],
            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: 'line',
              data: [50, 3, 32, 45, 45, 12, 56],
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{c}次'
                }
              },
              // 配置样式
              itemStyle: {
                // 通常情况下：

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

                    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 // 锁定区域禁止缩放
            }
          ]
        },
        columns: [],
        type: '',
        typeShow: false,
        mode_id:0,
        typeShowtwo:false,
        typetwo:"留治",
        columnstwo:["留治","转出"],
        modelist:[]
      }
    },
    methods: {
      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
        }
      },
      getArrLength1 (result) {
        if (result.length > 6) {
          var dataZoom_end = (6 / result.length) * 100
          this.barOptions.dataZoom[0].end = dataZoom_end
        } else {
          var dataZoom_end = 100
          this.barOptions.dataZoom[0].end = dataZoom_end
        }
      },
      chooseType (type) {
        this.type = type
        var modeid = 0
        for(let i=0;i<this.modelist.length;i++){
          if(type == this.modelist[i].name){
            modeid = this.modelist[i].modeid
          }
        }
        this.modeid = modeid
        this.typeShow = false
        this.getMobileCountModeId()

      },
      chooseTypetwo(type){
        this.typetwo = type
        this.typeShowtwo = false
        this.getMobileRolloutCount()
      },
      getlist(){
        const params = {
          start_time:this.startDate,
          end_time:this.endDate
        }
        //  console.log("params2222",params)
        getMobileTreatModelist(params).then(response=>{
          if(response.data.state == 1){
            var list =  response.data.data.list
            this.modelist = list
            this.mode_id = list[0].mode_id
            for(let i=0;i<list.length;i++){
              if(list[i].mode_id == 1){
                list[i].name = "HD"
                list[i].state = 1
              }
              if(list[i].mode_id == 2){
                list[i].name = "HDF"
                list[i].state = 2
              }
              if(list[i].mode_id == 3){
                list[i].name = "HD+HP"
                list[i].state = 3
              }
              if(list[i].mode_id == 4){
                list[i].name = "HP"
                list[i].state = 4
              }
              if(list[i].mode_id == 5){
                list[i].name = "HF"
                list[i].state = 5
              }
              if(list[i].mode_id == 6){
                list[i].name = "SCUF"
                list[i].state = 6
              }
              if(list[i].mode_id == 7){
                list[i].name = "IUF"
                list[i].state = 7
              }
              if(list[i].mode_id == 8){
                list[i].name="HFHD"
                list[i].state = 8
              }
              if(list[i].mode_id == 9){
                list[i].name ="HFHD+HP"
                list[i].state = 9
              }
              if(list[i].mode_id == 10){
                list[i].name = "PHF"
                list[i].state = 10
              }
              if(list[i].mode_id == 11){
                list[i].name = "HFR"
                list[i].state = 11
              }
              if(list[i].mode_id == 12){
                list[i].name = "HDF+HP"
                list[i].state = 12
              }
              if(list[i].mode_id == 13){
                list[i].name = "CRRT"
                list[i].state = 13
              }
              if(list[i].mode_id == 14){
                list[i].name = "腹水回输"
                list[i].state = 14
              }
              if(list[i].mode_id == 15){
                list[i].name = "HD前置换"
                list[i].state = 15
              }
              if(list[i].mode_id == 16){
                list[i].name = "HD后置换"
                list[i].state = 16
              }
              if(list[i].mode_id == 17){
                list[i].name = "HDF前置换"
                list[i].state = 17
              }
              if(list[i].mode_id == 18){
                list[i].name = "HDF后置换"
                list[i].state = 18
              }
              if(list[i].mode_id == 19) {
                list[i].name = "IUF+HD"
                list[i].state = 19
              }
              if(list[i].mode_id == 21) {
                list[i].name = "HD+"
                list[i].state = 21
              }
              if(list[i].mode_id == 24) {
                list[i].name = "I-HDF"
                list[i].state = 24
              }
               if(list[i].mode_id == 25) {
                list[i].name = "HD高通"
                list[i].state = 25
              }
               if(list[i].mode_id == 26) {
                list[i].name = "CVVH"
                list[i].state = 26
              }
             if(list[i].mode_id == 27) {
                list[i].name = "CVVHD"
                list[i].state = 27
              }
              if(list[i].mode_id == 28) {
                list[i].name = "CVVHDF"
                list[i].state = 28
              }
            }
            for(let j=0;j<list.length;j++){
              this.type = list[0].name
              this.columns.push(list[j].name)
            }

            this.getMobileCountModeId()
          }
        })
      },
      getMobileCountModeId(){
        this.modesData.series = []
        this.modesData.xAxis = []
        const params = {
          mode_id:this.mode_id,
          start_time:this.startDate,
          end_time:this.endDate
        }
        getMobileCountModeId(params).then(response=>{
          if(response.data.state == 1){
            var modeCount =  response.data.data.modeCount
            for (let i = 0; i < modeCount.length; i++) {
              this.modesData.xAxis.push(moment(new Date(modeCount[i].dialysis_date*1000)).format('YYYY-MM-DD'))
              this.modesData.series.push(modeCount[i].Count)
            }
            this.options.series[0].data = this.modesData.series
            this.options.xAxis.data = this.modesData.xAxis
            this.getArrLength(this.options.xAxis.data)
          }
        })
      },

      getMobileRolloutCount(){
        const params = {
          start_time:this.startDate,
          end_time:this.endDate
        }
        getMobileRolloutCount(params).then(response=>{
          if(response.data.state == 1){
            var rollout =  response.data.data.rollout
            // console.log("rollout",rollout)
            var arr = []
            var arrOne = []
            for(let i=0;i<rollout.length;i++){
              if(rollout[i].lapseto_type == 1){
                arr.push(rollout[i])
              }
              if(rollout[i].lapseto_type == 2){
                arrOne.push(rollout[i])
              }
            }
            if(this.typetwo == "留治"){
              this.modesDataTwo.xAxis = []
              this.modesDataTwo.series = []
              for(let i=0;i<arr.length;i++){
                this.modesDataTwo.xAxis.push(moment(new Date(arr[i].lapseto_time*1000)).format('YYYY-MM-DD'))
                this.modesDataTwo.series.push(arr[i].Count)
              }
              this.barOptions.series[0].data = this.modesDataTwo.series
              this.barOptions.xAxis.data = this.modesDataTwo.xAxis
              this.getArrLength1(this.barOptions.xAxis.data)
            }

            if(this.typetwo == "转出"){
              this.modesDataTwo.xAxis = []
              this.modesDataTwo.series = []
              for(let i=0;i<arrOne.length;i++){
                this.modesDataTwo.xAxis.push(moment(new Date(arrOne[i].lapseto_time*1000)).format('YYYY-MM-DD'))
                this.modesDataTwo.series.push(arrOne[i].Count)
              }
              this.barOptions.series[0].data = this.modesDataTwo.series
              this.barOptions.xAxis.data = this.modesDataTwo.xAxis
              this.getArrLength1(this.barOptions.xAxis.data)
            }

          }
        })
      }
    },
    created () {
      this.getlist()
      this.getMobileRolloutCount()
    },
    watch: {
      // 正确给 cData 赋值的 方法
      dialysisModeType: function (newVal, oldVal) {

      },

      rollouttotal: function (newVal, oldVal) {
        var arr = [
          {name: '留治', count: 0},
          {name: '转归', count: 0}
        ]
      },
    }
  }
</script>
<style lang="scss" scoped>
  .basicTemplate {
    padding: 0 1rem;
  .titleBox {
    display: flex;
    align-items: center;
    margin-top: 0.8rem;
    margin-bottom: 0.625rem;
  .point {
    width: 7px;
    height: 7px;
    background: linear-gradient(
      90deg,
      rgba(169, 224, 243, 1),
      rgba(159, 189, 252, 1)
    );
    border-radius: 50%;
  }
  .point1 {
    width: 7px;
    height: 7px;
    background: linear-gradient(
      90deg,
      rgba(255, 215, 192, 1),
      rgba(255, 153, 148, 1)
    );
    border-radius: 50%;
  }
  .point2 {
    width: 7px;
    height: 7px;
    background: linear-gradient(
      90deg,
      rgba(215, 195, 253, 1),
      rgba(179, 168, 247, 1)
    );
    border-radius: 50%;
  }
  .title {
    font-size: 1rem;
    color: #313234;
    margin-left: 0.25rem;
    font-weight: bold;
  }
  }
  .basicMain {
    width: 100%;
    min-height: 6.75rem;
    border: 1px solid #e5e5e5;
    margin-bottom: 1rem;
    padding: 0.625rem 0 0.625rem 0.625rem;
    border-radius: 5px;
  .mode {
    font-size: .75rem;
  }
  .progress {
    margin: 0.75rem 0;
    padding-right: 0.625rem;
  }
  }
  }
  .page_basic{
  .toolBox {
    display: flex;
    height: 3.125rem;
    align-items: center;
  .newToolOne {
    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;
  }
  }
  }
</style>
