<!--
统计
@Author: linqian
@date: 2023-06-06 09:39
-->
<template>
  <div>
    <div class="search-bar">
      <div>
        <el-radio v-model="form.radioValue" label="1">
          按年
          <el-date-picker v-model="form.year" type="year" placeholder="选择年" style="width: 200px !important">
          </el-date-picker>
        </el-radio>
        <el-radio v-model="form.radioValue" label="2">
          自定义日期
          <el-date-picker
            v-model="form.customValue"
            type="daterange"
            style="width: 350px !important"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :value-format="'yyyy-MM-dd HH:mm:ss'"
          >
          </el-date-picker>
        </el-radio>
      </div>
      <div style="margin-left: 20px">
        <dg-button type="primary" :icon="'查询' | optIcon" @click="handleSearch()">查询</dg-button>
        <dg-button :icon="'重置' | optIcon" @click="handleReset()">重置</dg-button>
      </div>
    </div>
    <dg-table ref="table" :data="tableData" :pagination="false" border>
      <dg-table-column label="授权主体类型" prop="name" align="center"></dg-table-column>
      <dg-table-column label="数量" prop="num" align="center"></dg-table-column>
    </dg-table>
  </div>
</template>

<script>
import { subStatisticsTable } from '@/api/statistics.js';

export default {
  data() {
    return {
      form: {
        radioValue: '1',
        year: new Date(),
        customValue: ''
      },
      tableData: [],
      // 主体字段名称map集合
      nameMap: {
        appNum: '应用资源',
        orgNum: '组织机构',
        taskTypeNum: '任务类型',
        userNum: '用户'
      }
    };
  },
  computed: {},
  methods: {
    handleSearch() {
      const { radioValue, year, customValue } = this.form;
      if (radioValue == '1' && !year) {
        this.$message.warning('请选择年');
        return;
      }
      if (radioValue == '2' && !customValue) {
        this.$message.warning('自定义日期不能为空');
        return;
      }
      this.getData();
    },
    handleReset() {
      this.form.radioValue = '1';
      this.form.year = new Date();
      this.form.customValue = '';
    },
    getData() {
      let params = {};
      const { radioValue, customValue, year } = this.form;
      if (radioValue == '1') {
        params = {
          year: this.$moment(year).format('YYYY')
        };
      } else {
        params = {
          startTime: customValue[0],
          endTime: customValue[1]
        };
      }
      subStatisticsTable(params).then((res) => {
        let attr = [];
        for (const key in res) {
          attr.push({
            name: this.nameMap[key],
            num: res[key]
          });
        }
        this.tableData = attr;
      });
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>

<style lang='scss' scoped>
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>