<template>
  <v-container class=dotedotebg-grey-lighten-4dotedote>
k4<div v-if=dotedotemessage.text.length > 0dotedote class=dotedotemt-5 mb-5dotedote>

k4  <v-snackbar v-model=dotedotesnackbar.visibledotedote :color=dotedotemessage.typedotedote location=dotedotetopdotedote>
k4k4<span class=dotedotetext-subtitle-1dotedote>{{ message.text }}</span>
k4k4<template v-slot:actions>
k4k4  <v-btn color=dotedotewhitedotedote variant=dotedotetextdotedote @click=dotedotesnackbar.visible = falsedotedote>Close</v-btn>
k4k4</template>
k4  </v-snackbar>
k4</div>

k4<v-row>
k4  <v-col cols=dotedote12dotedote class=dotedoted-flex justify-enddotedote>
k4k4<v-btn @click=dotedotejumpTomutingruledetaildotedote color=dotedotebluedotedote>
k4k4  <v-icon top>mdi-plus</v-icon> add muting rule
k4k4</v-btn>
k4  </v-col>
k4</v-row>

k4<v-row>
k4  <v-col sm=dotedote12dotedote md=dotedote12dotedote lg=dotedote12dotedote>
k4k4<Suspense>
k4k4  <template #default>
k4k4k4<cmpvdatatable :headers_arr=singleheaders_arrsingle :duration_item_selected=singleduration_item_selected[dotedotevaluedotedote]single
k4k4k4  :guid=singleguidsingle target_api=singlemutingrulelistsingle card_title=singlemutingrule listsingle card_subtitle=singlesingle />
k4k4  </template>
k4k4  <template #fallback>
k4k4k4<div class=dotedotetext-centerdotedote><v-progress-circular color=dotedoteprimarydotedote indeterminate></v-progress-circular></div>
k4k4  </template>
k4k4  <template #error>loading error</template>
k4k4</Suspense>
k4  </v-col>
k4</v-row>
  </v-container>
</template>


<script setup lang=dotedotetsdotedote>

import { ref, reactive } from singlevuesingle;
import { useRoute } from singlevue-routersingle
import { duration_item_selected } from single@/components/andes/datedurationselect.tssingle;
import single@vuepic/vue-datepicker/dist/main.csssingle

import cmpvdatatable from single@/components/andes/cmpvdatatable.vuesingle;

const route = useRoute()
const guid = route.query.guid

let message = reactive({ type: singlesingle, text: singlesingle });
const message_category = route.query.message_category

const jumpTomutingruledetail = () => {
  window.location.href = single./m09mutingrulecreatesingle;
};

if (message_category == dotedotedeleteddotedote) {
  message.type = dotedoteinfodotedote
  message.text = dotedotemutingrule was deleteddotedote
}

if (message_category == dotedotecreateddotedote) {
  message.type = dotedoteinfodotedote
  message.text = dotedotemutingrule was createddotedote
}

if (message_category == dotedoteupdateddotedote) {
  message.type = dotedoteinfodotedote
  message.text = dotedotemutingrule was updateddotedote
}

const snackbar = reactive({
  color: dotedoteinfodotedote,
  icon: dotedoteerrordotedote,
  mode: null,
  position: dotedotetopdotedote,
  text: null,
  timeout: 6000,
  title: dotedotedotedote,
  text: dotedotedotedote,
  visible: true
})

// table一覧 headerセット
const headers_arr = ref([
  { title: singleidsingle, align: singlestartsingle },
  { title: singlestatussingle, align: singlestartsingle },
  { title: singlenamesingle, align: singlestartsingle },
  { title: singleaccountIdsingle, align: singlestartsingle },
  { title: singleschedule_startsingle, align: singlestartsingle },
  { title: singleschedule_endsingle, align: singlestartsingle },
  { title: singlecreatedByUsersingle, align: singlestartsingle },
  { title: singleenabledsingle, align: singlestartsingle },
]);

</script>