<template>
  <div class="page_assayTemplate">
    <bar-chart v-if="this.$route.query.range_type == 1" :options="options"></bar-chart>
    <bar-chart1 v-if="this.$route.query.range_type == 2" :options="options2"></bar-chart1>

  </div>
</template>


<script>
  import echarts from "echarts";
  import BarChart from "../components/BarChart"
  import BarChart1 from "../components/BarChart1"
  import {
    GetPatientInspectionIndexChart,
  } from "@/api/statistics";
  const moment = require('moment')

  export default {
    components: {
      BarChart,
      BarChart1,
    },
    data() {
      return {
        custom_chart_data_color:[],
        query: {
          patient_id: this.patient_id,
          start_time: "",
          end_time: "",
          limit: 20,
          page: 1,
          project_id:""
        },
        patient_id:this.$route.query.patient_id,
        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;
                }
              },
              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 //锁定区域禁止缩放
            }
          ],
        },

        options2: {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          // legend: {
          //   data: ["次数"],
          //   left: 0
          // },
          xAxis: {
            data: [],
            axisLabel: {
              interval: 0,
            }
          },
          yAxis: {
            axisLabel: {
              show:false,
              formatter: "{value} %"
            },
            show: false,
            max: 2
          },
          series: [
            {
              name: "次数",
              type: "line",
              data: [],
              symbol: 'circle',//折线点设置为实心点
              symbolSize: 15,   //折线点的大小
              barWidth: 30,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  formatter: (params) => {
                      let str = ''
                      str = this.otherData[params.dataIndex]
                      return str

                  }
                }
              },
              //配置样式
              itemStyle: {
                //通常情况下：

                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                normal: {
                  color:(params) => {
                    //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                    var colorList = [
                      ['#409EFF','#409EFF'],
                      ['#f56c6c','#f56c6c']
                      ];
                    if(params.seriesName == this.otherData[params.dataIndex]){
                      var index = 0 
                    }else {
                      var index = 1
                    }
                    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: {
                    width:2,
                    color: "#cccccc"//折线的颜色
                  },
                  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 // 锁定区域禁止缩放
            }
          ]
        },
        otherData:[],
      }
    },
    methods: {
      GetPatientInspectionIndexChart(params) {
        this.options.xAxis.data = []
        this.options.series[0].data = []

        this.options2.xAxis.data = []
        this.options2.series[0].data = []
        GetPatientInspectionIndexChart(params)
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {

              let tempData = []
              let otherData = []

              for (let i = 0; i < resp.data.data.length; i++) {

                if (this.$route.query.range_type == 1) {
                  this.options.xAxis.data.push(resp.data.data[i].date)
                  this.options.series[0].data.push(resp.data.data[i].value)
                }else{
                  this.options2.series[0].data.push("1")
                  this.options2.xAxis.data.push(resp.data.data[i].date)
                  tempData.push(resp.data.data[i].value)
                  otherData.push(resp.data.data[i].value)
                  this.options2.series[0].name = resp.data.references.range_value
                  
                }
              }
              this.otherData = otherData
              if(this.$route.query.range_type == 1){
                this.getArrLength(this.options.xAxis.data,1)
              }else{
                this.getArrLength(this.options2.xAxis.data,this.$route.query.range_type)
              }

              


              //获取无法确定选项的颜色
              if (this.query.range_type == 2) {
                //去重复
                let obj = {}
                tempData = tempData.reduce((cur, next) => {
                  obj[next] ? "" : (obj[next] = true && cur.push(next));
                  return cur;
                }, []);

                //随机获取颜色值
                let newObj = {}
                for (let i = 0; i < tempData.length; i++) {
                  newObj[tempData[i]] = this.getColor()
                }

                //匹配对应的颜色值
                for (let i = 0; i < otherData.length; i++) {
                  for (let key in newObj) {
                    if (otherData[i] === key) {
                      this.custom_chart_data_color.push(newObj[key])
                    }
                  }
                }
              }

            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      },
      setTime(val,project_id, item_id, range_type, range_value,patient_id,start_time, end_time) {
        switch (val) {
          case 1: //本月

            this.query.start_time = moment().subtract('month', 1).format('YYYY-MM-DD')

            // 本月的结束时间
            this.query.end_time = moment(new Date()).format('YYYY-MM-DD')


            this.query.patient_id = patient_id
            this.query.project_id = project_id
            this.query.item_id = item_id
            this.query.range_type = range_type
            this.query.range_value = range_value

            this.GetPatientInspectionIndexChart(this.query)

            break
          case 2: //近3个月
            const startDate = moment().subtract('month', 3).format('YYYY-MM-DD')
            this.query.start_time = startDate
            const endDate = moment(new Date()).format('YYYY-MM-DD')
            this.query.end_time = endDate
            this.query.patient_id = patient_id
            this.query.project_id = project_id
            this.query.item_id = item_id
            this.query.range_type = range_type
            this.query.range_value = range_value

            this.GetPatientInspectionIndexChart(this.query)

            break
          case 3: //近半年
            this.query.start_time = moment().subtract('month', 6).format('YYYY-MM-DD')
            this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
            this.query.patient_id = patient_id
            this.query.project_id = project_id
            this.query.item_id = item_id
            this.query.range_type = range_type
            this.query.range_value = range_value

            this.GetPatientInspectionIndexChart(this.query)
            break
          case 4: //近一年
            this.query.start_time = moment().subtract('month', 12).format('YYYY-MM-DD')
            this.query.end_time =  moment(new Date()).format('YYYY-MM-DD')
            this.query.patient_id = patient_id
            this.query.project_id = project_id
            this.query.item_id = item_id
            this.query.range_type = range_type
            this.query.range_value = range_value


            this.GetPatientInspectionIndexChart(this.query)

            break
          case 5: //自定义



            this.query.start_time = start_time
            this.query.end_time =  end_time
            this.query.patient_id = patient_id
            this.query.project_id = project_id
            this.query.item_id = item_id
            this.query.range_type = range_type
            this.query.range_value = range_value
            this.GetPatientInspectionIndexChart(this.query)

            break

        }

      },initData(){
        let params={
          start_time:  moment().subtract('month', 1).format('YYYY-MM-DD'),
          end_time:  moment(new Date()).format('YYYY-MM-DD'),
          patient_id:  this.$route.query.patient_id,
          project_id: this.$route.query.project_id,
          item_id: this.$route.query.item_id
        }
        this.GetPatientInspectionIndexChart(params)
      },changePatient(id){
        this.patient_id = id
        this.query.patient_id = id
        this.GetPatientInspectionIndexChart(this.query)

      },
      getArrLength(result,type){
        if(type == 1){
          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
          }
        }else{
          if(result.length > 6){
            var dataZoom_end = (6/result.length)*100;
            this.options2.dataZoom[0].end = dataZoom_end
          }else{
            var dataZoom_end = 100;
            this.options2.dataZoom[0].end = dataZoom_end
          }
        }

      }
    },created(){


    }
  }
</script>

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

  .chart1 {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin: 0.625rem 0 0.625rem 0.8125rem;
  }

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

  }

</style>
