<!--
 * @Description: 刷短信缓存列表面板组件
 * @Author: liusheng, wanq
 * @Date: 2022-08-06 16:43:52
-->
<template>
  <div class="panel-body">
    <el-descriptions class="margin-top" :title="name" :column="2" size="small" 
      :colon="false" :border="mobileList.length > 0">
      <template slot="extra">
        <el-input v-model="filterParams.mobile" 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="mobileList.length == 0">
        <el-empty style="margin: 0 auto;" :image-size="150" />
      </el-descriptions-item>
      <el-descriptions-item v-for="item in mobileList" :key="item.mobile" 
        :label="item.mobile" :labelStyle="labelStyle" :contentStyle="contentStyle">
        <span style="margin-right: 16px">{{item.count}} 次</span>
        <i class="el-icon-close mouse-pointer" @click="handleDelete(item.mobile)" />
      </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: 'RefreshSmsCacheListPanel',

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

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

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

        page: 1,
        pageSize: 20
      },
      pageSizes: [20, 50, 80],
      totalNumber: 0,
    }
  },
  
  methods:{
    pageRefreshSmsCaches() {
      let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_PAGE_REFRESH_SMS_CACHES, this.appid);
      this.appAxios("GET", url, this.filterParams).then(result => {
        if (result != null) {
          this.mobileList = result.data;
          this.totalNumber = result.totalNumber;
        }
      })
    },

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

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

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

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

  watch: {
    activeName: {
      handler(newVal, _oldVal) {
        if (newVal == 'sms') {
          this.filterParams.mobile = '';
          this.pageRefreshSmsCaches();
        }
      },
      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;
  }
}
</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>