<template>
  <div class="pa-6 white fill-height">
    <div class="d-flex align-center mb-6">
      <v-avatar color="primary" size="48" class="mr-4">
        <v-icon dark>mdi-shield-lock-outline</v-icon>
      </v-avatar>
      <div>
        <h2 class="text-h5 mb-1">数据安全</h2>
        <div class="text-body-2 grey--text text--darken-1">数据安全能力入口已保留，功能将在后续迭代中建设。</div>
      </div>
    </div>

    <v-alert type="info" outlined>
      当前版本不提供虚假的列表或操作接口。后续将在此建设数据分级分类、脱敏策略、访问审计和权限策略。
    </v-alert>

    <v-row>
      <v-col v-for="item in plannedCapabilities" :key="item" cols="12" sm="6" md="3">
        <v-card outlined class="pa-4 text-center" height="100%">
          <v-icon color="primary" size="32" class="mb-3">mdi-lock-clock</v-icon>
          <div class="text-subtitle-1">{{ item }}</div>
          <v-chip small class="mt-3">规划中</v-chip>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'data-security',
  data () {
    return {
      plannedCapabilities: ['数据分级分类', '数据脱敏', '访问审计', '权限策略']
    }
  }
}
</script>
