<template>
  <page-layout>
    <!-- TODO(delay):投诉首页和我的投诉 -->
    <div class="bg-primary text-center text-white q-py-lg">
      <div class="text-h6 q-pb-xs">我要投诉</div>
      <div class="text-grey-2 q-pb-lg">投诉处理时间：周一至周五 早11点到晚9点</div>
    </div>
    <q-card flat style="margin-top:-30px;" class="q-ma-md">
      <q-card-section>
        <div class="text-subtitle text-weight-bold">常见问题</div>
        <div class="row warp">
          <router-link v-for="item,i in types" :key="i"
          :to="'/app/complain/add/'+item.type" class="col-4 column text-caption items-center q-py-md">
            <q-img
              :src="item.img"
              width="36px"
              height="36px"
              no-spinner
            ></q-img>
            {{ item.name }}
          </router-link>
        </div>
      </q-card-section>
    </q-card>
    <q-card flat  class="q-ma-md">
      <q-item to="/app/complain/my">
        <q-item-section>我的投诉记录</q-item-section>
        <q-item-section side>
          <q-icon size="xs" name="arrow_forward_ios" />
        </q-item-section>
      </q-item>
    </q-card>
    <div class="q-ma-lg text-caption text-grey">
      <!-- <q-icon class="q-mr-xs" name="error_outline"></q-icon> 如果您发现服务您的店主有任何违法行为，可投诉到我们平台，我们会协助您处理问题。 -->
    </div>
  </page-layout>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "boot/axios";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useSelfStore } from "stores/self";
import ComplainTypes from './ComplainTypes.js'
const store = useSelfStore()
const $q = useQuasar();
const router = useRouter();
const types = reactive(ComplainTypes)
</script>
