<template>
  <div class="main">
    <div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
      <div class="pk">
          <div class="gender">
              <div class="left">
                  <p class="name">男</p>
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/man.svg"></image>
              </div>
              <p class="rate">{{man}}%</p>
          </div>
          <image class="vs" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/vs.svg"></image>
          <div class="gender">
              <div class="right" style="float: right">
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/woman.svg"></image>
                  <p class="name">女</p>
              </div>
              <p class="rate">{{woman}}%</p>
          </div>
      </div>
      <div class="progress">
          <div class="man" :style="{width: man + '%'}" @click="handleShow(0)">
            <view class="meng" v-if="genderList[0]">男生{{man}}%</view>
          </div>
          <div class="woman" :style="{width: woman + '%'}" @click="handleShow(1)">
            <view class="meng" v-if="genderList[1]">女生{{woman}}%</view>
          </div>
      </div>
      <div class="charts">
        <QiunDataCharts
            type="bubble"
            :opts="opts"
            :chartData="res"
            :animation="false"
            :canvas2d="true"
            :inScrollView="true"
            tooltipFormat="customerSecond"
        />
<!--          <canvas  class="sexRatio" style=" width: 100vw;height: 220px;position: fixed;left: 100vw" canvas-id="gender" id="gender" @tap="tap"/>-->
<!--          <image class="sexRatio" style=" width: 100vw;height: 220px;" v-if="customerSecondPath" :src="customerSecondPath"></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: "customerSecond",
  components: {QiunDataCharts},
    data() {
        return {
            man:0,
            woman:0,
            width:0,//手机宽度
            customerSecondPath:'',//路径
            genderList:[false,false],
          opts:{},
          res:{},
          showMeng:false
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.handleCarData(value)
            },
          deep:true,
          immediate:true,
        }
    },
    methods:{
        tap(e){
            uChartsInstance[e.target.id].touchLegend(e);
        },
        handleNoShow(){
          this.genderList = []
          this.showMeng = false
        },
        handleShow(num){
          let list = []
          this.genderList.forEach(()=>{
            list.push(false)
          })
          this.genderList = list
          this.genderList[num] = true
          this.showMeng = true
        },
        // 处理传入的数据
        handleCarData(value) {
            this.man = value.man
            this.woman = value.woman
            let res = {
                series: value.res
            }
            this.res = res
          this.opts = {
            type: "bubble",
            series: res.series,
            animation: false,
            rotate: false,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#1E80FF", "#00C2FF"],
            padding: [15, 5, 5, 5],
            dataLabel: false,
            enableScroll: false,
            legend: {
              show: true,
              position: "bottom",
              lineHeight: 25,
              float: 'center'

            },
            xAxis: {
              disableGrid: true,
              gridType: "solid",
              splitNumber: 5,
              boundaryGap: "justify",
              title:'年龄: /岁',
              titleOffsetY: 15,
              titleOffsetX: -30,
              min: 10,
              max: 60,
              axisLineColor:'#F2F2F5'
            },
            yAxis: {
              disableGrid: false,
              gridType: "solid",
              showTitle:true,
              splitNumber:6,
              gridColor:'#F2F2F5',
              data: [
                {
                  title:'单位: /元',
                  min: 0,
                  max: 120,
                  titleOffsetY:-5,
                  titleOffsetX:0,
                  fontColor:'#786B6C',
                  axisLineColor:'#F2F2F5'
                }
              ]
            },
            extra: {
              bubble: {
                border: 1,
                opacity: 0.25
              }
            }
          }
            // this.drawCharts('gender', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 70
            uChartsInstance[id] = new uCharts({
                type: "bubble",
                context: ctx,
                width: _this.width,
                height: 240,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00C2FF"],
                padding: [15, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                xAxis: {
                    disableGrid: true,
                    gridType: "solid",
                    splitNumber: 5,
                    boundaryGap: "justify",
                    title:'年龄: /岁',
                    titleOffsetY: 15,
                    titleOffsetX: -30,
                    min: 10,
                    max: 60,
                    axisLineColor:'#F2F2F5'
                },
                yAxis: {
                    disableGrid: false,
                    gridType: "solid",
                    showTitle:true,
                    splitNumber:6,
                    gridColor:'#F2F2F5',
                    data: [
                        {
                            title:'单位: /元',
                            min: 0,
                            max: 120,
                            titleOffsetY:-5,
                            titleOffsetX:0,
                            fontColor:'#786B6C',
                            axisLineColor:'#F2F2F5'
                        }
                    ]
                },
                extra: {
                    bubble: {
                        border: 1,
                        opacity: 0.25
                    }
                }
            });
            setTimeout( ()=>{
                this.canvasToTempImage('gender')
            },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.customerSecondPath = base64
                            }
                        })
                    }
                }
            },this)
        },
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  margin-top: 12px;
  .mengBox{
    position: fixed;
    left: 0;top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
  }
  .pk{
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .vs{
          width: 60px;
          height: 36px;
      }
      .gender{
          .left,.right{
              display: flex;
              align-items: center;
              margin-bottom: 2px;
              .name{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 20px;
              }
              .icon{
                  width: 16px;
                  height: 16px;
              }
          }

          .rate{
              font-size: 18px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 22px;
          }
      }
  }
  .progress{
      padding: 0 16px;
      box-sizing: border-box;
      width: calc(100% - 32px);
      height: 14px;
      margin-top: 8px;
      position: relative;
      margin-left: 16px;
      .man{
          height: 100%;
          position: absolute;
          left: 0;top: 0;
          background: #1E80FF;
          margin-right: 2px;
          border-radius: 2px 0 0 2px;
        .meng{
          width: 90px;
          line-height: 24px;
          text-align: center;
          height: 24px;
          position: absolute;
          display: inline-block;
          padding: 0 5px;
          z-index: 9;
          left: 0;top: -20px;
          background: rgba(0,0,0,0.6);
          color:#fff;
          border-radius: 2px;
        }
      }
      .man:after{
          position: absolute;
          content:'';
          width: 1px;
          height: 100%;
          background: #FFFFFF;
          z-index:9;
          right: 0;
          top: 0;
      }
      .woman{
          height: 100%;
          position: absolute;
          right: 0;top: 0;
          background: #00C2FF;
          border-radius: 0  2px 2px 0 ;
          .meng{
              width: 90px;
              line-height: 24px;
              text-align: center;
              height: 24px;
              position: absolute;
              display: inline-block;
              padding: 0 5px;
              z-index: 9;
              left: 0;top: -20px;
              background: rgba(0,0,0,0.6);
              color:#fff;
              border-radius: 2px;
          }
      }
      .woman:after{
          position: absolute;
          content:'';
          width: 1px;
          height: 100%;
          background: #FFFFFF;
          z-index:9;
          left: 0;
          top: 0;
      }
  }
  .charts{
      margin-top: 20px;
      width: 100%;
      height: 220px;
      .sexRatio{
        width: calc(100vw - 32px);
          height: 100%;
      }
  }
}
</style>
