<template>
  <div id="sevenDayChart">
    <div class="d-flex pt-2 pl-2">
      <span>
        <icon name="chart-bar" class="text-icon"></icon>
      </span>
      <div class="d-flex">
        <span class="fs-xl text mx-2">历史分数走势</span>
      </div>
    </div>
    <Echart
          :options="options"
          height="100%"
          width="100%"
        ></Echart>
  </div>
</template>
<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options:{},
    }
  },
  components: {
    Echart
  },
  props:{
      cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        //console.log("===align-items============")
        //console.log(newData);
       //this.alermList = newData;

      var colors = ["#0AF579"];
     this.options={
        //backgroundColor: 'transparent',
        title: {
          //text: title,
          textAlign: 'left',
          textStyle: {
            color: "#fff",
            fontSize: "16",
            fontWeight: "normal"
          }
        },
        color: colors,
        grid: {
          left: '2%',
          top: "15%",
          bottom: "15%",
          right: "4%",
          containLabel: true
        },
          tooltip: {
              trigger: 'axis'
          },
          xAxis: {
            data: newData.days,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                type: 'solid'
              }
            },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          axisTick: {
            show: false
          }
          },
          yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          splitLine: {                // 分隔线
             show: true,        // 默认显示，属性show控制显示与否
             lineStyle: {          // 属性lineStyle（详见lineStyle）控制线条样式
               color: ['#787878'],
               width: 1,
               type: 'dotted'//可选为：'solid' | 'dotted' | 'dashed'
            }
          },
          max: 100
        },
          visualMap: {
              top: 10,
              right: 10,
              show: false,
              pieces: [{
            gt: 85,
            lte: 100,
            color: '#00FFFF'
          }, {
            gt: 70,
            lte: 85,
            color: '#00FF00'
          }, {
            gt: 55,
            lte: 70,
            color: '#e27e08'
          }, {
            gt: 0,
            lte: 55,
            color: '#ff0000'
          }],
          outOfRange: {
            color: '#999'
          }
          },

          series: {
              name: '安全分',
              type: 'line',
              data:newData.data,
              symbol: "circle",
              symbolSize: 2,
              markLine: {
                  silent: true,
                  data: [
                      {
                          yAxis: 55,
                          lineStyle: {
                              normal: {
                                  color: '#ff0000',
                              }

                          },
                      }, {
                          yAxis: 70,
                          lineStyle: {
                              normal: {
                                  color: '#e27e08',
                              }
                          },
                      }, {
                          yAxis: 85,
                          lineStyle: {
                              normal: {
                                  color: '#218cd7',
                              }
                          },
                      },
                  ]
              }, 
              markPoint: {
            itemStyle: {
                normal: {
                   label: {
                     textStyle: {
                       fontSize:10
                     }
                     }
                }
            },
            symbolSize:35,
            data: [{
                type: 'max',
                name: '最大值'
              },
              {
                type: 'min',
                name: '最小值'
              }
            ]
          }
          }
      };

      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    
    
  },
  methods: {
    changeTiming() {
     
    },
    changeNumber() {
    
    }
  }
}
</script>
<style lang="scss" scoped>
  $box-width: 100%;
  $box-height: 410px;

 #sevenDayChart {
   padding: 16px;
   height: $box-height;
   width: $box-width;
}
</style>