<template>
  <!-- 套保品种 -->
  <div class="hedging-variety spot-variety"
       :loading="loading">
    <filterCustomTable @search="search"
                       :name="'套保品种'">
    </filterCustomTable>
    <div class="spotTableCont">
      <div class="leftSpot">
        <leftMenu :menuList="filterMenu()"
                  :path="'goods_info_hedge_normal'"
                  @chooseMenu="chooseDG"></leftMenu>
      </div>
      <div class="rightCont">
        <RightHedging :selctedMG="selctedMG"
                      @refresh="updateDG"
                      :isNormal="isNormal">
        </RightHedging>
      </div>
    </div>
  </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 RightHedging from '../../components/rightHedging/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 { handleMG } from './setup';
import { MenuList } from '@/services/go/ermcp/goodsInfo/interface';

export default defineComponent({
    name: 'hedging-variety',
    components: {
        filterCustomTable,
        leftMenu,
        RightHedging,
        AddGoods,
    },
    setup() {
        const { loading, menuList, isNormal, selctedMG, queryMG, chooseDG, updateDG } = handleMG();
        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(() => {
            // 加载数据在这里
            queryMG();
        });
        return { loading, selctedMG, chooseDG, isNormal, menuList, updateDG, search, filterMenu };
    },
});
</script>

<style lang="less">
.hedging-variety {
    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
>;
