@{
    Layout = "~/Views/Shared/_LayoutMini.cshtml";
}

@section CSS{

}

@section JS{
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script>
        //标的选择组件
        const vueUnderlying = function () {
            return {
                props: ['value', 'options'],
                data() {
                    return { autoUnderlying: null };
                },
                mounted() {
                    autoUnderlying = tradeHelper.UnderlyingAutoComplete(this.$el, this.options);
                    autoUnderlying.onSelect(this.onchange);
                    this.value && autoUnderlying.selectByCode(this.value);
                },
                methods: {
                    onchange(data) {
                        if (this.value !== data.Code) {
                            this.$emit('change', data);
                            this.$emit('input', data.Code);
                        }
                    }
                },
                destroyed() {
                    autoUnderlying && autoUnderlying.dispose();
                },
                template: '<input type="text" v-model="value" />'
            };
        };

        var selFlag = tradeHelper.UnderlyingSelectFlag;
        const autoUnderlyingOptions = { SelectFlag: selFlag.Stock | selFlag.UsePinYinFilter };
        const autoUnderlyingOptions2 = { SelectFlag: selFlag.CommodityFutures | selFlag.IncludeMatured | selFlag.IncludeSynthetic };

        var vue = new Vue({
            el: '#vueDiv',
            data: {
                underlyingId: 1,
                underlyingCode: '000001.SZ',
                underlyingName: '000001.SZ',

                underlyingId2: 2,
                underlyingCode2: 'RB00',
                underlyingName2: 'RB00',
            },
            methods: {
                changeUnderlying(data) {
                    this.underlyingId = data.id;
                    this.underlyingName = data.Name;
                },
                changeUnderlying2(data) {
                    this.underlyingId2 = data.id;
                    this.underlyingName2 = data.Name;
                }
            },
            components: {
                'vue-underlying': vueUnderlying()
            }
        });
    </script>
}

<div class="yc-panel">
    <h4>标的自动完成控件样例</h4>
    <hr />
    <div id="vueDiv">
        <div>
            <p>股票标的并且支持拼音首字母筛选</p>
            <vue-underlying v-model="underlyingCode" v-bind:options="autoUnderlyingOptions" v-on:change="changeUnderlying"></vue-underlying>
        </div>

        <div class="mt-4">
            underlyingId:{{underlyingId}},&emsp;&emsp;underlyingCode:{{underlyingCode}},&emsp;&emsp;underlyingName:{{underlyingName}},&emsp;&emsp;
        </div>

        <div class="mt-4">
            设置新的标的代码: <input type="text" v-model="underlyingCode" />
        </div>

        <hr />

        <div>
            <p>商品标的并且支持已过期标的和组合标的</p>
            <vue-underlying v-model="underlyingCode2" v-bind:options="autoUnderlyingOptions2" v-on:change="changeUnderlying2"></vue-underlying>
        </div>

        <div class="mt-4">
            underlyingId2:{{underlyingId2}},&emsp;&emsp;underlyingCode2:{{underlyingCode2}},&emsp;&emsp;underlyingName2:{{underlyingName2}},&emsp;&emsp;
        </div>
    </div>
</div>

<div class="yc-panel">
    <ul>
        <li>后台查询Model: UnderlyingSelectRequest</li>
        <li>JS控件定义位置: <a href="/Scripts/app/tradeHelper.js">/Scripts/app/tradeHelper.js</a></li>
    </ul>
    <h4>控件选项:</h4>
    <ul>
        <li>ClientId:  客户ID,配置客户授信时可限制交易品种,过滤出未被限制的品种对应的标的</li>
        <li>VarietyId: 品种ID,过滤出此品种下的标的</li>
        <li>BlackLimit: 标的黑名单限制,0:不限制;1:场外交易;2:互换交易;</li>
        <li>
            <div>SelectFlag: 枚举定义自tradeHelper.UnderlyingSelectFlag,使用'|'或运算合并选择条件</div>
            <ul>
                <li>Stock:   允许股票标的</li>
                <li>StockIF: 允许股票指数标的</li>
                <li>CommodityFutures: 允许商品期货标的</li>
                <li>CommoditySpot: 允许商品现货标的</li>
                <li>IncludeSynthetic: 允许组合标的</li>
                <li>OnlySynthetic: 只允许组合标的</li>
                <li>CheckLaunch: 只允许已启用标的</li>
                <li>UsePinYinFilter: 使用拼音过滤</li>
                <li>IncludeMatured: 允许已过期标的</li>
                <li>IncludeBasket: 允许篮子标的</li>
                <li>OnlyBasket: 只允许篮子标的</li>
                <li>UseRightFilter: 使用交易权限过滤</li>
                <li>UseForTrading: 用于交易录入,此时返回复杂标的数据对象</li>
            </ul>
        </li>
        <li>MaxShowLength: 查询符合条件的标的最大返回的列表个数</li>
    </ul>
</div>