<template>
    <div class="fillingDegree">
        <div class="item">
          <QiunDataCharts
              type="ring"
              :opts="opts"
              :chartData="res"
              :animation="false"
              :inScrollView="true"
              :canvas2d="true"
              tooltipFormat="fillingDegree"
              @getIndex="tap"
          />
<!--            <canvas style="width: 100vw;height: 280px;position: fixed;left: 100%" class="fillDegree" canvas-id="fillDegree" id="fillDegree" @tap="tap"/>-->
<!--            <image style="width: 100vw;height: 280px" v-if="fillDegreePath" class="fillDegree" :src="fillDegreePath"></image>-->
        </div>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
    name: "fillingDegree",
  components: {QiunDataCharts},
    data() {
        return {
          width:0,
          fillDegreePath:'',
          selectIndex: 0,
          dataList : [],
          isTap:false,//判断是否走了tap
          opts:{},
          res:{}
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.handleCarData(value)
            },
            immediate: true
        }
    },
    methods: {
        handleChange(){
            if (this.isTap){
                this.isTap = false
            }else{
                this.$emit('handleChangeBandLevel',false)
            }
        },
        tap(e){
          if (e.currentIndex===-1){
            this.$emit('handleChangeBandLevel',false)
          }else{
            let selectIndex = e.opts._series_[e.currentIndex].key
            if (selectIndex){
              this.$emit('handleChangeBandLevel',selectIndex)
            }
          }
          // this.selectIndex = opts.series[index].key
          // if (this.selectIndex){
          //     // this.$emit('handleChangeBandLevel',this.selectIndex)
          // }else{
          //     // this.$emit('handleChangeBandLevel',false)
          // }
          // this.isTap = true
        },
        // 处理传入的数据
        handleCarData(value) {
            let res = value.result
            let config = {
                Abundant:value.Abundant
            }
            this.res=  res
          console.log('this.res',this.res)
          this.opts = {
            animation: false,
            rotate: false,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
            padding: [5, 5, 5, 5],
            dataLabel: false,
            enableScroll: false,
            title: {
              // name:config.Abundant?'盈足':'不盈足',
              name:'',
              fontSize: 16,
              color: "#341D00"
            },
            subtitle:{
              name:''
            },
            legend: {
              show: true,
              position: "right",
              lineHeight: 25,
              float: 'center'

            },
            extra: {
              ring: {
                ringWidth: 20,
                activeOpacity: 0.5,
                activeRadius: 10,
                offsetAngle: -45,
                labelWidth: 15,
                border: false,
                borderWidth: 3,
                borderColor: "#FFFFFF"
              }
            }
          }
            // this.drawCharts('fillDegree', res ,config)
        },
        drawCharts(id, data,config) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 32
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: _this.width,
                height: 289,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
                padding: [5, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                title: {
                    name:config.Abundant?'盈足':'不盈足',
                    fontSize: 16,
                    color: "#341D00"
                },
                legend: {
                    show: true,
                    position: "right",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    ring: {
                        ringWidth: 20,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: -45,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF"
                    }
                }
            });
          setTimeout( ()=>{
            this.canvasToTempImage('fillDegree')
          },2000)
        },
      canvasToTempImage(id){
        uni.canvasToTempFilePath({
          canvasId:id,
          complete:(res)=>{
            if (res.tempFilePath){
              uni.getFileSystemManager().readFile({
                filePath: res.tempFilePath,
                encoding: 'base64',
                success: res => {
                  let base64 = 'data:image/png;base64,' + res.data;
                  this.fillDegreePath = base64
                }
              })
            }
          }
        },this)
      },
    }
}
</script>

<style scoped lang="scss">
.fillingDegree{
    width: 100%;
  height: 280px;
    margin-top: 12px;
    .item{
        width: 100%;
        height: 280px;
        .fillDegree{
            width: 100%;
            height: 100%;
        }
    }
}
</style>
