<template>
    <div style="min-height: 100px;">
            <div class="main" >
                <div class="homePlace">
                    <canvas  canvas2d="true" class="carNum" canvas-id="homePlace" id="homePlace" @tap="handleTap"/>
<!--                    <image v-if="homePlacePath" class="carNum" :src="homePlacePath"></image>-->
                </div>
                <div class="homeCity">
<!--                    <div class="dashed box1"></div>-->
<!--                    <div class="dashed box2"></div>-->
<!--                    <div class="dashed box3"></div>-->
<!--                    <div class="dashed box4"></div>-->
<!--                    <div class="dashed box5"></div>-->
<!--                    <div class="dashed box6"></div>-->
                    <span class="title">{{provinceName}}</span>
                    <view class="item" v-for="(item,index) in progressList" :key="index" @click="handleShow(index)">
                        <view class="top">
                            <p class="title">{{item.name}}</p>
                            <p class="rate"> {{item.rate}}</p>
                        </view>
                        <view class="progress">
                            <view class="have" :style="{width:item.rate}"></view>
                            <view class="meng" v-if="selectIndex === index">{{item.value}}辆</view>
                        </view>
                    </view>
<!--                    <div class="notice">-->
<!--                        <text class="noticeInfo notice1">0%</text>-->
<!--                        <text class="noticeInfo notice2">20%</text>-->
<!--                        <text class="noticeInfo notice3">40%</text>-->
<!--                        <text class="noticeInfo notice4">60%</text>-->
<!--                        <text class="noticeInfo notice5">80%</text>-->
<!--                        <text class="noticeInfo notice6">100%</text>-->
<!--                    </div>-->
                </div>
            </div>
    </div>

</template>

<script>
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
var uChartsInstance = {};
export default {
    name: "homePlace",
    components: {Analyse, NoData},
    data() {
        return {
            isShowData:false,
            homeDataisTrue:false,
            homeCityisTrue:false,
            homePlacePath:'',//图片路径
            progressList:[],//进度条数组
            analyseInfo:{
                analysisins_type: 1103,
                analysisins_format: 2000
            },
            textList:[],
            selectIndex:7,
            provinceName:'',
            selectValueNumber:''
        }
    },
    props: {
        homeData: {
            type: Array,
            default: () => []
        },
        homeCity:{
            type:Array,
            default:() => []
        },
        selectProvinceName:{
            type:String,
            default:''
        },
        selectValue:{
            type:Number,
            default:0
        }
    },
    watch: {
        homeData: {
            handler(value) {
                this.homePlacePath = ''
                this.handleCarData(value)
            },
            immediate:true,
            deep:true
        },
        homeCity:{
            handler(value){
              value.forEach(item=>{
                item.rate = item.rate.toFixed(2) + '%'
              })
              this.progressList = value
            },
            immediate:true,
            deep:true
        },
        selectProvinceName:{
            handler(value){
             this.provinceName= value
            },
            immediate:true,
            deep:true
        },
      selectValue:{
        handler(value){
          this.selectValue= value
        },
        immediate:true,
        deep:true
      }
    },
    methods: {
      //点击出现的框
      handleShow(num){
        this.selectIndex = num
      },
        //点击事件
        handleTap(e){
          let  index = uChartsInstance[e.target.id].getCurrentDataIndex(e);
            if (index===-1){
              this.$parent.handleGetHome(null,null,true)
              uChartsInstance[e.target.id].showToolTip(e,{})
            }else{
              uChartsInstance[e.target.id].showToolTip(e,{
                formatter: (item, category, index, opts) =>{
                  if (item.name.split(' ')[0] === '其他'){
                    let str = ''
                    this.homeData.forEach(item=>{
                      if (item.name.split(' ')[0]!=='其他'){
                        if (str===''){
                          str = item.name.split(' ')[0]
                        }else{
                          str+=`,${item.name.split(' ')[0]}`
                        }
                      }
                    })
                    this.$parent.handleGetHome(str,item.value)
                  }else{
                    this.$parent.handleGetHome(item.name.split(' ')[0],item.value)
                  }
                  return item.name + ":" + item.data + '辆';
                }
              });
            }
            uChartsInstance[e.target.id].touchLegend(e);
        },
        // 处理传入的数据
        handleCarData(value) {
          let list = []
          value.forEach(item=>{
            list.push(item.data)
          })
          this.listCar = list
            let res = {
                series:[
                    {
                        data: value
                    }
                ]
            }
            this.drawCharts('homePlace', res,this.provinceName)
        },
        drawCharts(id, data,provinceName) {
            const ctx = uni.createCanvasContext(id, this);
            let phoneInfo = uni.getStorageSync('phoneInfo')
            let width = phoneInfo.screenWidth-32
          const _this = this
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: width,
                height: 160,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                canvas2d: true,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00B6FF","#38C275","#6B6FFF","#6B85AE"],
                padding: [5, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                // title:{
                //   name: provinceName
                // },
                legend: {
                    show: true,
                    position: "right",
                    lineHeight: 25
                },
                extra: {
                    ring: {
                        ringWidth: 12,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: -45,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF"
                    }
                }
            });
            setTimeout(()=>{
                // this.canvasToTempImage('homePlace')
            },1000)
        },
        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.homePlacePath = base64
                            }
                        })
                    }
                }
            },this)
        }
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
    .homePlace{
        height: 160px;
        width: 100%;
        .carNum{
          position: absolute;

            width: 100%;
            height: 160px;
        }
    }
    .homeCity{
        width: 100%;
        position: relative;
        overflow: hidden;
        .title{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #160002;
          line-height: 20px;
        }
        .dashed{
          width: 1px;
          height: 85%;
          position: absolute;
          border-right: 1px dashed #ccc;
        }
        .box1{
          left: 0;top: 10%;
        }
        .box2{
          left: 20%;top: 10%;
        }
        .box3{
          left: 40%;top: 10%;
        }
        .box4{
          left: 60%;top: 10%;
        }
        .box5{
          left: 80%;top: 10%;
        }
        .box6{
          left: 99%;top: 10%;
        }
        .item{
            width: 100%;
            margin-bottom: 12px;
            .top{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 4px;
                .title{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 20px;
                }
                .rate{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 20px;
                }
            }
            .progress{
                width: 100%;
                height: 14px;
                background: #E5E8EF;
                border-radius: 2px;
                position: relative;
                .have{
                    height: 100%;
                    background: #1E80FF;
                    border-radius: 2px;
                    position: absolute;
                    left: 0;top: 0;
                }
              .meng{
                position: absolute;
                display: inline-block;
                padding: 0 5px;
                z-index: 9;
                left: 22%;top: -23px;
                background: rgba(0,0,0,0.6);
                color:#fff;
                border-radius: 2px;
              }
            }
        }
      .notice{
        width: 100%;
        height: 18px;
        margin-top: 8px;
        position: relative;
        .noticeInfo{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 18px;
          position: absolute;
        }
        .notice1{
          left: 0;top: 0;
        }
        .notice2{
          left: 20%;top: 0;
          transform: translateX(-50%);
        }
        .notice3{
          left: 40%;top: 0;
          transform: translateX(-50%);
        }
        .notice4{
          left: 60%;top: 0;
          transform: translateX(-50%);
        }
        .notice5{
          left: 80%;top: 0;
          transform: translateX(-50%);
        }
        .notice6{
          right: 0%;top: 0;
        }
      }
    }
}

</style>
