<template>
  <view class="ComCss">
    <!-- <u-navbar v-if="!$isDing" class="navBarCss" title="数据统计" leftIconSize="0"
      :titleStyle="{'fontSize':'36rpx','color':'#333333','fontWeight':'700'}" safeAreaInsetTop placeholder /> -->
    <view class="bigCardCss">
      <view class="titleCss">
        本财年报告已上报数
      </view>
      <view class="numCss">
        {{statistics.totalNum}}
      </view>
    </view>
    <view class="flexCss">
      <view class="cardCss">
        <view class="titleCss">
          待开发居民用户
        </view>
        <view class="numCss">
          {{statistics.resident}}
        </view>
      </view>
      <view class="cardCss">
        <view class="titleCss">
          待开发商业用户
        </view>
        <view class="numCss">
          {{statistics.business}}
        </view>
      </view>
      <view class="cardCss">
        <view class="titleCss">
          待开发工业用户
        </view>
        <view class="numCss">
          {{statistics.industry}}
        </view>
      </view>
    </view>
    <view class="charCardCss">
      <view class="charTitleCss">
        本财年市场摸底分析
      </view>
      <view class="charbox">
        <echarts class="pie-chart" :option="pieOption" canvasId="pie1"></echarts>
      </view>
    </view>
    <view class="charCardCss">
      <view class="charTitleCss">
        待开发用户池数据分析
      </view>
      <view class="charbox">
        <echarts class="pie-chart" :option="pieOption2" canvasId="pie2"></echarts>
      </view>
    </view>
    <!-- <view class="charCardCss">
      <view class="charTitleCss">
        近4年待开发用户池数据情况
      </view>
      <view class="charbox">
        <echarts class="line-chart" :option="lineOption" canvasId="line"></echarts>
      </view>
    </view> -->
  </view>
</template>

