<template>
    <div class="page-view">
        <div id="chartSearchDiv" class="chart-search-div" style="height: 130px">
            <div class="chart-text-view">系统人员角色分布</div>
            <div class="chart-search-item">
              <div class="search-item">
                <a-date-picker
                    v-model="queryParams.beginTime"
                    placeholder="请选择开始时间"
                    @change="onBeginTimeChange"
                    @ok="onTimeOK" />
              </div>
              <div class="search-item">
                <a-date-picker
                    v-model="queryParams.endTime"
                    placeholder="请选择结束时间"
                    @change="onEndTimeChange"
                    @ok="onTimeOK" />
              </div>
            </div>
        </div>
        <div class="chart-view">
          <div id="UserRoleChartContainer" class="chart-item">
          </div>
        </div>
    </div>
</template>
<script>
  import {mapState} from 'vuex'
  import { Chart } from '@antv/g2';
  import moment from 'moment'
  moment.locale('zh-cn')
  import baseUtils from '@/utils/baseUtils'
  import locale from 'ant-design-vue/lib/date-picker/locale/zh_CN'
  export default {
    name: 'UserRoleChart',
    components: {
      Chart:Chart,
      mapState:mapState,
      baseUtils:baseUtils,
      moment:moment,
    },
    data () {
      return {
        timeFormat:'YYYY-MM-DD', //时间格式
        locale:locale,
        statisticsCountUrl:'api/v1/statistics/queryAuthRoleCount',
        chart:null,
        data: [],
        queryParams: {
          endTime:'',
          beginTime:'',
        },
        //校验规则
        validateRules: {
          beginTime: [
            { required: false, message: '请选择数据开始时间', trigger: 'change' }
          ],
          endTime: [
            { required: false, message: '请选择数据结束时间', trigger: 'change' }
          ],
        },
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 15,
        },
      }
    },
    mounted () {
      this.initChart()
    },
    created () {

    },
    destroyed () {

    },
    computed:{

    },
    methods: {
      moment, //时间处理
      onTimeOK(value){
        console.log('onOk: ', value);
      },
      async onEndTimeChange(value, dateString){
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        this.queryParams.endTime = dateString
        await this.statisticsCount();
      },
      async onBeginTimeChange(value, dateString){
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        this.queryParams.beginTime = dateString
        await this.statisticsCount();
      },
      validate(successStatus,object){
        console.log(successStatus)
        console.log(object)
      },
      async statisticsCount(){
        if(this.$isNull(this.queryParams.beginTime)){
          moment(this.queryParams.beginTime).format(this.timeFormat);
        }
        if(this.$isNull(this.queryParams.endTime)){
          moment(this.queryParams.endTime).format(this.endTime);
        }
        await this.$postBodyRequest(this.statisticsCountUrl,{
            ...this.queryParams
          }
        ).then((r) => {
          this.data.splice(0,this.data.length)
          let data = r.data.data;
          console.log('统计结果:'+JSON.stringify(r))
          if(data && data.length > 0){
            data.map(item => {
              this.data.push(item)
            })
          }else{
            this.data = new Array();
          }
          console.log('this.data : '+JSON.stringify(this.data))
          let chart = this.chart
          console.log('chart:'+chart)
          if(chart){
            //立即改变数据
            chart.changeData(this.data);
          }
        })
      },
      async initChart() {
        await this.statisticsCount();
        console.log('初始化表格')
        let chart = new Chart({
          container: 'UserRoleChartContainer',
          autoFit: true,
          height: 300,
          width:300
        });
        chart.data(this.data);
        chart.coordinate('theta', {
          radius: 0.75
        });
        chart.tooltip({
          showMarkers: false
        });
        const interval = chart
            .interval()
            .adjust('stack')
            .position('countNum')
            .color('roleName', ['#63e308', '#0c71e5', '#ea074f', '#e3b509'])
            .style({ opacity: 0.4 })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    matrix: Util.zoom(shape, 1.1),
                  }
                }
              }
            });
        chart.interaction('element-single-selected');
        chart.render();
        this.chart = chart
      }
    }
  }
</script>

<style lang="less" scoped>
.page-view{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .chart-search-div{
    padding: 24px;
    background: #14749b;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    margin-bottom: 30px;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .chart-text-view{
      text-align: center;
      display: block;
      margin-bottom: 10px;
      font-weight:bold;
      font-size: 20px;
      color: #f5f4f9;
    }
    .chart-search-item{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      //border: 1px solid #c42121;
      .search-item{

      }
    }
  }
  .chart-view{
    .chart-item{

    }
  }
}
</style>
