<!--
 * @Description: 系统缓存管理Tab组件
 * @Author: liusheng, wanq
 * @Date: 2022-08-06 16:43:52
-->
<template>
  <div class="body">
    <el-tabs class="tab-header" v-model="activeName" type="card">
      <el-tab-pane label="刷短信缓存" name="sms">
        <el-row :gutter="17">
          <el-col :span="12" v-for="item in smsAppList" :key="item.id">
            <div class="list-area">
              <refresh-sms-cache-list-panel :appid="item.id" :name="item.name" :activeName="activeName" />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="账户缓存" name="account">
        <el-row :gutter="17">
          <el-col :span="12" v-for="item in accountAppList" :key="item.id">
            <div class="list-area">
              <refresh-account-cache-list-panel :appid="item.id" :name="item.name" :activeName="activeName" />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RefreshSmsCacheListPanel from "./RefreshSmsCacheListPanel.vue"
import RefreshAccountCacheListPanel from "./RefreshAccountCacheListPanel.vue"

export default {
  name: 'SysCacheMng',
  
  components:{
    'refresh-sms-cache-list-panel': RefreshSmsCacheListPanel,
    'refresh-account-cache-list-panel': RefreshAccountCacheListPanel,
  },

  data() {
    return {
      activeName: 'sms',
      smsAppList: [],
      accountAppList: [],
    }
  },
  
  methods:{
    listApplications() {
      this.appAxios("GET", this.commonUrl.URL_LIST_APPLICATIONS_CACHEMNG).then(result => {
        if (result != null) {
          let appList = result.data;
          
          // 去除refreshSmsCache=false的数组项
          this.smsAppList = appList.filter(item => {
            return item.refreshSmsCache
          });

          // 去除accountCache=false的数组项
          this.accountAppList = appList.filter(item => {
            return item.accountCache
          });
        }
      })
    },
  },

  mounted() {
    this.listApplications();
  }
}
</script>

<style scoped>
.body {
  margin: 0 20px;
  text-align: center;
  border: solid 0px;
}
.tab-header {
  margin: 0 20px;
}
.list-area {
  padding: 20px 0;
  border: 1px solid #DCDFE6;
  margin-bottom: 10px;
}
</style>