<template>
  <a-card
    class="w-full relative"
    :bordered="false"
    :body-style="{ padding: '16px' }"
  >
    <search
      @search="reload"
      :selection="selection"
      @add="openEdit"
      @batchMove="openMove"
    />
    <a-tabs v-model:activeKey="categoryId" type="card" @change="onCategory">
      <a-tab-pane :key="0" tab="全部" />
      <a-tab-pane
        v-for="item in category"
        :key="item.categoryId"
        :tab="item.title"
      />
    </a-tabs>
    <div class="goods-list w-full flex gap-5 flex-wrap">
      <template v-for="(item, index) in goods" :key="index">
        <a-card class="item" :body-style="{ padding: '0' }">
          <a-avatar
            :src="item.image"
            :preview="false"
            shape="square"
            :size="190"
            @click="add(item)"
          />
          <div
            class="goods-info flex justify-between items-center p-2 text-ellipsis"
          >
            <div class="goods-name-bar flex flex-col">
              <text class="goods-name text-gray-500 w-[174px]">{{
                item.goodsName
              }}</text>
              <div class="goods-price flex justify-between">
                <text class="text-red-500">￥{{ item.price }}</text>
                <ShoppingCartOutlined
                  class="text-xl"
                  style="color: #808080"
                  @click="add(item)"
                />
              </div>
            </div>
          </div>
        </a-card>
      </template>
      <div class="h-20 flex items-center m-auto w-full justify-center">
        <a-pagination
          v-model:current="page"
          :total="count"
          show-less-items
          @change="reload"
        />
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <SpecForm
      v-model:visible="showSpecForm"
      :data="current"
      @done="addSpecCashier"
    />
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';

  import { ShoppingCartOutlined } from '@ant-design/icons-vue';
  import Search from './search.vue';
  import SpecForm from './specForm.vue';
  import { pageGoods } from '@/api/shop/goods';
  import type { Goods, GoodsParam } from '@/api/shop/goods/model';
  import { useRouter } from 'vue-router';
  import { Cashier } from '@/api/shop/cashier/model';
  import { User } from '@/api/system/user/model';
  import { listGoodsCategory } from '@/api/shop/goodsCategory';
  import { GoodsCategory } from '@/api/shop/goodsCategory/model';
  const { currentRoute } = useRouter();

  withDefaults(
    defineProps<{
      value?: string;
      placeholder?: string;
      loginUser?: User;
    }>(),
    {
      placeholder: undefined
    }
  );

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'reload'): void;
  }>();

  // 表格选中数据
  const selection = ref<Goods[]>([]);
  // 当前编辑数据
  const current = ref<Cashier | null>(null);
  const form = ref<Cashier>({});
  const category = ref<GoodsCategory[]>([]);
  const goods = ref<Goods[] | null>();
  const count = ref<number>(0);
  const page = ref<number>(1);
  // 是否显示批量移动弹窗
  const showMove = ref(false);
  const specs = ref<string>();
  const showSpecForm = ref<boolean>(false);
  const categoryId = ref<number>(0);

  /* 打开编辑弹窗 */
  const openEdit = (row?: Cashier) => {
    current.value = row ?? null;
    showSpecForm.value = true;
  };

  /* 打开编辑弹窗 */
  const openSpecForm = (row?: Cashier) => {
    current.value = row ?? null;
    if (current.value) {
      current.value.cartNum = 1;
    }
    showSpecForm.value = true;
  };

  /* 打开批量移动弹窗 */
  const openMove = () => {
    showMove.value = true;
  };

  const add = (row?: Cashier) => {
    if (row) {
      form.value = row;
      form.value.spec = specs.value;
      openSpecForm(row);
    }
  };

  const addSpecCashier = () => {
    emit('reload');
  };

  const onCategory = (e) => {
    reload({ categoryId: e.categoryId });
  };

  const reload = (where: GoodsParam) => {
    listGoodsCategory({ parentId: 0, type: 0 }).then((list) => {
      category.value = list;
    });
    if (categoryId.value > 0) {
      where.parentId = categoryId.value;
    }
    pageGoods({ ...where, page: page.value }).then((res) => {
      if (res?.list) {
        goods.value = res.list;
        count.value = res.count;
      }
    });
  };

  reload({});

  watch(currentRoute, () => {}, { immediate: true });
</script>