<script>
  import {
    getStatisticsReport,
    getStatisticsPool,
    getStatisticsLogin
  } from '@/api/total.js'
  export default {
    components: {},
    props: {

    },
    data() {
      return {
        pieOption: {},
        pieOption2: {},
        lineOption: {},
        fiscalYear: "",
        statistics: {
          totalNum: "",
          resident: "",
          business: "",
          industry: ""
        },
        data1: [],
        data2: [],
        data3: [],
        total1: 0,
        total2: 0,
      }
    },
    mounted() {

    },
    computed: {

    },
    onLoad() {
      this.initData()
    },
    methods: {
      async initData() {
        this.fiscalYear = this.$u.timeFormat("", 'yyyy');
        await getStatisticsReport(this.fiscalYear).then(res => {
          if (res.code === 200) {
            let data = res.data;
            this.statistics.totalNum = data.pass + data.revise;
            this.data1 = [{
                value: data.submit,
                name: '待申报'
              },
              {
                value: data.review,
                name: '待评审'
              },
              {
                value: data.revise,
                name: '待修改'
              },
              {
                value: data.pass,
                name: '已通过'
              },
              {
                value: data.unCreate,
                name: '未创建'
              },
            ]
            this.total1 = data.total
            console.log("报告", this.data1);
          }
        })
        let query = {
          roleIds: uni.getStorageSync('roleId') || null,
          entity: uni.getStorageSync("entity") || null,
        }
        await getStatisticsPool(query).then(res => {
          if (res.code === 200) {
            let data = res.data;
            this.statistics.resident = data.resident;
            this.statistics.business = data.commerce;
            this.statistics.industry = data.industry;
            this.data2 = [{
                value: data.resident,
                name: '待开发居民用户数'
              },
              {
                value: data.commerce,
                name: '待开发商业用户数'
              },
              {
                value: data.industry,
                name: '待开发工业用户数'
              },
            ]
            this.total2 = data.total
          }
        })
        this.refreshData()
      },
      refreshData() {
        let that = this;
        this.pieOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'middle',
            right: '10%',
            orient: 'vertical',
            itemWidth: 8,
            itemGap: 14,
            icon: 'circle',
            data: this.data1.map(item => item.name)
          },
          color: ['#5875EB', '#FFA500', '#E74C3C', '#15C2C3', '#666666'],
          series: [{
            name: '摸底分析',
            type: 'pie',
            right: 100,
            radius: ['65%', '80%'],
            avoidLabelOverlap: false,
            label: {
              position: 'outer',
              alignTo: 'edge',
              margin: 0,
              normal: {
                show: true,
                position: 'center',
                color: '#4c4a4a',
                formatter: '{total|' + this.total1 + '}' + '\n\r' + '{active|总预算主体数}',
                rich: {
                  total: {
                    fontSize: 20,
                    fontFamily: '微软雅黑',
                    color: '#45496a'
                  },
                  active: {
                    fontSize: 14,
                    fontFamily: '苹方 中等',
                    color: '#999',
                    lineHeight: 30
                  }
                }
              },
              emphasis: { //中间文字显示
                show: true
              }
            },
            labelLine: {
              show: true
            },
            data: this.data1
          }]
        };
        this.pieOption2 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            y: 'center',
            right: 10,
            itemWidth: 8,
            itemGap: 14,
            icon: 'circle',
            align: 'left',
            data: this.data2.map(item => item.name)
          },
          color: ['#15C2C3', '#5875EB', '#E74C3C'],
          series: [{
            name: '待开发用户池数据分析',
            type: 'pie',
            right: 100,
            radius: ['65%', '80%'],
            avoidLabelOverlap: false,
            label: {
              position: 'outer',
              alignTo: 'edge',
              margin: 0,
              normal: {
                show: true,
                position: 'center',
                color: '#4c4a4a',
                formatter: '{total|' + this.total2 + '}' + '\n\r' + '{active|总待开发用户数}',
                rich: {
                  total: {
                    fontSize: 20,
                    fontFamily: '微软雅黑',
                    color: '#45496a'
                  },
                  active: {
                    fontSize: 14,
                    fontFamily: '苹方 中等',
                    color: '#999',
                    lineHeight: 30
                  }
                }
              },
              emphasis: { //中间文字显示
                show: true
              }
            },
            labelLine: {
              show: true
            },
            data: this.data2
          }]
        };
        this.lineOption = {
          // title: {
          //   text: 'Stacked Line'
          // },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            right: 10,
            top: '10%',
            icon: 'roundRect',
            itemWidth: 10,
            itemHeight: 2,
            itemGap: 20,
            data: ['民居用户', '商业用户', '工业用户']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['2020财年', '2021财年', '2021财年', '2023财年']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '民居用户',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '商业用户',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '工业用户',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
          ]
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  .ComCss {
    background: #f2f4f3;
    padding: 0 0 10rpx 0;
  }

  .bigCardCss {
    margin: 20rpx 20rpx 0rpx 20rpx;
    padding: 40rpx 25rpx;
    height: 177rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .cardCss {
    width: 220rpx;
    margin: 20rpx 0rpx;
    padding: 40rpx 25rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .titleCss {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #45496a;
    text-align: left;
    line-height: normal;
    font-size: 24rpx;
  }

  .numCss {
    margin-top: 17rpx;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #cf000d;
    text-align: left;
    line-height: normal;
    font-size: 34rpx;
  }

  .flexCss {
    display: flex;
    justify-content: space-around;
  }

  .charCardCss {
    margin: 0rpx 24rpx 20rpx 24rpx;
    height: 486rpx;
    padding: 16rpx 2rpx 20rpx 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .charTitleCss {
    height: 40rpx;
    margin: 32rpx 0rpx 0rpx 30rpx;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #45496a;
    text-align: left;
    line-height: normal;
    font-size: 30rpx;
  }

  .charbox {
    width: 100%;
    height: 400rpx;
  }

  .charCss {}
</style>
