<template>
    <!-- 报表通用过滤 -->
    <div class="filterTable">
        <div class="filter-custom-table">
            <a-tree-select
                v-model:value="selectedFT"
                @change="changeFT"
                style="width: 200px"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="FtDeliveryGoods"
                placeholder="全部商品"
                :showCheckedStrategy="ALL"
                tree-default-expand-all
            ></a-tree-select>
            <a-select
                label-in-value
                class="conditionSelect"
                v-for="(item, index) in wrLsit"
                :key="index + '11'"
                style="width: 120px"
                v-model:value="item.selected"
                :placeholder="`全部${item.itemtypename}`"
            >
                <a-select-option
                    v-for="sub in item.itemlst"
                    :key="sub.dgfactoryitemid"
                >{{sub.dgfactoryitemvalue}}</a-select-option>
            </a-select>
            <a-space direction="vertical" v-if="!isWR()">
                <a-month-picker
                    :allowClear="false"
                    placeholder="全部交收月"
                    v-model:value="time"
                    class="commonDatePicker conditionPicker allDatePicker"
                />
            </a-space>
            <a-select
                class="conditionSelect"
                v-if="isFloat()"
                :style="{width: '180px', maxHeight: '400px', overflow: 'auto' }"
                @change="goodsChange"
                placeholder="全部期货合约"
            >
                <a-select-option
                    v-for="item in goodsList"
                    :value="item.goodsid"
                    :key="item.goodsid"
                >{{item.goodscode}}({{item.goodsname}})</a-select-option>
            </a-select>
            <a-button class="btnDeafault" @click="search(true)" style="width: 80px">筛选</a-button>
            <a-button class="operBtn" @click="listingAction">挂牌求购</a-button>
        </div>
    </div>
</template>

<script lang="ts">
import FilterOption from '@/common/components/filter/index.vue';
import { defineComponent, onMounted, PropType } from 'vue';
import { ref } from 'vue';
import { initData } from '@/common/methods';
import { handleFtDeliveryGoods } from '../../setup';
import { queryWrStandardFactoryItem } from '@/services/go/wrtrade';
import { WrStandardFactoryItemEx } from '@/services/go/wrtrade/interface';
import { message, TreeSelect } from 'ant-design-vue';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { Moment } from 'moment';
import moment from 'moment';
import { addSubscribeQuotation, removeSubscribeQuotation } from '@/services/socket/quota';
import { v4 } from 'uuid';
import { getGoodsList, getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
import { handleIs, setGoodsPrice } from '../buy-sell-market/setup';
import { BuyOrSell } from '@/common/constants/enumCommon';

const ALL = TreeSelect.SHOW_ALL;

interface SelectList extends WrStandardFactoryItemEx {
    selected: { key: number; label: Object; value: number } | undefined;
}

export default defineComponent({
    name: 'exposure-filter-table',
    components: { FilterOption },
    props: {
        enumName: {
            default: '',
            type: String as PropType<EnumRouterName>,
        },
    },
    setup(props, context) {
        const { isWR, isFloat } = handleIs(props.enumName, BuyOrSell.buy);
        const loading = ref<boolean>(false);
        // 商品
        const { FtDeliveryGoods } = handleFtDeliveryGoods();
        const selectedFT = ref<number>();

        // 仓单要素
        const wrLsit = ref<SelectList[]>([]);
        function changeFT(value: number, label: any, extra: any) {
            queryWrStandardFactoryItem({ wrstandardid: value }).then((res) => {
                const result: SelectList[] = [];
                res.forEach((el) => {
                    result.push({ selected: undefined, ...el });
                });
                wrLsit.value = result;
            });
        }
        // 全部期货合约
        const goodsList = ref<Goods[]>([]);
        const selectedGoods = ref<Goods>();
        initData(() => {
            goodsList.value = getGoodsList();
        });
        const uuid = v4();
        // 切换商品
        function goodsChange(id: number) {
            //行情订阅
            removeSubscribeQuotation(uuid);
            const goods = goodsList.value.find((e) => e.goodsid === id);
            selectedGoods.value = goods;
            const arr = [{ exchangeCode: 250, goodsCode: goods!.goodscode, subState: 0 }];
            addSubscribeQuotation(uuid, arr);
        }
        onMounted(() => {
            removeSubscribeQuotation(uuid);
        });
        // 交收月
        const time = ref<Moment>(); // string 交收月
        function search(isQuery: boolean) {
            const result: any = {};
            if (selectedFT.value) {
                //  商品名称(筛选条件)
                const id = selectedFT.value;
                result.wrstandardid = id;
                FtDeliveryGoods.value.forEach((item) => {
                    item.children?.forEach((el) => {
                        if (el.key === id) {
                            //  品种id
                            result.deliverygoodsid = item.key;
                        }
                    });
                });
            }
            const wrResult: { dgfactoryitemtypeid: number; dgfactoryitemid: number }[] = [];
            wrLsit.value.forEach((el) => {
                const { selected, itemtypename, dgfactoryitemtypeid } = el;
                if (selected) {
                    const { key } = selected;
                    if (itemtypename === '仓库') {
                        result.warehouseid = el.itemlst.find((e) => e.dgfactoryitemid === key)!.warehouseid;
                    } else {
                        // 商品要素项名称模糊匹配, 逗号隔开, 如 产地1,品牌1,规格12mm
                        const name = el.itemlst.find((e) => e.dgfactoryitemid === key)!.dgfactoryitemvalue;
                        result.dgitemname = result.dgitemname ? `${result.dgitemname},${name}` : name;
                    }
                    wrResult.push({ dgfactoryitemtypeid, dgfactoryitemid: key });
                }
            });
            if (!isWR()) {
                // 预售
                if (time.value) {
                    //   交收月(yyyy-mm) 仓单预售填写
                    result.deliverymonth = moment(time.value).format('YYYY-MM');
                }
            }
            if (isQuery) {
                context.emit('search', result);
            }
            result.wrResult = wrResult;
            return result;
        }
        function listingAction() {
            if (!selectedFT.value) {
                message.warn('请选中商品！');
                return;
            }
            let flag = true;
            for (const item of wrLsit.value) {
                if (!item.selected) {
                    message.warn(`请选择${item.itemtypename}`);
                    flag = false;
                    return;
                }
            }

            if (flag) {
                if (!isWR()) {
                    if (!time.value) {
                        message.warn('请选中交收月！');
                        return;
                    }
                }
                if (isFloat()) {
                    if (!selectedGoods.value) {
                        message.warn('请选中期货合约！');
                        return;
                    }
                    const result = getQuoteDayInfoByCodeFindPrice(selectedGoods.value.goodscode);
                    setGoodsPrice(result);
                }
                const result = search(false);
                context.emit('buy', result, selectedGoods.value);
            }
        }
        return {
            FtDeliveryGoods,
            selectedFT,
            wrLsit,
            changeFT,
            search,
            listingAction,
            ALL,
            time,
            goodsList,
            goodsChange,
            isWR,
            isFloat,
        };
    },
});
</script>

<style lang="less" scoped>
.allDatePicker.ant-calendar-picker {
    cursor: pointer;
    min-width: 120px;
    height: 30px;
    padding: 0 8px;
    background: @m-grey9;
    border: none;
    border-radius: 3px 3px 3px 3px;
    color: @m-grey45;
    .ant-input {
        width: 104px;
        &::placeholder {
            color: @m-grey45;
            font-size: 14px;
        }
    }
}
.operBtn.ant-btn {
    margin-top: 0;
}
.btnDeafault.ant-btn {
    height: 28px;
    line-height: 28px;
}
</style>;

