<template>
    <div class="optionCalculator-search">
        <div class="btns">
            <el-button type="primary" v-if="form.select21==='BS' || form.select21==='BAW' || form.select21==='BT' || form.select21==='CSR'" @click="simulateDealWithVlParam">{{$t('field.trialBalance')}}</el-button>
            <el-button type="primary" @click="valuationBtn">{{$t('field.valuation')}}</el-button>
            <i class="el-icon-d-arrow-left" @click="searchHide"></i>
        </div>
        <el-form class="form" ref="form" :model="form" label-position="left">
            <div class="top-box">
                <el-row>
                    <el-col :span="22">
                        <el-form-item :label="$t('menu.currencyPair')" class="display-flex w-36p">
                            <el-select v-model="form.select" :placeholder="$t('field.pleaseSelect')" filterable @change="selectChange">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="" label-width="1px">
                            <el-input type="number" v-model="form.value" placeholder="" step="any" @blur="inputBlur($event, 'value', '6')"></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item :label="$t('field.pricingDate')" class="display-flex w-36p">
                            <el-date-picker
                                v-model="form.date"
                                type="date"
                                value-format="yyyy-MM-dd"
                                @change="getValueDate2"
                                :placeholder="$t('field.chooseDate')">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="14">
                        <el-form-item :label="$t('menu.categories')" class="display-flex w-57p">
                            <el-select v-model="form.select2" :placeholder="$t('field.pleaseSelect')" filterable @change="selectChange2">
                                <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" label-width="1px">
                            <el-select v-model="form.select3" :placeholder="$t('field.pleaseSelect')" filterable>
                                <el-option
                                v-for="item in options3"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="scrollY">
                <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item :title="$t('field.optionTerms')" name="1">
                        <el-row>
                            <el-col :span="22">
                                <el-form-item :label="$t('field.tradeDirection')" class="display-flex w-36p">
                                    <el-select v-model="form.select4" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options4"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="22">
                                <el-form-item label="起息日" class="display-flex w-36p">
                                    <el-date-picker
                                        v-model="form.date2"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        @change="getbetweenDaysPMS"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <span class="span-D">{{day1}}</span>
                            </el-col> -->
                            <el-col :span="22" v-if="form.select5 === 'AMERICAN'">
                                <el-form-item :label="$t('field.observationStartDate')" class="display-flex w-36p">
                                    <el-date-picker
                                        v-model="form.date5"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        @change="getbetweenDaysPMS"
                                        :placeholder="$t('field.chooseDate')">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="2">
                                <span class="span-D">{{day5}}</span>
                            </el-col> -->
                            <el-col :span="22">
                                <el-form-item :label="$t('field.maturityDate')" class="display-flex w-36p">
                                    <el-date-picker
                                        v-model="form.date3"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        :placeholder="$t('field.chooseDate')">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <span class="span-D">{{day2}}</span>
                            </el-col>
                            <el-col :span="22">
                                <el-form-item :label="$t('field.deliveryDate')" class="display-flex w-36p">
                                    <el-date-picker
                                        v-model="form.date4"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        @change="getbetweenDays3"
                                        :placeholder="$t('field.chooseDate')">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <span class="span-D">{{day3}}</span>
                            </el-col>
                            <el-col :span="22" v-show="form.select2 === 'PV'">
                                <el-form-item :label="$t('field.exerciseType')" class="display-flex w-36p">
                                    <el-select v-model="form.select5" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options5"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22" v-show="form.select2 !== 'BD'">
                                <el-form-item :label="$t('field.bullishBearish')" class="display-flex w-36p">
                                    <el-select v-model="form.select6" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options6"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22" v-show="form.select2 !== 'BD' && form.select3 !=='GEOMETRIC_STRIKE' && form.select3 !=='ARITHMETIC_STRIKE'">
                                <el-form-item :label="$t('field.strikePrice')" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value2" :digit="6" @getNumberValue="getNumberValue($event, 'value2')"></numberInput> -->
                                    <el-input type="number" v-model="form.value2" placeholder="" step="any" @blur="inputBlur($event, 'value2', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22" v-show="form.select2 === 'AS'">
                                <el-form-item :label="$t('field.observationInterval')" class="display-flex w-36p">
                                    <el-date-picker
                                    v-model="form.dateRange"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    :range-separator="$t('field.to')"
                                    :start-placeholder="$t('field.startDate')"
                                    :end-placeholder="$t('field.endDate')">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22" v-show="form.select2 === 'AS'">
                                <el-form-item :label="$t('field.observedFrequency')" class="display-flex w-36p">
                                    <el-select v-model="form.select23" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options23"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" v-show="form.select2 === 'AS'">
                                <span class="span-D"><i class="el-icon-setting" @click="dialogShow"></i></span>
                            </el-col>
                            <el-col :span="14">
                                <el-form-item label="Cut Off" class="display-flex w-57p">
                                    <el-select v-model="form.select7" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options7"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" label-width="1px">
                                    <el-time-picker
                                        v-model="form.time"
                                        format="HH:mm"
                                        value-format="HH:mm"
                                        placeholder="">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="14">
                                <el-form-item :label="$t('field.notionalAmount')" class="display-flex w-57p">
                                    <el-select v-model="form.select8" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options8"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" label-width="1px">
                                    <!-- <numberInput :value="form.value3" :digit="2" @getNumberValue="getNumberValue($event, 'value3')"></numberInput> -->
                                    <el-input type="number" v-model="form.value3" placeholder="" step="any" @blur="inputBlur($event, 'value3', '2')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="14">
                                <el-form-item :label="$t('field.premium')" class="display-flex w-57p">
                                    <el-select v-model="form.select22" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options8"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" label-width="1px">
                                    <!-- <numberInput :value="form.value19" :digit="2" @getNumberValue="getNumberValue($event, 'value19')"></numberInput> -->
                                    <el-input type="number" v-model="form.value19" placeholder="" step="any" @blur="inputBlur($event, 'value19', '2')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22">
                                <el-form-item :label="$t('field.optionPaymentDate')" class="display-flex w-36p">
                                    <el-date-picker
                                        v-model="form.date6"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        :placeholder="$t('field.chooseDate')">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="1" v-show="form.select5 !== 'AMERICAN'">
                                <el-form-item label="">
                                    <el-checkbox v-model="form.checked" :disabled="form.select5 === 'AMERICAN'"></el-checkbox>
                                </el-form-item>
                            </el-col>
                            <el-col :span="13" v-show="form.select5 !== 'AMERICAN'">
                                <el-form-item label="Quanto" class="display-flex w-54p">
                                    <el-select v-model="form.select9" :disabled="!form.checked" :placeholder="$t('field.pleaseSelect')" filterable @change="quantoChange">
                                        <el-option
                                        v-for="item in options9"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" v-show="form.select5 !== 'AMERICAN'">
                                <el-form-item label="" label-width="1px">
                                    <el-select v-model="form.select10" :disabled="!form.checked" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options10"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22" v-show="form.checked">
                                <el-form-item :label="$t('field.convertedPrice')" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value20" :digit="4" @getNumberValue="getNumberValue($event, 'value20')"></numberInput> -->
                                    <el-input type="number" v-model="form.value20" placeholder="" step="any" @blur="inputBlur($event, 'value20', '4')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22">
                                <el-form-item label="Model" class="display-flex w-36p">
                                    <el-select v-model="form.select21" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options21"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                    <el-collapse-item v-show="form.select2 === 'BA' || form.select2 === 'BD'" title="Exotics" name="4">
                        <el-row>
                            <el-col :span="22">
                                <el-form-item :label="$t('field.observationType')" class="display-flex w-23p">
                                    <el-select v-model="form.select19" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options19"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22" v-show="form.select19 === 'WINDOW'">
                                <el-form-item :label="$t('field.observationInterval')" class="display-flex w-23p">
                                    <el-date-picker
                                    v-model="form.dateRange2"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    :range-separator="$t('field.to')"
                                    :start-placeholder="$t('field.startDate')"
                                    :end-placeholder="$t('field.endDate')">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item :label="$t('field.obstacleH')" class="display-flex w-46p">
                                    <!-- <numberInput :value="form.value15" :digit="6" @getNumberValue="getNumberValue($event, 'value15')"></numberInput> -->
                                    <el-input type="number" v-model="form.value15" placeholder="" step="any" @blur="inputBlur($event, 'value15', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" class="p-l-15">
                                <el-form-item :label="$t('field.obstacleL')" class="display-flex w-46p">
                                    <!-- <numberInput :value="form.value16" :digit="6" :disabled="form.select3 !== 'DOUBLE_KNOCK_OUT' && form.select3 !== 'DOUBLE_KNOCK_IN' && form.select3 !== 'DOUBLE_ONE_TOUCH' && form.select3 !== 'DOUBLE_NO_TOUCH' && form.select3 !== 'OTU_NTD' && form.select3 !== 'OTD_NTU'" @getNumberValue="getNumberValue($event, 'value16')"></numberInput> -->
                                    <el-input type="number" v-model="form.value16" :disabled="form.select3 !== 'DOUBLE_KNOCK_OUT' && form.select3 !== 'DOUBLE_KNOCK_IN' && form.select3 !== 'DOUBLE_ONE_TOUCH' && form.select3 !== 'DOUBLE_NO_TOUCH' && form.select3 !== 'OTU_NTD' && form.select3 !== 'OTD_NTU'" placeholder="" step="any" @blur="inputBlur($event, 'value16', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item :label="$t('field.returnH')" class="display-flex w-46p">
                                    <!-- <numberInput :value="form.value17" :digit="2" :disabled="form.select3 === 'OTD_NTU' || form.select19 === 'EUROPEAN'" @getNumberValue="getNumberValue($event, 'value17')"></numberInput> -->
                                    <el-input type="number" v-model="form.value17" :disabled="form.select3 === 'OTD_NTU' || form.select19 === 'EUROPEAN'" placeholder="" step="any" @blur="inputBlur($event, 'value17', '2')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" class="p-l-15">
                                <el-form-item :label="$t('field.returnL')" class="display-flex w-46p">
                                    <!-- <numberInput :value="form.value18" :digit="6" :disabled="form.select3 !== 'DOUBLE_KNOCK_OUT' && form.select3 !== 'DOUBLE_KNOCK_IN' && form.select3 !== 'DOUBLE_ONE_TOUCH' && form.select3 !== 'OTD_NTU' || form.select19 === 'EUROPEAN'" @getNumberValue="getNumberValue($event, 'value18')"></numberInput> -->
                                    <el-input type="number" v-model="form.value18" :disabled="form.select3 !== 'DOUBLE_KNOCK_OUT' && form.select3 !== 'DOUBLE_KNOCK_IN' && form.select3 !== 'DOUBLE_ONE_TOUCH' && form.select3 !== 'OTD_NTU' || form.select19 === 'EUROPEAN'" placeholder="" step="any" @blur="inputBlur($event, 'value18', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item :label="$t('field.paymentTimePointH')" class="display-flex w-46p">
                                    <el-select class="selectHeight" v-model="form.select17" :disabled="form.select3 === 'OTD_NTU' || form.select19 === 'EUROPEAN'" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options17"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" class="p-l-15">
                                <el-form-item :label="$t('field.paymentTimePointL')" class="display-flex w-46p">
                                    <el-select class="selectHeight" v-model="form.select18" :disabled="(form.select3 !== 'DOUBLE_KNOCK_OUT' && form.select3 !== 'DOUBLE_KNOCK_IN' && form.select3 !== 'DOUBLE_ONE_TOUCH' && form.select3 !== 'OTD_NTU') || form.select19 === 'EUROPEAN'" placeholder="请选择">
                                        <el-option
                                        v-for="item in options18"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                    <el-collapse-item :title="$t('field.marketPrice')" name="2">
                        <template slot="title">
                            {{$t('field.marketPrice')}}<i class="el-icon-refresh-right title-icon" @click.stop.prevent="refresh"></i>
                        </template>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item :label="$t('field.spotPrice')" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value4" :digit="6" @getNumberValue="getNumberValue($event, 'value4')"></numberInput> -->
                                    <el-input type="number" v-model="form.value4" placeholder="" step="any" @blur="inputBlur($event, 'value4', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22">
                                <el-form-item :label="$t('field.forwardPrice')" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value5" :digit="6" @getNumberValue="getNumberValue($event, 'value5')"></numberInput> -->
                                    <el-input type="number" v-model="form.value5" placeholder="" step="any" @blur="inputBlur($event, 'value5', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22">
                                <el-form-item :label="$t('field.volatility')" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value6" :digit="4" @getNumberValue="getNumberValue($event, 'value6')"></numberInput> -->
                                    <el-input type="number" v-model="form.value6" placeholder="" step="any" @blur="inputBlur($event, 'value6', '4')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22" v-show="form.select2 === 'BA' || form.select2 === 'BD'">
                                <el-form-item :label="$t('field.knockInOutStatus')" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value6" :digit="4" @getNumberValue="getNumberValue($event, 'value6')"></numberInput> -->
                                    <el-input type="text" v-model="form.value21" placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="">
                                    <el-select v-model="form.select11" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options11"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" label-width="1px">
                                    <!-- <numberInput :value="form.value7" :digit="8" @getNumberValue="getNumberValue($event, 'value7')"></numberInput> -->
                                    <el-input type="number" v-model="form.value7" placeholder="" step="any" @blur="inputBlur($event, 'value7', '8')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" label-width="1px">
                                    <el-select v-model="form.select12" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options12"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="">
                                    <el-select v-model="form.select13" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options13"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" label-width="1px">
                                    <!-- <numberInput :value="form.value8" :digit="8" @getNumberValue="getNumberValue($event, 'value8')"></numberInput> -->
                                    <el-input type="number" v-model="form.value8" placeholder="" step="any" @blur="inputBlur($event, 'value8', '8')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" label-width="1px">
                                    <el-select v-model="form.select14" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options14"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row v-show="form.checked">
                            <!-- <el-col :span="8">
                                <el-form-item :label="options10.length > 1 ? options10[0].text + '(ATM)' : ''"></el-form-item>
                            </el-col> -->
                            <!-- <el-col :span="7">
                                <el-form-item label="">
                                    <el-input type="number" v-model="form.value9" placeholder="" step="any" @blur="inputBlur($event, 'value9', '6')"></el-input>
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="22">
                                <el-form-item :label="options10.length > 1 ? options10[0].text + '(ATM)' : ' '" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value10" :digit="6" @getNumberValue="getNumberValue($event, 'value10')"></numberInput> -->
                                    <el-input type="number" v-model="form.value10" placeholder="" step="any" @blur="inputBlur($event, 'value10', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="8">
                                <el-form-item :label="options10.length > 1 ? options10[1].text + '(ATM)' : ''"></el-form-item>
                            </el-col> -->
                            <!-- <el-col :span="7">
                                <el-form-item label="">
                                    <el-input type="number" v-model="form.value11" placeholder="" step="any" @blur="inputBlur($event, 'value11', '6')"></el-input>
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="22">
                                <el-form-item :label="options10.length > 1 ? options10[1].text + '(ATM)' : ' '" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value12" :digit="6" @getNumberValue="getNumberValue($event, 'value12')"></numberInput> -->
                                    <el-input type="number" v-model="form.value12" placeholder="" step="any" @blur="inputBlur($event, 'value12', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="22">
                                <el-form-item label="Correlation" class="display-flex w-36p">
                                    <!-- <numberInput :value="form.value13" :digit="4" @getNumberValue="getNumberValue($event, 'value13')"></numberInput> -->
                                    <el-input type="number" v-model="form.value13" placeholder="" step="any" @blur="inputBlur($event, 'value13', '4')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="">
                                    <el-select v-model="form.select15" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options15"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" label-width="1px">
                                    <!-- <numberInput :value="form.value14" :digit="6" @getNumberValue="getNumberValue($event, 'value14')"></numberInput> -->
                                    <el-input type="number" v-model="form.value14" placeholder="" step="any" @blur="inputBlur($event, 'value14', '6')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" label-width="1px">
                                    <el-select v-model="form.select16" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options16"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                </el-collapse>
                <div class="result">
                    <div class="result-header">
                        <el-row>
                            <!-- <el-col :span="8">
                                <el-form-item :label="$t('field.result')" class="display-flex w-30p">
                                    <el-select v-model="form.select20" :placeholder="$t('field.pleaseSelect')" filterable>
                                        <el-option
                                        v-for="item in options20"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </div>
                    <!-- <el-row>
                        <el-col :span="22">
                            <div class="result-item">
                                <p>
                                    <span>PV</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.PV && form.value4 ? (table.PV*form.value4).toFixed(2) : '') : table.PV}}</span>
                                </p>
                                <p>
                                    <span>Delta</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Delta && form.value4 ? (table.Delta*form.value4).toFixed(2) : '') : table.Delta}}</span>
                                </p>
                                <p>
                                    <span>Vega</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Vega && form.value4 ? (table.Vega*form.value4).toFixed(2) : '') : table.Vega}}</span>
                                </p>
                                <p>
                                    <span>Gamma</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Gamma && form.value4 ? (table.Gamma*form.value4).toFixed(2) : '') : table.Gamma}}</span>
                                </p>
                                <p>
                                    <span>Theta</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Theta && form.value4 ? (table.Theta*form.value4).toFixed(2) : '') : table.Theta}}</span>
                                </p>
                                <p>
                                    <span>Rho</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Rho && form.value4 ? (table.Rho*form.value4).toFixed(2) : '') : table.Rho}}</span>
                                </p>
                                <p>
                                    <span>Phi</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Phi && form.value4 ? (table.Phi*form.value4).toFixed(2) : '') : table.Phi}}</span>
                                </p>
                                <p>
                                    <span>Vanna</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Vanna && form.value4 ? (table.Vanna*form.value4).toFixed(2) : '') : table.Vanna}}</span>
                                </p>
                                <p>
                                    <span>Volga</span><span>{{ form.select20 === form.select.substr(3,3) ? (table.Volga && form.value4 ? (table.Volga*form.value4).toFixed(2) : '') : table.Volga}}</span>
                                </p>
                            </div>
                        </el-col>
                    </el-row> -->
                </div>
            </div>
        </el-form>
        <el-dialog
            :title="$t('field.observationList')"
            :visible.sync="dialogVisible"
            width="400px"
            class="dialog"
            :before-close="handleClose">
            <el-button type="primary" @click="addItem">新增</el-button>
            <el-table
                :data="dialogTableData"
                stripe
                border
                @row-dblclick="dblclick"
                @row-click="rowClick"
                :max-height="300"
                style="width: 100%">
                <el-table-column
                    headerAlign="center"
                    :label="$t('field.observationDay')"
                    align="center">
                    <template slot-scope="scope">
                        <el-date-picker
                            v-if="row === scope.row.id"
                            v-model="scope.row.date"
                            type="date"
                            :picker-options="pickerOptions"
                            value-format="yyyyMMdd">
                        </el-date-picker>
                        <!-- <el-input v-if="row === scope.row.id" type="number" v-model="scope.row.date" @blur="tableInputBlur(scope)"></el-input> -->
                        <span>{{ scope.row.date ? scope.row.date.substr(0,4) + '-' + scope.row.date.substr(4,2) + '-' + scope.row.date.substr(6,2) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    headerAlign="center"
                    :label="$t('field.price')"
                    align="right">
                    <template slot-scope="scope">
                        <el-input v-if="row === scope.row.id" type="number" v-model="scope.row.price" @blur="tableInputBlur(scope)"></el-input>
                        <span>{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    headerAlign="center"
                    :label="$t('field.control')"
                    width="80"
                    align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-delete" @click="delItem(scope)" style="cursor: pointer;"></i>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- <TrialDialog ref="trialDialog" :disabled="true"></TrialDialog> -->
        <trialDiallogStandard ref="trialDialogStandard" :rawData="valuationData" :isQueryAction="false" :disabled="true"></trialDiallogStandard>
    </div>
</template>

<script>
// import TrialDialog from './trialDialog.vue'
import trialDiallogStandard from '@/components/trialDialogStandard/index.vue'
import { getSystemDatePMS, queryComboxDataPMS, getValueDatePMS, getbetweenDaysPMS, getPairInfoPMS, getQuantoPairs, getModelByParam, simulationValuationAnalysis, simulateDealWithVlParam, createObs, getPointsPMS } from '../../../../api/pmsApi.js';
export default {
  name: 'search',
  components: {
    // TrialDialog
    trialDiallogStandard
  },
  data() {
    return {
        form: {
            value: '',
            value2: '',
            value3: '1000000.00',
            value4: '',
            value5: '',
            value6: '',
            value7: '',
            value8: '',
            value9: '',
            value10: '',
            value11: '',
            value12: '',
            value13: '',
            value14: '',
            value15: '',
            value16: '',
            value17: '',
            value18: '',
            value19: '0.00',
            value20: '',
            value21: 'INIT',
            select: 'USDCNY',
            select2: 'PV',
            select3: '',
            select4: 'BUY',
            select5: 'EUROPEAN',
            select6: 'CALL',
            select7: 'BJ',
            select8: '',
            select9: '',
            select10: '',
            select11: '2',
            select12: 'ACT_360',
            select13: '2',
            select14: 'ACT_360',
            select15: '2',
            select16: 'ACT_360',
            select17: '',
            select18: '',
            select19: '',
            select20: 'USD',
            select21: '',
            select22: '',
            select23: '',
            date: '',
            date2: '',
            date3: '',
            date4: '',
            date5: '',
            date6: '',
            time: '',
            checked: false,
            systemDate: '',
            dateRange: '',
            dateRange2: '',
        },
        options: [],
        options2: [
            {
                text: this.$t('dict.vanillaOption'),
                value: 'PV',
                id: 'B',
                domian: {
                    childType: [
                        {
                            text: 'Plain Vanilla',
                            value: 'PLAIN_VANILA'
                        }
                    ]
                }
            },
            {
                text: this.$t('dict.digitalOptions'),
                value: 'PD',
                id: 'A',
                domian: {
                    childType: [
                        {
                            text: 'Digital',
                            value: 'DIGITAL'
                        }
                    ]
                }
            },
            {
                text: this.$t('dict.asianOption'),
                value: 'AS',
                id: 'S',
                domian: {
                    childType: [
                        {
                            text: this.$t('field.geometricAveragePrice'),
                            value: 'GEOMETRIC_RATE'
                        },
                        {
                            text: this.$t('field.arithmeticMeanPrice'),
                            value: 'ARITHMETIC_RATE'
                        },
                        {
                            text: this.$t('field.geometricAverageExecutionPrice'),
                            value: 'GEOMETRIC_STRIKE'
                        },
                        {
                            text: this.$t('field.arithmeticMeanExecutionPrice'),
                            value: 'ARITHMETIC_STRIKE'
                        }
                    ]
                }
            },
            {
                text: this.$t('dict.obstacleOptions'),
                value: 'BA',
                id: 'D',
                domian: {
                    childType: [
                        {
                            text: 'Up and Out',
                            value: 'UP_AND_OUT'
                        },
                        {
                            text: 'Up and In',
                            value: 'UP_AND_IN'
                        },
                        {
                            text: 'Down and Out',
                            value: 'DOWN_AND_OUT'
                        },
                        {
                            text: 'Down and In',
                            value: 'DOWN_AND_IN'
                        },
                        {
                            text: 'Double Knock-out',
                            value: 'DOUBLE_KNOCK_OUT'
                        },
                        {
                            text: 'Double Knock-in',
                            value: 'DOUBLE_KNOCK_IN'
                        }
                    ]
                }
            },
            {
                text: this.$t('dict.touchOptions'),
                value: 'BD',
                id: 'C',
                domian: {
                    childType: [
                        {
                            text: 'One Touch Up',
                            value: 'ONE_TOUCH_UP'
                        },
                        {
                            text: 'One Touch Down',
                            value: 'ONE_TOUCH_DOWN'
                        },
                        {
                            text: 'No Touch Up',
                            value: 'NO_TOUCH_UP'
                        },
                        {
                            text: 'No Touch Down',
                            value: 'NO_TOUCH_DOWN'
                        },
                        {
                            text: 'Double One Touch',
                            value: 'DOUBLE_ONE_TOUCH'
                        },
                        {
                            text: 'Double No Touch',
                            value: 'DOUBLE_NO_TOUCH'
                        },
                        {
                            text: 'OTU_NTD',
                            value: 'OTU_NTD'
                        },
                        {
                            text: 'OTD_NTU',
                            value: 'OTD_NTU'
                        }
                    ]
                }
            }
        ],
        options3: [],
        options4: [],
        options5: [],
        options6: [],
        options7: [],
        options8: [],
        options9: [],
        options9_copy: [],
        options10: [],
        options11: [],
        options12: [],
        options13: [],
        options14: [],
        options15: [],
        options15_copy: [],
        options16: [],
        options17: [],
        options18: [],
        options18_copy: [],
        options19: [],
        options20: [],
        options21: [],
        options23: [],
        activeNames: ['1', '2', '3', '4'],
        DiscountFactorType: [],
        day1: '',
        day2: '',
        day3: '',
        table: {
            PV: '',
            Delta: '',
            Vega: '',
            Gamma: '',
            Theta: '',
            Rho: '',
            Phi: '',
            Vanna: '',
            Volga: ''
        },
        OptionCutOffTime: [],
        tabData: {},
        dialogVisible: false,
        dialogTableData: [],
        row:'',
        tmpRow:{},
        dialogResultVisible: false,
        activeName: 'first',
        pickerOptions: {
            disabledDate: (time) => {
                const dateArr = this.dialogTableData.map(c=>c.date)
                const formattedDate = this.formatDate(time);
                return dateArr.includes(formattedDate);
            }
        },
        dialogTable: {},
        moreShow: false,
        dialogResultType: '',
        valuationData: {}, // 估值数据
        trialDialogShow: false, // 估值弹窗

    };
  },
  watch: {
    form: {
        handler (val) {
            this.$bus.$emit('sendForm', this.form)
        },
        deep: true
    },
    "form.checked": {
        handler (val) {
            this.form.select9 = ''
            this.form.select10 = ''
            this.options10 = ''
            this.form.value9 = ''
            this.form.value10 = ''
            this.form.value11 = ''
            this.form.value12 = ''
            this.form.value13 = ''
            this.form.value14 = ''
            this.form.value20 = ''
            this.options15 = this.options15_copy
            this.form.select15 = this.options15[2].value
            this.form.select16 = this.options16[0].value
            this.options8.splice(2,1)
        }
    },
    "form.select2": {
        handler (val) {
            if (val === 'BA') {
                this.form.value17 = '0.00'
            } else if (val === 'BD') {
                this.form.value17 = '1.00'
            } else {
                this.form.value17 = ''
            }
        }
    },
    "form.select3": {
        handler (val) {
            this.form.value15 = ''
            this.form.value16 = ''
            this.form.select17 = ''
            this.form.select19 = ''
            if (val === 'DOUBLE_KNOCK_OUT' || val === 'DOUBLE_KNOCK_IN') {
                this.form.value18 = '0.00'
            } else if (val === 'DOUBLE_ONE_TOUCH' || val === 'OTD_NTU') {
                this.form.value18 = '1.00'
            } else {
                this.form.value18 = ''
            }
            if (this.form.select2 === 'BA') {
                this.form.value17 = '0.00'
            } else if (this.form.select2 === 'BD') {
                if (val === 'OTD_NTU') {
                    this.form.value17 = ''
                    // this.form.select17 = ''
                } else {
                    this.form.value17 = '1.00'
                    // this.form.select17 = this.options17[0].value
                }
            }
            if (val === 'UP_AND_IN' || val === 'DOWN_AND_IN' || val === 'DOUBLE_KNOCK_IN' || val === 'NO_TOUCH_UP' || val === 'NO_TOUCH_DOWN' || val === 'DOUBLE_NO_TOUCH') {
                this.options17 = [this.options18_copy[this.options18_copy.findIndex(ele => ele.value === 'EXPIRY')]]
                this.options18 = [this.options18_copy[this.options18_copy.findIndex(ele => ele.value === 'EXPIRY')]]
            } else {
                this.options17 = this.options18_copy
                this.options18 = this.options18_copy
            }
            if (val === 'UP_AND_IN' || val === 'UP_AND_OUT' || val === 'ONE_TOUCH_UP' || val === 'NO_TOUCH_UP') {
                this.form.value15 = (this.form.value * 1.05).toFixed(6)
            } else if (val === 'DOWN_AND_OUT' || val === 'DOWN_AND_IN' || val === 'ONE_TOUCH_DOWN' || val === 'NO_TOUCH_DOWN') {
                this.form.value15 = (this.form.value / 1.05).toFixed(6)
            } else if (val === 'DOUBLE_KNOCK_OUT' || val === 'DOUBLE_KNOCK_IN' || val === 'DOUBLE_ONE_TOUCH' || val === 'DOUBLE_NO_TOUCH' || val === 'OTU_NTD' || val === 'OTD_NTU') {
                this.form.value15 = (this.form.value * 1.05).toFixed(6)
                this.form.value16 = (this.form.value / 1.05).toFixed(6)
            }
            
            this.getModelByParam()
        }
    },
    "form.select5": {
        handler (val) {
            if (val === 'AMERICAN') {
                this.form.checked = false
            }
            this.getModelByParam()
        }
    },
    "form.select19": {
        handler (val) {
            // if (val === 'EUROPEAN') {
            //     this.form.value17 = ''
            //     this.form.value18 = ''
            //     this.form.select17 = ''
            // } else {
            //     this.form.value18 = '1.00'
            //     if (this.form.select3 !== 'OTD_NTU') {
            //         this.form.value17 = '1.00'
            //     }
            // }
        }
    },
    "form.select9": {
        handler (val) {
            if (val) {
                let obj = {
                    text: val,
                    value: val
                }
                this.options8.splice(2,1,obj)
            }
        }
    },
    "form.select10": {
        handler (val) {
            if (val) {
                this.getPairInfo2()
            }
        }
    },
    "form.dateRange": {
        handler (val) {
            if (this.form.dateRange.length > 0 && this.form.select23) {
                this.createObs()
            }
        }
    },
    "form.select23": {
        handler (val) {
            if (this.form.dateRange.length > 0 && this.form.select23) {
                this.createObs()
            }
        }
    },
    "form.date3": {
        handler (val) {
            this.getValueDate4()
        }
    }
  },
  mounted() {
    this.init()
    //定义监听事件
    this.$bus.$on('sendTab',(data) => {
        this.tabData = data
    })
  },
  beforeDestroy () {
    this.$bus.$off('sendTab');
  },
  methods: {
    async init () {
        await this.getPairInfoPMS()
        await this.getSystemDatePMS()
        await this.queryComboxDataPMS()
        await this.selectChange2()
        this.selectChange()
    },
    // 获取系统日期
    async getSystemDatePMS () {
        const res = await getSystemDatePMS()
        if (res.success) {
            this.form.date = res.data.result.datetime.substr(0,10)
            this.form.date5 = res.data.result.datetime.substr(0,10)
            this.form.systemDate = res.data.result.datetime
            let date = new Date(this.form.date)
            let newMonth = date.getMonth() + 3;
            date.setMonth(newMonth % 12, date.getDate()); // 使用模运算确保月份不超过11
            if (newMonth >= 12) { // 如果跨年了，年份也需要增加
                date.setFullYear(date.getFullYear() + Math.floor(newMonth / 12));
            }
            this.form.date3 = this.formatDate2(date)
            this.getValueDate2()
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取字典
    async queryComboxDataPMS () {
        // let formData = new FormData();
        // formData.append('reqJson', '{"codifierGrpCodes": "static_pairs,BuySellRcs,OptionTypeRcs,TimeZone,static_currencies,InterestMethod,BasisRcs,optionPaymenAt,optionObserve,OptionCutOffTime,OptionExcersiseType,CompoundType"}');
        let formData = {
            'codifierGrpCodes': 'PAIRS,BuySellRcs,OptionTypeRcs,TimeZone,static_currencies,InterestMethod,BasisRcs,optionPaymenAt,optionObserve,OptionCutOffTime,OptionExcersiseType,CompoundType'
        }
        const res = await queryComboxDataPMS(formData)
        if (res.success) {
            this.options = res.data.result.PAIRS
            this.options4 = res.data.result.BuySellRcs
            this.options5 = res.data.result.OptionExcersiseType.filter(c=>c.value !== 'BERMUDA')
            this.options6 = res.data.result.OptionTypeRcs
            this.options7 = res.data.result.TimeZone
            this.options9_copy = res.data.result.currencies
            this.DiscountFactorType = this.options15 = this.options15_copy = res.data.result.InterestMethod
            this.form.select11 = this.form.select13 = this.form.select15 = res.data.result.InterestMethod[2].value
            this.options12 = this.options14 = this.options16 = res.data.result.BasisRcs
            this.form.select12 = this.form.select14 = this.form.select16 = res.data.result.BasisRcs[0].value
            this.options17 = this.options18 = this.options18_copy = res.data.result.optionPaymenAt
            this.options19 = res.data.result.optionObserve
            this.OptionCutOffTime = res.data.result.OptionCutOffTime
            this.form.time = this.OptionCutOffTime.filter(c=>c.text === this.form.select7)[0].value
            this.options23 = res.data.result.CompoundType
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取日期-起息日
    async getValueDate2 () {
        let json = {
            tradeDate: this.form.date.split('-').join(''),
            code: this.form.select,
            type: 'PAIR'
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getValueDatePMS(json)
        if (res.success) {
            let data = res.data.result.toString()
            this.form.date2 = `${data.substr(0,4)}-${data.substr(4,2)}-${data.substr(6,2)}`
            this.form.date6 = `${data.substr(0,4)}-${data.substr(4,2)}-${data.substr(6,2)}`
            this.getbetweenDaysPMS()
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
        if (this.form.date3) {
            this.getbetweenDays2()
        }
        if (this.form.date4) {
            this.getbetweenDays3()
        }
    },
    // 获取日期间隔-起息日
    async getbetweenDaysPMS () {
        let json = {
            startDate: this.form.date.split('-').join(''),
            endDate: this.form.date2.split('-').join('')
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getbetweenDaysPMS(json)
        if (res.success) {
            this.day1 = res.data.result + 'D'
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取日期间隔-到期日
    async getbetweenDays2 () {
        let json = {
            startDate: this.form.date.split('-').join(''),
            endDate: this.form.date3.split('-').join('')
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getbetweenDaysPMS(json)
        if (res.success) {
            this.day2 = res.data.result + 'D'
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取日期-交割日
    async getValueDate4 () {
        let json = {
            tradeDate: this.form.date3.split('-').join(''),
            code: this.form.select,
            type: 'PAIR'
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getValueDatePMS(json)
        if (res.success) {
            let data = res.data.result.toString()
            this.form.date4 = `${data.substr(0,4)}-${data.substr(4,2)}-${data.substr(6,2)}`
            this.getbetweenDays2()
            this.getbetweenDays3()
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
        this.getPointsPMS()
    },
    // 获取执行价
    async getPointsPMS () {
        let json = {
            maturityDate: this.form.date3.split('-').join(''),
            code: this.form.select
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getPointsPMS(json)
        if (res.success) {
            
            let digit = this.options.filter(c=>c.value === this.form.select)[0].domain.pointsDigit
            this.form.value2 = (this.form.value + (res.data.result.deliveryDateFwdPointMid/Math.pow(10, digit))).toFixed(6)
        } else {
            this.form.value2 = ''
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取日期间隔-交割日
    async getbetweenDays3 () {
        let json = {
            startDate: this.form.date.split('-').join(''),
            endDate: this.form.date4.split('-').join('')
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getbetweenDaysPMS(json)
        if (res.success) {
            this.day3 = res.data.result + 'D'
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取即期价金额
    async getPairInfoPMS () {
        let json = {
            pairCode: this.form.select,
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getPairInfoPMS(json)
        if (res.success) {
            this.form.value = res.data.result.spotRate
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取折算价格
    async getPairInfo2 () {
        let json = {
            pairCode: this.form.select10,
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getPairInfoPMS(json)
        if (res.success) {
            this.form.value20 = res.data.result.spotRate
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取model
    async getModelByParam () {
        let json = {
            instrument: 'FXOPTION',
            exerciseType: this.form.select5,
            optionCategory: this.form.select3,
        }
        const res = await getModelByParam(json)
        if (res.success) {
            this.options21 = res.data.model.map(item=>{
                return {
                    text: item,
                    value: item
                }
            })
            this.form.select21 = this.options21[0].value
        } else {
            this.options21 = []
            this.form.select21 = ''
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 即期价select切换
    async selectChange () {
        this.form.value3 = '1000000.00'
        this.form.value4 = ''
        this.form.value5 = ''
        this.form.value6 = ''
        this.form.value7 = ''
        this.form.value8 = ''
        this.form.value9 = ''
        this.form.value10 = ''
        this.form.value11 = ''
        this.form.value12 = ''
        this.form.value13 = ''
        this.form.value14 = ''
        this.form.value15 = ''
        this.form.value16 = ''
        this.form.value17 = ''
        this.form.value18 = ''
        this.form.value19 = '0.00'
        this.form.value20 = ''
        this.form.value21 = 'INIT'
        this.form.select2 = 'PV'
        this.form.select4 = 'BUY'
        this.form.select6 = 'CALL'
        this.form.select7 = 'BJ'
        this.form.select9 = ''
        this.form.select10 = ''
        this.form.select17 = ''
        this.form.select18 = ''
        this.form.select19 = ''
        this.form.select20 = 'USD'
        this.form.select23 = ''
        this.form.checked = false
        this.form.dateRange = ''
        this.form.dateRange2 = ''
        this.table = {}
        this.options11 = this.DiscountFactorType.map(c=>{
            return {
                text: this.form.select.substr(0,3) + c.text,
                value: c.value
            }
        })
        this.options13 = this.DiscountFactorType.map(c=>{
            return {
                text: this.form.select.substr(3,3) + c.text,
                value: c.value
            }
        })
        this.options9 = this.options9_copy.filter(c=>c.value !== this.form.select.substr(0,3) && c.value !== this.form.select.substr(3,3))
        this.options8 = [
            {
                text: this.form.select.substr(0,3),
                value: this.form.select.substr(0,3)
            },
            {
                text: this.form.select.substr(3,3),
                value: this.form.select.substr(3,3)
            }
        ]
        this.options20 = [
            {
                text: this.form.select.substr(0,3),
                value: this.form.select.substr(0,3)
            },
            {
                text: this.form.select.substr(3,3),
                value: this.form.select.substr(3,3)
            }
        ]
        this.form.select8 = this.form.select.substr(0,3)
        this.form.select20 = this.form.select.substr(0,3)
        this.form.select22 = this.form.select.substr(3,3)
        await this.getPairInfoPMS()
        await this.getPointsPMS()
    },
    // 种类select切换
    selectChange2 () {
        this.options3 = this.options2.filter(c=>c.value === this.form.select2)[0].domian.childType
        this.form.select3 = this.options3[0].value
        if (this.form.select2 === 'PV' || this.form.select2 === 'BA' || this.form.select2 === 'AS') {
            this.form.select5 = 'EUROPEAN'
        } else {
            this.form.select5 = ''
        }
    },
    async quantoChange () {
        this.options15 = this.DiscountFactorType.map(c=>{
            return {
                text: this.form.select9 + c.text,
                value: c.value
            }
        })
        let json = {
            pair: this.form.select,
            quantoCcy: this.form.select9
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await getQuantoPairs(json)
        if (res.success) {
            this.options10 = res.data.result
            this.form.select10 = this.options10[0]?.value || ''
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    formatOption (data) {
        const arr = []
        data.forEach(item => {
            arr.push({
                text: item.name,
                value: item.codeValue
            })
        })
        return arr
    },
    // 市场价格刷新
    async refresh () {
        let json = {
            "queryParam.deal": this.getQueryParamDeal(),
            "queryParam.priceDate": this.form.date.split('-').join(''),
            ...this.tabData
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await simulationValuationAnalysis(json)
        if (res.success) {
            if (res.data.errorMessage) {
                this.$message({
                    message: res.data.errorMessage,
                    type: 'error'
                })
            } else {
                let data = res.data
                if (this.form.checked && this.options10.length > 0) {
                    let index = this.options10.findIndex(ele => ele.value === this.form.select10)
                    this.form.value10 = index > 0 ? (data.vlParam.quantoVol2 * 1).toFixed(6) : (data.vlParam.quantoVol * 1).toFixed(6)
                    this.form.value12 = index > 0 ? (data.vlParam.quantoVol * 1).toFixed(6) : (data.vlParam.quantoVol2 * 1).toFixed(6)
                    this.form.value13 = (data.vlParam.volCorrelation * 1).toFixed(4)
                    this.form.value14 = (data.vlParam.rate3 * 1).toFixed(6)
                }
                this.form.value4 = data.vlParam.spot ? (data.vlParam.spot * 1).toFixed(6) : ''
                this.form.value5 = data.vlParam.forward ? (data.vlParam.forward * 1).toFixed(6) : ''
                this.form.value6 = data.vlParam.volatility ? (data.vlParam.volatility * 1).toFixed(4) : ''
                this.form.value7 = data.vlParam.rate1 ? (data.vlParam.rate1 * 1).toFixed(8) : ''
                this.form.value8 = data.vlParam.rate2 ? (data.vlParam.rate2 * 1).toFixed(8) : ''
                this.form.value21 = data.vlParam.triggerStatus || 'INIT'
            }
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    searchHide () {
        this.$emit('searchHide',true)
    },
    inputBlur (e, item, num) {
        this.form[item] = parseFloat(e.target.value).toFixed(num)
    },
    getQueryParamDeal () {
        return {
                instrument: 'FXOPTION',
                priceDate: this.form.date.split('-').join(''),
                optionCategory: this.form.select3,
                ccy1: '',
                ccy2: '',
                underlyingType: 'FX',
                underlying: this.form.select,
                profitCcy: this.options20[0].value,
                exerciseType: this.form.select5 || 'EUROPEAN',
                maturityDate: this.form.date3.split('-').join(''),
                deliveryDate: this.form.date4.split('-').join(''),
                premiumDate: this.form.date6.split('-').join(''),
                cutOffTime: this.form.time.split(':').join('') + '00',
                premiumCcy: this.form.select22,
                premiumAmount: this.form.value19,
                ccy: this.form.select8,
                nominal: this.form.value3,
                strike: this.form.value2,
                buySell: this.form.select4,
                callPut: this.form.select6,
                triggerStatus: this.form.value21,
                trigger: this.form.value15,
                trigger2: this.form.value16,
                returnRate1: this.form.value17,
                returnRate2: this.form.value18,
                obsType: this.form.select19,
                isUseMid: 'MID',
                paymentAt: this.form.select17,
                paymentAt2: this.form.select18,
                quantoFactor: this.form.value20,
                quantoCcy: this.form.select9,
                quantoPair: this.form.select10,
                model: this.form.select21,
                fixPlanDate: this.dialogTableData.map(c=>c.date),
                fixPlanRate: this.dialogTableData.map(c=>c.price)
            }
    },
    // 估值按钮
    async valuationBtn () {
        let json = {
            "queryParam.deal": this.getQueryParamDeal(),
            "queryParam.priceDate": this.form.date.split('-').join(''),
            ...this.tabData
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await simulationValuationAnalysis(json)
        if (res.success) {
            if (res.data.errorMessage) {
                this.$message({
                    message: res.data.errorMessage,
                    type: 'error'
                })
            } else {
                this.trialDialogShow = true
                this.valuationData = res.data
                // let data = res.data
                // if (this.form.checked && this.options10.length > 0) {
                //     let index = this.options10.findIndex(ele => ele.value === this.form.select10)
                //     this.form.value10 = index > 0 ? (data.vlParam.quantoVol2 * 1).toFixed(6) : (data.vlParam.quantoVol * 1).toFixed(6)
                //     this.form.value12 = index > 0 ? (data.vlParam.quantoVol * 1).toFixed(6) : (data.vlParam.quantoVol2 * 1).toFixed(6)
                //     this.form.value13 = (data.vlParam.volCorrelation * 1).toFixed(4)
                //     this.form.value14 = (data.vlParam.rate3 * 1).toFixed(6)
                // }
                // this.form.value4 = data.vlParam.spot ? (data.vlParam.spot * 1).toFixed(6) : ''
                // this.form.value5 = data.vlParam.forward ? (data.vlParam.forward * 1).toFixed(6) : ''
                // this.form.value6 = data.vlParam.volatility ? (data.vlParam.volatility * 1).toFixed(4) : ''
                // this.form.value7 = data.vlParam.rate1 ? (data.vlParam.rate1 * 1).toFixed(8) : ''
                // this.form.value8 = data.vlParam.rate2 ? (data.vlParam.rate2 * 1).toFixed(8) : ''
                // this.form.value21 = data.vlParam.triggerStatus || 'INIT'
                // this.table = {
                //     PNL: data.pnl?.toFixed(2) || '0.00',
                //     PV: data.pv?.toFixed(2) || '0.00',
                //     SpotDelta: data.spotDelta?.toFixed(2) || '0.00',
                //     FwdDelta: data.fwdDelta?.toFixed(2) || '0.00',
                //     Gamma: data.gamma?.toFixed(2) || '0.00',
                //     Vega: data.vega?.toFixed(2) || '0.00',
                //     Theta: data.theta?.toFixed(2) || '0.00',
                //     Rho: data.rho?.toFixed(2) || '0.00',
                //     Phi: data.phi?.toFixed(2) || '0.00',
                //     Vanna: data.vanna?.toFixed(2) || '0.00',
                //     Volga: data.volga?.toFixed(2) || '0.00'
                // }
                // this.dialogTable = {
                //     Model: data.vlParam.model || '',
                //     Spot: data.vlParam.spot ? (data.vlParam.spot * 1).toFixed(6) : '',
                //     Fwd: data.vlParam.forward ? (data.vlParam.forward * 1).toFixed(6) : '',
                //     curveCode1: data.vlParam.curveCode1 || '',
                //     curveCode2: data.vlParam.curveCode2 || '',
                //     curveCode3: data.vlParam.quantoCurveCode || '',
                //     quantoCurveCode: data.vlParam.curvedSurfaceId || '',
                //     quantoCurveCode2: data.vlParam.quantoCurvedSurfaceId1 || '',
                //     quantoCurveCode3: data.vlParam.quantoCurvedSurfaceId2 || '',
                //     Rate: data.vlParam.quantRate ? data.vlParam.quantRate.toFixed(2) : ' ',
                //     Rate1: data.vlParam.rate1 ? (data.vlParam.rate1 * 100).toFixed(8) + '%' : '',
                //     Rate2: data.vlParam.rate2 ? (data.vlParam.rate2 * 100).toFixed(8) + '%' : '',
                //     Rate3: data.vlParam.rate3 ? (data.vlParam.rate3 * 100).toFixed(8) + '%' : '',
                //     Vol1: data.vlParam.volatility ? (data.vlParam.volatility * 100).toFixed(6) + '%' : '',
                //     Vol2: this.form.select10 && this.form.select10 === this.options10[0].value ? (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : ''),
                //     Vol3: this.form.select10 && this.form.select10 === this.options10[1].value ? (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : ''),
                //     corr: data.vlParam.volCorrelation ? data.vlParam.volCorrelation.toFixed(4) : '',
                //     Days1: data.vlParam.maturityDays || '',
                //     Days2: data.vlParam.businessDays || '',
                //     Days3: data.vlParam.deliveryDays || '',
                //     dataSet: data.dataSet || '',
                //     globalId: data.globalId || ''
                // }
                // this.$refs.trialDialog.init(json, '估值', {form:this.form, options:this.options10, table:this.table, dialogTable:this.dialogTable} )
                
                this.$nextTick(() => {
                  this.$refs.trialDialogStandard.init({}, '估值', {})
                })
            }
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 试算
    async simulateDealWithVlParam () {
        let json = {
            "queryParam.priceDate": this.form.date.split('-').join(''),
            "queryParam.deal": this.getQueryParamDeal(),
            "queryParam.vlParam": {
                spot: this.form.value4,
                forward: this.form.value5,
                volatility: this.form.value6,
                rate1: this.form.value7,
                rate2: this.form.value8,
                quantoRate: this.form.value14,
                basis1: this.form.select12,
                basis2: this.form.select14,
                quantoBasis: this.form.select16,
                rateType1: this.form.select11,
                rateType2: this.form.select13,
                quantoRateType: this.form.select15,
                quantoVol: this.options10.length > 0 && this.form.select10 === this.options10[0].value ? this.form.value10 : this.form.value12,
                quantoVol2: this.options10.length > 1 && this.form.select10 === this.options10[1].value ? this.form.value10 : this.form.value12
            }
        }
        // let formData = new FormData();
        // formData.append('reqJson', JSON.stringify(json))
        const res = await simulateDealWithVlParam(json)
        if (res.success) {
            const data = res.data
            this.form.value21 = data.vlParam.triggerStatus || 'INIT'
            this.table = {
                    PNL: data.pnl?.toFixed(2) || '0.00',
                    PV: data.pv?.toFixed(2) || '0.00',
                    SpotDelta: data.spotDelta?.toFixed(2) || '0.00',
                    FwdDelta: data.fwdDelta?.toFixed(2) || '0.00',
                    Gamma: data.gamma?.toFixed(2) || '0.00',
                    Vega: data.vega?.toFixed(2) || '0.00',
                    Theta: data.theta?.toFixed(2) || '0.00',
                    Rho: data.rho?.toFixed(2) || '0.00',
                    Phi: data.phi?.toFixed(2) || '0.00',
                    Vanna: data.vanna?.toFixed(2) || '0.00',
                    Volga: data.volga?.toFixed(2) || '0.00'
                }
            this.dialogTable = {
                Model: data.vlParam.model || '',
                Spot: data.vlParam.spot ? (data.vlParam.spot * 1).toFixed(6) : '',
                Fwd: data.vlParam.forward ? (data.vlParam.forward * 1).toFixed(6) : '',
                curveCode1: data.vlParam.curveCode1 || '',
                curveCode2: data.vlParam.curveCode2 || '',
                curveCode3: data.vlParam.quantoCurveCode || '',
                quantoCurveCode: data.vlParam.curvedSurfaceId || '',
                quantoCurveCode2: data.vlParam.quantoCurvedSurfaceId1 || '',
                quantoCurveCode3: data.vlParam.quantoCurvedSurfaceId2 || '',
                Rate: data.vlParam.quantRate ? data.vlParam.quantRate.toFixed(2) : ' ',
                Rate1: data.vlParam.rate1 ? (data.vlParam.rate1 * 100).toFixed(8) + '%' : '',
                Rate2: data.vlParam.rate2 ? (data.vlParam.rate2 * 100).toFixed(8) + '%' : '',
                Rate3: data.vlParam.rate3 ? (data.vlParam.rate3 * 100).toFixed(8) + '%' : '',
                Vol1: data.vlParam.volatility ? (data.vlParam.volatility * 100).toFixed(6) + '%' : '',
                Vol2: this.form.select10 && this.form.select10 === this.options10[0].value ? (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : ''),
                Vol3: this.form.select10 && this.form.select10 === this.options10[1].value ? (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : ''),
                corr: data.vlParam.volCorrelation ? data.vlParam.volCorrelation.toFixed(4) : '',
                Days1: data.vlParam.maturityDays || '',
                Days2: data.vlParam.businessDays || '',
                Days3: data.vlParam.deliveryDays || '',
                dataSet: data.dataSet || '',
                globalId: data.globalId || ''
            }
            this.$refs.trialDialog.init(json, '试算', {form:this.form, options:this.options10, table:this.table, dialogTable:this.dialogTable})
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 观察列表弹窗
     dialogShow () {
        if (this.form.dateRange.length > 0 && this.form.select23) {
            this.dialogVisible = true
        }
    },
    // 获取观察列表数据
    async createObs () {
        let json = {
            startDate: this.form.dateRange[0].split('-').join(),
            endDate: this.form.dateRange[1].split('-').join(),
            frequency: this.form.select23,
            underlying: this.form.select,
        }
        const res = await createObs(json)
        this.dialogTableData = res.data.datals.map((c, idx)=>{
            return {
                id: Math.floor(Math.random() * Math.pow(10, 16)),
                date: c.date.toString(),
                price: c.price
            }
        })
    },
    handleClose () {
        this.dialogVisible = false
    },
    // 观察列表弹窗表格双击行
    dblclick (row, column, event) {
        this.row = row.id
        this.tmpRow = row
    },
    // 观察列表弹窗表格单击行
    rowClick (row, column, event) {
        this.row = row.id === this.row ? this.row  : '' 
    },
    tableInputBlur (scope) {
    },
    // 获取金额组件数据
    getNumberValue (data, key) {
        this.form[key] = data
    },
    // 观察列表弹窗新增
    addItem () {
        let flag = true
        for (let i = 0; i < this.dialogTableData.length; i++) {
            if (!this.dialogTableData[i].date || this.dialogTableData[i].price === '') {
                flag = false
                break
            }
        }
        if (flag) {
            this.dialogTableData.push({
                date: '',
                price: 0,
                id: Math.floor(Math.random() * Math.pow(10, 16))
            })
            this.row = this.dialogTableData[this.dialogTableData.length-1].id 
        }
    },
    delItem (scope) {
        this.dialogTableData.splice(scope.$index, 1)
    },
    handleResultClose () {
        this.dialogResultVisible = false
    },
    formatDate(date) {
      // 格式化日期为 'YYYYMMDD' 格式
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}${month}${day}`;
    },
    formatDate2(date) {
      // 格式化日期为 'YYYYMMDD' 格式
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style lang="scss">
    .optionCalculator-search{
        .el-select .el-input.is-disabled .el-input__inner, .selectHeight .el-input .el-input__inner{
            height: auto!important;
        }
        .el-form-item, .el-select, el-input, .el-date-editor.el-input{
            width: 100%;
        }
        .el-form .el-range-editor{
            width: 100%;
            display: flex;
            align-items: center;
            border-color: rgba(0, 0, 0, 0.25);
            .el-range-separator{
                height: auto;
            }
        }
        .el-collapse .el-collapse-item__wrap .el-collapse-item__content{
            padding: 10px 0 10px;
        }
        .el-collapse-item__header{
            pointer-events: none;
        }
        .title-icon{
            margin-left: 10px;
            cursor: pointer;
            pointer-events: auto;
        }
        .el-collapse-item__arrow{
            pointer-events: auto;
        }
        .el-checkbox__input{
            margin-top: -2px;
        }
        .el-col .el-form-item.display-flex{
            display: flex;
            &.w-8p .el-form-item__label{
                width: 8%;
            }
            &.w-20p .el-form-item__label{
                width: 20%;
            }
            &.w-22p .el-form-item__label{
                width: 22%;
            }
            &.w-23p .el-form-item__label{
                width: 23%;
            }
            &.w-30p .el-form-item__label{
                width: 30%;
            }
            &.w-36p .el-form-item__label{
                width: 36.5%;
            }
            &.w-40p .el-form-item__label{
                width: 40%;
            }
            &.w-46p .el-form-item__label{
                width: 46%;
            }
            &.w-54p .el-form-item__label{
                width: 54%;
            }
            &.w-57p .el-form-item__label{
                width: 57.4%;
            }
            .el-form-item__label{
                white-space: nowrap;
            }
            .el-form-item__content{
                flex: 1;
            }
        }
        .el-collapse{
            border: none;
            .el-collapse-item__header, .el-collapse-item__wrap{
                border-bottom: none;
                font-size: 14px;
            }
        }
        .dialog {
             /* number输入框上下箭头隐藏 */
             input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            input[type="number"]{
                -moz-appearance: textfield;
            }
            .el-table{
                /* border-bottom: 1px solid var(--scrollBar); */
                .el-table__body-wrapper{
                    padding-bottom: 1px;
                }
            }
        }
        .result-dialog{
            .box{
                .b-top {
                    padding: 0 40px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    p{
                        width: 50%;
                        margin: 0;
                        color: var(--color-70);
                        &>span{
                            display: inline-block;
                            width: 110px;
                            text-align: right;
                            margin-right: 8px;
                        }
                        b{
                            font-weight: normal;
                            color: #000;
                        }
                        .el-date-editor{
                            width: 200px;
                        }
                    }
                }
                .el-tabs{
                    .el-tabs__content{
                        max-height: 500px;
                        overflow: hidden;
                        overflow-y: auto;
                        .tab-box{
                            border: 1px solid var(--scrollBar);
                            border-radius: 4px;
                            margin-bottom: 10px;
                            p{
                                padding: 0 30px;
                                position: relative;
                                height: auto;
                                em{
                                    display: inline-block;
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    left: 20px;
                                    width: 4px;
                                    background-color: var(--blue-70);
                                    border-radius: 4px;
                                    margin-right: 8px;
                                }
                            }
                            ul{
                                display: flex;
                                flex-wrap: wrap;
                                padding: 0 40px;
                                li{
                                    width: 50%;
                                    list-style: none;
                                    margin-bottom: 10px;
                                    display: flex;
                                    align-items: center;
                                    &.more{
                                        width: 100%;
                                    }
                                    &>span{
                                        display: inline-block;
                                        &:nth-of-type(1) {
                                            width: 110px;
                                            text-align: right;
                                            margin-right: 8px;
                                            color: var(--color-70);
                                        }
                                        &:nth-of-type(2) {
                                            width: 200px;
                                            height: 30px;
                                            line-height: 30px;
                                            padding: 0 10px;
                                            border: 1px solid var(--scrollBarHover);
                                            background-color: var(--scrollBar);
                                            border-radius: 4px;
                                        }
                                    }
                                    a{
                                        margin: 6px 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
</style>
<style lang="scss" scoped>
    .p-l-15{
        padding-left: 15px;
    }
    .optionCalculator-search{
        padding: 10px 20px 8px;
        padding-right: 0;
        border-right: 1px solid var(--scrollBar);
        height: 100%;
        .btns{
            position: relative;
            i{
                position: absolute;
                top: 0;
                right: 2%;
                cursor: pointer;
            }
        }
        .el-form{
            height: calc(100% - 50px);
            .el-form-item{
                margin-bottom: 6px;
            }
            .top-box{
                width: calc(100% - 10px);
                background-color: var(--table-cell-striped-bg);
            }
            .scrollY{
                padding-right: 4px;
                height: calc(100% - 111px);
                overflow: hidden;
                overflow-y: auto;
            }
        }
        .el-button{
            padding: 5px 10px;
            margin-bottom: 10px;
        }
        .span-D{
            display: inline-block;
            line-height: 30px;
            margin-left: 5px;
            i{
                margin-top: 10px;
                cursor: pointer;
            }
        }
        .el-collapse-item__header{
            span{
                display: inline-block;
                &:nth-of-type(1) {
                    width: 33%;
                    text-align: center;
                }
                &:nth-of-type(2) {
                    width: 30%;
                    text-align: center;
                }
            }
        }
        .result{
            margin-top: 20px;
            .result-item{
                border: 1px solid var(--scrollBar);
                border-bottom: none;
                p{
                    margin: 0;
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    border-bottom: 1px solid var(--scrollBar);
                    display: flex;
                    &:nth-of-type(2n){
                        background-color: var(--input-dis-bg);
                    }
                    &:hover{
                        background-color: var(--pick-in-rang-bg);
                    }
                    &:active{
                        background-color: var(--pick-in-rang-bg);
                    }
                    span{
                        display: inline-block;
                        padding-right: 10px;
                        text-align: right;
                        &:nth-of-type(1){
                            width: 36.5%;
                            border-right: 1px solid var(--scrollBar);
                        }
                        &:nth-of-type(2){
                            flex: 1;
                        }
                    }
                }
            }
        }
    }
</style>