<template>
  <div>
    <Row :gutter="14">
      <i-col span="8" class="padding-left-10">
        <Card>
          <p slot="title">
            <Icon type="paintbucket"></Icon>
            当前在线人数
            <Button style="float: right" type="primary" @click="lookActiveUser" size="small">查看详情</Button>
          </p>
          <Row type="flex" justify="center" align="middle" class="countto-page-row">
            <div class="count-to-con">
              <count-to :end="nowActive" count-class="count-text" unit-class="unit-class">
                <span class="slot-text" slot="left">共:&nbsp;</span>
                <span class="slot-text" slot="right">&nbsp;人</span>
              </count-to>
            </div>
          </Row>
        </Card>
      </i-col>
      <i-col span="8" class="padding-left-10">
        <Card>
          <p slot="title">
            <Icon type="settings"></Icon>
            权限缓存版本
            <Button style="float: right" type="primary" @click="refreshVer" size="small">刷新缓存</Button>
          </p>
          <Row type="flex" justify="center" align="middle" class="countto-page-row">
            <div class="count-to-con">
              <count-to :end="oldRbacCacheVer" count-class="count-text" unit-class="unit-class" >
                <span class="slot-text" slot="left">当前:&nbsp;</span>
              </count-to>
              <count-to :end="nowRbacVer" count-class="count-text" unit-class="unit-class" >
                <span class="slot-text" slot="left">最新:&nbsp;</span>
              </count-to>
            </div>
          </Row>
        </Card>
      </i-col>
    </Row>
    <Modal v-model="showModel" :mask-closable="closable" :closable="closable" title="在线详情" width="820" v-draggable="options">
      <Row style="margin-bottom: 5px;">
        <i-col span="16">
          <Form v-model="searchForm" onsubmit="return false" inline>
            <Form-item style="margin-bottom: 0px">
              <Input v-model="searchForm.userId" placeholder="请输入用户ID" clearable></Input>
            </Form-item>
            <Form-item style="margin-bottom: 0px">
              <Button type="primary" @click="searchBtn">查询</Button>
            </Form-item>
          </Form>
        </i-col>
      </Row>
      <Table ref="userBindTable" searchable search-place="top" :data="activeUserData" stripe  :columns="columns" size="small" ></Table>
      <div slot="footer">
        <Button type="error"  @click="cancel">关闭</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
  import CountTo from '_c/count-to'
  import { getNowActive, getOldRbacCacheVer, getNowRbacVer, refreshRbacVer,getActiveUserData,destroyActiveUser } from '../../../api/cache-manage'
  export default {
    name: 'cache-manage',
    components: {
      CountTo,
    },
    data () {
      return {
        closable:false,
        nowActive: 0,
        oldRbacCacheVer: 0,
        nowRbacVer: 0,
        showModel : false,
        searchForm:{},
        activeUserDataCount:0,
        activeUserData:[],
        columns:[
          { title: '登录名', key: 'loginName', sortable: true },
          { title: '姓名', key: 'username'},
          /*{ title: '所属部门', key: 'orgName',tooltip:true },*/
          { title: '生日', key: 'birthDay' },
          { title: '电话', key: 'telphone' },
          { title: '邮箱', key: 'email' },
          {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '你确定要强制用户登出吗?',
                    placement:'bottom',
                    width:180,
                    transfer:true
                  },
                  on: {
                    'on-ok': () => {
                      this.destroySession(params)
                      this.activeUserData.splice(params.index, 1);
                    }
                  }
                }, [
                  h('Button',{
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    }
                  }, '强制登出')
                ]),
              ]);
            }
          }
        ],
        options: {
            trigger: '.ivu-modal-header',
            body: '.ivu-modal',
            recover: true
        },
      }
    },
    methods: {
      initRbacCacheVer () {
        getOldRbacCacheVer().then(data =>{
          //console.log(data)
            if (data.result != 'NAN'){
                this.oldRbacCacheVer = parseInt(data.result);
            }
        });
        getNowRbacVer().then(data =>{
          //console.log(data)
          this.nowRbacVer = parseInt(data.result);
        })
      },
      refreshVer () {
        refreshRbacVer().then(data => {
          this.$Message.success("刷新成功!");
          this.initRbacCacheVer()
        }).catch(err => {
          this.$Message.error("刷新失败!");
          console.log(err);
        })
      },
      initNowActive () {
        getNowActive().then(data =>{
          //console.log(data)
          this.nowActive = parseInt(data.result);
        })
      },
      lookActiveUser () {
          this.showModel = true;
      },
      destroySession (params) {
        //处理操作结果回调
        destroyActiveUser(params.row.authorization).then( data => {
          this.$Message.success( "操作成功！");
        }).catch(err =>{
          this.$Message.error( "操作失败！");
          console.log(err);
        });
      },
      searchBtn () {
        if (this.searchForm.userId){
          this.reloadActiveUserData();
        }
      },
      reloadActiveUserData () {
        getActiveUserData(this.searchForm.userId).then(res => {
          this.activeUserData = res.result;
        })
      },
      cancel () {
        this.showModel = false;
        this.searchForm.userId = '';
        this.activeUserData=[];
      }
    },
    mounted () {
      this.initNowActive()
      this.initRbacCacheVer()
    }
  }
</script>

<style lang="less">
  @baseColor: ~"#dc9387";
  .countto-page-row{
    height: 200px;
  }
  .count-to-con{
    display: block;
    width: 100%;
    text-align: center;
  }
  .count-text{
    font-size: 50px;
    color: @baseColor;
  }
  .slot-text{
    font-size: 22px;
  }
  .unit-class{
    font-size: 30px;
    color: @baseColor;
  }
</style>
