<template>
  <div>
    <!-- <dv-water-level-pond :config="config" class="dv" /> -->

  <div class="dv">
    <p style="font-size:12px;">本月汇总完成率</p>
<dv-decoration-9>{{total_finish_rate}}</dv-decoration-9>
  </div>
  

    
    <Echart
      :options="options"
      ref="e1"
      id="centreLeft1Chart"
      height="350px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import asyncRequest from "@/apis/service/bigScreen";
// import resToken from "@/mixins/resToken";
export default {
  data() {
    return {
      // config:{
      //   data: [55],
      //   shape: 'roundRect'
      // },
      obj:{

        total_finish_rate:11,
      },
      total_finish_rate:"",
      options : {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ["product",  "本月完成率" ,"本月完成金额"],
              
            ],
          },
          xAxis: { type: "category" },
          yAxis: {},
          series: [
            {
              type: "bar",
              barWidth:40,
              label: {
                show: true,
                color: "#fff", 
                position: 'top',
                formatter:  (params)=> {
                  return params.value[1]+"%"
                }
              },
              itemStyle: {
                normal: { 
                  color: "#1a8cd7",
                },
              },
            },
            {
              type: "bar",
              barWidth:40,
              label: {
                show: true,
                color: "#fff", 
                position: 'top',
                formatter: params=> {
                  return this.getNum(params.value[2])
                }
              },
              itemStyle: {
                normal: { 
                  color: "#28ffcd", 

                },
              },
            },
            // {
            //   type: "bar",
            //   barWidth:40,
            //   label: {
            //     show: true,
            //     color: "#fff", 
            //     position: 'top',
            //     formatter: function (params) {
            //       return params.value[3]+"%"
            //     }
            //   },
            //   itemStyle: {
            //     normal: { 
            //       color: "#ffbc25", 

            //     },
            //   },
            // }
          ],
        }
    }
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  mounted(){
    this.initHttp()
    // var myChart = document.getElementById("centreLeft1Chart");
    //  window.onresize =  (ec) => { // 监听窗口大小变化
    //     console.log(ec)
    //     myChart.resize()
    //     // myChart1.resize()       // 自适应大小变化
    // }

  },
  methods:{
    getNum(num){
        num = Number(num);
        if(!num) return '0.00';
        if(num > 10000 || num < -10000){
          const moneys = num/10000
          const realVal =parseFloat(moneys).toFixed(2);
          return realVal+"万元"
        }else{
          return num.toFixed(2) + "元"
        }
      },
    async initHttp(){
     let res = await asyncRequest.datamonthfinishrate();
     if(res.code == 0){
   
      this.total_finish_rate = res.data.total_finish_rate +"%"
  
      res.data.list.forEach((item,index) => {
        this.$set(this.options.dataset.source, index+1, [item.department,Number(item.finish_rate).toFixed(2) ,Number(item.finish).toFixed(2)])
        
      });
      // console.log(this.options.dataset.source)
     }else{
       this.$message.error(res.message)
       return;
     }
   },
  },
  // watch: {
  //   cdata: {
  //     handler() {
  //       this.options = {
  //         legend: {},
  //         tooltip: {},
  //         dataset: {
  //           source: [
  //             ["product",  "本月完成率"],
              
  //           ],
  //         },
  //         xAxis: { type: "category" },
  //         yAxis: {},
  //         series: [
  //           {
  //             type: "bar",
  //             barWidth:40,
  //             label: {
  //               show: true,
  //               color: "#fff", 
  //               position: 'top',
  //               formatter:  (params)=> {
  //                 return params.value[1]+"%"
  //               }
  //             },
  //             itemStyle: {
  //               normal: { 
  //                 color: "#1a8cd7", 

  //               },
  //             },
  //           },
  //           // {
  //           //   type: "bar",
  //           //   barWidth:40,
  //           //   label: {
  //           //     show: true,
  //           //     color: "#fff", 
  //           //     position: 'top',
  //           //     formatter: function (params) {
  //           //       return params.value[2]+"元"
  //           //     }
  //           //   },
  //           //   itemStyle: {
  //           //     normal: { 
  //           //       color: "#28ffcd", 

  //           //     },
  //           //   },
  //           // },
  //           // {
  //           //   type: "bar",
  //           //   barWidth:40,
  //           //   label: {
  //           //     show: true,
  //           //     color: "#fff", 
  //           //     position: 'top',
  //           //     formatter: function (params) {
  //           //       return params.value[3]+"%"
  //           //     }
  //           //   },
  //           //   itemStyle: {
  //           //     normal: { 
  //           //       color: "#ffbc25", 

  //           //     },
  //           //   },
  //           // }
  //         ],
  //       };
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // }
}
</script>
<style scoped>
   .dv{
     width: 100px;
     height: 100px;
     position: absolute;
     right: 15px;
   }
   .dv>p{
     text-align: center;
     padding-bottom: 5px;
   }
</style>
