<!--
 * @FileDescription: Components Example
 * @Date: 2023-08-11
 * @LastEditTime: 2023-08-11
-->
<script setup lang="ts">
import { ref } from 'vue';
import { list } from './config';
// elements
import DialogTip from './elements/DialogTip.vue';

const show = ref(false);
const name = ref('');
const title = ref('');
const draggingFab = ref(false);
const btnPos = ref([18, 18]);

function clickItem(data: any) {
  name.value = data.name;
  title.value = data.title;
  btnPos.value = [18, 18];
  show.value = true;
}
function goBack() {
  show.value = false;
  name.value = '';
  title.value = '';
}
function moveFab(ev: any) {
  draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;
  btnPos.value = [btnPos.value[0] - ev.delta.x, btnPos.value[1] - ev.delta.y];
}
</script>
<template>
  <div>
    <div v-if="show">
      <q-page-sticky position="bottom-right" :offset="btnPos" class="z-top">
        <q-btn
          :disable="draggingFab"
          v-touch-pan.prevent.mouse="moveFab"
          round
          color="white"
          text-color="primary"
          icon="bi-arrow-left"
          title="返回，按住可拖动"
          @click="goBack"
        />
      </q-page-sticky>
      <DialogTip v-if="name === 'dialog_tip'" />
    </div>
    <div v-else class="q-pa-sm q-gutter-sm">
      <q-list dense>
        <q-item
          clickable
          active
          v-for="(item, index) in list"
          :key="index"
          @click="clickItem(item)"
        >
          <q-item-section>
            <q-item-label>{{ item.title }}</q-item-label>
            <q-item-label caption v-if="item.remark">
              {{ item.remark }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
