<template>
  <div class="app-container" v-loading="pageloading">
    <el-row :gutter="24">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">工具类别统计</span></div>
          <!--  -->
          <div class="tjbox2" v-if="isPieChart">
            <PieChart
              height="285px"
              :data="toolTypeData"
              :legendData="toolTypeLegendData"
              legendBottom="5"
              chartRef="toolType"
              :radius="['40%', '70%']"
            />
          </div>
        </el-card><!--el-card-->
      </el-col><!--el-col-->
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">工具状态统计</span></div>
          <div class="tjbox2" v-if="isPieChart">
            <PieChart
              height="285px"
              :data="toolStatusData"
              :legendData="toolStatusLegendData"
              legendBottom="5"
              :radius="['40%', '70%']"
              chartRef="toolStatus"
            />
            <!-- <img src="images/tjt2.jpg" /> -->
          </div>
        </el-card><!--el-card-->
      </el-col><!--el-col-->
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">工具来源统计</span></div>
          <div class="tjbox2" v-if="isPieChart">
            <PieChart
              height="285px"
              :data="toolSourceData"
              :legendData="toolSourceLegendData"
              legendBottom="5"
              :radius="['40%', '70%']"
              chartRef="toolStatus"
            />
          </div>
        </el-card><!--el-card-->
      </el-col><!--el-col-->
    </el-row><!--el-row-->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">工具下载</span></div>
          <div class="tjbox2">
            <el-form label-width="70px" ref="queryForm">
              <div class="search">
                <div class="sl">
                  <el-form-item label="下载时间">
                    <el-date-picker
                      v-model="dateRange"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="工具编号" prop="toolCode">
                    <el-input
                      v-model="queryParams.toolCode"
                      placeholder="请输入工具编号"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="工具名称" prop="toolName">
                    <el-input
                      v-model="queryParams.toolName"
                      placeholder="请输入工具名称"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                </div>
                <div class="sr">
                  <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
                </div>
              </div>
            </el-form>
            <!-- <img src="images/tjt6.jpg" /> -->
          </div>
          <div class="rt">
            <el-table v-loading="downLoading" :data="toolDownStatList">
              <el-table-column type="index" label="序号" width="50" />
              <el-table-column label="工具编号" align="center" key="toolCode" prop="toolCode" />
              <el-table-column label="工具名称" align="center" key="toolName" prop="toolName"  :show-overflow-tooltip="true" />
              <el-table-column label="下载次数" align="center" key="toolDownNum" prop="toolDownNum" width="120" />
              <el-table-column
                label="操作"
                align="center"
                width="250"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-info" @click="handleDetail(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="downTotal>0"
              :total="downTotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getToolDownStatistics"
            />
          </div><!--rt 右-->
        </el-card><!--el-card-->
      </el-col><!--el-col-->
    </el-row><!--el-row-->
    <!-- <DownStatDetail :show.sync="detailDrawerOpen" :toolId="toolId" :toolName="toolName" /> -->
    <el-dialog
      :title="`${toolName}下载详情统计`"
      :visible.sync="detailDrawerOpen"
      width="85%"
      append-to-body
      @open="openEvent"
      @close="detailDrawerOpen = false"
    >
      <el-table :data="toolDownDetailStatList" v-loading="loading">
        <el-table-column label="下载用户" align="center" key="nickName" prop="nickName" min-width="120" />
        <el-table-column label="下载次数" align="center" key="toolDownNum" prop="toolDownNum" min-width="120" />
        <el-table-column label="下载时间" align="center" key="createTime" prop="createTime" min-width="120" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams1.pageNum"
        :limit.sync="queryParams1.pageSize"
        @pagination="getToolDownDetailStatistics"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getStatistics } from "@/api/tool/tool";
import { listCount,userDownList } from "@/api/tool/downloadCount";

import PieChart from './PieChart'
import DownStatDetail from './DownStatDetail'
import { getToolDownStat, getToolDownDetailStatistics } from '@/api/statistic/statistic'
export default {
  name: 'statistic',
  dicts: ['tool_type', 'flow_status', 'tool_source'],
  components: {
    PieChart,
    DownStatDetail
  },
  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,
        toolCode: null,
        toolName: null,
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        toolId: ''
      },
      // 工具下载统计详情组件控制属性
      detailDrawerOpen: false,
      // 工具id
      toolId: '',
      // 工具名称
      toolName: '',
      total: 0,
      loading: false,
      isPieChart: false,
    }
  },
  created () {
    this.getCountData()
    this.getToolDownStatistics()
  },
  methods: {
    openEvent() {
      this.getToolDownDetailStatistics()
    },
    getToolDownDetailStatistics() {
      let self = this
      this.loading = true
      userDownList(this.addDateRange(this.queryParams1)).then(res => {
        self.total = res?.total
        self.toolDownDetailStatList = res?.rows || []
        self.loading = false
      }).catch(() => { self.loading = false });
    },
    // 工具下载重置查询
    reset() {
      this.toolDownStatList = []
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /**
     * 工具下载搜索
     */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getToolDownStatistics()
    },
    /**
     * 获取工具下载列表数据
     */
    getToolDownStatistics() {
      let self = this
      this.downLoading = true
      listCount(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
        self.total = res?.total
        self.toolDownStatList = res?.rows || []
        self.downLoading = false
      }).catch(() => { self.downLoading = false });

    },
    handleDetail(row){
      this.$set(this.queryParams1, "toolId", row.toolId)
      this.detailDrawerOpen = true
    },
    /** 统计类型、类别、状态**/
    getCountData(){
      let self = this
      self.toolTypeData = []
      self.toolTypeLegendData = []


      self.toolStatusData = []
      self.toolStatusLegendData = []

      self.toolSourceData = []
      self.toolSourceLegendData = []
      self.pageloading = true

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

          const recordStatus = JSON.parse(JSON.stringify(res.data.recordStatus)).filter(item => item.name)
          //状态
          self.toolStatusData = recordStatus
          self.toolStatusData.forEach(item => {
            if(item && item.name){
              self.toolStatusLegendData.push(item.name)
            }
          })
          const toolSource = JSON.parse(JSON.stringify(res.data.toolSource)).filter(item => item.name)
          //来源
          self.toolSourceData = toolSource
          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>
