<template>
  <div class="page_outCustomers">
    <div class="quarterBox">
      <p :class="Num == 1 ? 'active' : ''" @click="onClick(1)">近一周</p>
      <p :class="Num == 2 ? 'active' : ''" @click="onClick(2)">近一月</p>
      <p :class="Num == 3 ? 'active' : ''" @click="onClick(3)">近三月</p>
      <!-- <div class="toolBox"> -->
      <div class="toolOne" @click="startShow = true">
        <div style="display: flex;align-items: center;">
          {{ query.start_time }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="toolOne" @click="endShow = true">
        <div style="display: flex;align-items: center;">
          {{ query.end_time }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <!-- </div> -->
    </div>

    <div class="chartBox">
      <bar-chart :options="options"></bar-chart>
    </div>

    <van-cell title="转出患者总数" :value="total_one" size="large"/>
    <van-cell title="累计转出患者总数" :value="total" size="large"/>

    <div style="padding:0 .75rem;margin-top:.75rem;">
      <!-- <van-button type="primary" block color="#338afb" @click="jump(2)">查看患者统计详情</van-button> -->
      <div class="checkDetail" @click="jump(2)">查看患者统计详情</div>
    </div>

    <div>
      <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 {GetPatientLapsetoChart} from '@/api/statistics'
import echarts from 'echarts'
import BarChart from '../../dqc/components/BarChart'
const moment = require('moment')

export default {
  components: {
    BarChart
  },
  data () {
    return {
      query: {
        start_time: '',
        end_time: '',
        type: 2
      },
      Num: 1,
      total_one: '',
      total: '',
      currentDate1: new Date(new Date().setDate(new Date().getDate() - 7)),
      currentDate2: new Date(),
      startShow: false,
      endShow: false,
      currentDate: new Date(),
      startTime: '请选择',
      endTime: '请选择',
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
      maxDate: new Date(),
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: [''],
          left: 0
        },
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = '' // 拼接加\n返回的类目项
              var maxLength = 5 // 每项显示文字个数
              var valLength = value.length // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * maxLength // 开始截取的位置
                  var end = start + maxLength // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              color: '#2F3133'
            }
          }
        },
        yAxis: {
          axisLabel: {
            formatter: '{value} %'
          },
          show: false
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}'
              }
            },
            // 配置样式
            itemStyle: {
              // 通常情况下：

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

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

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

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

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '',
            type: 'line',
            data: [],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}'
              }
            },
            // 配置样式
            itemStyle: {
              // 通常情况下：

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

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

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

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

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }

        ],
        dataZoom: [
          {
            // Y轴固定,让内容滚动
            type: 'slider',
            show: false,
            xAxisIndex: [0],
            start: 1,
            end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 20,
            zoomLock: true // 锁定区域禁止缩放
          }
        ]
      }
    }
  },
  methods: {
    jump (val) {
      this.$router.push('/bus/customdetail?type=' + val)
    },
    onClick (id) {
      if (id == 1) {
        this.Num = 1
      } else if (id == 2) {
        this.Num = 2
      } else if (id == 3) {
        this.Num = 3
      }

      switch (this.Num) {
        case 1: // 本月
          this.query.start_time = moment().subtract('day', 7).format('YYYY-MM-DD')
          // 本月的结束时间
          this.query.end_time = moment(new Date()).format('YYYY-MM-DD')

          this.currentDate1 = new Date(new Date().setDate(new Date().getDate() - 7)),
          this.currentDate2 = new Date(),
          this.GetPatientLapsetoChart(this.query)
          break
        case 2: // 近1个月
          this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() + 1)),
          this.currentDate2 = new Date()

          const startDate = moment().subtract('month', 1).format('YYYY-MM-DD')
          this.query.start_time = startDate
          const endDate = moment(new Date()).format('YYYY-MM-DD')
          this.query.end_time = endDate
          this.GetPatientLapsetoChart(this.query)
          break
        case 3: // 近三月
          this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() - 3)),
          this.currentDate2 = new Date()

          this.query.start_time = moment().subtract('month', 3).format('YYYY-MM-DD')
          this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
          this.GetPatientLapsetoChart(this.query)
          break
        case 4: // 近6月
          this.query.start_time = moment().subtract('month', 6).format('YYYY-MM-DD')
          this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
          this.GetPatientLapsetoChart(this.query)
          break
      }
    },
    getstartTime (value) {
      this.Num = 0
      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.query.start_time = `${year}-${month}-${day}`

      this.GetPatientLapsetoChart(this.query)
      this.startShow = false
    },
    getstartTime2 (value) {
      this.Num = 0
      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.query.end_time = `${year}-${month}-${day}`
      this.GetPatientLapsetoChart(this.query)

      this.endShow = false
    },
    GetPatientLapsetoChart (params) {
      this.options.xAxis.data = []
      this.options.series[0].data = []
      GetPatientLapsetoChart(params)
        .then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            this.total_one = resp.data.total_one + '人'
            this.total = resp.data.total + '人'

            for (let i = 0; i < resp.data.chart_data.length; i++) {
              // console.log(resp.data.chart_data[i].date)
              this.options.xAxis.data.push(resp.data.chart_data[i].date)
              this.options.series[0].data.push(resp.data.chart_data[i].value)
            }
            this.getArrLength(this.options.xAxis.data)
            // console.log(this.options)
          } else {
            this.$toast({
              message: resp.msg
            })
          }
        })
        .catch(error => {

        })
    },
    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
      }
    }

  },
  created () {
    this.query.start_time = moment().subtract('day', 7).format('YYYY-MM-DD')
    // 本月的结束时间
    this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
    this.GetPatientLapsetoChart(this.query)
  }
}
</script>

<style lang="scss" scoped>
  .page_customer {

  .quarterBox {
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: space-around;

  p {
    width: 3rem;
    height: 1.875rem;
    line-height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    border-radius: 0.3125rem;
    color: #8d8d8d;
    cursor: pointer;
    text-align: center;
    font-size: 0.8125rem;
  }

  .active {
    background: rgba(51, 138, 251, 1);
    color: #fff;
    border: 1px solid #338afb;
  }

  }
  .checkDetail{
    height:2.75rem;
    line-height: 2.75rem;
    text-align: center;
    width: 100%;
    background: #338afb;
    color:#fff;
    font-size: 0.875rem;
    border-radius: 30px;
  }

  /*.toolBox {*/

  /*/ / display: flex;*/
  /*/ / height: 2.5 rem;*/
  /*/ / align-items: center;*/

  .toolOne {
    width: 6.25rem;
    height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    border-radius: 5px;
    text-align: center;
    font-size: 0.8125rem;
    color: #8d8d8d;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /*/ / margin-left: 0.8125 rem;*/
  }

  /*}*/
  .chart {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
  }

  }
</style>
