<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">工具类别统计</span></div>
          <!--  -->
          <div class="tjbox2">
            <PieChart
              height="207px"
              :data="toolTypeData"
              :legendData="toolTypeLegendData"
              legendBottom="5"
              chartRef="toolType"
              :radius="50"
            />
          </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">
            <PieChart
              height="207px"
              :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-row><!--el-row-->

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix"><span class="tline">工具来源统计</span></div>
          <div class="tjbox2">
            <PieChart
              height="207px"
              :data="toolSourceData"
              :legendData="toolSourceLegendData"
              legendBottom="5"
              :radius="['40%', '70%']"
              chartRef="toolStatus"
            />
          </div>
        </el-card><!--el-card-->
      </el-col><!--el-col-->
    </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="80px" ref="queryForm">
              <div class="search">
                <div class="sl">
                  <el-form-item label="下载时间">
                    <el-date-picker
                      v-model="dateRange"
                      style="width: 240px"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </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 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="userName" prop="userName" min-width="120" />
        <el-table-column label="下载次数" align="center" key="toolDownNum" prop="toolDownNum" min-width="120" />
        <el-table-column label="下载时间" align="center" key="donwTime" prop="donwTime" 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 PieChart from './PieChart'
import DownStatDetail from './DownStatDetail'
import { getToolDownStat, getToolDownDetailStatistics } from '@/api/statistic/statistic'
export default {
  name: 'statistic',
  components: {
    PieChart,
    DownStatDetail
  },
  data() {
    return {
      toolDownDetailStatList: [],
      activeName: 'first',
      toolTypeData: [
        { value: 320, name: '检测型' },
        { value: 240, name: '服务型' }
      ],
      toolTypeLegendData:['检测型', '服务型'],
      toolStatusData: [
        { value: 212, name: '已保存' },
        { value: 76, name: '审批中' },
        { value: 32, name: '审批不通过' },
        { value: 971, name: '已发布' }
      ],
      toolStatusLegendData: ['已保存','审批中','审批不通过','已发布'],
      toolSourceData: [
        { value: 20, name: 'QQ' },
        { value: 60, name: '微信' },
        { value: 18, name: '官网' },
        { value: 47, name: '熟人介绍' }
      ],
      toolSourceLegendData: ['QQ', '微信', '官网', '熟人介绍'],
      // 日期范围
      dateRange: [],
      toolDownStatList: [],
      downTotal: 0,
      downLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mesContent: ''
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        mesContent: ''
      },
      // 工具下载统计详情组件控制属性
      detailDrawerOpen: false,
      // 工具id
      toolId: '',
      // 工具名称
      toolName: '',
      total: 0,
      loading: false
    }
  },
  created () {
    this.getToolDownStatistics()
  },
  methods: {
    openEvent() {
      this.getToolDownDetailStatistics()
    },
    getToolDownDetailStatistics() {
      this.loading = true
      getToolDownDetailStatistics({ ...this.detailQueryParams, toolId: this.toolId }).then(response => {
        this.total = response?.total
        this.toolDownDetailStatList = response?.rows || []
        this.loading = false
      }).catch(() => { this.loading = false });
    },
    // 工具下载重置查询
    reset() {
      this.toolDownStatList = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /**
     * 工具下载搜索
     */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getToolDownStatistics()
    },
    /**
     * 获取工具下载列表数据
     */
    getToolDownStatistics() {
      this.downLoading = true
      getToolDownStat(this.queryParams).then(response => {
        this.downTotal = response?.total
        this.toolDownStatList = response?.rows || []
        this.downLoading = false
      }).catch(() => { this.downLoading = false });
    },
    handleDetail(row){
      this.toolId = row.id
      this.toolName = row.toolName
      this.detailDrawerOpen = true
    },
  }
}
</script>

<style scoped>

</style>
