<template>
  <div>
    <div class="businessFormat" >
      <QiunDataCharts
          type="ring"
          :opts="opts"
          :chartData="res"
          :animation="false"
          :inScrollView="true"
          :canvas2d="true"
          tooltipFormat="businessFormat"
      />
      <!--        <canvas  class="format" style="width: 100vw;height: 260px;position: fixed;left: 100%" canvas-id="businessFormat" id="businessFormat" @tap="tap"/>-->
      <!--        <image style="width: 100vw;height: 260px" v-if="formatPath" class="format" :src="formatPath"></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: "businessFormat",
    components: {QiunDataCharts},
    data() {
        return {
            width:0,
            formatPath:'',
          opts:{},
          res:{},
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
              console.log('value1232132',value)
              this.handleCarData(value)
            },
            immediate: true
        }
    },
    onShow(){
      console.log('data',this.data)
    },
    methods: {
        tap(e){
            uChartsInstance[e.target.id].showToolTip(e, {
                formatter: (item, category, index, opts) => {
                    return item.name+',' + opts.series[index].text
                }
            });
            uChartsInstance[e.target.id].touchLegend(e);
        },
        // 处理传入的数据
        handleCarData(value) {
          let res = value
          this.res = res
          this.opts = {
            series: res.series,
            animation: false,
            rotate: false,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#00C2FF","#6B6FFF","#38C275","#1E80FF", "#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
            padding: [5, 5, 5, 5],
            dataLabel: false,
            enableScroll: false,
            title: {
              name: '刚需型',
              fontSize: 16,
              color: "#341D00"
            },
            subtitle: {
              name: "理想业态布局",
              fontSize: 12,
              color: "#786B6C",
            },
            legend: {
              show: true,
              position: "right",
              lineHeight: 25,
              float: 'center'

            },
            extra: {
              ring: {
                ringWidth: 14,
                activeOpacity: 0.5,
                activeRadius: 10,
                offsetAngle: -45,
                labelWidth: 15,
                border: false,
                borderWidth: 3,
                borderColor: "#FFFFFF"
              }
            }
          }
            // this.drawCharts('businessFormat', res)
        },
        drawCharts(id, data) {
            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: 280,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#00C2FF","#6B6FFF","#38C275","#1E80FF", "#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
                padding: [5, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                title: {
                    name: '刚需型',
                    fontSize: 16,
                    color: "#341D00"
                },
                subtitle: {
                    name: "理想业态布局",
                    fontSize: 12,
                    color: "#786B6C",
                },
                legend: {
                    show: true,
                    position: "right",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    ring: {
                        ringWidth: 14,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: -45,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF"
                    }
                }
            });
            setTimeout( ()=>{
                this.canvasToTempImage('businessFormat')
            },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.formatPath = base64
                            }
                        })
                    }
                }
            },this)
        },
    }
}
</script>

<style scoped lang="scss">
.businessFormat{
    width: 100%;
  height: 260px;
    .format{
        width: 100%;
        height: 260px;
    }
}
.noData{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  padding: 16px 0;
  .img{
    width:60px;
    height: 60px;
    margin-bottom: 8px;
  }
  .text{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6C737A;
    line-height: 20rpx;
  }
}
</style>
