<template>
  <div class="q-pa-md">
    <q-page padding style="background: #FFF;border-radius: 10px;">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-input @keyup.enter="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name"
              label="分组名称" @clear="resetSearch" maxlength="20" />
          </div>
        </div>
      </div>
      <div class="page-content">
        <q-table :pagination="msg" :rows="rows" :columns="columns" row-key="name" no-data-label="暂无相关数据" flat
          class="sticky-column-table">
          <template v-slot:append>
            <div class="col-2 q-table__title">分组列表</div>
            <q-space />
            <div class="page-option">
              <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增分组"
                @click="alert = true,addMsg.Name=''" />
            </div>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="msg.pageCount"
              :input="true" @input="changePage" />
          </template>
        </q-table>
      </div>
      <q-dialog v-model="alert">
        <q-card style="width: 520px; max-width: 80vw;">
          <q-card-section>
            <div class="text-h6">新增分组</div>
          </q-card-section>
          <q-separator />
          <q-card-section class="q-pt-none">
            <q-input filled v-model="addMsg.Name" label="分组名称" standout="bg-primary text-white"
              style="margin-top:20px" />
            <q-input filled v-model="addMsg.Sort" label="分组排序" standout="bg-primary text-white"
              style="margin-top:20px" />
          </q-card-section>
          <q-separator />
          <q-card-actions align="right">
            <q-btn class="q-mr-md" label="取消" @click="alert = false" />
            <q-btn color="accent" class="q-mr-md" label="确定" @click="submit()" />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </q-page>
  </div>

</template>

<script lang="ts">
  // import { Todo, Meta } from '@/components/models'

  import groupingManageModule from '@/module/drainage/groupingManageModule'

  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'groupingManage',
    //   components: { ExampleComponent },
    setup() {
      let { setTitle, msg, addMsg, resetSearch } = groupingManageModule()
      // setTitle('难受', false)
      const changePage = () => {
        console.log('打印')
      }
      const submit = () => {
        console.log('打印确定')
      }

      const columns = [
        { name: 'ID', required: true, label: 'ID', align: 'left', field: 'name', },
        { name: '排序', align: 'center', label: '排序', field: 'calories', },
        { name: '分组名称', label: '分组名称', field: 'fat', },
        { name: '创建人', label: '创建人', field: 'carbs' },
        { name: '创建时间', label: '创建时间', field: 'protein' },
        { name: '操作', label: '操作', field: 'sodium' },

      ]
      const rows = [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          sodium: 337,
          calcium: '6%',
          iron: '7%'
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: '3%',
          iron: '8%'
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          sodium: 327,
          calcium: '7%',
          iron: '16%'
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          sodium: 50,
          calcium: '0%',
          iron: '0%'
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          sodium: 38,
          calcium: '0%',
          iron: '2%'
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          sodium: 562,
          calcium: '0%',
          iron: '45%'
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          sodium: 326,
          calcium: '2%',
          iron: '22%'
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          sodium: 54,
          calcium: '12%',
          iron: '6%'
        }
      ]
      return { setTitle, msg, addMsg, resetSearch, columns, rows, changePage, alert: ref(false), submit }
    }
  })
</script>