<template>
  <q-card style="width: 500px; height: 400px; max-width: 500px" class="column" flat>
    <q-card-section>
      <div class="text-h6 pfb">管理分类</div>
    </q-card-section>
    <div class="col" v-if="!data.loading && data.list && data.list.length > 0">
      <q-scroll-area :thumb-style="data.scroll.scrollStyle.thumbStyle" :bar-style="data.scroll.scrollStyle.barStyle" class="full-width full-height q-px-md">
        <q-list v-if="data.list.length > 0">
          <q-item clickable v-ripple v-for="(x, i) in data.list" :key="i">
            <q-item-section>
              <div class="row items-center">
                <svg-icon icon="Media/Rec.svg" size="14" color="svg-icon-primary"></svg-icon>
                <q-item-label class="f16 q-ml-md col">{{ x.Name }}</q-item-label>
                <div class="row">
                  <q-btn dense flat color="primary" @click="editorHandler(x.Id)">
                    <div class="row items-center">
                      <svg-icon style="margin-top: 6px" icon="Design/Edit.svg" size="16" color="svg-icon-primary"></svg-icon>
                      <span class="q-ml-sm">编辑</span>
                    </div>
                  </q-btn>
                  <q-btn dense flat color="negative" class="q-ml-md" @click="deleteHandler(x.Id)">
                    <svg-icon style="margin-top: 6px" icon="Home/Trash.svg" size="16" color="svg-icon-negative"></svg-icon>
                    <span class="q-ml-sm">删除</span>
                  </q-btn>
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </div>
    <div class="col column items-center" v-else-if="!data.loading && (!data.list || data.list.length == 0)">
      <div class="text-center">
        <svg-icon icon="Shopping/Box3.svg" size="80" color="svg-icon-grey"></svg-icon>
        <div class="f12 row items-center">
          <div>暂时没有创建自定义筛选分类，是否</div>
          <q-btn class="f12" color="primary" flat style="margin-top: -5jpx" @click="editorHandler(0)">立即创建</q-btn>
        </div>
      </div>
    </div>
    <div class="col column items-center" v-else>
      <div class="text-center">
        <q-inner-loading :showing="true" label="正在加载数据，请稍等..." label-class="text-grey-5 f12" />
      </div>
    </div>
  </q-card>
</template>

<script>
import useScrollModule from '@/module/scrollbar/scrollModule'
import CustomQueryService from '@/api/customQuery'
import { reactive } from 'vue'
import { useQuasar } from 'quasar'
import message from '@/utils/message'
export default {
  props: {
    /**
     * 页面编号
     */
    code: String
  },
  setup(props, context) {
    const data = reactive({
      scroll: useScrollModule(),
      list: [],
      loading: true
    })
    const $q = useQuasar()
    const deleteHandler = id => {
      $q.dialog({
        title: '删除提示',
        message: '你将要删除自定义筛选分类，你确定要执行吗？',
        cancel: true,
        persistent: true
      }).onOk(() => {
        data.loading = true
        CustomQueryService.deleteCustom(id).then(r => {
          if (r.data && r.data.Code == 1) {
            message.successMsg('删除成功')
          }
          init()
        })
      })
    }

    const editorHandler = id => {
      context.emit('update-where', id)
    }

    const init = () => {
      data.loading = true
      CustomQueryService.queryMyCustom(props.code).then(r => {
        if (r.data && r.data.Data) {
          data.list = r.data.Data
        }
        data.loading = false
      })
    }
    init()

    return { data, deleteHandler, editorHandler }
  }
}
</script>

<style></style>
