<template>
    <div class="moneyCompare">
      <qiunDataCharts
          type="column"
          :opts="opts"
          :chartData="res"
          :animation="false"
          :inScrollView="true"
          :canvas2d="true"
          tooltipFormat="moneyCompare"
      />
<!--        <canvas style="width: calc(100vw - 32px);height: 200px;position: fixed;left: 100%"  class="compare" canvas-id="compare" id="compare"  @tap="tap"/>-->
<!--        <image style="width: calc(100vw - 32px);height: 200px;" v-if="comparePath" class="compare" :src="comparePath"></image>-->
    </div>
</template>

<script>
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "moneyCompare",
  components:{QiunDataCharts},
    data() {
        return {
          width:0,
          comparePath:'',
          dataList: [],
          selectIndex:0,
          opts:{},
          res:{}
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.comparePath = ''
                this.dataList = value
                this.selectIndex = value.type
              console.log('value',value)
                this.handleCarData(value)
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        tap(e){
            uChartsInstance[e.target.id].showToolTip(e, {
                formatter: (item, category, index, opts) => {
                  const date = new Date()
                  let m = date.getMonth()
                  if (index >m){
                      if (this.selectIndex===0){
                          if (item.name === '工作日平均'){
                              return item.name + "：" + item.data + '万元'
                          }else if(item.name === '周末平均'){
                              return item.name + "：" + item.data + '万元'
                          }else {
                              return item.name + "：" + item.data + '万元'
                          }
                      }else if(this.selectIndex === 1){
                          if (item.name === '工作日平均'){
                              return item.name + "：" + this.$util.noDecimal(item.data) + '笔'
                          }else if(item.name === '周末平均'){
                              return item.name + "：" + this.$util.noDecimal(item.data) + '笔'
                          }else {
                              return item.name + "：" +this.$util.noDecimal(item.data) + '笔'
                          }
                      }else if(this.selectIndex === 2){
                          if (item.name === '工作日平均'){
                              return item.name + "：" + item.data + '元'
                          }else if(item.name === '周末平均'){
                              return item.name + "：" + item.data + '元'
                          }else {
                              return item.name + "：" + item.data + '元'
                          }
                      }

                  }else{
                    if (this.selectIndex===0){
                        if (item.name === '工作日平均'){
                            return item.name + "：" + item.data + '万元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
                        }else if(item.name === '周末平均'){
                            return item.name + "：" + item.data + '万元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
                        }else {
                            // 判断有节假日就显示括号 没有就不显示
                            if (opts.series[2].holiday[index][1]){
                                return item.name + "：" + item.data + '万元' + '(' +  opts.series[2].holiday[index][1] + ')'
                            }else{
                                return item.name + "：" + item.data + '万元'
                            }
                        }
                    }else if (this.selectIndex === 1){
                        if (item.name === '工作日平均'){
                            return item.name + "：" + this.$util.noDecimal(item.data) + '笔，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
                        }else if(item.name === '周末平均'){
                            return item.name + "：" + this.$util.noDecimal(item.data) + '笔，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
                        }else {
                            if (opts.series[2].holiday[index][1]){
                                return item.name + "：" + this.$util.noDecimal(item.data) + '笔' + '(' +  opts.series[2].holiday[index][1] + ')'
                            }else{
                                return item.name + "：" + this.$util.noDecimal(item.data) + '笔'
                            }
                        }
                    }else if(this.selectIndex === 2){
                        if (item.name === '工作日平均'){
                            return item.name + "：" + item.data + '元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
                        }else if(item.name === '周末平均'){
                            return item.name + "：" + item.data + '元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
                        }else {
                            if (opts.series[2].holiday[index][1]){
                                return item.name + "：" + item.data + '元' + '(' +  opts.series[2].holiday[index][1] + ')'
                            }else{
                                return item.name + "：" + item.data + '元'
                            }
                        }
                    }
                    // if (this.selectIndex===0){
                    //     if (item.name === '平日平均'){
                    //         return item.name + ":" + this.dataList.normal[0].data[index] + '元';
                    //     }else if(item.name === '周末平均'){
                    //         return item.name + ":" + this.dataList.normal[1].data[index] + '元';
                    //     }else if(item.name === '节假日平均'){
                    //         return item.name + ":" + this.dataList.normal[2].data[index] + '元';
                    //     }
                    // } else{
                    //     return item.name + ":" + item.data
                    // }
                  }

                }
            });
            uChartsInstance[e.target.id].touchLegend(e);
        },
        // 处理传入的数据
        handleCarData(value) {
          console.log('1111',value)
            let res = value
          let max = 0
          value.series.forEach(item=>{
            item.data.forEach(subItem=>{
              if (max < Number(subItem)){
                max = Number(subItem)
              }
            })
          })
          console.log('max',max)
            let config  = {
                max:this.getSplitNumber(max)
            }
            this.res = res
            this.opts = {
              categories: res.categories,
              series: res.series,
              animation: false,
              rotate: false,
              rotateLock: false,
              background: "#FFFFFF",
              color: ["#1E80FF", "#00B6FF","#ACB9CD"],
              padding: [15, 40, 5, 0],
              dataLabel: false,
              enableScroll: false,
              legend: {
                show: true,
                position: "bottom",
                lineHeight: 25,
                float: 'center'
              },
              xAxis: {
                disableGrid: true,
                axisLineColor:'#F2F2F5'
              },
              yAxis: {
                showTitle:false,
                splitNumber:4,
                gridColor:'#F2F2F5',
                data: [
                  {
                    min: 0,
                    max:config.max,
                    titleOffsetX:15,
                    titleOffsetY:-5,
                    fontSize:12,
                    axisLineColor:'#F2F2F5'
                  }
                ],
              },
              otherType:res.type,
              extra: {
                column: {
                  type: "group",
                  width: 5,
                  seriesGap:4,
                  activeBgColor: "#000000",
                  activeBgOpacity: 0.08,
                  barBorderRadius:[3,3,0,0]
                }
              }
            }

            // this.drawCharts('compare', res,config)
        },
        getSplitNumber(value){
            if (value === 0){
                return 5
            }else{
                let sum = Number(value) + Number(value) *0.2
                return  Number((sum / 4).toFixed(0)) * 4
            }
        },
        drawCharts(id, data,config) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width = phoneInfo.screenWidth
            uChartsInstance[id] = new uCharts({
                type: "column",
                context: ctx,
                width: _this.width,
                height: 208,
                categories: data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00B6FF","#ACB9CD"],
                padding: [15, 40, 5, 0],
                dataLabel: false,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'
                },
                xAxis: {
                    disableGrid: true,
                    axisLineColor:'#F2F2F5'
                },
                yAxis: {
                    showTitle:false,
                    splitNumber:4,
                    gridColor:'#F2F2F5',
                    data: [
                        {
                            min: 0,
                            max:config.max,
                            titleOffsetX:15,
                            titleOffsetY:-5,
                            fontSize:12,
                            axisLineColor:'#F2F2F5'
                        }
                    ],
                },
                extra: {
                    column: {
                        type: "group",
                        width: 5,
                        seriesGap:4,
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08,
                        barBorderRadius:[3,3,0,0]
                    }
                }
            });
          setTimeout( ()=>{
            this.canvasToTempImage('compare')
          },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.comparePath = base64
                }
              })
            }
          }
        },this)
      },
    }
}
</script>

<style scoped lang="scss">
.moneyCompare{
  width: 100vw;
  height: 200px;
    .compare{
        width: calc(100vw - 32px);
        height: 200px;
    }
}
</style>
