<template>
  <div class="app-container" v-loading="pageloading">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">文档类别统计</span></div>
          <!--  -->
          <div class="tjbox2" v-if="isPieChart">
            <PieChart
              height="400px"
              :data="toolTypeData"
              :legendData="toolTypeLegendData"
              legendBottom="5"
              chartRef="toolType"
              :radius="['40%', '70%']"
            />
          </div>
        </el-card><!--el-card-->
      </el-col><!--el-col-->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">文档来源统计</span></div>
          <div class="tjbox2" v-if="isPieChart">
            <PieChart
              height="400px"
              :data="toolSourceData"
              :legendData="toolSourceLegendData"
              legendBottom="5"
              :radius="['40%', '70%']"
              chartRef="toolStatus"
            />
          </div>
        </el-card><!--el-card-->
      </el-col><!--el-col-->
    </el-row><!--el-row-->

  </div>
</template>

<script>
import { getStatistics } from "@/api/document/document";

import PieChart from './PieChart'
export default {
  name: 'statistic',
  dicts: ['tool_type', 'flow_status', 'tool_source'],
  components: {
    PieChart
  },
  data() {
    return {
      toolDownDetailStatList: [],
      activeName: 'first',
      toolTypeData: [
        /*{ value: 320, name: '检测型' },
        { value: 240, name: '服务型' }*/
      ],
      // toolTypeLegendData:['检测型', '服务型'],
      toolTypeLegendData:[],
      toolStatusData: [
       /* { value: 212, name: '已保存' },
        { value: 76, name: '审批中' },
        { value: 32, name: '审批不通过' },
        { value: 971, name: '已发布' }*/
      ],
      // toolStatusLegendData: ['已保存','审批中','审批不通过','已发布'],
      toolStatusLegendData: [],
      toolSourceData: [
        /*{ value: 20, name: 'QQ' },
        { value: 60, name: '微信' },
        { value: 18, name: '官网' },
        { value: 47, name: '熟人介绍' }*/
      ],
      // toolSourceLegendData: ['QQ', '微信', '官网', '熟人介绍'],
      toolSourceLegendData: [],
      // 日期范围
      dateRange: [],
      toolDownStatList: [],
      downTotal: 0,
      downLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        toolId: ''
      },
      // 工具下载统计详情组件控制属性
      detailDrawerOpen: false,
      // 工具id
      toolId: '',
      // 工具名称
      toolName: '',
      total: 0,
      loading: false,
      isPieChart: false,
    }
  },
  created () {
    this.getCountData()
    // this.getToolDownStatistics()
  },
  methods: {
    // 工具下载重置查询
    reset() {
      this.toolDownStatList = []
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /**
     * 工具下载搜索
     */
    handleQuery() {
      this.queryParams.pageNum = 1
    },
    /** 统计类型、类别、状态**/
    getCountData(){
      let self = this
      // 类别
      self.toolTypeData = []
      self.toolTypeLegendData = []
      // 来源
      self.toolSourceData = []
      self.toolSourceLegendData = []
      self.pageloading = true

      getStatistics(this.queryParams).then(res => {
        if(res.data){

          const countType = JSON.parse(JSON.stringify(res.data.countType)).filter(item => item.name)
          //类别
          self.toolTypeData = countType
          self.toolTypeData.forEach(item => {
            if(item && item.name){
              self.toolTypeLegendData.push(item.name)
            }
          })


          const countSource = JSON.parse(JSON.stringify(res.data.countSource)).filter(item => item.name)

          //来源
          self.toolSourceData = countSource
          self.toolSourceData.forEach(item => {
            if(item && item.name){
              self.toolSourceLegendData.push(item.name)
            }
          })
          self.isPieChart= true
          self.pageloading= false
        }
       /* console.info("countToolType==============", this.dict.type.tool_type)
        console.info("res===========", res)*/
      }).catch((err) => {
        self.isPieChart= true
        self.pageloading= false
        console.error(err)
      });
    }
  }
}
</script>

<style scoped>

</style>
