<!--
 * @Description: 刷账户缓存列表面板组件
 * @Author: wanq
 * @Date: 2024-07-04 08:43:52
-->
<template>
  <div class="panel-body">
    <el-descriptions class="margin-top" :title="name" :column="2" size="small" 
      :colon="false" :border="accountList.length > 0">
      <template slot="extra">
        <el-input v-model="filterParams.username" clearable size="small" 
          :placeholder="appid.indexOf('mng') != -1 ? '输入账户名' : '输入手机号'" style="width: 130px" />
        <el-button style="width: 96px;" @click="handleQuery" size="small" type="primary" icon="el-icon-search">
          搜 索
        </el-button>
      </template>

      <el-descriptions-item v-if="accountList.length == 0">
        <el-empty style="margin: 0 auto;" :image-size="150" />
      </el-descriptions-item>
      <el-descriptions-item v-for="item in accountList" :key="item.username" 
        :label="item.username" :labelStyle="labelStyle" :contentStyle="contentStyle">
        <div style="display: flex; align-items: center;">
          <img style="width: 12px; height: 15px; margin-right: 2px;" v-if="item.locked" 
            src="./static/icon-sys-cache-lock.png" object-fit="contain" alt="" />
          
            <el-popover placement="bottom" width="240" trigger="click" @show="handleShowRecordPopover(item)">
              <div slot="reference">
                <span class="mouse-pointer" :style="{'margin-right': (item.locked ? '7px' : '21px')}">
                  错误登录{{item.deniedNum}}次
                </span>
              </div>
              <div class="record-popover-content" style="padding: 5px 8px;">
                <div v-for="(record, index2) in recordList" :key="100 + index2" class="bk-record-item" 
                  :class="{'bk-record-item-blue': (index2 == recordList.length - 1)}">
                  <div class="bk-record-item-left">
                    <div class="line-top"></div>
                    <div class="div-point"></div>
                    <div class="line-bottom"></div>
                  </div>
                  <div class="bk-record-item-right">
                    <div class="div-record-flag">第{{record.time}}次</div>
                    <div class="div-record-time">{{record.dateTime}}</div>
                  </div>
                </div>
                <div v-if="item.locked" class="text-lock">{{item.lockedDesc}}</div>
              </div>
            </el-popover>
          
          <i class="el-icon-close mouse-pointer" @click="handleDelete(item.username)" />
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 翻页组件 -->
    <el-row class="foot-line">
      <el-pagination background @size-change="handlePageSize" @current-change="handleCurPage" 
        :current-page="filterParams.page" :page-sizes="pageSizes" :page-size="filterParams.pageSize" 
        layout="total, prev, pager, next, sizes, jumper" :total="totalNumber" />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'RefreshAccountCacheListPanel',

  props: ["appid", "name", "activeName"],

  data() {
    return {
      labelStyle: {
        'width': '124px',
        'font-size': '12px',
        'color': '#888',
        'padding': '10px'
      },
      contentStyle: {
        'font-size': '12px',
        'color': '#888',
        'padding': '10px',
      },

      accountList: [],
      // 过滤查询相关变量 
      filterParams: {
        username: '',

        page: 1,
        pageSize: 20
      },
      pageSizes: [20, 50, 80],
      totalNumber: 0,

      recordList: [],
    }
  },
  
  methods:{
    pageRefreshAccountCaches() {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_PAGE_ACCOUNT_CACHES, this.appid);
      this.appAxios("GET", url, this.filterParams).then(result => {
        if (result != null) {
          this.accountList = result.data;
          this.totalNumber = result.totalNumber;
        }
      })
    },

    handleQuery() {
      this.filterParams.page = 1;
      this.pageRefreshAccountCaches();
    },

    // 记录弹框显示 
    handleShowRecordPopover(item) {
      this.recordList = item.record || [];
    },

    handlePageSize(val) {
      this.filterParams.pageSize = val;
      this.pageRefreshAccountCaches();
    },

    handleCurPage(curPage) {
      this.filterParams.page = curPage;
      this.pageRefreshAccountCaches();
    },

    handleDelete(username) {
      this.$confirm('确认是否删除条目' + username + '?', '缓存删除', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_CLEAR_ACCOUNT_CACHE_ENTRY, this.appid, username);
        this.appAxios("DELETE", url).then(result => {
          if (result != null) {
            this.handleQuery();
          }
        })
      });
    },
  },

  watch: {
    activeName: {
      handler(newVal, _oldVal) {
        if (newVal == 'account') {
          this.filterParams.username = '';
          this.pageRefreshAccountCaches();
        }
      },
      immediate: true
    }    
  },
}
</script>

<style scoped lang="scss">
.panel-body {
  .search-title {
    color: #657180;
    font-size: 14px;
  }
  .foot-line {
    padding: 0 20px;
    margin-top: 20px;
    text-align: right;
  }
}
.record-popover-content {
  .bk-record-item {
    display: flex;
    flex-direction: row;
    .bk-record-item-left {
      min-width: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .div-point {
        width: 7px;
        height: 7px;
        margin: 3px 2px;
        border-radius: 50%;
        background-color: #D9E5FF;
      }
      .line-top {
        height: 2px;
        border: 1px solid #EDEDED;
      }
      .line-bottom {
        flex: 1;
        border: 1px solid #EDEDED;
      }
    }
    .bk-record-item-right {
      flex: 1;
      margin: 0 0 22px 4px;
      display: flex;
      .div-record-flag {
        width: 40px;
        height: 18px;
        line-height: 18px;
        background: #D9E5FF;
        border-radius: 2px;
        font-size: 12px;
        color: #333333;
        text-align: center;
      }
      .div-record-time {
        margin-left: 10px;
        font-size: 14px;
        color: #333333;
        line-height: 18px;
      }
    }
  }
  .bk-record-item-blue .bk-record-item-right {
    margin-bottom: 0 !important;
  }
  .bk-record-item-blue .div-point {
      background-color: #3377FF !important;
  }
  .bk-record-item:first-child .line-top,
  .bk-record-item-blue .line-bottom {
      border: 1px solid #fff !important;
  }
  .text-lock {
    margin: 8px 0 0 14px;
    font-size: 10px;
    color: #333333;
    line-height: 14px;
  }
}
</style>
<style>
.panel-body  .el-descriptions__header {
  padding: 0 20px;
}
.panel-body .el-empty__description p {
  color: #666666 !important;
}
.panel-body .el-descriptions__body {
  padding: 0 20px;
  height: 294px;
  min-height: 294px;
  overflow-y: auto;
}
</style>