<template>
    <!--<div class="hello" style="width:100%; height:195px;margin:0 auto;padding:20px 0">-->
        <div class="hello" :style="'width:'+ barwidthL +'%;height:'+barheight+'px;margin:0 auto;padding:20px 0'">
            <!--<div class="topic_box">-->
            <!--<p class="topic_title">题目：</p>-->
            <!--<div class="topic_content">题目内容</div>-->
            <!--</div>-->
            <!--<button  @click="drawLine(1)">变色</button>-->
            <div id="main"  :style="'width:'+barwidthL+'%;height:'+barheight+'px;'"></div>
        </div>
</template>
<script>
    export default {
      props:["toBarAnswer","cssoption"],
      data () {
      return {
          defaultcolor: ['#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF'],
          AnswerValuebox: [],
          BarData: [0,0,0,0,0,0,0,0,0,0],
          cssvalue: '',
          barheight: '240',
          barwidthL: '95',
          letterOrnumber:["A", "B", "C", "D","E","F","G","H","I","J"],
      }
        },
        created() {
            this.init();
        },
        mounted() {
            this.cssvalues()
        },
        computed: {
        DynamicAnswerstatusone() {
            return this.$store.state.dynamicanswerstatus;
        },
        Answervaluetwo() {
            return this.$store.state.answervalue;
        },
        echartbaranswer() {
            return this.$store.state.echartbaranswer
        },
        Answerstatus() {
            return this.$store.state.answerstatus
            }
        },
        methods: {
            cssvalues() {
                this.cssvalues =this.$store.state.cssvalue
                let echartdata = this.$store.state.echartbaranswer
                console.log(echartdata,'echarts数据！')
                let ncolor = ['#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF']
                if (this.cssvalues === '1') {
                this.barheight='600'
                document.getElementById('main').style.height = this.barheight + 'px';
                let shopCharts = this.$echarts.init(
                    document.getElementById("main")
                );
                 shopCharts.resize();
                }
            },
        drawLine(defaultcolor,Data,patternvalue) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('main'))
        // 绘制图表
        myChart.setOption({
            tooltip: {},
            xAxis: {
                data:patternvalue,
                axisLabel: {
       show: true,
        textStyle: {
          color: '#6D7278',  //更改坐标轴文字颜色
          fontSize : 20      //更改坐标轴文字大小
        }
     },
            },
           yAxis : [
         {
             min: 0,
             max: 100,
             axisLine: {show:false},
             axisTick: {show:false},
             splitLine:{show:false},
             axisLabel : {
             formatter: function(){
             return " ";
             }
             }
          }
           ],
            series: [{
                name: '答案占比',
                type: 'bar',
                barWidth: 80,
                data: Data,
                itemStyle: {
                 normal: {
                  //柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: function(params) {
                    var colorList = defaultcolor;
                    return colorList[params.dataIndex]
                    }, 
                  label: {
                   show: true,//是否展示,
                  position: "top",
                   formatter: '{@score}%',
                   textStyle: {
                    fontSize : '20',
                    fontFamily: '微软雅黑',
                    color:"#1E90FF"
                    },
                  },
                  }
                },
                      }
            ]
        });
        },
            init() {
                let answerpattern = this.$store.state.answerpattern
                let AnswerSelect = this.$store.state.AnswerSelect
                console.log(AnswerSelect,'字母选择')
                let NumberSelect = this.$store.state.AnswerNumselect
                console.log(NumberSelect,'数字选择')
                if (answerpattern === 'letter') {
                    this.letterOrnumber = AnswerSelect
                } else if (answerpattern === 'number') {
                    this.letterOrnumber = NumberSelect
                }
            let color=this.defaultcolor
            this.AnswerValuebox = this.$store.state.answervalue
            if (this.AnswerValuebox) {
                let rightanswer = this.AnswerValuebox[0];
                console.log(rightanswer,'答案内容')
                if (rightanswer === 'A' || rightanswer == '1') {
                    rightanswer = 0
                } else if (rightanswer === 'B'|| rightanswer == '2') {
                    rightanswer = 1
                } else if (rightanswer === 'C' || rightanswer == '3') {
                    rightanswer = 2
                } else if (rightanswer === 'D' || rightanswer == '4') {
                     rightanswer = 3
                } else if (rightanswer === 'E' || rightanswer == '5') {
                     rightanswer = 4
                } else if (rightanswer === 'F' || rightanswer == '6') {
                     rightanswer = 5
                } else if (rightanswer === 'G' || rightanswer == '7') {
                     rightanswer = 6
                } else if (rightanswer === 'H' || rightanswer == '8') {
                     rightanswer = 7
                } else if (rightanswer === 'I' || rightanswer == '9') {
                     rightanswer = 8
                } else if (rightanswer === 'J' || rightanswer == '0') {
                     rightanswer = 9
                }
                console.log(rightanswer,'答案数字')
                color.splice(rightanswer,rightanswer,"#FC8C00")
                console.log(color)
            } else {
               this.BarData=this.$store.state.echartbaranswer
            }
            console.log(this.$store.state.answervalue, '目前答案结果');
        },
    },
        watch: {
            echartbaranswer(a) {
                console.log(a,'a')
                let newColor = ['#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF']
                let nowpattern=this.letterOrnumber
                this.drawLine(newColor, a,nowpattern);
            },
            BarData(b) {
                console.log(b,'b')
                let newColor = ['#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF']
                let nowpattern=this.letterOrnumber
                this.drawLine(newColor,b,nowpattern);
            },
            defaultcolor(e) {
                let answercolor = e
                let echartsanswer = this.$store.state.echartbaranswer
                let nowpattern=this.letterOrnumber
                console.log(answercolor, '!!!!!')
                console.log(echartsanswer,'---------')
                this.drawLine(answercolor,echartsanswer,nowpattern);
            },
    }
  }
</script>
<style scoped>
  .topic_box{
    /*width:50%;*/
    height:400px;
    display: block;
    float: left;
    padding: 5px;
  }
  .topic_title{
    font-size: 18px;
  }
  .topic_content{
    padding: 5px 0px;
  }
</style>
