<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <sd-cache-tree
        :selected-keys="selectedKeys"
        :is-search="true"
        @treeSelect="treeSelect"
      ></sd-cache-tree>
      <div :class="$style.rightcard">
        <a-card>
          <a-button :class="$style.rightBtn" @click="clearnAllCache">全部清除</a-button>
          <a-table
            row-key="id"
            :columns="columns"
            :data-source="data"
            :loading="tableLoading"
            :pagination="pagination"
            @change="handleTableChange"
          >
            <template slot="props" slot-scope="props"> {{ props.description }} </template>
            <template slot="action" slot-scope="action">
              <a-button type="link" @click="clarnCache(action)">清除</a-button>
            </template>
          </a-table>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Message, Modal } from 'ant-design-vue'
import { sdLocalStorage } from '@/common/services/storage-service'
import workbenchService from './workbench-service'
import components from './_import-components/sd-cache-manage-import'
const columns = [
  {
    title: '页面名称',
    dataIndex: 'text',
  },
  {
    title: '描述',
    dataIndex: 'props',
    scopedSlots: { customRender: 'props' },
  },
  { title: '操作', dataIndex: '', scopedSlots: { customRender: 'action' }, align: 'center' },
]
export default {
  name: 'SdCacheManage',
  metaInfo: {
    title: '页面缓存管理',
  },

  components,
  data() {
    return {
      tableLoading: false,
      selectedKeys: [],
      columns,
      data: [],
      groupId: this.groupId,
      pagination: {
        current: 1,
        pageSize: 7,
        total: 0,
        showTotal: (total) => {
          return `总共 ${total} 条`
        },
      },
    }
  },
  created() {
    this.groupId = JSON.parse(sdLocalStorage.getItem('hierarchicalInfo')).authGroupId
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
    },
    treeSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys
      this.getDataList(info)
    },
    getDataList(treeNode) {
      this.tableLoading = true
      workbenchService
        .cacheListData({
          groupId: this.groupId,
          parentCatId: treeNode.node.dataRef.id,
          isPage: true,
        })
        .then((res) => {
          if (res.data) {
            this.data = res.data
            this.pagination.total = res.data.length ? res.data.length : 0
            this.tableLoading = false
          }
        })
        .catch(() => {
          Message.erro({ content: '获取列表数据失败' })
        })
    },
    clarnCache(action) {
      Modal.confirm({
        content: '确定清除已修改过的页面缓存吗？',
        onOk: () => {
          const newid=action.id.replace("Vvue:","")
          workbenchService
            .clearnCache(newid)
            .then((res) => {
              if (res) {
                Message.success({ content: '清除缓存成功' })
              } else {
                Message.erro({ content: '清除缓存失败' })
              }
            })
            .catch(() => {
              Message.erro({ content: '清除缓存失败' })
            })
        },
      })
    },
    clearnAllCache() {
      Modal.confirm({
        content: '确定清除所有已修改过的页面缓存吗？',
        onOk: () => {
          workbenchService
            .clearnAllCache()
            .then((res) => {
              if (res) {
                Message.success({ content: '清除全部缓存成功' })
              } else {
                Message.erro({ content: '清除全部缓存失败' })
              }
            })
            .catch(() => {
              Message.erro({ content: '清除全部缓存失败' })
            })
        },
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: 80%;
      height: 100%;
      .right-btn {
        z-index: 1;
        float: right;
        margin-right: 10px;
      }
      :global(.ant-card) {
        min-height: 100%;
      }
      :global(.ant-table-tbody > tr > td) {
        padding: 13px 16px;
      }
    }
  }
}
</style>
