<template>
  <!-- 现货品种 -->
  <div class="spot-variety"
       :loading="loading">
    <filterCustomTable @search="search"
                       :name="'现货品种'">
      <a-button class="operBtn"
                v-if="isNormal"
                @click="addAction">新增</a-button>
    </filterCustomTable>
    <div class="spotTableCont">
      <div class="leftSpot">
        <leftMenu :menuList="filterMenu()"
                  :path="'goods_info_spot_normal'"
                  @chooseMenu="chooseDG"></leftMenu>
      </div>
      <div class="rightCont">
        <rightSpot :selctedDeliveryGoods="selctedDeliveryGoods"
                   @refresh="updateDG"
                   :isNormal="isNormal"></rightSpot>
      </div>
    </div>
    <!-- 新增商品 -->
    <AddGoods @refresh="updateDG" />

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
import leftMenu from '@/views/information/goods/components/leftMenu/index.vue';
import rightSpot from '@/views/information/goods/components/rightSpot/index.vue';
import { openModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods/index';
import AddGoods from '@/views/information/goods/components/add/index.vue';
import { handleDG } from './setup';
import { MenuList } from '@/services/go/ermcp/goodsInfo/interface';

export default defineComponent({
    name: 'spot-variety',
    components: {
        filterCustomTable,
        leftMenu,
        rightSpot,
        AddGoods,
    },
    setup() {
        // 控制弹窗
        const { openAction: addAction } = openModal('goods_info_spot_normal_add');
        const { loading, selctedDeliveryGoods, chooseDG, isNormal, menuList, queryDG, updateDG } = handleDG();
        const cacheSearch = ref<string>('');
        function filterMenu() {
            if (cacheSearch.value) {
                const result: MenuList[] = [];
                menuList.value.forEach((el, i) => {
                    const children: MenuList[] = [];
                    el.children?.forEach((e) => {
                        if (e.title.includes(cacheSearch.value)) {
                            children.push(e);
                        }
                    });
                    result.push({ key: el.key, title: el.title, children });
                });
                return result;
            } else {
                return menuList.value;
            }
        }
        function search(value: any) {
            if (value && value.nickname && value.nickname.length) {
                cacheSearch.value = value.nickname[0];
            } else {
                cacheSearch.value = '';
            }
        }
        initData(() => {
            // 加载数据在这里
            queryDG();
        });
        return { addAction, loading, selctedDeliveryGoods, chooseDG, isNormal, menuList, updateDG, search, filterMenu };
    },
});
</script>

<style lang="less">
.spot-variety {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    .spotTableCont {
        width: 100%;
        height: calc(100% - 45px);
        overflow-y: auto;
        .inlineflex;
        .leftSpot {
            width: 180px;
            height: 100%;
            background: @m-black4;
        }
        .rightCont {
            flex: 1;
            height: 100%;
            background: @m-black2;
        }
    }
}
</style
>;
